Hexo插件安装

Hexo

　　自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why
　　最近，使用Hexo遇到了很多问题，在设立进行整理。

同步instagram图片

新建页面

1
2
执行命令：
hexo new page "instagram"

修改文件

1
2
3
4
5
6
7
8
9
10
11
12
13
在目录yourBlog\source\instagram下，修改index.md内容为：

---
layout: post
slug: "instagram"
title: "相册"
noDate: "true"
---
<div class="instagram" data-client-id="a0d4bd    ab154b4c689aff70602cb34a2c" data-user-id="438522285">
    <a href="http://instagram.com/litten225" target="_blank" class="open-ins">图片来自instagram，正在加载中…</a>
</div>
<script src="/js/jquery.lazyload.js"></script>
<script src="/js/instagram.js"></script>

获取ID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data-client-id：
[注册新客户端](http://instagram.com/developer/clients/manage/)
获取CLIENT ID：a0d4bdab154b4c689aff70602cb34a2c
用client_id去换取token：
在浏览器中请求：

    https://instagram.com/oauth/authorize/?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=token
    https://instagram.com/oauth/authorize/?client_id=a0d4bdab154b4c689aff70602cb34a2c&redirect_uri=http://luuman.github.io/&response_type=token
    花括号里面的值，对应上一步最终得到的client_id和自己设定的redirect_uri。
    请求到的是一个授权页面，授权完毕后，则重定向到你的redirect_uri。
    注意看授权成功后的url，hash部分会附带给你的token。至此，token成功获取，将至放在data-client-id。

data-user-id：

需要到[lookup-user-id](http://jelled.com/instagram/lookup-user-id#)填写用户名并查找。

分享按钮

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
以下代码是百度分享的页面24页面分享的代码，可以自行选择以下标签。

配置

vim themes/light/layout/_partial/article.ejs
删除
<%-partial('post/share')%>
替换为刚刚获取的分享代码

<div class="bdsharebuttonbox">
    <a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    <a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
    <a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
    <a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a>
    <a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
    <a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="分享到复制网址"></a>

    <a href="#" class="fx fa-plus-square bds_more" data-cmd="more"></a>
    <a href="#" class="fx fa-tencent-weibo bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
    <a href="#" class="fx fa-renren bds_renren" data-cmd="renren" title="分享到人人网"></a>
    <a href="#" class="fx fa-paw bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
    <a href="#" class="fx fa-envelope-o bds_mail" data-cmd="mail" title="分享到邮件分享"></a></div>
    <a href="#" class="fx fa-print bds_print" data-cmd="print" title="分享到打印"></a>
    <a href="#" class="fx fa-share-alt bds_mshare" data-cmd="mshare" title="分享到一键分享"></a>
    <a href="#" class="fx bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
    <a href="#" class="fx fa- bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
    <a href="#" class="fx fa- bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
\themes\spfk\source\css\_partial\article.styl

/* bd share button box */
.bdshare-button-style2-24{
  width: 330px;
  margin: auto;
  .fx {
      color: #999;
      padding: 0;
      margin: 6px;
      height: 54px;
      display: inline-block;
      font: normal normal normal 36px/1 FontAwesome;
      background: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .fx:hover{
    color: #FFF;
    opacity: 1;
  }
}

themes\spfk\source\css\_partial\mobile.styl
/* bd share button box */
.bdshare-button-style2-24{
  width: 289px;
  .fx {
      font: normal normal normal 30px/1 FontAwesome;
  }
}

百度统计

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
去百度统计获取统计代码

vim themes/light/layout/_partial/baidu_analytics.ejs

<% if (theme.baidu_analytics){ %>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?819b1c6493df653afb8c784db6";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

<% } %>

vim hexo/themes/light/_config.yml

baidu_analytics: true

vim hexo/themes/light/layout/_partial/head.ejs
在/head前添加

<%- partial('baidu_analytics') %>
</head>

不蒜子

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
themes/你的主题/layout/_partial/footer.ejs

<footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank">spfk</a> by luuman
            </div>
        </div>
        <div class="visit">
            <span id="busuanzi_container_site_pv" style='display:none'>
                <span id="site-visit" >本站到访数: 
                    <span id="busuanzi_value_site_uv"></span>
                </span>
            </span>
            <span id="busuanzi_container_page_pv" style='display:none'>
                <span id="page-visit">, 本页阅读量: 
                    <span id="busuanzi_value_page_pv"></span>
                </span>
            </span>
        </div>
    </div><script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
</footer>

修改样式

移动端出现上移themes\spfk\source\css_partial\mobile.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#footer {
    bottom: 10px;
    .footer-left{
        float: initial;
        margin-bottom: 10px;
    }
    .footer-right{
        float: initial;
        margin-bottom: 10px;
    }
}
#container .visit {
    margin-top: 1em;
}

版权声明

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
\layout\_partial\post\nav.ejs

<% if (post.original != false && !is_page()){ %>
    <div class="copyright">
        <p><span>本文标题:</span><a href="<%- url_for(post.path) %>"><%= post.title %></a></p>
        <p><span>文章作者:</span><a href="/" title="请访问 <%=theme.author%> 博客"><%=theme.author%></a></p>
        <!-- <p><span>发布时间:</span><%= post.date.format("YYYY年MM月DD日 - HH时mm分") %></p> -->
        <!-- <p><span>最后更新:</span><%= post.updated.format("YYYY年MM月DD日 - HH时mm分") %></p> -->
        <p>
            <span>原始链接:</span><a class="post-url" href="<%- url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a>
            <span class="copy-path" data-clipboard-text="原文: <%= post.permalink %>　　作者: <%=theme.author%>" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script src="/js/clipboard.min.js"></script>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>
<% } %>

<% if (post.prev || post.next){ %>
<nav id="article-nav">
  <% if (post.prev){ %>
    <a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption"><</strong>
      <div class="article-nav-title">
        <% if (post.prev.title){ %>
          <%= post.prev.title %>
        <% } else { %>
          (no title)
        <% } %>
      </div>
    </a>
  <% } %>
  <% if (post.next){ %>
    <a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title"><%= post.next.title %></div>
      <strong class="article-nav-caption">></strong>
    </a>
  <% } %>
</nav>
<% } %>

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
\themes\spfk\source\css\_partial\article.styl

/* copyright */
.copyright {
    width: 85%;
    max-width: 45em;
    margin: 0 auto;
    padding: .5em 1.8em;
    border: 1px solid lightgray;
    font-size: .93em;
    line-height: 1.6em;
    word-break: break-word;
    background: rgba(255, 255, 255, .4);
    span {
        margin-right: 1em;
        color: #B5B5B5;
        font-weight: bold;
    }
    a {
        color: gray;
        &:hover {
            font-weight: bold;
            color: #a3d2a3;
            text-decoration: underline;
        }
    }
    &:hover p .copy-path::after {
        content: "复制";
    }
    .post-url:hover {
        font-weight: normal;
    }
    .copy-path {
        margin-left: 1em;
        &:hover {
            color: gray;
            cursor: pointer;
        }
    }
}

社交账号图标修改

添加代码

1
2
3
4
5
6
7
8
9
\themes\spfk\layout\_partial\left-col.ejs

<nav class="header-nav">
    <div class="social">
        <% for (var i in theme.subnav){ %>
            <a class="fl <%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><%= i %></a>
        <%}%>
    </div>
</nav>

修改样式

站内搜索框

添加代码
用ajax+json搜索

完美解决Hexo静态博客搜索问题

站点Swiftype搜索框

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
\themes\spfk\layout\_partial\left-col.ejs

<form>                
    <input type="text" class="st-default-search-input search" id="search" placeholder=" Search..." autocomplete="off" autocorrect="off" autocapitalize="off">
</form>


D:\Hexo\Hexo\themes\spfk\layout\_partial\after-footer.ejs

<script type="text/javascript">
  window.onload = function(){
    document.getElementById("search").onclick = function(){
        console.log("search")
        search();
    }
  }
  function search(){
    (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
    (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
    e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
    })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

    _st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');
  }
</script>

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.search {
    width: 68%;
    height: 18px;
    margin-top: 1px;
    padding: 0;
    font-family: inherit;
    border: 2px solid transparent;
    border-bottom: 2px solid lightgray;
    border-radius: 2px;
    opacity: .7;
    background: none;
    &:hover {
        border: 0px solid lightgray;
        opacity: 1;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    };
}


display: inline-block;
    width: 190px;
    height: 16px;
    padding: 7px 11px 7px 28px;
    border: 1px solid #bbb;
    border: 1px solid rgba(0,0,0,0.25);
    font-weight: 400;
    color: #444;
    font-size: 14px;
    line-height: 16px;
    box-sizing: content-box;
    background: #fff 8px 8px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAACXB…Hx4Taq1nrnKaW8K6XUUsrHWuvNevdRRLzFGwzvDbXAB9cDAHvhedDruuxSAAAAAElFTkSuQmCC);
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;

RSS不显示

1
2
3
4
5
6
7
8
9
    安装RSS插件

$ npm install hexo-generator-feed --save

    开启RSS功能

    编辑hexo/themes_config.yml，添加如下代码：

    rss: /atom.xml #rss地址  默认即可

sitemap网站地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1、安装插件：

$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

2、在博客目录的hexo/_config.yml中添加如下代码：

# 自动生成sitemap编辑

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

3、hexo编译的时候会自动在根目录生成站点地图

    UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)
    $ npm install hexo-generator-sitemap --save
    npm WARN install Couldn't install optional dependency: Unsupported
    npm WARN install Couldn't install optional dependency: Unsupported
    hexo-site@0.0.0 D:\Hexo\Hexo
    └── hexo-generator-sitemap@1.0.1


    UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)
    $ npm install hexo-generator-baidu-sitemap --save
    npm WARN install Couldn't install optional dependency: Unsupported
    npm WARN install Couldn't install optional dependency: Unsupported
    hexo-site@0.0.0 D:\Hexo\Hexo
    └── hexo-generator-baidu-sitemap@0.1.2


    UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)
    $ hexo g
    INFO  Files loaded in 2.42 s
    INFO  Generated: baidusitemap.xml
    INFO  Generated: sitemap.xml
    INFO  2 files generated in 477 ms

多说评论插件

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    ├── spfk
        ├── _config.yml #主题配置文件
    #是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key（http://duoshuo-key.duoshuo.com/）
    #若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
    duoshuo: true


复制到 themes\landscape\layout\_partial\article.ejs把

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

改为

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.disqus_shortname %>'};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

修改样式：V说：设计达人：设计达人：

