Hexo Next 主题详细配置之二

发表于 阅读次数： 评论数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

前言

官方教程

版本说明

本文使用各软件的版本如下：

软件版本
hexo3.9.0
hexo-cli2.0.0
next7.8

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