R1V3RJ's Blog
0%

利用GitHub Pages搭建个人Blog（三）: 个性化和功能插件配置

发表于 更新于 分类于 阅读次数： Valine：

本系列文章的主要目的是介绍本博客（Hexo静态博客框架+NexT主题）是怎么配置，搭建与部署在GitHub Pages上的，以及介绍相关的过程中有哪些可能出现的问题以及其解决方案，希望后来人能够少踩坑。本文是本系列的第三篇，主要内容是介绍本博客NexT主题下一些个性化和功能插件的配置。

在这里我只会写我自己调整过的设置，更多主题方面的设置可以参考NexT主题曾经的官方网站和NexT现在的官方网站。

主题风格配置

NexT提供四个不同的风格可选，在 主题配置文件 的Schemes类下将你想开启的风格前的#号删除然后把原来的风格前的#号加上即可。比如开启Mist风格：

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

注意删除#号时不可将空格一起删除，不然会出现错误。

基本个人信息和站点信息配置

由于在本系列文章的第二篇中我们已经设置站点主题为NexT，所以对于 站点配置文件 而言，现在只需要填写title（标题），description（简介或座右铭），author（作者），language（语言），url（网站链接）字段。前三个字段可以随心所欲，language的话英文用户填en，简体中文用户填写zh-CN，繁体中文用户填写zh-TW或zh-hk。url字段则直接复制个人主页网址地址即可，比如本博客链接的url就是https://r1v3rj1s.github.io。
然后我们配置头像和媒体信息。找到一张你想用的头像图片（不要太大，像素500x500以下，.gif最好，其他常见图片格式也可）并存于个人博客源代码根目录/source/image文件夹下（若source文件夹下不存在image文件夹那么手动创建一个即可）。然后打开 主题配置文件 并找到avatar类，然后在url字段中复制刚刚下载的头像图片地址即可（比如r1v3rj1s.github.io/source/image/avatar.gif）。接着找到social类，然后在你想添加的媒体信息前删除#号并将后面的链接修改为你自己的媒体账号地址即可。

开启标签和分类

  1. 打开 主题配置文件 ，将标签（tags）和分类（catagories）前面的#号去掉：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
  2. 然后在个人网站源代码仓库根目录下输入以下命令：
    1
    2
    $ hexo new page "tags"
    $ hexo new page "catagories"
  3. 去source文件夹确认是否生成了tags和categories子文件夹，并且子文件夹中各自有index.md文件
  4. 编辑tags子文件夹的index.md文件的YAML标签信息，内容如下：
    1
    2
    3
    4
    5
    6
    ---
    title: Tags
    type: "tags"
    layout: "tags"
    comments: false
    ---
  5. 编辑categories子文件夹的index.md文件的YAML标签信息，内容如下：
    1
    2
    3
    4
    5
    6
    ---
    title: Categories
    type: "categories"
    layout: "categories"
    comments: false
    ---
    重新部署问题即可解决。

版权信息

打开自己的 主题配置文件 并找到creative_commons类，做如下设置即可开启版权尾注：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: zh-CN

之后写博文的时候如果需要添加版权尾注在YAML标签添加copyright: true字段即可。这篇文章提供了更多自定义版权的方式。

MathJax

打开自己的 主题配置文件 并将math类的enable和per_page字段都填为true。engine填为mathjax，然后cdn处填为https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML即可。per_page字段为true的话若要开启MathJax模式则所有博文YAML标签必须有mathjax: true字段。

LeanCloud阅读计数插件

接着我们可能会希望看到有多少人阅读过我们的文章，这样我们就需要一个阅读计数插件。但是在实际安装的过程中这个插件是最麻烦的，因为它有一个安全漏洞，需要安装一个辅助插件以及在服务器中进行权限管理才能生效。不过好在有很多博文都对安装这个插件有了很详尽的描述，图文并茂。所以在这里我就简单描述一下过程，也不配图了。如果有细节不清楚的地方可以参考这两个人的博文：

