github page博客+hexo next主题+gitment评论

发表于 | 分类于

github page安装

github创建仓库，git项目格式
https://github.com/jianzzz/jianzzz.github.com.git

安装hexo（内网有自行开发的npm工具的话则使用这些npm工具）

1
npm install -g hexo-cli

初始化

1
2
3
4
5
mkdir your_blog_dir
cd your_blog_dir
hexo init
(内网环境到npm install时网络出错的话，改用这些npm工具)
(your-npm install)

修改_config.yml

  • 网站设置

    1
    2
    3
    4
    5
    6
    7
    # Site
    title: 蓝色步行者
    subtitle: 每个人都有自己的梦想
    description: 如果我后退的话，我曾重视的誓言和约定就会全部消失，然后，再也不会回来这个地方了
    author: zoro
    language: zh-Hans
    timezone: Asia/Shanghai

  • 版本库设置

    1
    2
    3
    4
    5
    # Deployment
    deploy:
      type: git
      repo: git@github.com:jianzzz/jianzzz.github.com.git
      branch: master

本地发布

1
hexo server

内网环境git添加代理

1
2
git config --global http.proxy http://your-proxy-domain:port
git config --global https.proxy http://your-proxy-domain:port

下载部署器，部署到网上

1
2
npm install hexo-deployer-git --save
hexo deploy

访问
jianzzz.github.io

hexo next主题

更换主题
参考 http://theme-next.iissnan.com/getting-started.html ，https://hexo.io/zh-cn/docs/asset-folders.html
theme: hexo-theme-next-5.1.2
主题配置文件：next-5.1.2/_config.yml
站点配置文件：_config.yml

hexo next配置分离

参考https://github.com/iissnan/hexo-theme-next/issues/328
建立source/_data/next.yml，将主题配置文件所有修改都填写到source/_data/next.yml
缺陷：在主题的 _config.yml 里面打开的选项，无法在 source/_data/next.yml 中关闭。每次修改 _next.yml 需要重启 hexo server 才能生效。

gitment评论

获得github的授权

OAuth application注册接入

上图中圈画出来的是回调地址，填写博客的域名。

next主题下添加Gitment

  • github创建评论用的仓库
    https://github.com/jianzzz/blog-comment

  • 主题配置文件themes/next/_config.yml或source/_data/next.yml添加

    1
    2
    3
    4
    5
    6
    7
    8
    gitment:
      enable: true
      github_id: jianzzz
      repo: blog-comment
      client_id: xxx
      client_secret: xxxxxx
      browser_js_path: /js/gitment.browser.js
      lazy: true

browser_js_path字段后面讲
lazy为true，文章底部评论是收起状态

  • 懒加载按钮显示的文字设置

    1
    2
    3
    4
    5
    6
    7
    8
    主题languages/en.yml添加
    gitmentbutton: Show comments from Gitment
    主题languages/zh-Hans.yml添加
    gitmentbutton: 显示 Gitment 评论
    主题languages/zh-hk.yml添加
    gitmentbutton: 顯示 Gitment 評論
    主题languages/zh-tw.yml添加
    gitmentbutton: 顯示 Gitment 評論

  • 懒加载按钮div及事件配置
    主题layout/_partials/comments.swig文件添加

    1
    2
    3
    4
    5
    6
    7
    8
    {% elseif theme.gitment.enable %}
      {% if theme.gitment.lazy %}
        <div onclick="ShowGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    {% endif %}

  • 页面评论框生成代码配置
    主题layout/_third-party/comments/目录添加文件gitment.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
    34
    35
    36
    37
    38
    {% if theme.gitment.enable %}
      {% set owner = theme.gitment.github_id %}
      {% set repo = theme.gitment.repo %}
      {% set cid = theme.gitment.client_id %}
      {% set cs = theme.gitment.client_secret %}
      {% set browserJsPath = theme.gitment.browser_js_path %}
      <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
      <script src="{{browserJsPath}}"></script>
      {% if not theme.gitment.lazy %}
        <script type="text/javascript">
          var gitment = new Gitment({
            id: document.location.href,
            owner: '{{owner}}',
            repo: '{{repo}}',
            oauth: {
              client_id: '{{cid}}',
              client_secret: '{{cs}}',
            }});
          gitment.render('gitment-container');
        </script>
      {% else %}
        <script type="text/javascript">
          function ShowGitment(){
            document.getElementById("gitment-display-button").style.display = "none";
            document.getElementById("gitment-container").style.display = "block";
            var gitment = new Gitment({
              id: document.location.href,
              owner: '{{owner}}',
              repo: '{{repo}}',
              oauth: {
                client_id: '{{cid}}',
                client_secret: '{{cs}}',
              }});
            gitment.render('gitment-container');
          }
        </script>
      {% endif %}
    {% endif %}

注意最上面的变量读取需要和配置文件定义的gitment变量名保持一致。

  • 引入gitment.swig
    主题layout/_third-party/comments/index.swig文件引入gitment.swig文件

    1
    {% include 'gitment.swig' %}

  • 设置CSS样式
    主题source/css/_common/components/third-party/目录添加gitment.styl文件，设置button的样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #gitment-display-button{
         display: inline-block;
         padding: 0 15px;
         color: #0a9caf;
         cursor: pointer;
         font-size: 14px;
         border: 1px solid #0a9caf;
         border-radius: 4px;
     }
     #gitment-display-button:hover{
         color: #fff;
         background: #0a9caf;
     }

  • 引入css样式
    主题source/css/_common/components/third-party/third-party.styl文件引入CSS样式

    1
    @import "gitment";

可能遇到的问题

  • 配置文件_config.yml或next.yml格式错误，上述所添加文件的一些缩进问题

  • API rate limit exceeded for xxxxxx ……
    解决方法：

    1
    2
    hexo clean
    hexo generate

  • 评论时多次login后会重复出现Initialize Comments
    参考https://github.com/imsun/gitment/issues/12

原因：
首先，页面会根据issue label值去获取issue，如果为空则会出现Initialize Comments。点击Initialize Comments时会创建一个issue，并且将issue label设为gitment和文章地址。反复login后，文章地址可能会携带上code查询字段，其值也不唯一。因此导致获取issue时指定的label值并不一定存在，最终导致重复出现Initialize Comments，issue也因此混乱。

解决方法：
参考上面所添加的主题layout/_third-party/comments/gitment.swig文件，可知评论所依赖的js文件是https://imsun.github.io/gitment/dist/gitment.browser.js ，我们需要修改issue创建和获取这两个过程的label值，将其修改为window.document.title即可；然后将主题layout/_third-party/comments/gitment.swig文件中对gitment.browser.js的引用改为本地引用/js/gitment.browser.js，配置到next.yml的browser_js_path字段中，并将gitment.browser.js文件放置于根目录public/js下。

显示 Gitment 评论