V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lksltjw
V2EX  ›  前端开发

能不能把博客背景替换为 js 插件

  •  
  •   lksltjw · 2015-07-25 11:13:28 +08:00 · 2182 次点击
    这是一个创建于 3421 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如说我现在用的是ghost博客
    我想吧背景换为particleground的动态的js而不是静态的图片
    网址https://github.com/jnicol/particleground
    这个。。可不可行?

    其实我对前端一窍不通

    4 条回复    2015-07-25 15:51:51 +08:00
    loading
        1
    loading  
       2015-07-25 11:18:39 +08:00
    $('body').particleground();
    alay9999
        2
    alay9999  
       2015-07-25 11:25:07 +08:00
    在页尾 </body> 之前添加如下代码,其中第二行的文件地址要自己修改一下,具体是下载 https://github.com/jnicol/particleground 其中的 jquery.particleground.min.js 文件,放在你的网站里,然后换做这个文件的地址

    <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.particleground.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('body').particleground();
    });
    </script>
    lksltjw
        3
    lksltjw  
    OP
       2015-07-25 15:43:53 +08:00
    @loading
    @alay9999
    感谢!
    回头试一试。。
    lksltjw
        4
    lksltjw  
    OP
       2015-07-25 15:51:51 +08:00
    @alay9999
    比如说casper该怎么改呢?
    blog.cover是自己设置的图片背景


    #这是index.hbs
    <header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
    <nav class="main-nav overlay clearfix">
    {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
    {{#if @blog.navigation}}
    <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
    {{/if}}
    </nav>
    <div class="vertical">
    <div class="main-header-content inner">
    <h1 class="page-title">{{@blog.title}}</h1>
    <h2 class="page-description">{{@blog.description}}</h2>
    </div>
    </div>
    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
    </header>

    {{! The main content area on the homepage }}
    <main id="content" class="content" role="main">

    {{! The tag below includes the post loop - partials/loop.hbs }}
    {{> "loop"}}

    </main>

    #然后这是default.hbs
    <!DOCTYPE html>
    <html>
    <head>
    {{! Document Settings }}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{! Page Meta }}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

    {{! Ghost outputs important style and meta data with this tag }}
    {{ghost_head}}
    </head>
    <body class="{{body_class}} nav-closed">

    {{navigation}}

    <div class="site-wrapper">

    {{! Everything else gets inserted here }}
    {{{body}}}

    <footer class="site-footer clearfix">
    <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
    <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
    </footer>

    </div>

    {{! Ghost outputs important scripts and data with this tag }}
    {{ghost_foot}}

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>

    </body>
    </html>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5767 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:27 · PVG 11:27 · LAX 19:27 · JFK 22:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.