• 原文地址：Create an Hexo Theme - Part 3: Comments, Analytics and Widgets
  • 原文作者：Jonathan Klughertz

在这个系列教程中，你将学习怎么从零开始制作一个 Hexo 主题。
在 part1 和 part2 中，我们已经创建了博客的所有页面。在这篇文章中，我们将给博客添加 Disqus 评论系统，实现 谷歌分析以及完成侧边栏的小部件。

其它文章的链接：

  • 创建一个Hexo主题-Part1:首页
  • 创建一个Hexo主题-Part2:其他页面
  • 创建一个Hexo主题-Part3:评论、分析和小部件

Disqus 评论系统

我已经写了一篇关于如何在 Hexo 中使用 Disqus 评论系统的文章。请前往查看以了解更多信息，这里我只简单介绍一下怎么使用：

第一步是获取 Disqus UID 来测试评论功能，可以利用你的账号在这里获取：

接下来需要完成三个部分：主题文件的 disqus 配置、评论占位区、Disqus 脚本。事不宜迟，我们开始吧。

主题配置

我们希望 Disqus UID 是可以配置的，因此给主题的 config.yml 文件添加一个条目：

# Disqus Comments Shortnamedisqus_shortname: klugjoTest

评论占位区

接下来我们给页面和文章详情页添加评论系统。和之前一样，创建一个局部视图文件 layout/_partial/comments.ejs，之后打开 layout/_partial/article-full.ejs 文件，把它插入到末尾。

/* layout/_partial/comments.ejs */<div class="blog-post">   [...]    <!-- Comments -->    <%- partial('comments') %></div>

Disqus 需要 ID 为 disqus_thread 的 div 元素，因此我们这里复制官方文档提供的代码：

<div id="disqus_thread">    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>

将上面的代码合并到 comments 文件中：

/* layout/_partial/comments.ejs */<% if(page.comments && theme.disqus_shortname){ %>    <div class="blog-post-comments">        <h3>Comments:</h3>        <div id="disqus_thread">            <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>        </div>    </div><% } %>

首先我们检查是否开启了评论功能和设置了 disqus UID，之后将 Disqus 标记代码放到容器里。
以下是容器的 CSS 样式代码：

/* source/css/blog.css */.blog-post-comments {    margin-top: 50px;}

Disqus 脚本

在测试之前，我们还需要添加 Disqus 的脚本，这是一切生效的关键。将它和其他脚本一起放在 layout/_partial/after-footer.ejs 的末尾

/* layout/_partial/after-footer.ejs */<!-- Disqus Comments --><% if (theme.disqus_shortname){ %>    <script type="text/javascript">        var disqus_shortname = '<%= theme.disqus_shortname %>';        (function(){            var dsq = document.createElement('script');            dsq.type = 'text/javascript';            dsq.async = true;            dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);        }());    </script><% } %>

脚本来自于官方文档,并且我们在这里将 Disqus UID 参数化。
接着就可以测试一切是否正常工作了。

谷歌分析

谷歌分析的实现和 Disqus 差不多，所以这里我只简单提一下。具体步骤可以看我的另一篇博客。

在主题配置文件中设置 tracking ID

从你的账号中获取谷歌分析的 tracking ID，之后再配置文件中新增条目。

# Google Analytics Tracking IDgoogle_analytics: UA-83746351-2

创建一个新的局部文件

创建一个新的局部视图文件 layout/_partial/google-analytic.ejs

/* layout/_partial/google-analytic.ejs */<% if (theme.google_analytics){ %>    <script>        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');        ga('create', '<%= theme.google_analytics %>', 'auto');        ga('send', 'pageview');    </script><% } %>

这是从谷歌分析跟踪代码复制粘贴过来的，其中包括一个参数化的 ID。

合并到局部文件中

我们希望可以在任何页面中获取到跟踪代码，而页面上又没有合适的位置来存放，因此我们选择把它添加到 <head></head> 的末尾：

/* layout/_partial/head.ejs */<head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    [...]    <!-- Google Analytics -->    <%- partial('google-analytics') %></head>

大功告成！

小部件

此时，sidebar.ejs 文件中的小部件还只是一堆采用硬编码的静态 HTML。我们来修复这个问题。

配置

先从配置开始吧。
我们准备创建两个小部件，一个是“关于”，一个是“标签”。相关配置如果以 JavaScript 对象的形式来书写，大概是下面这样：

{    widgets: {        about: "Here goes the about text",        tags: true // Or any additional configuration the widget needs    }}

这是它在我们的主题配置文件中转换成 YML 的形式：

# Widgets Listwidgets:  about: This blog is based off the official bootstrap blog template. Checkout the corresponding tutorial at <a href="http://www.codeblocq.com">http://www.codeblocq.com</a  tags: true

侧边栏代码

作为所有小部件的占位区，我们的侧边栏需要遍历配置文件中的所有小部件并将其渲染出来：
侧边栏的 EJS 模板如下：

/* layout/_partial/sidebar.ejs */<% for(var widget in theme.widgets){ %>    <%- partial('widget/' + widget) %><% }; %>

第一个小部件：“关于”

新建一个局部文件 layout/_partial/widget/about.ejs，之后在里面创建第一个小部件。
代码是从原先的 bootstrap 模板中复制过来的，文本则来自于配置文件。

/* layout/_partial/widget/about.ejs */<% if(theme.widgets.about){ %>    <div class="sidebar-module sidebar-module-inset">        <h4>About</h4>        <p><%- theme.widgets.about %></p>    </div><% } %>

第二个小部件：“标签”

我们给这个部件做一些略微高级的改动。设置一个段落用于存放博客中用过的所有标签。它们互相之间用空格隔开，并且字体大小与标签使用次数成比例。
这是 layout/_partial/widget/tags.ejs 的代码：

/* layout/_partial/widget/tags.ejs */<% if (theme.widgets.tags && site.tags.length){ %>    <div class="sidebar-module">        <h4>Tags</h4>        <p>            <% site.tags.sort('name').each(function(item){ %>                <a href="<%- config.root %><%- item.path %>" style="font-size: <%- Math.min(item.posts.length * 2 + 13, 30) %>px"><%= item.name %></a>            <% }); %>        </p>    </div><% } %>
  • site.tags 让我们可以获取所有标签
  • site.tags.sort('name) 按照字母表的顺序对所有标签进行排序
  • item.path 对应标签归档页的相对 URL
  • item.posts.length 表示标签的使用次数
  • item.name 是标签的名字

我这里选择 13+（标签使用次数 *2）px 作为字体大小的计算方式，并且最大不超过 30px。当然，你可以根据自己的喜好来。

最后

教程到这里就结束了，我希望你从中可以学到不少有趣的东西。
如果你想进一步打磨主题，可以考虑下面这些事情：

  • 通过参数化 <title> 和所有 Open Graph 属性完善 head 部分
  • 添加更多小部件，例如搜索小部件 或者是一个 近期文章小部件
  • 将你的主题提交到 Hexo官方主题站点
  • 查看我的其他 Hexo 教程来改进你的博客
  • 查看hexo-theme-bootstrap-blog,这个主题同样是基于 bootstrap 模板实现的
  • 从零开始打造你自己的主题

感谢阅读！欢迎在评论区留下你的评论、指正和意见。