添加方法：
添加方法：打开「后台」 > 「多说评论」 > 「设置」 > 「基本设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

个性样式：

1
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current{border:0;color:#848568;text-shadow:none;background:#dddfc2}#ds-thread #ds-reset .ds-highlight{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;color:#848568!important}#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover{color:#696a52;background:#d4d6ba}#ds-thread #ds-reset a.ds-highlight:hover{color:#696a52!important}#ds-thread{padding-left:30px}#ds-thread #ds-reset #ds-hot-posts,#ds-thread #ds-reset li.ds-post{overflow:visible}#ds-thread #ds-reset .ds-post-self{padding:10px 0 10px 10px}#ds-thread #ds-reset .ds-post-self,#ds-thread #ds-reset li.ds-post{border:0!important}#ds-reset .ds-avatar,#ds-thread #ds-reset ul.ds-children .ds-avatar{position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px;background:#E5E6D0}#ds-thread #ds-reset ul.ds-children .ds-avatar{left:-23px}#ds-thread .ds-avatar a{display:inline-block;padding:1px;width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%;background-color:#fff!important}#ds-thread .ds-avatar a:hover{border-color:#de5a4e}#ds-thread .ds-avatar>img{margin:2px 0 0 2px}#ds-thread #ds-reset .ds-replybox{box-shadow:none}#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar,#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar{left:0;top:0;padding:0;width:32px!important;height:32px!important;background:0 0;box-shadow:none}#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img{width:32px!important;height:32px!important;border-radius:50%}#ds-reset .ds-replybox .ds-avatar img,#ds-reset .ds-replybox a.ds-avatar{padding:0;width:50px!important;height:50px!important;border-radius:5px}#ds-reset .ds-avatar img{width:32px!important;height:32px!important;border-radius:32px;box-shadow:0 1px 3px rgba(0,0,0,.22);-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out}.ds-post-self:hover .ds-avatar img{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}#ds-thread #ds-reset .ds-comment-body{background:#F0F0E3;padding:15px 15px 12px 32px;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.75) inset}#ds-thread #ds-reset .ds-comment-body p{color:#787968}#ds-thread #ds-reset .ds-comments a.ds-user-name{font-weight:700;color:#696A52!important}#ds-thread #ds-reset .ds-comments a.ds-user-name:hover{color:#D32!important}#ds-thread #ds-reset #ds-hot-posts{border:0}#ds-reset #ds-hot-posts .ds-gradient-bg{background:0 0}#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry{padding:0}#ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a,#ds-reset #ds-bubble .ds-avatar{position:static;padding:0;border:0;background:0 0;box-shadow:none}#ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a,#ds-reset #ds-bubble .ds-avatar img{width:45px!important;height:45px!important}#ds-reset #ds-bubble .ds-user-name{padding-left:13px}#ds-reset .ds-comment-body #ds-ctx{border-left:1px solid #b9baa6;background-color:#e8e8dc!important}#ds-reset #ds-ctx{margin-right:-15px}#ds-reset #ds-ctx .ds-ctx-entry{position:relative;padding:10px 30px 10px 10px}#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar{top:6px;left:5px;background:0 0;box-shadow:none}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left:46px}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content{color:#787968}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color:#696A52;font-weight:700}

个性样式：
[震动效果]: http://www.vsay.cn/wp-content/uploads/2012/09/7.gif

1
#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0s;-moz-animation-duration:0s;-ms-animation-duration:0s;-o-animation-duration:0s;animation-duration:0s;-webkit-animation-duration:.7s;-moz-animation-duration:.7s;-ms-animation-duration:.7s;-o-animation-duration:.7s;animation-duration:.7s}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0)}15%{-moz-transform:translateX(-25%) rotate(-5deg)}30%{-moz-transform:translateX(20%) rotate(3deg)}45%{-moz-transform:translateX(-15%) rotate(-3deg)}60%{-moz-transform:translateX(10%) rotate(2deg)}75%{-moz-transform:translateX(-5%) rotate(-1deg)}100%{-moz-transform:translateX(0)}}@-o-keyframes wobble{0%{-o-transform:translateX(0)}15%{-o-transform:translateX(-25%) rotate(-5deg)}30%{-o-transform:translateX(20%) rotate(3deg)}45%{-o-transform:translateX(-15%) rotate(-3deg)}60%{-o-transform:translateX(10%) rotate(2deg)}75%{-o-transform:translateX(-5%) rotate(-1deg)}100%{-o-transform:translateX(0)}}@keyframes wobble{0%{transform:translateX(0)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}100%{transform:translateX(0)}}#ds-reset .ds-avatar img:hover{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble}

个性样式：
[MOxFIVE]: http://www.vsay.cn/wp-content/uploads/2012/09/7.gif

1
#ds-ssr{display:none !important}#ds-reset{font-weight:normal;font-size:13px;font-size-adjust:none;color:#333;line-height:1;text-align:left}#ds-reset *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}#ds-reset input[type=button],#ds-reset input[type=submit],#ds-reset input[type=reset],#ds-reset button{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#ds-reset div,#ds-reset ul,#ds-reset ol,#ds-reset li,#ds-reset ul li,#ds-reset ol li,#ds-reset iframe,#ds-reset h1,#ds-reset h2,#ds-reset h3,#ds-reset h4,#ds-reset h5,#ds-reset h6,#ds-reset p,#ds-reset img,#ds-reset blockquote,#ds-reset a,#ds-reset span,#ds-reset pre,#ds-reset code,#ds-reset strong,#ds-reset sub,#ds-reset sup,#ds-reset fieldset,#ds-reset form,#ds-reset label,#ds-reset input,#ds-reset textarea,#ds-reset select{border:0;padding:0;margin:0;vertical-align:baseline;font:inherit;line-height:inherit;background:none;width:auto;float:none;overflow:visible;transition:none}#ds-reset strong{font-weight:bold}#ds-reset p{text-indent:0;clear:none}#ds-reset span,#ds-reset strong,#ds-reset label,#ds-reset input{display:inline;margin:0}#ds-reset textarea:focus,#ds-reset input:focus{outline:none}#ds-reset ul,#ds-reset ol,#ds-reset ul li,#ds-reset ol li{list-style:none;display:block}#ds-reset input,#ds-reset button{-webkit-border-radius:3px;border-radius:3px}#ds-indicator{display:none;position:fixed;z-index:99999;top:150px;left:0;padding:8px;border-bottom-right-radius:3px;border-top-right-radius:3px;width:16px;height:16px;background:#666 url("data:image/gif;base64,R0lGODlhEAAQAPQAAGZmZv///2lpadzc3K+vr/r6+ufn5319fZmZmfDw8Le3t8DAwHV1daOjo4eHh9LS0srKygAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==") 8px 8px no-repeat;*background-image:url("//static.duoshuo.com/images/loading.gif");*position:absolute;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}#ds-waiting{cursor:wait;display:block;width:16px;height:11px;padding:0 0 3px 5px;margin:0;background:url("data:image/gif;base64,R0lGODlhEAALAPQAAP///z2LqeLt8dvp7u7090GNqz2LqV+fuJ/F1IW2ycrf51aatHWswaXJ14i4ys3h6FmctUCMqniuw+vz9eHs8fb5+meku+Tu8vT4+cfd5bbT3tbm7PH2+AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA") 0 0 no-repeat;*background-image:url("//static.duoshuo.com/images/waiting.gif")}#ds-reset .ds-highlight{color:#d32 !important}#ds-reset .ds-rounded{-webkit-border-radius:3px;border-radius:3px}#ds-reset .ds-rounded-top{-webkit-border-top-right-radius:3px;-webkit-border-top-left-radius:3px;border-top-right-radius:3px;border-top-left-radius:3px}#ds-reset .ds-rounded-bottom{border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px}#ds-reset .ds-gradient-bg{background:url("//static.duoshuo.com/images/bg_sprites.png") 0 -60px repeat-x}#ds-reset .ds-avatar{box-shadow:0 1px 1px rgba(255,255,255,0.75);position:relative;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;float:left}#ds-reset .ds-avatar img{display:block;width:50px;height:50px;max-width:none;box-shadow:0 1px 3px rgba(0,0,0,0.22);-webkit-border-radius:3px;border-radius:3px}#ds-reset .ds-avatar .ds-service-icon{display:block;position:absolute;bottom:-4px;right:-4px}#ds-reset img.ds-smiley{margin:0;padding:0;display:inline;border:none}#ds-reset .ds-icon{vertical-align:middle;display:inline-block;overflow:hidden;background:transparent url("//static.duoshuo.com/images/sprites.png") no-repeat;_background-image:url("//static.duoshuo.com/images/sprites.gif")}#ds-reset a .ds-icon{opacity:.6;-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;transition:opacity .15s linear}#ds-reset a:hover .ds-icon{opacity:1}#ds-reset .ds-service-list a{vertical-align:middle;padding-right:3px}#ds-reset .ds-service-list li:hover a{color:#333}#ds-reset .ds-service-icon,#ds-reset .ds-service-icon-grey{width:16px !important;height:16px !important;line-height:100px;display:inline-block;background:url("//static.duoshuo.com/images/service-icons-color.png?v=2") no-repeat;_background-image:url("//static.duoshuo.com/images/service-icons-color.gif?v=2");overflow:hidden}#ds-reset .ds-service-icon-grey{background-image:url("//static.duoshuo.com/images/service-icons-grey.png");_background-image:url("//static.duoshuo.com/images/service-icons-grey.gif")}#ds-reset .ds-service-link{height:16px !important;line-height:16px;padding-left:20px;display:block;background:url("//static.duoshuo.com/images/service-icons-color.png?v=2") no-repeat;_background-image:url("//static.duoshuo.com/images/service-icons-color.gif?v=2");overflow:hidden}#ds-reset .ds-weibo{background-position:0 0}#ds-reset .ds-renren{background-position:0 -32px}#ds-reset .ds-qqt{background-position:0 -64px}#ds-reset .ds-kaixin{background-position:0 -80px}#ds-reset .ds-douban{background-position:0 -96px}#ds-reset .ds-qzone{background-position:0 -128px}#ds-reset .ds-duoshuo{background-position:0 -144px}#ds-reset .ds-qq{background-position:0 -192px}#ds-reset .ds-baidu{background-position:0 -208px}#ds-reset .ds-google{background-position:0 -240px}#ds-reset .ds-weixin{background-position:0 -272px}#ds-reset .ds-wechat{background-position:0 -272px}.ds-icons-32 a{display:block;cursor:pointer;width:32px !important;height:32px !important;background:url("//static.duoshuo.com/images/icons_large.png") no-repeat !important;overflow:hidden;text-indent:-9999px}.ds-icons-32 a.ds-weibo{background-position:-37px 0 !important}.ds-icons-32 a.ds-qzone{background-position:0 0 !important}.ds-icons-32 a.ds-qqt{background-position:-74px 0 !important}.ds-icons-32 a.ds-renren{background-position:-148px 0 !important}.ds-icons-32 a.ds-kaixin{background-position:-111px 0 !important}.ds-icons-32 a.ds-weixin{background-position:-224px 0 !important}.ds-icons-32 a.ds-wechat{background-position:-224px 0 !important}.ds-icons-32 a.ds-qq{background-position:-488px 0 !important}.ds-icons-32 a.ds-douban{background-position:-186px 0 !important}.ds-icons-32 a.ds-baidu{background-position:-262px 0 !important}#ds-reset #ds-ctx{padding:0;margin:8px 0;max-width:640px}#ds-reset #ds-ctx .ds-ctx-entry{padding:6px;margin:0;border-bottom:1px solid #e6e6e6}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color:#e77064}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a:hover{color:#d32}#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar{margin:0;width:30px;height:30px}#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar img{width:30px;height:30px;box-shadow:none}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left:38px}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head{position:relative;_zoom:1;line-height:1em;padding:1px 0 0;margin:0 0 .25em}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-nth{color:#999;font-size:12px;position:absolute;top:2px;right:0}#ds-reset #ds-ctx .ds-ctx-entry .ds-time{font-size:12px;*font-size:12px;margin-left:8px;color:#999;_zoom:1}#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content{position:relative;_zoom:1;padding:0;margin:0;overflow:hidden;line-height:1.5em}#ds-reset #ds-ctx .ds-ctx-entry:hover .ds-comment-actions{display:block}#ds-reset #ds-ctx .ds-comment-actions{bottom:0;right:0;line-height:18px;position:absolute;display:none;*display:block}#ds-reset #ds-ctx .ds-comment-actions a{margin:0 0 0 6px}#ds-reset.ds-touch #ds-ctx .ds-ctx-entry .ds-comment-actions{display:block}#ds-reset .ds-comment-body #ds-ctx{border-left:3px solid #ccc;background-color:rgba(0,0,0,0.03)}#ds-reset.ds-no-opacity .ds-comment-body #ds-ctx{background:#f8f8f8}#ds-reset .ds-dialog-body #ds-ctx .ds-ctx-entry:hover .ds-comment-actions{display:none}#ds-thread{clear:both;position:relative;overflow:visible;_zoom:1}#ds-thread #ds-reset a{cursor:pointer;text-decoration:none;color:#777;background-color:transparent;-webkit-transition:color .15s linear;-moz-transition:color .15s linear;transition:color .15s linear}#ds-thread #ds-reset a:hover{color:#333}#ds-thread #ds-reset ul,#ds-thread #ds-reset ul li{background:none;margin:0;padding:0}#ds-thread #ds-reset .ds-arrow{position:absolute;width:0;height:0;font-size:0 !important;line-height:0 !important;_border-right-color:#ffc0cb !important;_border-left-color:#ffc0cb !important;_filter:chroma(color=#ffc0cb) !important}#ds-thread #ds-reset .ds-arrow-down{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff}#ds-thread #ds-reset button{cursor:pointer;margin:0;padding:0;border-radius:0}#ds-thread #ds-reset .ds-meta{position:relative;padding:8px 0;line-height:24px;border-bottom:1px solid rgba(0,0,0,0.13)}#ds-thread #ds-reset .ds-like-tooltip{position:absolute;z-index:9999;background-color:#fcfcfc;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9));background:-moz-linear-gradient(top, #fcfcfc 0, #f9f9f9 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcfc), color-stop(100%, #f9f9f9));background:-webkit-linear-gradient(top, #fcfcfc 0, #f9f9f9 100%);background:-ms-linear-gradient(top, #fcfcfc 0, #f9f9f9 100%);background:linear-gradient(top, #fcfcfc 0, #f9f9f9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#f9f9f9',GradientType=0);border:1px solid #aaa;box-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff;font-size:12px;padding:8px 14px}#ds-thread #ds-reset .ds-like-tooltip ul{width:84px;float:left}#ds-thread #ds-reset .ds-like-tooltip li{line-height:16px;margin:6px 0}#ds-thread #ds-reset .ds-like-tooltip p{clear:both;margin:6px 0}#ds-thread #ds-reset .ds-like-tooltip .ds-like-tooltip-footer{text-align:right}#ds-thread #ds-reset a.ds-like-thread-button{color:#555;padding:4px 8px;border:1px solid #ccc;border-bottom-color:#aaa;box-shadow:inset 0 0 1px #fff;margin-right:15px;text-shadow:0 1px 0 #fff;background-color:#e0e0e0;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(25%, #fff), to(#e0e0e0));background-image:-webkit-linear-gradient(#fff, #fff 25%, #e0e0e0);background-image:-moz-linear-gradient(top, #fff, #fff 25%, #e0e0e0);background-image:-ms-linear-gradient(#fff, #fff 25%, #e0e0e0);background-image:linear-gradient(#fff, #fff 25%, #e0e0e0)}#ds-thread #ds-reset a.ds-like-thread-button .ds-icon-heart{position:relative;top:-2px;opacity:1}#ds-thread #ds-reset a.ds-like-thread-button span{color:#555}#ds-thread #ds-reset .ds-thread-cancel-like{display:none}#ds-thread #ds-reset a.ds-thread-liked{background:#e9e9e9}#ds-thread #ds-reset a.ds-thread-liked:hover .ds-thread-cancel-like{display:inline}#ds-thread #ds-reset a.ds-thread-liked:hover .ds-thread-like-text{display:none}#ds-thread #ds-reset #ds-hot-posts{border:1px solid #ccc;overflow:hidden;margin:8px 0;padding:0;_height:100%}#ds-thread #ds-reset .ds-header{font-weight:bold;font-size:14px;color:#555;line-height:30px;padding:0 12px}#ds-thread #ds-reset .ds-toolbar{position:relative;z-index:5;font-size:12px;padding:8px 0;width:100%;clear:both}#ds-thread #ds-reset .ds-toolbar:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-thread #ds-reset .ds-visitor{float:right;line-height:1.5em;margin-right:6px}#ds-thread #ds-reset .ds-account-control{float:right;position:relative;font-size:12px;cursor:pointer;text-align:right;line-height:18px;padding-bottom:3px;width:75px}#ds-thread #ds-reset .ds-account-control span{display:block;float:left;color:#999}#ds-thread #ds-reset .ds-account-control ul{display:none;position:absolute;top:19px;left:0;border:1px solid #aaa;background:#f8f8f8;box-shadow:inset 0 1px 1px #fff,0 1px 1px rgba(0,0,0,0.3);border-radius:3px;text-align:center}#ds-thread #ds-reset .ds-account-control ul li a{border-top:1px solid #fff;border-bottom:1px solid #ddd;display:block;padding:3px 10px;text-shadow:0 1px 0 #fff}#ds-thread #ds-reset .ds-account-control ul li a:hover{color:#555}#ds-thread #ds-reset .ds-account-control.ds-active span{color:#555}#ds-thread #ds-reset .ds-account-control.ds-active ul{display:block}#ds-thread #ds-reset .ds-alert{margin:.5em 0;border:1px solid #fbeed5;border-radius:3px;padding:6px 6px;color:#c09853;background-color:#fcf8e3;line-height:1.5em}#ds-thread #ds-reset .ds-login-buttons{width:100%;position:relative;padding:10px 0 6px}#ds-thread #ds-reset .ds-login-buttons p{float:left;line-height:24px;margin:0}#ds-thread #ds-reset .ds-login-buttons .ds-service-list li{float:left;height:16px;width:54px;padding:4px 0;margin:0 0 0 6px}#ds-thread #ds-reset .ds-login-buttons .ds-more-services{color:#d32 !important;line-height:16px;display:block}#ds-thread #ds-reset .ds-login-buttons .ds-more-services:hover{color:#e77064 !important}#ds-thread #ds-reset .ds-login-buttons .ds-additional-services{display:none}#ds-thread #ds-reset .ds-login-buttons .ds-social-links{float:left;width:306px}#ds-thread #ds-reset .ds-login-buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-thread #ds-reset a.ds-unread-comments-count{display:none;background-color:#d32;color:#fff !important;margin-right:6px;padding:1px 5px;font-weight:bold;-webkit-border-radius:5px;border-radius:5px;box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.3);text-shadow:0 1px 1px rgba(0,0,0,0.3)}#ds-thread #ds-reset a.ds-unread-comments-count:hover{background:#f00}#ds-thread #ds-reset .ds-replybox{width:auto;font-size:12px;z-index:3;margin:8px 0;padding:0 0 0 60px;position:relative;_zoom:1}#ds-thread #ds-reset .ds-replybox:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-thread #ds-reset .ds-replybox .ds-avatar{position:absolute;top:0;left:0}#ds-thread #ds-reset .ds-replybox .ds-avatar img{width:50px;height:50px;visibility:visible;margin:0}#ds-thread #ds-reset .ds-inline-replybox{margin:8px 0 2px 0;padding-left:38px}#ds-thread #ds-reset .ds-inline-replybox .ds-avatar img{width:30px;height:30px;box-shadow:0 1px 2px rgba(0,0,0,0.22)}#ds-thread #ds-reset .ds-textarea-wrapper{position:relative;border:1px solid #ccc;border-bottom:none;padding-right:20px;background:#fff url("//static.duoshuo.com/images/bg_sprites.png") 0 -90px repeat-x;overflow:hidden}#ds-thread #ds-reset .ds-textarea-wrapper textarea{box-shadow:none;-webkit-appearance:none;overflow:auto;padding:10px;height:54px;margin:0;resize:none;color:#999;width:100%}#ds-thread #ds-reset .ds-textarea-wrapper textarea:focus{color:#333}#ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text{word-wrap:break-word;visibility:hidden;position:absolute;top:0;left:10px;right:10px}#ds-thread #ds-reset .ds-textarea-wrapper textarea,#ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;border:none}#ds-thread #ds-reset .ds-post-toolbar{position:relative;width:100%;box-shadow:0 1px 0 rgba(255,255,255,0.6)}#ds-thread #ds-reset .ds-post-toolbar span,#ds-thread #ds-reset .ds-post-toolbar input,#ds-thread #ds-reset .ds-post-toolbar label,#ds-thread #ds-reset .ds-post-toolbar a{vertical-align:middle;width:auto}#ds-thread #ds-reset .ds-post-options{position:relative;margin-right:100px;height:30px;border:1px solid #ccc;border-right:none;border-bottom-color:#aaa;border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px}#ds-thread #ds-reset .ds-toolbar-buttons{position:absolute;top:5px;left:6px}#ds-thread #ds-reset .ds-toolbar-button{display:block;width:19px !important;height:19px;float:left;margin-right:4px;background:transparent url("//static.duoshuo.com/images/sprites.png") no-repeat;_background-image:url("//static.duoshuo.com/images/sprites.gif");vertical-align:middle;opacity:.6;-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;transition:opacity .15s linear}#ds-thread #ds-reset .ds-toolbar-button:hover{opacity:1}#ds-thread #ds-reset .ds-add-image{background-position:0 -48px}#ds-thread #ds-reset .ds-add-image:hover{background-position:0 -66px}#ds-thread #ds-reset .ds-add-emote{background-position:0 -12px}#ds-thread #ds-reset .ds-add-emote:hover{background-position:0 -30px}#ds-thread #ds-reset .ds-sync{font-size:12px;color:#999;line-height:30px;position:absolute;right:5px}#ds-thread #ds-reset .ds-sync label{color:#777;cursor:pointer;-webkit-transition:color .15s linear;-moz-transition:color .15s linear;transition:color .15s linear}#ds-thread #ds-reset .ds-sync label:hover{color:#555}#ds-thread #ds-reset .ds-sync a.ds-service-icon,#ds-thread #ds-reset .ds-sync a.ds-service-icon-grey{margin:7px 2px 7px 3px}#ds-thread #ds-reset .ds-post-button{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;position:absolute;right:0;top:0;height:32px;width:100px;text-align:center;text-shadow:0 1px 0 #fff;color:#555;font-size:14px;font-weight:bold;border:1px solid #ccc;border-bottom-color:#aaa;border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), color-stop(25%, #fcfcfc), to(#e6e6e6));background-image:-webkit-linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #fcfcfc, #fcfcfc 25%, #e6e6e6);background-image:-ms-linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);background-image:linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);-webkit-transition:all .15s linear;-moz-transition:all .15s linear;transition:all .15s linear;box-shadow:inset 0 0 1px #fff}#ds-thread #ds-reset .ds-post-button:hover{background-position:0 -15px;color:#333}#ds-thread #ds-reset .ds-post-button:active{-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}#ds-thread #ds-reset .ds-comments-info{width:100%;font-size:13px;margin-top:10px;padding:8px 0;line-height:25px;position:relative}#ds-thread #ds-reset .ds-sort{position:absolute;right:0;top:8px}#ds-thread #ds-reset .ds-sort a{color:#999;padding:0 4px;margin:0 2px}#ds-thread #ds-reset .ds-sort a:hover{color:#333}#ds-thread #ds-reset .ds-sort a.ds-current,#ds-thread #ds-reset .ds-sort a:active{color:#d32}#ds-thread #ds-reset ul.ds-comments-tabs .ds-highlight{margin:0 2px 0 0}#ds-thread #ds-reset ul.ds-comments-tabs .ds-service-icon{vertical-align:middle;margin:0 2px 1px 0}#ds-thread #ds-reset li.ds-tab{display:inline;font-size:13px;margin:0 5px 0 0;padding:0}#ds-thread #ds-reset li.ds-tab a{text-shadow:0 1px 0 #fff;padding:3px 5px;display:inline;-webkit-border-radius:5px;border-radius:5px}#ds-thread #ds-reset li.ds-tab a.ds-current{border:1px solid #ccc;background-color:rgba(0,0,0,0.04)}#ds-thread #ds-reset li.ds-tab a:hover{background-color:rgba(0,0,0,0.04)}#ds-thread #ds-reset .ds-comments{width:100%;border-bottom:1px solid rgba(0,0,0,0.13)}#ds-thread #ds-reset .ds-comments:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-thread #ds-reset li.ds-post{width:100%;overflow:hidden;clear:both;border-top:1px solid rgba(0,0,0,0.13);margin:0;padding:0;list-style:none}#ds-thread #ds-reset li.ds-post-placeholder{text-align:center;color:#999;padding:1em 0}#ds-thread #ds-reset .ds-post-self{position:relative;padding:10px;border-top:1px solid rgba(255,255,255,0.7)}#ds-thread #ds-reset .ds-post-self:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-thread #ds-reset .ds-post-self:hover .ds-post-delete,#ds-thread #ds-reset .ds-post-self:hover .ds-post-report{display:inline-block}#ds-thread #ds-reset.ds-touch .ds-post-self .ds-post-delete,#ds-thread #ds-reset.ds-touch .ds-post-self .ds-post-report{display:inline-block}#ds-thread #ds-reset .ds-comment-body{padding-left:60px}#ds-thread #ds-reset .ds-comment-body p{font-size:13px;line-height:1.5em;margin:.5em 0;word-wrap:break-word}#ds-thread #ds-reset .ds-comment-body img{max-width:100%;vertical-align:text-bottom;box-shadow:none}#ds-thread #ds-reset .ds-comment-body embed{max-width:100%}#ds-thread #ds-reset .ds-comment-body code{display:block;font-size:12px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;padding:8px 12px;background-color:#f0f0f0;margin:8px 0;border-radius:3px;border:1px solid #ddd;color:#666}#ds-thread #ds-reset .ds-comment-body a{color:#777}#ds-thread #ds-reset .ds-comment-body a:hover{color:#555}#ds-thread #ds-reset a.ds-comment-context{position:relative;margin:.5em 0;color:#e77064}#ds-thread #ds-reset a.ds-comment-context:hover{color:#d32}#ds-thread #ds-reset #ds-bubble{position:absolute;background-color:#fff;-webkit-border-radius:5px;border-radius:5px;padding:10px;color:#333;border:1px solid #aaa;box-shadow:0 0 2px rgba(0,0,0,0.2);z-index:9999;font-size:13px}#ds-thread #ds-reset #ds-bubble a{color:#e77064}#ds-thread #ds-reset #ds-bubble a:hover{color:#d32}#ds-thread #ds-reset #ds-bubble p{line-height:18px}#ds-thread #ds-reset #ds-bubble .ds-arrow-border{border-top-color:#aaa;bottom:-6px}#ds-thread #ds-reset #ds-bubble .ds-arrow{left:32px;bottom:-5px}#ds-thread #ds-reset #ds-ctx-bubble{width:300px}#ds-thread #ds-reset #ds-ctx-bubble .ds-bubble-footer{padding:6px 0 0 0;line-height:18px}#ds-thread #ds-reset #ds-user-card{width:276px;min-height:50px}#ds-thread #ds-reset #ds-user-card .ds-avatar{margin-right:10px}#ds-thread #ds-reset #ds-user-card .ds-avatar img{width:50px;height:50px}#ds-thread #ds-reset #ds-user-card .ds-user-name{vertical-align:top;display:inline-block;max-width:8em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px}#ds-thread #ds-reset #ds-user-card .ds-user-card-meta{margin:14px 0 0 62px}#ds-thread #ds-reset #ds-user-card .ds-user-description{border-top:1px dotted #ddd;margin-top:.5em;color:#aaa}#ds-thread #ds-reset #ds-user-card .ds-service-icon{margin-right:3px}#ds-thread #ds-reset .ds-comment-header{padding-top:1px}#ds-thread #ds-reset .ds-comment-footer{line-height:1.5em}#ds-thread #ds-reset .ds-comment-footer a{margin:0 6px 0 0;padding:0 6px 0 0}#ds-thread #ds-reset .ds-comment-actions a{font-size:12px;color:#999}#ds-thread #ds-reset .ds-comment-actions a .ds-icon{position:relative;top:-1px}#ds-thread #ds-reset .ds-user-name{color:#777;font-size:13px;margin-right:8px}#ds-thread #ds-reset .ds-post-liked .ds-icon-like{background-position:0 -130px}#ds-thread #ds-reset .ds-post-liked a.ds-post-likes{color:#d32}#ds-thread #ds-reset .ds-reply-active{display:block}#ds-thread #ds-reset .ds-reply-active .ds-post-reply{color:#333}#ds-thread #ds-reset .ds-reply-active .ds-post-reply .ds-icon{opacity:1}#ds-thread #ds-reset .ds-post-delete,#ds-thread #ds-reset .ds-post-report{display:none}#ds-thread #ds-reset .ds-icon-heart{width:14px;height:13px;background-position:0 -130px}#ds-thread #ds-reset .ds-icon-settings{width:12px;height:12px;margin:3px 4px 0;opacity:1}#ds-thread #ds-reset .ds-icon-like{width:14px;height:13px;background-position:0 -117px}#ds-thread #ds-reset .ds-icon-share{width:18px;height:13px;background-position:0 -234px}#ds-thread #ds-reset .ds-icon-reply{width:18px;height:13px;background-position:0 -105px}#ds-thread #ds-reset .ds-icon-delete{width:13px;height:13px;background-position:0 -176px}#ds-thread #ds-reset .ds-icon-report{width:12px;height:12px;background-position:0 -189px}#ds-thread #ds-reset .ds-time{font-size:12px;*font-size:12px;margin-right:8px;color:#999;_zoom:1}#ds-thread #ds-reset ul.ds-children{margin-left:38px}#ds-thread #ds-reset ul.ds-children .ds-avatar{width:30px;height:30px}#ds-thread #ds-reset ul.ds-children .ds-avatar img{width:30px;height:30px}#ds-thread #ds-reset ul.ds-children .ds-post-self{padding-left:0}#ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:38px}#ds-thread #ds-reset .ds-paginator{border-bottom:1px solid rgba(0,0,0,0.13);text-align:right;padding-bottom:15px;clear:both;line-height:1em}#ds-thread #ds-reset .ds-paginator div.ds-border{border-top:1px solid rgba(255,255,255,0.7);margin-bottom:15px}#ds-thread #ds-reset .ds-paginator a{font-size:12px;margin:0 3px;padding:2px 5px;border:1px solid transparent}#ds-thread #ds-reset .ds-paginator a:hover,#ds-thread #ds-reset .ds-paginator a.ds-current{-webkit-border-radius:3px;border-radius:3px;background-color:rgba(0,0,0,0.03)}#ds-thread #ds-reset .ds-paginator a.ds-current{color:#d32;border:1px solid #ccc}#ds-thread #ds-reset .ds-powered-by{font-size:12px;text-align:right;padding:10px 0}#ds-thread #ds-reset .ds-powered-by a{color:#999;text-decoration:none}#ds-thread #ds-reset .ds-powered-by a:hover{color:#555}#ds-thread #ds-reset.ds-no-transition .ds-post-button,#ds-thread #ds-reset.ds-no-transition .ds-more a{background:url("//static.duoshuo.com/images/bg_sprites.png") repeat-x !important}#ds-thread #ds-reset.ds-no-transition .ds-post-button:hover,#ds-thread #ds-reset.ds-no-transition .ds-more a:hover{background-position:0 -30px !important}#ds-thread #ds-reset.ds-no-transition .ds-like-thread-button{background:url("//static.duoshuo.com/images/bg_sprites.png") repeat-x}#ds-thread #ds-reset.ds-no-opacity li.ds-post{border-top:1px solid #ddd}#ds-thread #ds-reset.ds-no-opacity .ds-comments,#ds-thread #ds-reset.ds-no-opacity .ds-paginator{border-bottom:1px solid #ddd}#ds-thread #ds-reset.ds-no-opacity .ds-post-self{border-top:none}#ds-thread #ds-reset.ds-no-opacity .ds-tab a.ds-current{background:#f8f8f8}#ds-thread #ds-reset.ds-ie6 .ds-post-report,#ds-thread #ds-reset.ds-ie6 .ds-post-delete{display:inline !important}#ds-thread #ds-reset.ds-ie6 .ds-textarea-wrapper{padding:10px 10px}#ds-thread #ds-reset.ds-ie6 .ds-textarea-wrapper textarea{width:95%;color:#333;padding:0}#ds-thread #ds-reset.ds-ie6 .ds-post{width:100%;float:left}#ds-thread #ds-reset.ds-ie6 .ds-tab a.ds-current{padding-bottom:5px}#ds-thread #ds-reset.ds-ie6 #ds-ctx-bubble .ds-arrow{bottom:-8px}#ds-thread #ds-reset.ds-ie6 #ds-ctx-bubble .ds-arrow-border{bottom:-9px}#ds-thread.ds-narrow #ds-reset .ds-post-self{padding:8px}#ds-thread.ds-narrow #ds-reset .ds-comment-body,#ds-thread.ds-narrow #ds-reset .ds-replybox{padding-left:38px}#ds-thread.ds-narrow #ds-reset .ds-avatar img{width:30px;height:30px}#ds-thread.ds-narrow #ds-reset .ds-post-button{width:70px}#ds-thread.ds-narrow #ds-reset .ds-post-options{margin-right:70px}#ds-smilies-tooltip{border:1px solid #aaa;position:absolute;width:400px;background-color:#fff;z-index:9999;box-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff;-webkit-border-radius:3px;border-radius:3px}#ds-smilies-tooltip a{cursor:pointer}#ds-smilies-tooltip ul{list-style-type:none;padding:0;margin:0}#ds-smilies-tooltip ul.ds-smilies-tabs{width:119px;position:absolute;top:0;left:0;height:159px;overflow-y:auto;background:#f8f8f8;border-right:1px solid #ccc;border-top-left-radius:3px;border-bottom-left-radius:3px}#ds-smilies-tooltip ul.ds-smilies-tabs li a{color:#999;padding:6px 10px;display:block;border-bottom:1px solid #ccc;background-color:#fff;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));background:-moz-linear-gradient(top, #fff 0, #e9e9e9 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #e9e9e9));background:-webkit-linear-gradient(top, #fff 0, #e9e9e9 100%);background:-ms-linear-gradient(top, #fff 0, #e9e9e9 100%);background:linear-gradient(top, #fff 0, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9',GradientType=0);font-size:12px;line-height:1.3em}#ds-smilies-tooltip ul.ds-smilies-tabs li:first-child a{border-top-left-radius:3px}#ds-smilies-tooltip ul.ds-smilies-tabs li a.ds-current{color:#666;background:#e3e3e3;filter:none;box-shadow:inset 0 0 4px rgba(0,0,0,0.1)}#ds-smilies-tooltip .ds-smilies-container{padding:10px 5px;height:140px;margin-left:125px;overflow-y:auto}#ds-smilies-tooltip .ds-smilies-container li{list-style:none;float:left;width:26px;height:26px;text-align:center;cursor:pointer}#ds-smilies-tooltip .ds-smilies-container li img{visibility:visible}#ds-smilies-tooltip .ds-smilies-container li:hover{position:relative;top:-1px}#ds-wrapper{left:0;right:0;top:20%;bottom:0;width:100%;margin:auto;z-index:9999;position:fixed;_position:absolute;text-align:center;color:#777}#ds-wrapper .ds-dialog,#ds-wrapper #ds-reset.ds-dialog{margin:0 auto;text-align:left;_zoom:1;width:480px;max-width:100%}#ds-wrapper #ds-reset.ds-dialog-bind-more .ds-service-list{width:50%}#ds-wrapper #ds-reset a{cursor:pointer;text-decoration:none;color:#777}#ds-wrapper #ds-reset .ds-dialog-inner{width:100%;position:relative;border:1px solid #aaa;background:#fff url("//static.duoshuo.com/images/bg_sprites.png") 0 -90px repeat-x;text-shadow:0 1px 0 #fff;box-shadow:inset 0 1px 1px #fff,0 2px 6px rgba(0,0,0,0.4)}#ds-wrapper #ds-reset .ds-dialog-inner .ds-unread-list{max-height:300px;overflow-y:auto}#ds-wrapper #ds-reset .ds-control-group{margin:18px 0;position:relative;padding-right:80px;max-width:166px}#ds-wrapper #ds-reset .ds-control-group input{color:#777;width:100%;font-size:13px;border:1px solid #ccc;padding:4px 80px 6px 6px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}#ds-wrapper #ds-reset .ds-control-group input:focus{border-color:#08b5fb}#ds-wrapper #ds-reset .ds-control-group label{font-size:13px;color:#ccc;letter-spacing:1px;position:absolute;right:0;top:8px}#ds-wrapper #ds-reset tr{height:45px}#ds-wrapper #ds-reset button{cursor:pointer;color:#555;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(25%, #fff), to(#e6e6e6));background-image:-webkit-linear-gradient(#fff, #fff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #fff, #fff 25%, #e6e6e6);background-image:-ms-linear-gradient(#fff, #fff 25%, #e6e6e6);background-image:linear-gradient(#fff, #fff 25%, #e6e6e6);-webkit-transition:all .15s linear;-moz-transition:all .15s linear;transition:all .15s linear;border:1px solid #aaa;display:inline-block;font-size:15px;height:30px;width:100px;padding:0}#ds-wrapper #ds-reset button:hover{background-position:0 -15px;color:#333}#ds-wrapper #ds-reset button:active{top:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}#ds-wrapper #ds-reset h2{display:block;font-weight:normal;font-size:16px;margin:0 0 15px 0;color:#555}#ds-wrapper #ds-reset .ds-dialog-body{padding:30px 30px 25px;position:relative;overflow:hidden}#ds-wrapper #ds-reset .ds-icons-32{height:32px;margin-bottom:20px;overflow:hidden}#ds-wrapper #ds-reset .ds-icons-32 a{float:left;margin:0 5px 0 0}#ds-wrapper #ds-reset ul li{margin:10px 0}#ds-wrapper #ds-reset .ds-service-list{width:45%;float:left}#ds-wrapper #ds-reset .ds-service-list .ds-more-services{display:none}#ds-wrapper #ds-reset .ds-icon-ok{background-position:0 -203px;width:12px;height:12px}#ds-wrapper #ds-reset .ds-quote{margin:10px 0;padding:6px 10px;background:#f8f8f8;line-height:1.5em;font-size:12px;overflow-y:auto;max-height:180px}#ds-wrapper #ds-reset .ds-textarea-wrapper{border:1px solid #ccc;padding:0 20px 0 0;position:relative;margin:12px 0}#ds-wrapper #ds-reset .ds-textarea-wrapper textarea{width:100%;height:54px;margin:0;resize:none;padding:6px 10px;overflow:auto}#ds-wrapper #ds-reset .ds-textarea-wrapper .ds-hidden-text{top:0;left:10px;right:10px;position:absolute;visibility:hidden;word-wrap:break-word}#ds-wrapper #ds-reset .ds-textarea-wrapper textarea,#ds-wrapper #ds-reset .ds-textarea-wrapper .ds-hidden-text{font-size:13px;line-height:1.5em}#ds-wrapper #ds-reset .ds-actions{position:relative;height:30px}#ds-wrapper #ds-reset .ds-actions button{display:block;position:absolute;top:0;right:0}#ds-wrapper #ds-reset .ds-dialog-close{position:absolute;bottom:13px;right:11px;display:block;width:13px;height:13px;overflow:hidden;background:transparent url("//static.duoshuo.com/images/sprites.png") 0 -163px no-repeat;_background-image:url("//static.duoshuo.com/images/sprites.gif")}#ds-wrapper #ds-reset .ds-dialog-close:hover{background-position:0 -176px}#ds-wrapper #ds-reset .ds-logo{display:inline-block;width:64px;height:21px;margin-right:10px;background:url("//static.duoshuo.com/images/logo.png") 0 0 no-repeat}#ds-wrapper #ds-reset .ds-dialog-footer{clear:both;border-top:1px dotted #ccc;padding:10px 15px 6px}#ds-wrapper #ds-reset .ds-dialog-footer span{color:#999;position:relative;top:-6px}#ds-wrapper #ds-reset .ds-connect{display:none}#ds-wrapper #ds-reset .ds-unread-list li{position:relative;margin:0;padding:8px 0;border-top:1px solid #eee;line-height:1.5em;color:#777}#ds-wrapper #ds-reset .ds-unread-list li a{color:#d32}#ds-wrapper #ds-reset .ds-unread-list li a:hover{color:#e45c4e}#ds-wrapper #ds-reset .ds-unread-list li a[rel~="author"]{color:#777}#ds-wrapper #ds-reset .ds-unread-list li .ds-delete{display:none;position:absolute;right:0;bottom:10px;text-indent:-9999px;width:14px;height:14px;overflow:hidden;background:transparent url("//static.duoshuo.com/images/delete.gif") no-repeat scroll 0 -14px}#ds-wrapper #ds-reset .ds-unread-list li:hover .ds-delete{display:block}#ds-wrapper #ds-reset.ds-touch .ds-unread-list li .ds-delete{display:block}#ds-wrapper.ds-no-transition #ds-reset button{background:url("//static.duoshuo.com/images/bg_sprites.png") repeat-x !important}#ds-wrapper.ds-no-transition #ds-reset button:hover{background-position:0 -30px !important}#ds-wrapper.ds-no-transition #ds-reset.ds-dialog{background-image:url("//static.duoshuo.com/images/black.png")}#ds-wrapper.ds-ie6 #ds-reset{margin-top:0}#ds-wrapper.ds-ie6 #ds-reset .ds-dialog-footer span{top:-3px}#ds-notify{position:fixed;*position:absolute;z-index:9999;max-width:144px;_width:130px;display:block;float:none;padding:8px 12px;background-color:#fff;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.25);border:1px solid #aaa}#ds-notify #ds-reset{line-height:14px}#ds-notify #ds-reset a.ds-logo{width:18px;height:14px;background:transparent url("//static.duoshuo.com/images/sprites.png") 0 -220px no-repeat;_background-image:url("//static.duoshuo.com/images/sprites.gif");position:absolute;display:block;top:8px;left:12px}#ds-notify #ds-reset span.ds-unread-count{font-weight:bold;color:#e32}#ds-notify #ds-reset ul.ds-notify-unread{line-height:150%;display:inline-block;margin:0 0 0 22px;padding:0}#ds-notify #ds-reset ul.ds-notify-unread li a{color:#d32;text-decoration:none}#ds-recent-comments li.ds-comment{list-style-type:none;position:relative !important;margin:0 !important;padding:6px 0 !important;_zoom:1;border-top:1px solid #dcdcdc;word-wrap:break-word;font-size:13px}#ds-recent-comments li.ds-comment a{display:inline}#ds-recent-comments li.ds-comment div{padding:0;margin:0}#ds-recent-comments li.ds-comment .ds-avatar{position:absolute !important;top:6px !important;left:0 !important}#ds-recent-comments li.ds-comment .ds-avatar a{display:block}#ds-recent-comments li.ds-comment .ds-meta{*margin-left:-15px;_margin-left:0}#ds-recent-comments li.ds-comment .ds-time{font-size:10px;color:#999;margin-left:5px}#ds-recent-comments li.ds-comment .ds-thread-title{margin:0 0 4px 0;line-height:13px;font-size:12px;color:#777}#ds-recent-comments li.ds-comment .ds-thread-title a{font-size:12px}#ds-recent-comments li.ds-comment .ds-excerpt{line-height:18px}#ds-recent-comments li.ds-comment.ds-show-avatars{padding-left:38px !important}#ds-recent-visitors .ds-avatar{display:inline;padding:0 !important;margin:4px !important}#ds-login .ds-icons-32 a{float:left;margin:0 5px 0 0}#ds-share #ds-reset.ds-share-aside-left ul,#ds-share #ds-reset.ds-share-aside-right ul,#ds-share #ds-reset.ds-share-inline ul{list-style:none;margin:0;padding:0;*zoom:1}#ds-share #ds-reset.ds-share-aside-left ul:after,#ds-share #ds-reset.ds-share-aside-right ul:after,#ds-share #ds-reset.ds-share-inline ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}#ds-share #ds-reset.ds-share-aside-left ul li,#ds-share #ds-reset.ds-share-aside-right ul li,#ds-share #ds-reset.ds-share-inline ul li{list-style:none;float:left;font-size:14px;padding:7px 0}#ds-share #ds-reset.ds-share-inline{position:relative}#ds-share #ds-reset.ds-share-inline ul li{margin-left:8px}#ds-share #ds-reset.ds-share-inline ul li:first-child{margin-left:0}#ds-share #ds-reset.ds-share-aside-left,#ds-share #ds-reset.ds-share-aside-right{position:fixed;top:50%;z-index:1000;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}#ds-share #ds-reset.ds-share-aside-left{left:0;-webkit-transform:translate(-100%, -50%);-ms-transform:translate(-100%, -50%);-o-transform:translate(-100%, -50%);transform:translate(-100%, -50%)}#ds-share #ds-reset.ds-share-aside-right{right:0;-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);-o-transform:translate(100%, -50%);transform:translate(100%, -50%)}#ds-share #ds-reset .ds-share-aside-toggle{width:28px;padding:23px 2px;background:#e94c4c;color:#fff;position:absolute;top:0;text-align:center;font-size:16px;font-weight:bolder;cursor:pointer}#ds-share #ds-reset.ds-share-aside-left .ds-share-aside-toggle{right:-32px;border-top-right-radius:3px;border-bottom-right-radius:3px}#ds-share #ds-reset.ds-share-aside-left .ds-share-icons{border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}#ds-share #ds-reset.ds-share-aside-right .ds-share-aside-toggle{left:-32px;border-top-left-radius:3px;border-bottom-left-radius:3px}#ds-share #ds-reset.ds-share-aside-right .ds-share-icons{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}#ds-share #ds-reset.slide-to-left{-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-o-transform:translate(0, -50%);transform:translate(0, -50%)}#ds-share #ds-reset.slide-to-right{-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-o-transform:translate(0, -50%);transform:translate(0, -50%)}#ds-share #ds-reset .ds-share-icons-32 .ds-weibo,#ds-share #ds-reset .ds-share-icons-32 .ds-sohu,#ds-share #ds-reset .ds-share-icons-32 .ds-renren,#ds-share #ds-reset .ds-share-icons-32 .ds-netease,#ds-share #ds-reset .ds-share-icons-32 .ds-qqt,#ds-share #ds-reset .ds-share-icons-32 .ds-kaixin,#ds-share #ds-reset .ds-share-icons-32 .ds-douban,#ds-share #ds-reset .ds-share-icons-32 .ds-msn,#ds-share #ds-reset .ds-share-icons-32 .ds-qzone,#ds-share #ds-reset .ds-share-icons-32 .ds-duoshuo,#ds-share #ds-reset .ds-share-icons-32 .ds-360,#ds-share #ds-reset .ds-share-icons-32 .ds-alipay,#ds-share #ds-reset .ds-share-icons-32 .ds-qq,#ds-share #ds-reset .ds-share-icons-32 .ds-baidu,#ds-share #ds-reset .ds-share-icons-32 .ds-taobao,#ds-share #ds-reset .ds-share-icons-32 .ds-google,#ds-share #ds-reset .ds-share-icons-32 .ds-more,#ds-share #ds-reset .ds-share-icons-32 .ds-wechat,#ds-share #ds-reset .ds-share-icons-32 .ds-diandian,#ds-share #ds-reset .ds-share-icons-32 .ds-huaban,#ds-share #ds-reset .ds-share-icons-32 .ds-duitang,#ds-share #ds-reset .ds-share-icons-32 .ds-youdao,#ds-share #ds-reset .ds-share-icons-32 .ds-pengyou,#ds-share #ds-reset .ds-share-icons-32 .ds-facebook,#ds-share #ds-reset .ds-share-icons-32 .ds-twitter,#ds-share #ds-reset .ds-share-icons-32 .ds-linkedin,#ds-share #ds-reset .ds-share-icons-32 .ds-meilishuo,#ds-share #ds-reset .ds-share-icons-32 .ds-mogujie{height:32px;width:32px;text-decoration:none;color:#999;display:block;overflow:hidden;background-image:url("//static.duoshuo.com/images/service-icons-color-32.png");background-repeat:no-repeat;_background-image:url("//static.duoshuo.com/images/service-icons-color-32.gif")}#ds-share #ds-reset .ds-share-icons-32 .ds-weibo{background-position:0 0}#ds-share #ds-reset .ds-share-icons-32 .ds-sohu{background-position:0 -32px}#ds-share #ds-reset .ds-share-icons-32 .ds-renren{background-position:0 -64px}#ds-share #ds-reset .ds-share-icons-32 .ds-netease{background-position:0 -96px}#ds-share #ds-reset .ds-share-icons-32 .ds-qqt{background-position:0 -128px}#ds-share #ds-reset .ds-share-icons-32 .ds-kaixin{background-position:0 -160px}#ds-share #ds-reset .ds-share-icons-32 .ds-douban{background-position:0 -192px}#ds-share #ds-reset .ds-share-icons-32 .ds-msn{background-position:0 -224px}#ds-share #ds-reset .ds-share-icons-32 .ds-qzone{background-position:0 -256px}#ds-share #ds-reset .ds-share-icons-32 .ds-duoshuo{background-position:0 -288px}#ds-share #ds-reset .ds-share-icons-32 .ds-360{background-position:0 -320px}#ds-share #ds-reset .ds-share-icons-32 .ds-alipay{background-position:0 -352px}#ds-share #ds-reset .ds-share-icons-32 .ds-qq{background-position:0 -384px}#ds-share #ds-reset .ds-share-icons-32 .ds-baidu{background-position:0 -416px}#ds-share #ds-reset .ds-share-icons-32 .ds-taobao{background-position:0 -448px}#ds-share #ds-reset .ds-share-icons-32 .ds-google{background-position:0 -480px}#ds-share #ds-reset .ds-share-icons-32 .ds-more{background-position:0 -512px}#ds-share #ds-reset .ds-share-icons-32 .ds-wechat{background-position:0 -544px}#ds-share #ds-reset .ds-share-icons-32 .ds-diandian{background-position:0 -576px}#ds-share #ds-reset .ds-share-icons-32 .ds-huaban{background-position:0 -608px}#ds-share #ds-reset .ds-share-icons-32 .ds-duitang{background-position:0 -640px}#ds-share #ds-reset .ds-share-icons-32 .ds-youdao{background-position:0 -672px}#ds-share #ds-reset .ds-share-icons-32 .ds-pengyou{background-position:0 -704px}#ds-share #ds-reset .ds-share-icons-32 .ds-facebook{background-position:0 -736px}#ds-share #ds-reset .ds-share-icons-32 .ds-twitter{background-position:0 -768px}#ds-share #ds-reset .ds-share-icons-32 .ds-linkedin{background-position:0 -800px}#ds-share #ds-reset .ds-share-icons-32 .ds-meilishuo{background-position:0 -832px}#ds-share #ds-reset .ds-share-icons-32 .ds-mogujie{background-position:0 -864px}#ds-share #ds-reset .ds-share-icons-32 .flat{background-image:url("//static.duoshuo.com/images/service-icons-color-flat-32.png");_background-image:url("//static.duoshuo.com/images/service-icons-color-flat-32.gif")}#ds-share #ds-reset .ds-share-icons-16 .ds-weibo,#ds-share #ds-reset .ds-share-icons-16 .ds-sohu,#ds-share #ds-reset .ds-share-icons-16 .ds-renren,#ds-share #ds-reset .ds-share-icons-16 .ds-netease,#ds-share #ds-reset .ds-share-icons-16 .ds-qqt,#ds-share #ds-reset .ds-share-icons-16 .ds-kaixin,#ds-share #ds-reset .ds-share-icons-16 .ds-douban,#ds-share #ds-reset .ds-share-icons-16 .ds-msn,#ds-share #ds-reset .ds-share-icons-16 .ds-qzone,#ds-share #ds-reset .ds-share-icons-16 .ds-duoshuo,#ds-share #ds-reset .ds-share-icons-16 .ds-360,#ds-share #ds-reset .ds-share-icons-16 .ds-alipay,#ds-share #ds-reset .ds-share-icons-16 .ds-qq,#ds-share #ds-reset .ds-share-icons-16 .ds-baidu,#ds-share #ds-reset .ds-share-icons-16 .ds-taobao,#ds-share #ds-reset .ds-share-icons-16 .ds-google,#ds-share #ds-reset .ds-share-icons-16 .ds-more,#ds-share #ds-reset .ds-share-icons-16 .ds-wechat,#ds-share #ds-reset .ds-share-icons-16 .ds-diandian,#ds-share #ds-reset .ds-share-icons-16 .ds-huaban,#ds-share #ds-reset .ds-share-icons-16 .ds-duitang,#ds-share #ds-reset .ds-share-icons-16 .ds-youdao,#ds-share #ds-reset .ds-share-icons-16 .ds-pengyou,#ds-share #ds-reset .ds-share-icons-16 .ds-facebook,#ds-share #ds-reset .ds-share-icons-16 .ds-twitter,#ds-share #ds-reset .ds-share-icons-16 .ds-linkedin,#ds-share #ds-reset .ds-share-icons-16 .ds-meilishuo,#ds-share #ds-reset .ds-share-icons-16 .ds-mogujie{line-height:16px;padding-left:20px;text-decoration:none;color:#999;display:block;overflow:hidden;background-image:url("//static.duoshuo.com/images/service-icons-color.png?v=2");background-repeat:no-repeat;_background-image:url("//static.duoshuo.com/images/service-icons-color.gif?v=2")}#ds-share #ds-reset .ds-share-icons-16 .ds-weibo{background-position:0 0}#ds-share #ds-reset .ds-share-icons-16 .ds-sohu{background-position:0 -16px}#ds-share #ds-reset .ds-share-icons-16 .ds-renren{background-position:0 -32px}#ds-share #ds-reset .ds-share-icons-16 .ds-netease{background-position:0 -48px}#ds-share #ds-reset .ds-share-icons-16 .ds-qqt{background-position:0 -64px}#ds-share #ds-reset .ds-share-icons-16 .ds-kaixin{background-position:0 -80px}#ds-share #ds-reset .ds-share-icons-16 .ds-douban{background-position:0 -96px}#ds-share #ds-reset .ds-share-icons-16 .ds-msn{background-position:0 -112px}#ds-share #ds-reset .ds-share-icons-16 .ds-qzone{background-position:0 -128px}#ds-share #ds-reset .ds-share-icons-16 .ds-duoshuo{background-position:0 -144px}#ds-share #ds-reset .ds-share-icons-16 .ds-360{background-position:0 -160px}#ds-share #ds-reset .ds-share-icons-16 .ds-alipay{background-position:0 -176px}#ds-share #ds-reset .ds-share-icons-16 .ds-qq{background-position:0 -192px}#ds-share #ds-reset .ds-share-icons-16 .ds-baidu{background-position:0 -208px}#ds-share #ds-reset .ds-share-icons-16 .ds-taobao{background-position:0 -224px}#ds-share #ds-reset .ds-share-icons-16 .ds-google{background-position:0 -240px}#ds-share #ds-reset .ds-share-icons-16 .ds-more{background-position:0 -256px}#ds-share #ds-reset .ds-share-icons-16 .ds-wechat{background-position:0 -272px}#ds-share #ds-reset .ds-share-icons-16 .ds-diandian{background-position:0 -288px}#ds-share #ds-reset .ds-share-icons-16 .ds-huaban{background-position:0 -304px}#ds-share #ds-reset .ds-share-icons-16 .ds-duitang{background-position:0 -320px}#ds-share #ds-reset .ds-share-icons-16 .ds-youdao{background-position:0 -336px}#ds-share #ds-reset .ds-share-icons-16 .ds-pengyou{background-position:0 -352px}#ds-share #ds-reset .ds-share-icons-16 .ds-facebook{background-position:0 -368px}#ds-share #ds-reset .ds-share-icons-16 .ds-twitter{background-position:0 -384px}#ds-share #ds-reset .ds-share-icons-16 .ds-linkedin{background-position:0 -400px}#ds-share #ds-reset .ds-share-icons-16 .ds-meilishuo{background-position:0 -416px}#ds-share #ds-reset .ds-share-icons-16 .ds-mogujie{background-position:0 -432px}#ds-share #ds-reset .ds-share-icons-16 .flat{background-image:url("//static.duoshuo.com/images/service-icons-color-flat.png");_background-image:url("//static.duoshuo.com/images/service-icons-color-flat.gif")}#ds-share #ds-reset .ds-share-icons{border:1px solid #ccc;background:#fff;border-radius:3px}#ds-share #ds-reset .ds-share-icons .ds-share-icons-inner{width:208px;padding:10px}#ds-share #ds-reset .ds-share-icons .ds-share-icons-inner ul{margin:0;padding:0}#ds-share #ds-reset .ds-share-icons .ds-share-icons-inner ul li{padding-left:8px;margin-left:0;width:92px;font-size:12px}#ds-share #ds-reset .ds-share-icons .ds-share-icons-inner ul li:hover{border-radius:3px;background:#eee}#ds-share #ds-reset .ds-share-icons .ds-share-icons-inner ul li:nth-child(even){margin-left:8px}#ds-share #ds-reset .ds-share-icons .ds-share-icons-footer{text-align:right;line-height:30px;font-size:12px;color:#ccc;background-color:#eee;padding-right:10px}#ds-share #ds-reset .ds-share-icons-more{top:30px;left:0;position:absolute;z-index:1000}#ds-share.ds-no-transition #ds-reset.ds-share-aside-left{left:-229px;transform:none}#ds-share.ds-no-transition #ds-reset.ds-share-aside-right{right:-229px;transform:none}#ds-share .ds-share-aside-left,#ds-share .ds-share-aside-right{width:230px;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+200))}#ds-share .ds-share-aside-left{_left:expression(eval(document.documentElement.scrollLeft-230))}#ds-share .ds-share-aside-right{_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0 - 230))}

具体样式请参照：多说.css

为Hexo博客添加目录

Hexo博客系统的核心支持生成目录（Table of Contents），但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。

修改Landscape主题的ejs文件

我们首先要编辑文章显示页面的模板，也就是themes/landscape/layout/_partial/article.ejs文件。为了将目录生成在正文之前，我们首先在这个文件中找到<%- post.content %>，并在这一行之前加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    引入文件_partial\article.ejs
    <% if (!index && post.toc != false && !is_page()){ %>
        <%- partial('_partial/toc') %>
    <% } %>


    <% if (!index && post.toc){ %>
    <%- partial('post/toc') %>
    <% } %>

<div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
</div>
<style>
    .left-col .switch-btn {
        display: none;
    }
    .left-col .switch-area {
        display: none;
    }
</style>

<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">

<%- js('http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min') %>
<script>
    var toc_button = document.getElementById("tocButton");
    var toc_div = document.getElementById("toc");
    toc_button.onclick=function() {
        if (toc_div.style.display == "none") {
            toc_div.style.display = "block";
            toc_button.value = "隐藏目录";
            document.getElementById("switch-btn").style.display = "none";
            document.getElementById("switch-area").style.display = "none";
        }
        else {
            toc_div.style.display = "none";
            toc_button.value = "显示目录";
            document.getElementById("switch-btn").style.display = "block";
            document.getElementById("switch-area").style.display = "block";
        }
    }

    if ($(".toc").length < 1) {
        $("#toc").css("display","none");
        $("#tocButton").css("display","none");
        $(".switch-btn").css("display","block");
        $(".switch-area").css("display","block");
    }
</script>

<% if (theme.toc_nowrap) { %>
    <style>
        .toc {
            white-space: nowrap;
            overflow-x: hidden;
        }
    </style>

    <script>
        $(document).ready(function() {
            $(".toc li a").mouseover(function() {
                var title = $(this).attr('href');
                $(this).attr("title", title);
            });
        })
    </script>
<% } %>

这段代码的含义清晰明了，if语句中有两个条件，!index是为了不在首页的文章摘要中生成目录，post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足，则创建一个目录的

。

修改完这个文件之后，找一篇包含了多个子标题的文章，并在文章开头的front-matter中添加一句toc: true，在浏览器中访问这篇文章，应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看，我们还需要添加相应的CSS来将其指定为我们想要的样式。

为目录编写CSS文件

要指定目录的样式，我们要修改的文件是themes/landscape/source/css/_partial/article.styl。在文件的最后，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/*toc*/
#tocButton {
    position: fixed;
    border: none;
    left: 220px;
    top: 382px;
    background: none;
    font-size: .9em;
    font-weight: bold;
    color: lightgray;
    cursor: pointer
    font-family: inherit;
    outline: none; /*Remove button border when clicked.*/
    -webkit-appearance: none; /*Remove iOS button style*/
    &:hover {
        color: #88acdb;
    }
}
.toc-article {
  position: fixed;
  width: 230px;
  top: 378px;
  bottom: 1em;
  left: 0;
  margin-left: 0em;
  padding: 6px 10px 10px 50px;
  border-radius: 2.8%;
  overflow: auto;
}
#toc {
    float: right;
    font-size: .9em;
    line-height: 1.65em;
    z-index: 12;
    a {
        color: gray;
        &:visited {
            color: rgba(244, 131, 133, 1);
        } 
        &:hover {
            color: #88acdb;
            text-decoration: none;
        }
    }
    li:hover {
        background: none;
        li:hover {
            background: rgba(158, 188, 226, .21);
        }
    }
    .toc-title {
        font-weight: bold;
        color: gray;
    }
    .toc {
        padding: .7em;
        padding-right: 0;
        li {
            list-style-type: none;
        }
    }
    ol {
        margin-left: 0;
    }
    .toc-child {
        padding-left: 1.25em;
        margin: 4px 0; 
    }
    .toc-link:hover {
        background: rgba(158, 188, 226, .21);
    }
}

