<译>创建一个Hexo主题-Part3 :评论、分析和小部件

• 原文地址：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 Shortname
disqus_shortname: klugjoTest

评论占位区

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

/* layout/_partial/comments.ejs */

   [...]
    
    <%- partial('comments') %>

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

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

/* layout/_partial/comments.ejs */
<% if(page.comments && theme.disqus_shortname){ %>
    

        
Comments:
        

            
        
    
<% } %>

首先我们检查是否开启了评论功能和设置了 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 */

<% if (theme.disqus_shortname){ %>
    
<% } %>

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

谷歌分析

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

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

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

# Google Analytics Tracking ID
google_analytics: UA-83746351-2

创建一个新的局部文件

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

/* layout/_partial/google-analytic.ejs */
<% if (theme.google_analytics){ %>
    
<% } %>

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

合并到局部文件中

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

/* layout/_partial/head.ejs */

    
    
    
    [...]
    
    <%- partial('google-analytics') %>

大功告成！

小部件

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

配置

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

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

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

# Widgets List
widgets:
  about: This blog is based off the official bootstrap blog template. Checkout the corresponding tutorial at http://www.codeblocq.com

侧边栏代码

作为所有小部件的占位区，我们的侧边栏需要遍历配置文件中的所有小部件并将其渲染出来：
侧边栏的 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){ %>
    

        
About
        
<%- theme.widgets.about %>
    
<% } %>

第二个小部件：“标签”

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

/* layout/_partial/widget/tags.ejs */
<% if (theme.widgets.tags && site.tags.length){ %>
    

        
Tags
        

            <% site.tags.sort('name').each(function(item){ %>
                <%= item.name %>
            <% }); %>
        
    
<% } %>

• site.tags 让我们可以获取所有标签
• site.tags.sort('name) 按照字母表的顺序对所有标签进行排序
• item.path 对应标签归档页的相对 URL
• item.posts.length 表示标签的使用次数
• item.name 是标签的名字

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

最后

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

• 通过参数化