Focus on FE learning

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

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

其它文章的链接：

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 */
<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 ID
google_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 List
widgets:
  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 模板实现的
从零开始打造你自己的主题

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

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