.copyright {
    width: 85%;
    max-width: 45em;
    margin: 0 auto;
    padding: .5em 1.8em;
    border: 1px solid lightgray;
    font-size: .93em;
    line-height: 1.6em;
    word-break: break-word;
    background: rgba(255, 255, 255, .4);
    span {
        margin-right: 1em;
        color: #B5B5B5;
        font-weight: bold;
    }
    a {
        color: gray;
        &:hover {
            font-weight: bold;
            color: #a3d2a3;
            text-decoration: underline;
        }
    }
    &:hover p .copy-path::after {
        content: "复制";
    }
    .post-url:hover {
        font-weight: normal;
    }
    .copy-path {
        margin-left: 1em;
        &:hover {
            color: gray;
            cursor: pointer;
        }
    }
}

第一段的toc-article指定了目录整个

的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度，我将其设为了28%，也就是文章正文那个框的宽度的28%，也可以设为一个固定的长度，比如在笔记本电脑上16em就是个不错的宽度，但为了能适配各种不同尺寸的屏幕，最好还是设置为百分比。如果不指定最大宽度，遇到比较长的标题时，生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。

第二段的toc-title指的就是“文章目录”那四个字，这四个字要比其他字大一些，将其字号设为其他字的120%。

第三段的#toc.toc指定了目录列表的一些细节，将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。

