Hexo NexT更多功能设置

发表于 分类于 阅读次数： 繁/简： 繁 本文字数： 1.3k 阅读时长 ≈ 5 分钟

本文继续讲述我是怎么持续折腾我的Hexo静态博客的。本文的主要内容有站点分析、站点地图、相关文章、设置圆角与简繁转换。

本文运行环境：

1
2
3
4
npm: 6.14.7
hexo: 4.2.1
hexo-cli: 3.1.0
NexT: 8.0.0-rc.4

注意，对于使用 Hexo 5.0 版本及以上、NexT v8.1.0 版本及以上的读者，默认的自定义配置文件已经从 source/_data/next.yml 变更为 _config.next.yml，请注意迁移与替换。对于日后 NexT 可能会出现的重大更新造成的配置变动，可能会在此处更新，或另外写文章说明。

站点分析

Google Analytics

参考官方指南，首先去Google Analytics建立一个账号，随后就可以得到UA开头的跟踪ID，填入source/_data/next.yml里google_analytics的tracking_id即可。

Baidu Analytics（百度统计）

参考官方指南，首先去百度统计，新增一个网站，复制统计代码中的hm.src = "https://hm.baidu.com/hm.js?[这里的数据]"，填入source/_data/next.yml里baidu_analytics即可。

站点地图与搜索引擎优化

这部分参考了这篇文章与这篇文章。

Google站点地图

首先运行：

1
npm install hexo-generator-sitemap

在_config.yml加入：

_config.yml
1
2
sitemap:
  path: sitemap.xml

随后打开Google网站站长，输入自己的站点之后进行验证（去自己的域名商加一条TXT记录即可）。也可以通过在source/_data/next.yml的google_site_verification写入验证代码后缀来完成验证。等待一段时间验证通过后，提交站点地图即可，后缀为sitemap.xml。

百度站点地图

事先说明，GitHub是不允许百度爬取的，所以如果要用这个功能，你需要把网站换一个地方部署。

如果要做的话，首先运行：

1
npm install hexo-generator-baidu-sitemap

在_config.yml加入：

_config.yml
1
2
baidusitemap:
  path: baidusitemap.xml

随后打开百度资源搜索平台，添加你的网站，你可以采用CNAME验证方式，也可以通过在source/_data/next.yml的baidu_site_verification写入验证代码前缀来完成验证。随后便可以提交站点地图，你也可以安装插件设置自动提交，详情见上面的两篇文章。

必应站点地图

在Google站点地图的基础上，打开Bing网站管理员工具，你可以直接用Google Search Console验证，也可以手动验证，Bing提供了三种验证方式。你也可以把验证代码粘贴到source/_data/next.yml的bing_site_verification处。随后便可以提交站点地图。

配置robots.txt

存放在source目录下。它告诉搜索引擎哪些内容可以被爬取，哪些不可以。内容你可以自行决定，因为每个人的网站结构都有一些不同。

我目前使用的内容如下：

robots.txt
1
2
3
4
5
6
7
8
9
10
11
User-agent: *
Allow: /
Allow: /about/
Allow: /archives/
Allow: /categories/
Allow: /tags/
Disallow: /css/
Disallow: /fonts/
Disallow: /images/
Disallow: /js/
Disallow: /lib/

缩减URL层级

URL层级太深对搜索引擎也不友好。我们可以修改_config.yml里的# URL部分：

_config.yml
1
2
- permalink: :year/:month/:day/:title/
+ permalink: :title/

这样就把原来的四层改为了一层。

注意，这样更改并部署之后，如果你配置了LeanCloud，那么原来的计数和留言会清零。你需要去LeanCloud后台存储菜单的结构化数据里更改一下Comment和Counter的URL，把它们映射到新的URL上面。

相关文章推荐

参考插件主页，首先运行以下命令：

1
npm install hexo-related-popular-posts

随后在source/_data/next.yml中开启related_posts即可。我自己在source/_data/styles.styl做了一些式样调整：

source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
// popular posts header
.popular-posts-header {
    background: #f5f5f5;
    font-family: $font-family-posts;
    font-weight: bold;
    font-size: 110%;
}

// popular posts
.popular-posts {
    font-size: 110%;
}

设置圆角

source/_data/variables.styl
1
2
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;
source/_data/styles.styl
1
2
3
4
5
// sidebar
.sidebar {
    box-shadow: none;
    background: none;
}

设置简繁转换

这部分参考了这篇文章，也参考了这篇文章的一部分。

首先还是下载这份文件，并存入source/js/tw_cn.js。随后在source/_data/next.yml里开启footer: source/_data/footer.njk，并新建此文件。随后将要添加的模板代码添加到这里即可。

在我的使用场景下，我做了一点点小改进，把简繁转换放在了标题下方。要实现这个功能，需要开启的就不是footer.njk，而是postMeta: source/_data/post-meta.njk，并新建此文件。

随后在文件中写入（为了节省空间，也对显示文字做了少许修改）：

source/_data/post-meta.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span class="post-meta-item">
    <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
    </span>
    <span class="post-meta-item-text">
        繁/简：
    </span>
    <a id="translateLink" href="javascript:translatePage();">
        <span class="translate-style">
            繁
        </span>
    </a>
</span>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
    var defaultEncoding = 2; //网站编写字体是否繁体，1-繁体，2-简体
    var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
    var cookieDomain = "https://bambrow.com/"; //Cookie地址, 一定要设定, 通常为你的网址
    var msgToTraditionalChinese = "繁"; //此处可以更改为你想要显示的文字
    var msgToSimplifiedChinese = "简"; //同上，但两处均不建议更改
    var translateButtonId = "translateLink"; //默认互换id
    translateInitilization();
</script>

重新部署页面，就可以看到简繁转换在标题下方了，比在页面底部方便一些。