「译」创建一个Hexo主题 - Part3：评论、分析和侧边栏小部件
2023-10-16 00:45:57
在这个系列教程的第三部分中，我们将为博客添加 Disqus 评论系统、实现 谷歌分析并完成侧边栏小部件。在第一部分和第二部分中，我们已经创建了博客的所有页面。现在，让我们开始添加一些交互功能和定制选项，使博客更具互动性和实用性。
一、添加 Disqus 评论系统
Disqus 是一个流行的评论系统，可以轻松集成到 Hexo 博客中。它允许读者在文章底部留下评论，并支持嵌套回复、表情符号和 Markdown 格式。
- 注册 Disqus 账户
首先，你需要注册一个 Disqus 账户。在 Disqus 官网上，点击“注册”按钮，然后按照提示填写你的姓名、电子邮件和密码。
- 创建 Disqus 论坛
注册成功后，你就可以创建一个 Disqus 论坛。在 Disqus 仪表盘中，点击“创建论坛”按钮，然后按照提示填写论坛的名称和。
- 将 Disqus 代码添加到 Hexo 主题
在 Hexo 主题的 _config.yml 文件中，添加以下代码：
disqus_shortname: '你的Disqus论坛的简称'
将 your-disqus-shortname 替换为你 Disqus 论坛的简称。
- 在文章页面添加 Disqus 评论框
在 Hexo 文章页面的底部，添加以下代码：
<div id="disqus_thread"></div>
<script>
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://你的Disqus论坛的简称.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
将 your-disqus-shortname 替换为你 Disqus 论坛的简称。
- 保存并预览
保存并预览文章页面，你会看到 Disqus 评论框已经添加到了文章底部。
二、实现 谷歌分析
谷歌分析是一个免费的网络分析工具，可以帮助你跟踪博客的流量和用户行为。通过谷歌分析，你可以了解到有多少人访问了你的博客、他们来自哪里、他们在博客上停留了多长时间等等。
- 注册 谷歌分析 账户
首先，你需要注册一个 谷歌分析 账户。在 谷歌分析 官网上，点击“注册”按钮，然后按照提示填写你的网站名称、网址和行业。
- 创建 谷歌分析 属性
注册成功后，你就可以创建一个 谷歌分析 属性。在 谷歌分析 仪表盘中，点击“创建属性”按钮，然后按照提示填写属性的名称和网站网址。
- 获取 谷歌分析 代码
在 谷歌分析 属性中，点击“跟踪信息”标签，然后点击“跟踪代码”部分。你会看到一段代码，将这段代码复制下来。
- 将 谷歌分析 代码添加到 Hexo 主题
在 Hexo 主题的 _config.yml 文件中，添加以下代码：
google_analytics: '你的谷歌分析跟踪代码'
将 your-google-analytics-tracking-code 替换为你 谷歌分析 的跟踪代码。
- 保存并预览
保存并预览博客的任何页面，你会看到 谷歌分析 代码已经添加到页面的底部。
三、完成侧边栏小部件
侧边栏小部件可以为博客添加更多功能和信息，例如显示最新文章、热门文章、标签云等。
- 在 Hexo 主题中创建侧边栏小部件文件
在 Hexo 主题的 layout 目录下，创建一个名为 _sidebar.swig 的文件。
- 在侧边栏小部件文件中添加内容
在侧边栏小部件文件中，你可以添加任何你想要在侧边栏显示的内容。例如，你可以添加以下内容：
<ul>
{% for post in site.posts limit:5 %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
这段代码将显示博客的最新 5 篇文章。
- 在 Hexo 布局文件中包含侧边栏小部件文件
在 Hexo 布局文件的 body 标签内，添加以下代码：
{% include '_sidebar.swig' %}
这段代码将包含侧边栏小部件文件，使侧边栏小部件在博客的