再次生成页面，应该已经可以显示比较美观的目录了。

收尾工作

通常情况下我们不需要为每一篇文章都添加目录，因为大部分文章的长度还是相对较短，或者结构简单而没有添加小标题。在我的博客上，需要添加目录的长文还是相对较少的。因为我选择了默认不生成目录，而手动为需要目录的文章添加显式地标记。

下面我就需要编辑每一篇需要添加目录的文章，在文章开头的front-matter中加入toc: true。

插入自定义页面

仿照Hexo官网，了解到单页面的添加方式。

添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

D:\Hexo\Hexos\themes\spfk\layout\plugins.swig

<div id="content-wrap">
  <div class="wrapper">
    <div class="inner">
      <header id="plugin-list-header">
        <h1 id="plugin-list-title">{{ page.title }}</h1>
        <input type="search" id="plugin-search-input" placeholder="Search">
        <div id="plugin-list-count">{{ site.data[page.data].length }} items</div>
      </header>
      <ul id="plugin-list">
        {% for plugin in _.sortBy(site.data[page.data], 'name') %}
          {{ partial('_partial/' + page.partial, {plugin: plugin}) }}
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
<script>window.SEARCH_INDEX = {{ lunr_index(site.data[page.data]) }}</script>
1
2
3
4
5
6
7
8
9
10
11
D:\Hexo\Hexos\themes\spfk\layout\_partial\plugin.swig

