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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3420 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

其实我对前端一窍不通

一窍不通

前端

静态

4 条回复 • 2015-07-25 15:51:51 +08:00

loading

2015-07-25 11:18:39 +08:00

$('body').particleground();

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

2015-07-25 15:43:53 +08:00

@loading
@alay9999
感谢！
回头试一试。。

lksltjw

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> © {{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>