上一篇里介绍了怎么更换博客的主题,这篇介绍如何在细节上完善这个主题,以及如何添加多说评论

完善细节

hexo的博客主题使用的是stylus技术,类似于less和sass吧.最后的文章都只有一个css,就是style.css,它在E:hexo/public/css/style.css,不过这个是通过hexo generate编译过后得到的样式表,要修改的话,需要到主题包里去修改:主题包里样式在这里:E:\hexo\themes\yilia\source\css
然后就找到对应的样式,改改就可以了,具体怎么找,这个是stylus的技术.一般来说都很简单,都是小地方改动,都能找到的.

举个栗子,这个主题本来所有的字体都是宋体,我希望把它换成雅黑,那我可以找到它:

E:\hexo\themes\yilia\source\css\style.styl:

修改body的字体:

body
  font-family:"Microsoft Yahei","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  ...

这样,文章的字体就会变成雅黑

又比如,它主题里的行内代码片段只有这样的code,但是我希望有一种这样的code,但是我觉得倾斜是不必要的,那么我就可以把markdown里面本来的倾斜体定义成code这种行内代码段:

E:\hexo\themes\yilia\source\css\_partial\article.styl:

.article-entry{
  ...
  em {
    font-style: normal;
    background: #fbedeb;
    color: #e2678f;
    padding: 0 5px;
    margin: 0 2px;
    font-size: 0.9em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
  ...
}

这样我就把原来主题中的斜体改成了我喜欢的code这样.

添加多说评论

登陆多说以后,访问这里获取到通用代码,我的是这样的:

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    var duoshuoQuery = {short_name:"codebunny"};
    (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 -->

这段代码可以在这里找到,其中的codebunny是它叫你填信息的时候填的多说域名

注意这地方有个short_name:"codebunny"

然后找到主题里对应放置评论部分的视图模板,不同的主题所在的位置也不同,我的在这里:

E:\hexo\themes\yilia\layout\_partial\article.ejs

找到原来的评论部分:

<% if (!index && post.comments && config.disqus_shortname){ %>
    ...
<% } %>

替换为:

<% if (!index && post.comments && config.duoshuo_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:"codebunny"};
    (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>
<% } %>

也就是说,把前面得到的通用代码复制到<section id="comments"></section>里面去,然后把data-thread-key data-title data-url 如上替换就好了.

然后找到主题的_config.yml,添加一个变量:

duoshuo_shortname: codebunny

这里的codebunny就是刚才的short_name,也就是多说域名.