Hexo setting

上一篇已经描述过了博客的技术选型，接下来就让我们来具体详解一下hexo的搭建之旅吧！

主题选择

hexo支持丰富的主体插件选择，具体可以参考这里,也可以在GitHub上寻找相关主题(搜索hexo-theme)，这里我采用的是Next主题,github地址为https://github.com/iissnan/hexo-theme-next/，这个主题的受欢迎程度也是很高的，相较而言更简洁，当然也可以做自己的主题，不过这都是后话了，现在遵循拿来即用的原则。

开放评论

这里主要还是基于第三方的评论系统，目前Next主题支持的有：

disqus

目前是很好用的一个评论系统，但是由于是墙外的应用，对于国内常规用户来说还是不太友好，暂时忍痛割爱了,不过可以看下效果图
changyan

这是一个国内的平台,不知道为何，现在国内的好多应用都需要关注公众号，so不是太喜欢，贴个效果图感受一下
valine

valine是基于leanCloud的无后端评论系统，所以：
```
注册LeanCode账号
创建Valine应用
进入应用，点击设置>应用Keys获取appId,appKey
在主题配置文件_config.yml,这里的路径是next/_config.yml中找到valine然后配置上即可
```
- 优化
  - 主要是优化valine在博客中的一些样式，比如去处掉Powered By，文本等，具体可以在主题的css目录下创建一个comment文件夹，放自己的自定义的样式，我这里是next/source/css/_common下创建comment文件夹，再创建comment.styl样式文件，里面写优化的样式，写完之后要在main.styl引入才可生效
  - 可以在主题中开启评论邮箱通知，自定义placeholder等

gitalk
首先要注册GitHub应用，https://github.com/settings/applications/new
注册完成之后，把Client ID和Client secrets填写到主题的_config.yml里面，gittalk对应的位置，开启即可

gitalk:
    enable: true  #启用gitalk
    github_id:   #github帐号 例：CodeHaotian
    id: location.pathname  #此设置参照下文常见问题说明
    repo:   #存放评论的仓库名称
    client_id:   #application的id，即上文Client ID
    client_secret:  #application的密码，即上文Client Secret
    admin_user:  #页面显示联系**初始化评论 例：CodeHaotian
    distraction_free_mode: true # Facebook-like distraction free mode
    # Gitalk's display language depends on user's browser or system environment
    # If you want everyone visiting your site to see a uniform language, you can set a force language value
    # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
    language: zh-CN

livere

来必力，一家韩国的评论系统，这里不多做阐述了，感兴趣的大家可以去看看，不过不是太推荐
rating

统计字数

使用hexo-word-counter统计文章的字数以及预期阅读时间。完成配置后，可以在每篇文章开头和页面底部显示字数和阅读时间

安装

$ npm install hexo-word-counter
$ hexo clean

配置
在主配置文件_config.yml尾部添加

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4  # 平均字节长度，默认为4，cn≈2，en≈5，
  wpm: 275 # 每分钟阅读次数，默认为275，Slow≈200，Normal≈275，Fast≈350
  suffix: "mins."

站点运行时间

打开\themes\next\layout\_partial\footer.swig,在最后位置添加一串js代码

<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("2020/11/09 00:00:00");//在此处修改你的建站时间
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "已运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
</div>

总访问人数

Next主题默认支持,修改/theme/next/_config.yml中的busuanzi_count，改为true即可.这个只是很普通的显示总站的访问量和人数

阅读进度

找到next主题的_config.yml找到reading_progress,把false改为true即可，默认是支持的

文章简介

目前hexo不再支持老的auto_excerpt，所以现在我们引入新的插件

hexo-excerpt
- 安装
```
npm install hexo-excerpt --save
```
  打开hexo根目录的_config.yml添加如下配置
```
excerpt:
    depth: 2  #按层来算，也就是按代码块来算
    excerpt_excludes: []
    more_excludes: []
    hideWholePostExcerpts: true
```
  打开主题的配置文件/theme/next/_config.yml,将excerpt_description设置为true,read_more_btn设置为true
  注：按代码块的显示可能有些不太友好，所以下面我们引入第二个插件
hexo-auto-excerpt
- 安装
```
npm install hexo-auto-excerpt --save
```
  安装完成后在hexo的根目录_config.yml下添加excerpt_length: 100即可，表示摘要的字数
  注：这个会把文本块打乱，只是以文字显示在首页

性能优化

待定

域名设置

域名可以在freenom.com上面注册一个免费的前提需要有梯子,然后可以搜索自己的想要的域名，最高可以免费12个月哦，添加完之后有个配置forward url可以设置自己的GitHub page域名，这样访问注册的域名就可以跳转到GitHub page访问博客了。

SEO搜索

Google Search
登录谷歌站点，添加自己的站点域名，然后选择TXT验证，完毕之后，添加个人站点地图

耳东华的分享