Hexo NexT更多功能设置

本文继续讲述我是怎么持续折腾我的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.ymlgoogle_analyticstracking_id即可。

Baidu Analytics(百度统计)

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

站点地图与搜索引擎优化

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

Google站点地图

首先运行:

1
npm install hexo-generator-sitemap

_config.yml加入:

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

随后打开Google网站站长,输入自己的站点之后进行验证(去自己的域名商加一条TXT记录即可)。也可以通过在source/_data/next.ymlgoogle_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.ymlbaidu_site_verification写入验证代码前缀来完成验证。随后便可以提交站点地图,你也可以安装插件设置自动提交,详情见上面的两篇文章。

必应站点地图

在Google站点地图的基础上,打开Bing网站管理员工具,你可以直接用Google Search Console验证,也可以手动验证,Bing提供了三种验证方式。你也可以把验证代码粘贴到source/_data/next.ymlbing_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>

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