<li class="plugin on">
  <a href="{{ plugin.link }}" class="plugin-name" target="_blank">{{ plugin.name }}</a>
  <p class="plugin-desc">{{ plugin.description }}</p>
  <div class="plugin-tag-list">
    {% for tag in plugin.tags %}
      <a href="#{{ tag }}" class="plugin-tag">{{ tag }}</a>
    {% endfor %}
  </div>
</li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
D:\Hexo\Hexos\themes\spfk\layout\_partial\work.swig


<li class="plugin on">
  <div class="plugin-screenshot">
    <img src="{{ plugin.imgs }}" class="plugin-screenshot-img">
    {% if plugin.preview %}
    <a href="{{ plugin.preview }}" class="plugin-preview-link" target="_blank"><i class="fa fa-eye"></i></a>
    {% endif %}
  </div>
  <a href="{{ plugin.link }}" class="plugin-name" target="_blank">{{ plugin.name }}</a>
  <p class="plugin-desc">{{ plugin.description }}</p>
  <div class="plugin-tag-list">
    {% for tag in plugin.tags %}
      <a href="#{{ tag }}" class="plugin-tag">{{ tag }}</a>
    {% endfor %}
  </div>
</li>
1
2
3
4
引入样式文件
D:\Hexo\Hexos\themes\spfk\source\css\style.styl

