- 原文地址:Create an Hexo Theme - Part 3: Comments, Analytics and Widgets
- 原文作者:Jonathan Klughertz
在这个系列教程中,你将学习怎么从零开始制作一个 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 模板实现的
- 从零开始打造你自己的主题
感谢阅读!欢迎在评论区留下你的评论、指正和意见。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。