Hexo Next 主题详细配置之二

[Hexo] 言

Next 第三方服务集成

百度统计集成

  • 登录 百度统计,定位到站点的代码获取页面
  • 复制 hm.js? 后面那串统计脚本 id,如下图所示

next-baidu-analytics

  • 更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容
1
baidu_analytics: 'tug63d4s3hlw9lz2hdtfwhtl0rxay'

Next 主题自带的百度统计脚本,默认会将博客本地访问记录也统计进去,例如通过 127.0.0.1 或者 localhost 访问博客

  • 更改 themes/next/layout/_third-party/analytics/baidu-analytics.swig 文件,替换为以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{%- if theme.baidu_analytics %}
<script{{ pjax }}>
var _hmt = _hmt || [];
(function() {
var host = window.location.host;
if (host.indexOf("127.0.0.1") == -1 && host.indexOf("localhost") == -1) {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?{{ theme.baidu_analytics }}";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
}
})();
</script>
{%- endif %}

谷歌统计集成

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
google_analytics:
tracking_id: 'UA-949648306-1'
only_pageview: false

Next 主题自带的谷歌统计脚本,默认会将博客本地访问记录也统计进去,例如通过 127.0.0.1 或者 localhost 访问博客

  • 更改 themes/next/layout/_third-party/analytics/google-analytics.swig 文件,替换为以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{%- if theme.google_analytics.tracking_id %}
{%- if not theme.google_analytics.only_pageview %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ theme.google_analytics.tracking_id }}"></script>
<script{{ pjax }}>
var host = window.location.host;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
if (host.indexOf("127.0.0.1") == -1 && host.indexOf("localhost") == -1) {
gtag('js', new Date());
gtag('config', '{{ theme.google_analytics.tracking_id }}');
}
</script>
{%- endif %}

{%- if theme.google_analytics.only_pageview %}
<script>
function sendPageView() {
if (CONFIG.hostname !== location.hostname) return;
var uid = localStorage.getItem('uid') || (Math.random() + '.' + Math.random());
localStorage.setItem('uid', uid);
navigator.sendBeacon('https://www.google-analytics.com/collect', new URLSearchParams({
v : 1,
tid: '{{ theme.google_analytics.tracking_id }}',
cid: uid,
t : 'pageview',
dp : encodeURIComponent(location.pathname)
}));
}
document.addEventListener('pjax:complete', sendPageView);
sendPageView();
</script>
{%- endif %}
{%- endif %}

百度自动推送集成

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
baidu_push: true

Next 主题自带的百度自动推送脚本,默认在本地访问博客时也会自动推送,例如通过 127.0.0.1 或者 localhost 访问博客

  • 更改 themes/next/layout/_third-party/baidu-push.swig 文件,替换为以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{%- if theme.baidu_push %}
<script{{ pjax }}>
(function() {
var host = window.location.host;
if (host.indexOf("127.0.0.1") == -1 && host.indexOf("localhost") == -1) {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
}
})();
</script>
{%- endif %}

Utterances 评论插件集成

Utterances 的原理和 Gitment、Gitalk 类似,依赖 Github Issue,但是索取的权限更少。首先在 Github 创建新的仓库,同时为 Utterances 在 Github 上授权,让 Utterances 有权限访问新仓库的 Issue。当然也可以单独指定 Utterances 能够访问的仓库,可见其权限控制做的非常好,具体操作这里不再累述。下面给出的是 Next 安装 Utterances 评论插件的方法与相关配置内容。

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 安装插件
$ npm install github:theme-next/hexo-next-utteranc --save

更改 Next 主题的配置文件 themes/next/_config.yml,添加以下内容

1
2
3
4
5
6
7
utteranc:
enable: true
repo: xxxx/xxxx # Github repo such as :TrumanDu/comments
pathname: pathname
theme: github-light # theme: github-light, github-dark, github-dark-orange
cdn: https://utteranc.es/client.js
priority: # If you want to modify priority, please config in **hexo**

配置完成后,每篇文章的底部都会自动新增评论区,效果图如下:

hexo-next-utteranc

Next 使用本地字体

由于 Next 默认是调用 Google Fonts API 来设置字体,正如 Next 官方所说的那样,Google Fonts API 并不稳定。对于这种情况,部分解决方案是 Google Fonts API 指向国内的镜像。但这种方式并不稳定,更好的方式是,将字体下载到站点中,再在站点里使用绝对路径的方式引用字体,相关教程如下:


当字体下载到本地站点后,更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容,由于使用了本地字体,不再使用 Google Fonts 的在线字体,因此统一设置 external: false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
font:
enable: true

# 外链字体库地址,例如 https://fonts.googleapis.com (默认值)
host: https://fonts.googleapis.com

# 全局字体,应用在 body 元素上
global:
external: false
family: Lato
size: 16px

# 站点标题字体
title:
external: false
family:
size:

# 页头标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: false
family: Roboto Slab
size:

# 文章字体
posts:
external: false
family:

# 代码字体,应用于 code 以及代码块
codes:
external: false
family: Roboto Mono