Hexo添加评论、阅读次数和分类/标签

添加评论

注册 OAuth Application

注册OAuth Application，其他内容可以随便写，但要确保填入正确的callback URL（一般是评论页面对应的域名，如：http://celesteting.com ）

最后你会得到一个client ID 和client secret.

配置主题的_config.yml

在主题下_config.yml(themes/你的主题)文件中添加[在浏览器输入https://api.github.com/users/GitHub用户名可以获取对应的githubid]

# Gitment
 # Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  githubID: 你的 GitHub ID  // 可以是你的GitHub用户名，也可以是github id
  repo: 存储评论的 github repo // 在github新建一个仓库，这里只需填你刚建的仓库名
  ClientID: 你的 client id
  ClientSecret: 你的 client secret
  lazy: false
复制代码

lazy：是否懒加载相应评论框，如果为true，文章底部评论是手气状态，显示Gitment评论按钮。

懒加载按钮显示文字的设置：在主题下languages/zh-Hans.yml中添加：gitmentbutton: 显示 Gitment 评论

懒加载按钮div以及事件设置

在主题下layout/ _partials/comments.swig文件中添加中间那段

 <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    {% elseif theme.changyan.appid and theme.changyan.appkey %}
      <div id="SOHUCS"></div>
      
      
    {% 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 %}
  </div>
{% endif %}
复制代码

对应页面生成js代码配置

在主题下**layout/ _third-party/comments/**下添加gitment.swig并把以下代码复制进去

{% if theme.gitment.enable %}
   {% set owner = theme.gitment.githubID %}
   {% set repo = theme.gitment.repo %}
   {% set cid = theme.gitment.ClientID %}
   {% set cs = theme.gitment.ClientSecret %}
   <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
   <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
   {% if not theme.gitment.lazy %}
       <script type="text/javascript">
             var gitment = new Gitment({
                 id: document.location.href, 
                 owner: 'celesteting',
                 repo: 'Comment',
                 oauth: {
                     client_id: '04589948574cf32e0895',
                     client_secret: 'bfd0b5f2c307c781cd00d1657e9cfbf75ada3feb',
                 }});
             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: 'celesteting',
                     repo: 'Comment',
                     oauth: {
                         client_id: '04589948574cf32e0895',
                         client_secret: 'bfd0b5f2c307c781cd00d1657e9cfbf75ada3feb',
                     }});
                 gitment.render('gitment-container');
             }
         </script>
     {% endif %}
 {% endif %}
复制代码

引入文件gitment.swig

添加gitment.swig文件后，在主题layout/ _third-party/comments/index.swig文件中引入gitment.swig

{% include 'gitment.swig' %}
复制代码

设置懒加载按钮CSS样式

在主题下source/css/ _common/components/third-party目录下添加gitment.styl文件,设置button样式

#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;
 }
复制代码

之后在主题下source/css/ _common/components/third-party/third-party.styl文件中引入相应样式

@import "gitment";
复制代码

初始化评论

访问页面并使用GitHub账号登陆，点击初始化按钮即可。

但是主页面的控制台会报下面的错,跪求指教！！！

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@2] TypeError: Cannot read property 'firstChild' of null
    at gitment.js:16
    at reactionRunner (mobx.js:123)
    at trackDerivedFunction (mobx.js:1000)
    at Reaction.track (mobx.js:1312)
    at Reaction.onInvalidate (mobx.js:120)
    at Reaction.runReaction (mobx.js:1288)
    at runReactionsHelper (mobx.js:1404)
    at reactionScheduler (mobx.js:1386)
    at runReactions (mobx.js:1390)
    at Reaction.schedule (mobx.js:1276)
复制代码

阅读次数

注册LeanCloud创建类并得到App ID以及App Key

在设置里面的应用Key中可以得到 App ID 以及 App Key 这两个参数

注册 LeanCloud
应用 -> 创建新应用 -> 创建
进入“应用”-> “存储”->“数据”->“创建Class”创建一个Counter的类
设置 -> 应用Key -> 复制 App ID 以及 App Key 在编辑 \themes\你的主题\ _config.yml 中相应位置输入即可。

正确配置之后文件如下：

leancloud_visitors:
  enable: true
  app_id: yOW0YyukmCgRVHTlVKQrwuCX
  app_key: 8Cdt8dmYHgvO6tUDiD

复制代码

额外设置

设置_layout.swig

_layout.swig - themes\你的主题\layout\ _layout.swig：该文件是主题全局初始化引用接口，主要是引用leanCloud的代码文件

需要添加以下代码，因为我的主题集成了LeanCloud，所以直接引用该文件即可

{% include '_third-party/analytics/lean-analytics.swig' %}
复制代码

如果你的主题在**\themes\你的主题\layout\ _third-party\analytics没有lean-analytics.swig**该文件，需要在该路径创建文件“lean-analytics.swig”，并把以下代码复制进去

{% if theme.leancloud_visitors.enable %}

  {# custom analytics part create by xiamo #}
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("{{theme.leancloud_visitors.app_id}}", "{{theme.leancloud_visitors.app_key}}");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>

{% endif %}

复制代码

设置post.swig

post.swig - themes\你的主题\layout\ _macro\post.swig：主要是文章主题代码文件（包括主题显示阅读数量的代码）

在需要的位置添加如下代码

{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
 <span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
   &nbsp; | &nbsp;
   <span class="post-meta-item-icon">
     <i class="fa fa-eye"></i>
   </span>
   <span class="post-meta-item-text">{{__('post.visitors')}} </span>
   <span class="leancloud-visitors-count"></span> 次
  </span>
{% endif %}
复制代码

Web安全

因为我弄了域名，为了确保应用的统计计数能用，你可以在应用->设置->安全中心的Web安全域名

中添加自己的博客域名，一确保数据的调用安全。

设置完成

完成以上设置，重新发布即可看到相关文章的统计内容

添加分类/标签

在命令行中输入以下代码，创建tags、categories页面，否则会报404错误

$ hexo new page tags
$ hexo new page categories
复制代码

在sources/categories有个index.md，加上以下代码(tags同理type: "tags")

type: "categories"
复制代码

在主题配置文件(\themes\你的主题_config.yml)中，在menu下，把tags和categories页打开

menu:
  home: /
  categories: /categories
  #about: /about/
  archives: /archives
  tags: /tags
  #sitemap: /sitemap.xml
  #commonweal: /404/
复制代码

重新发布即可看到分类和标签页有对应的内容

参考页面

www.0101tx.com/pages/hexon…
imsun.net/posts/gitme…