@import "_partial/plugins"

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
D:\Hexo\Hexos\themes\spfk\layout\_partial\plugin.swig

#plugin-list-header
  clearfix()
  margin: 40px 0

#plugin-list-title
  font-family: font-title
  font-size: 36px
  font-weight: 300
  line-height: 1
  float: left

#plugin-list-count
  color: color-gray
  padding-top: 1em
  text-align: right
  @media mq-normal
    float: right
    line-height: 40px
    padding-top: 0
    padding-right: 15px

#plugin-search-input
  font-size: 16px
  font-family: inherit
  -webkit-appearance: none
  border: 1px solid color-border
  padding: 10px 10px
  width: 100%
  margin-top: 25px
  @media mq-normal
    float: right
    width: 50%
    margin-top: 0

#plugin-list
  margin: 40px -20px
  display: flex
  flex-flow: column
  @media mq-tablet
    flex-flow: row wrap

.plugin
  display: none
  padding: 20px
  @media mq-tablet
    flex: 0 0 50%
  @media mq-normal
    flex: 0 0 (100 / 3)%
  &.on
    display: block

.plugin-name
  font-family: font-title
  font-weight: bold
  color: color-link
  font-size: 20px
  text-decoration: none
  line-height: 1
  &:hover
    color: color-link-hover

