Hexo的高阶使用之搜索,统计,评论

以下基于hexo version 3.8.0

搜索 – 本地

安装插件

npm install hexo-generator-searchdb –save

修改站点配置文件 _config.yml

添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件 _config.yml

修改

local_search:
  enable: true

统计 – 百度统计

准备

• 注册百度统计账号
• 新增自有网站 – 域名指定
• 获取统计代码 – 唯一id

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?唯一id";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>

修改主题配置文件 _config.yml

# Baidu Analytics ID
baidu_analytics: ${唯一id}

检查是否成功

百度统计 -> 管理 -> 对应网站代码状态检查

评论 – Gitalk

修改主题配置 _config.yml

新增

gitalk:
  enable: true
  githubID: github帐号	 
  repo: 仓库名称
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 //指定可初始化评论账户
  distractionFreeMode: true

新增gitalk.swig 到主题下的/layout/_third-party/comments/

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

修改主题下的/layout/_partials/comments.swig

添加

{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>

修改主题下的/layout/_third-party/comments/index.swig

添加

{% include 'gitalk.swig' %}

新增gitment.styl到主题下的/source/css/_common/components/third-party/

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改主题下的/source/css/_common/components/third-party/third-party.styl

添加

@import "gitalk";

优化

• 优化速度
  将gitalk.swig中css和js下载到本地;放到主题下的/source/lib/gitalk下;
  对应的gitalk.swig如下

  {% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="lib/gitalk/gitalk.css">
    <script src="lib/gitalk/gitalk.min.js"></script>
     <script type="text/javascript">
          var gitalk = new Gitalk({
            clientID: '{{ theme.gitalk.ClientID }}',
            clientSecret: '{{ theme.gitalk.ClientSecret }}',
            repo: '{{ theme.gitalk.repo }}',
            owner: '{{ theme.gitalk.githubID }}',
            admin: ['{{ theme.gitalk.adminUser }}'],
            id: location.pathname,
            distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
          })
          gitalk.render('gitalk-container')
         </script>
  {% endif %}

• 特定文章禁用评论
  在markdown的头中加入comments:false

更多