南琴浪博客

Hexo 搬迁记(二) 插件篇

12/10/2017

这一篇来介绍下本站正在用的 Hexo 插件。分为 Hexo 官网的插件和我自己写入主题的插件两部分。

官网的插件

本站 npm 安装的插件不多,包含下列几项:

sitemap

这是一款用于生成站点地图 sitemap 的插件

npm install --save hexo-generator-sitemap
sitemap:
  path: sitemap.xml

feed

这是一款用于生成 RSS 订阅文件的插件

npm install --save hexo-generator-feed
# 我的设置是不显示任何正文
feed:
  type: atom
  path: atom.xml
  content: false
  content_limit: 0

word-count

这是一款文章字数统计的插件,效果可以参见本站,样式可以自己根据 CSS 定义

npm install --save hexo-wordcount

安装完成后,在你的 article.ejs 中插入例如:

<div class="article-wordcount">
  本文总计 <%= wordcount(post.content) %> 字,预计阅读 <%= min2read(post.content, {cn: 100, en: 50}) %> 分钟
</div>

写入主题的插件

接下来所讲的插件,手动写进 ejs 就没毛病了。因为我不怎么需要变量,所以都直接写进了 layout,而不是调用 config.yml。

Follow Me

站点侧边栏的 Follow Me,我使用了 FontAwesome 来引入图标,这里只介绍 layout 部分,关于 css 部分我会在之后的 主题篇 进行介绍。

<div class="widget-wrap">
<h3 class="widget-title">Follow Me</h3>
  <div class="widget social">
    <a class="telegram" aria-hidden="true"  href="https://t.me/SometimesNaiveReporter" title="Telegram" target="_blank"></a>
    <a class="twitter" aria-hidden="true"  href="https://twitter.com/SinderyMinami" title="Twitter" target="_blank"></a>
    <a class="gplus" aria-hidden="true"  href="https://plus.google.com/+SinderyMinami" title="Google+" target="_blank"></a>
    <a class="github" aria-hidden="true"  href="https://github.com/nanqinlang" title="Github" target="_blank"></a>
  </div>
</div>

分类目录

<div class="widget-wrap">
 <h3 class="widget-title">Category</h3>
  <div class="widget catagory">
    <%- list_categories({show_count: theme.show_count}) %>
  </div>
</div>

友情链接

<div class="widget-wrap">
 <h3 class="widget-title">Links</h3>
  <div class="widget friendlink">
    <a href="https://liyuans.com" target="_blank">Leonn的博客</a><br/>
    <a href="https://www.sabia.cc" target="_blank">Sabia科学研究所</a><br/>
    ...
  </div>
</div>

评论系统

本博客采用 gitment 作为评论系统。我在原作者的样式上进行了修改,并使用了自建验证服务器。我修改后的可以看 这里。要使用 gitment,在你的 article.ejs 中引入类似以下:

<% if (!index){ %>
<% if (post.comments){ %>
 <!-- gitment begin -->
   <div class="gitment-render" id="gitment-render">
     <script src="/dependences/gitment/dist/gitment.browser.js"></script>
     <script>
       var gitment = new Gitment({
       //id: 'location.href',//
       owner: 'nanqinlang',
       repo: 'sometimesnaive.org',
       oauth: {
       client_id: 'b0612de652324ab34d7e',
       client_secret: 'c2bd4df3c947097d2eee5f16f120d50458314dd0',
       }
       })
       gitment.render('gitment-render')
     </script>
   </div>
 <!-- gitment end -->
<% } %>
<% } %>

Google Analytics

依旧是在 article.ejs 中引入,其中 UA-111111111-1 替换为你自己的 Google Analytics 识别码。

<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-111111111-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>