.plugin-desc
  line-height: line-height
  margin: 1em 0

.plugin-tag-list
  clearfix()
  line-height: 1.3

.plugin-tag
  color: color-gray
  font-size: 0.9em
  text-decoration: none
  float: left
  margin-right: 10px
  &:hover
    color: color-link-hover
  &:before
    content: "#"

.plugin-screenshot
  margin-bottom: 15px
  position: relative
  padding-top: (10 / 16 * 100)% // 16:10 ratio
  height: 0
  overflow: hidden

.plugin-screenshot-img
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: auto

.plugin-preview-link
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, 0.7)
  color: #fff
  text-align: center
  opacity: 0
  transition: 0.15s
  &:hover
    opacity: 1
    .fa
      opacity: 1
      transform: scale(1)
  .fa
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    margin: auto
    font-size: 50px
    width: @font-size
    height: @font-size
    opacity: 0
    transform: scale(6)
    transition: 0.2s
    transition-delay: 0.15s

自定义挂件

除了默认已提供的挂件外，你还可以自定义自己的小挂件，在hexo\themes\modernist\layout_widget\下，新建自己的ejs文件，如myWidget.ejs，然后在配置文件hexo\themes\modernist_config.yml中配置。

1
2
3
4
5
6
7
widgets:
  - myWidget