简单来说，我们需要：

  1. 在LeanCloud上注册一个账号。国际版或国内版都可以，我注册的国际版，因为国内版注册流程稍微麻烦一点。注册完并登录后进入控制台然后在LeanCloud主面板中再创建一个开发版的应用。应用名字可以随便起。
  2. 创建后进入应用管理界面后点击存储面板的创建Class选项，然后再弹出的对话框中的Class 名称填Counter（此处需严格一致），然后ACL权限选择无限制。最后点击创建Class按钮。
  3. 接下来在设置面板的安全域名选项处的Web 安全域名栏目下填写自己的个人主页地址。协议和域名需要完全一致。注意不要把https打成http。
  4. 然后进入云引擎面板，左侧点击部署选项，再点击页面的在线编辑按钮，打开后在在线编辑栏点击创建函数。
  5. 在弹出窗口中选择Hook类型，然后在AV.Cloud.后的选项栏中选择beforeUpdate，('后选择刚才创建的Counter类。最后在空白代码栏处复制以下代码后点击保存：
    1
    2
    3
    4
    5
    6
    7
    8
    var query = new AV.Query("Counter");
    if (request.object.updatedKeys.indexOf('time') !== -1) {
        return query.get(request.object.id).then(function (obj) {
            if (obj.get("time") + 1 !== request.object.get("time")) {
                throw new AV.Cloud.Error('Invalid update!');
            }
        })
    }
  6. 保存成功后，在在线编辑栏中点击部署选项进行部署，待部署日志出现成功部署信息后即可关闭。
  7. 此时回到设置面板，点击应用 Key选项，记录下你的App ID和App Key，打开 主题配置文件 ，在leancloud_visitors类中的enable字段填为true，app_id和app_key填你刚才记录下的App ID和App Key。然后security字段填true，betterPerformance填true或者false都行，填true的话在网站中阅读次数加载会更快一些，不过会不够准确（直接显示访客人数为之前显示过的人数+1）。 主题配置文件 中代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    leancloud_visitors:
      enable: true
      app_id: ${LEANCLOUD_VISITORS_ID}
      app_key: ${LEANCLOUD_VISITORS_KEY}
      # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
      # If you don't care about security in leancloud counter and just want to use it directly
      # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
      security: true
      betterPerformance: false
  8. 打开 站点配置文件 ，在Extensions类里的Plugins子类加入如下字段，其中app_id和app_key依旧填写为刚才记录下的App ID和App Key，username和password字段留空：
    1
    2
    3
    4
    5
    6
    7
    8
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    leancloud_counter_security:
      enable_sync: true
      app_id: ${LEANCLOUD_VISITORS_ID}
      app_key: ${LEANCLOUD_VISITORS_KEY}
      username: 
      password:
  9. 打开终端并切换至根目录地址，输入以下命令以安装hexo-leancloud-counter-security插件，并注册一个安全用户的账号：
    1
    2
    3
    # 确认自己的终端在博客源代码仓库根目录下
    $ npm install hexo-leancloud-counter-security --save
    $ hexo lc-counter register USER_ID PASSWORD
  10. 打开 站点配置文件 ，在刚才的leancloud_counter_security子类的username和password字段下输入你刚才注册hexo-leancloud-counter-security插件时的账号和密码。你也可以选择不输入，如果不输入的话每次部署过程中程序都会要求你输入。所以这时候你 站点配置文件 中的leancloud_counter_security子类会有如下格式：
    1
    2
    3
    4
    5
    6
    7
    8
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    leancloud_counter_security:
      enable_sync: true
      app_id: ${LEANCLOUD_VISITORS_ID}
      app_key: ${LEANCLOUD_VISITORS_KEY}
      username: ${USER_ID}
      password: ${PASSWORD}
  11. 在 站点配置文件 找到Deployment类的deploy字段并在底下添加如下信息：
    1
    - type: leancloud_counter_security_sync
    因为之前我们有git的deploy信息，所以整个deploy字段会看起来像这样：
    1
    2
    3
    4
    5
    6
    7
    8
    deploy:
    -
      type: git
      repo: https://github.com/本人GitHub用户名/GitHub个人博客地址.git
      branch: master
      message: "一些信息"
    - 
      type: leancloud_counter_security_sync
  12. 重新登录LeanCloud控制台，进入应用管理界面后点击存储面板的_User选项，确认是否添加了我们刚才的用户（username字段是否一致）。如果有，点击Counter选项，点击其他选项卡中的权限设置选项。在弹出对话框中点击add_fields类，点击指定用户选项，输入我们刚才创建的用户名，点击添加。成功添加后我们会看到add_fileds底下会多一行0 Roles, 1 Users。
  13. 然后在这个对话框中点击create类并指定添加同样的用户。成功添加后我们会看到create底下同样会多一行0 Roles, 1 Users。
  14. 最后我们在这个对话框中点击delete类，同样点击指定用户选项，但这次不添加任何用户名，直接保存关闭即可。

至此权限已设置完成，LeanCloud阅读计数插件设置完成，重新部署博客即可开启显示浏览量的功能。

Valine评论插件

和LeanCloud阅读计数插件类似，你需要在LeanCloud主面板中再创建一个开发版的应用，应用名字可以随便起。然后在设置面板的安全域名选项处的Web 安全域名栏目下填写自己的个人主页地址。协议和域名需要完全一致。注意不要把https打成http。保存后点击应用 Key选项，记录下你的App ID和App Key，打开 主题配置文件 ，在valine类的enable字段填为true，appid和appkey字段填你刚才记录下的App ID和App Key。然后visitor字段填false，不然在有阅读计数插件的环境下可能会导致bug。然后就可以重新部署源代码测试是否成功开启。 主题配置文件 中代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid: ${LEANCLOUD_CRITIQUE_ID}
  appkey: ${LEANCLOUD_CRITIQUE_KEY}
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Make your comments here. # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page

Google Analytics

读者分析插件我选的是Google Analytics，你需要注册一个Google Analytics的应用，然后再Google Analytics的管理面板上的媒体资源选项卡的媒体资源设置里把媒体资源名称改成你自己的博客名，默认网址输入为你的博客地址，注意http选项要改成https。另外数据视图选项卡的数据视图设置里的http选项可能也需要改成https。然后回到媒体资源设置选项，记录下你的跟踪 ID，打开自己的 主题配置文件 并将google_analytics类里的tracking_id字段里的值改为自己的跟踪 ID号码，格式应该是UA-XXXXXXXXX-X。localhost_ignored字段填为true。重新部署后打开个人网站主页，点击右键选择显示网站源代码（以Chrome浏览器为例），并在源代码页面寻找gtag关键字，如果有的话应该就说明插件已经成功开启。

可能遇到的问题

  • <!-- more -->不能起到分割的作用，你需要检查你的分割字段写的是<!-- more -->（more左右各有一个空格）还是<!--more-->（more左右无空格）。
  • 开启了mathjax插件但是公式不显示，可能是cdn有问题，常见问题是前缀没有加https://，或者是网址过期。只需要把cdn里的地址复制到浏览器中打开看是否有显示就可以判断是否是cdn地址出错。
  • 无法安装hexo-leancloud-counter-security插件可能有两个原因，一是 站点配置文件 没有配置应用信息，也有可能是因为没有安装babel-runtime包，如果是后者的话需要在安装命令前先安装babel-runtime:
    1
    2
    3
    # 确认自己的终端在博客源代码仓库根目录下
    $ npm install babel-runtime@6
    $ npm install hexo-leancloud-counter-security --save
  • 如果版权信息尾注显示的本文链接有误，很可能是 站点配置文件 中的url字段设置有误。
  • 如果计数插件在LeanCloud服务器中报“{“code”:403,”message”:”Access denied by api domain white list.The request origin header is ‘null’.”}或Code 403: 访问被api域名白名单拒绝，请检查你的安全域名设置.的错，你需要检查LeanCloud控制台设置面板的安全域名选项处的Web 安全域名栏目下自己的填写的个人主页地址协议和域名是否与自己的个人主页地址完全一致。比如把https打成了http。
  • 已经开启了Google Analytics插件，并打开个人博客页面，但是Google Analytics实时用户没有显示。可能是浏览器开启了防跟踪插件，比如DuckDuckGo。也可能是默认网址填写错误。比如网站后多加了/或者是http选项没有改成https。Chrome用户可以安装Google Tag Assistant插件进行Debug。
  • 对于.yml文件而言，处于同级的字段缩进量需要完全一致。 站点配置文件 和 主题配置文件 都用双空格作为缩进，所以当有无法理解的问题发生时检查一下缩进量也许会有意想不到的事情发生。

相关链接