用上述方法可以添加新浪微博小挂件。

生成自己的微博组件。
添加hexo\themes\modernist\layout\_widget\weibo.ejs文件。
配置hexo\themes\modernist\_config.yml。

Hexo语法高亮

查阅格式高亮代码，了解到本主题，通过特定的规律进行语法高亮！好像无法识别不同代码的语法高亮！

测试：

通过测试代码，查看后台代码逻辑，了解到可以识别Apache、C++、bash等，还有部分不可识别。那么这个主题用的是什么的语法高亮？

代码code，table-gutter-pre是代码前面的序号。class=”highlight apache”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
J:\Hexo\Hexo\themes\spfk\source\css\_partial\highlight.styl

// https://github.com/luuman/hexo-theme-spfk

code-bgc = #002B36
code-tag = #F92672
code-attr = #A6E22E
code-word = #FFFFFF
code-value = #E6DB74
code-number = #9E90FF
code-keyword = #66D9EF
code-comment = #75715E
code-argument = #FD971F

$code-block
  background: code-bgc
  margin: 10px 0
  padding: 10px 10px
  overflow: auto
  color: #4C4C4C
  line-height: font-size * line-height

参考：
highlight.js：
Demo https://highlightjs.org/static/demo/
Solarized Dark
Atelier Sulphurpool Dark
文档：http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
下载：https://highlightjs.org/download/

首页添加loading效果

themes\spfk\layout\index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" href="css/loading-style.css">
<div id="loader-wrapper">
    <div id="loader"></div>
</div>

<%- partial('_partial/archive', {pagination: 2, index: true}) %>
<!-- loading -->
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">
    $(window).load(function() {                              // makes sure the whole site is loaded
        $('#loader').fadeOut();                              // will first fade out the loading animation
            $('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
        $('body').delay(350).css({'overflow-y':'visible'});
    })
</script>

LoadingBar页面顶部加载进度条

J:\Hexo\Hexo\themes\spfk\layout_partial\head.ejs

1
2
3
4
5
<!-- 加载特效 -->
<% if(theme.animate) { %>
 <script src="/js/pace.js"></script>
<link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
<% } %>

highlight.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
J:\Hexo\Hexo\node_modules\hexo-renderer-marked\node_modules\hexo-util\lib\highlight.js:
   37    }
   38  
   39:   result += '<figure class="highlight' + (data.language ? ' ' + data.language : '') + '"' + 'data-lang="' + (data.language ? ' ' + data.language : '') + '">';
   40  
   41    if (caption) {

J:\Hexo\Hexo\node_modules\hexo-util\lib\highlight.js:
   33    }
   34  
   35:   result += '<figure class="highlight' + (data.language ? ' ' + data.language : '') + '">';
   36  
   37    if (caption){

6 matches across 2 files

  result += '<figure class="highlight' + (data.language ? ' ' + data.language : '') + '"' + 'data-lang="' + (data.language ? ' ' + data.language : '') + '">';

Hexo插件

Swiftype

微搜索

不蒜子

百度统计

CNZZ数据

Font Awesome

百度脑图

ICON图标

Font Awesome

FREE Icon Maker

Icon Font

在线ico

IcoMoon

Disqus

多说评论

QQ邮箱开放平台

七牛云存储

百度分享

AddThis

分享一个方法解决Facebook,Linkedin,Twitter,Google+等SNS平台太多更新不过来的问题。 - 米课问答

GitCafe

Coding.Net

GitHub

本文标题:Hexo插件安装

文章作者:Little Grass

发布时间:2015年12月27日 - 18时29分

最后更新:2016年04月17日 - 06时55分

原始链接:http://smile-leaf-language.github.io/2015/12/27/Hexo-plug/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 同步instagram图片
  2. 2. 分享按钮
  3. 3. 百度统计
  4. 4. 不蒜子
  5. 5. 版权声明
  6. 6. 社交账号图标修改
  7. 7. 站内搜索框
  8. 8. 站点Swiftype搜索框
  9. 9. RSS不显示
  10. 10. sitemap网站地图
  11. 11. 多说评论插件
  12. 12. 为Hexo博客添加目录
  13. 13. 插入自定义页面
  14. 14. 自定义挂件
  15. 15. Hexo语法高亮
  16. 16. 首页添加loading效果
  17. 17. LoadingBar页面顶部加载进度条
  18. 18. highlight.js
  19. 19. Hexo插件
,