TreeHouse装修指南之工具

本文章讲述了TreeHouse由无到有, 不断开枝散叶的过程。
(通俗点说,就是hexo的相关搭建及应用的各效果的实现)

工具相关


添加阅读统计功能

用LeanCloud加入阅读统计功能

  1. 注册账号
    LeanCloud官网
  2. 创建应用
    点击应用,创建应用,输入应用名称(可修改),不勾选schema
  3. 创建统计类
    点击创建Class,保存博客的相关访问数据,Class名称为Counter(必须),设置不限制数据条目的ACL权限
  4. 获取App ID与App Key
    点击最左侧的设置,下属的应用Key,可以看到App ID及App Key
  5. 配置App ID与App Key
    打开Next主题的_config.yml文件,找到leancloud_visitors,配置相关字段,不要忘了enable要为true哟。
  6. 对Web安全的设置
    点击最左侧的设置,下属的安全中心,在Web安全域名处,设置可以更新数据的自己博客域名。

然后就可以在应用中的Counter类里看到相关阅读数据了,并且文章下面也有访问数量记录了。


动态背景

我的next版本是5.1.4, 已经集成了这个功能,只需要打开开关即可(在next配置文件)

1
2
# Canvas-nest
canvas_nest: false 改成true

如果要修改相关配置(线条颜色,粗细,数量等等),可以在下面文件修改。

1
\themes\next\source\lib\canvas-nest\canvas-nest.min.js

背景的几何线条是采用的nest效果
一个基于html5 canvas绘制的网页背景效果
来自github的开源项目 https://github.com/hustcc/canvas-nest.js


设置网站的图标

在next主题的图片文件夹下,将相应图片替换即可。

1
\themes\next\source\images

相关图片配置如下:(注意格式和大小)

1
2
3
4
5
6
[下面代码 位于next的配置文件内]
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg


实现统计功能

增加字数统计及阅读时长

修改next主题配置文件:

1
\themes\next\_config.yml

修改下面的配置

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true /* 字数统计 */
min2read: true /* 阅读时长统计 */
totalcount: false /* 总字数统计 */
separated_meta: true

如果没有,就自己安装,在根目录下输入:

1
npm install hexo-wordcount --save

然后再将上面配置添加到主题文件内。

到这里,显示的字数统计和阅读时间没有单位,需要修改文件:

1
\themes\next\layout\_macro\post.swing

修改:

1
2
<span title="{{ __('post.wordcount') }}"> {{ wordcount(post.content) }} 字 </span>
<span title="{{ __('post.min2read') }}"> {{ min2read(post.content) }} 分钟 </span>


添加分享功能

NEXT主题配置中自带分享插件,这里使用 NeedMoreShader2,

将theme的配置文件(themes\next\_config.yml)中这部分注释打开,并将相关开关设置为 开启

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

# NeedMoreShare2
# This plugin is a pure javascript sharing lib which is useful in China.
# See: https://github.com/revir/need-more-share2
# Also see: https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
# Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
# Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
# Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

更详细的配置可参考注释中的两个github仓库。

微信分享没有反应:

  • 这是通过将当前网页生成一个二维码实现的,老版的api停止服务了,换新的就行了。详情可见issue:https://github.com/revir/need-more-share2/issues/4

    1
    2
    3
    4
    5
    路径:\themes\next\source\lib\needsharebutton\needsharebutton.js
    将:
    var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);
    修改为:
    var imgSrc = "http://tool.oschina.net/action/qrcode/generate?output=image/png&error=L&type=0&margin=2&size=4&data=" + encodeURIComponent(myoptions.url);


添加RSS功能

  1. 安装feed插件

    • 在hexo根目录,启动git,安装feed插件:

      1
      npm install hexo-deployer-feed --save
  2. 修改hexo配置

    • 根目录下的 _config.yml

    • 添加feed插件配置

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # RSS
      plugin:
      - hexo-generator-feed
      # Feed Atom
      feed:
      type: atom
      path: atom.xml
      limit: 5
      hub:
      content: 'true'
  3. 修改主题配置

    • 主题目录下配置文件 themes\next\_config.yml

    • 设置rss文件路径(搜索 rss)

      1
      2
      3
      4
      # Set rss to false to disable feed link.
      # Leave rss as empty to use site's feed link.
      # Set rss to specific value if you have burned your feed already.
      rss: /atom.xml


本地搜索功能

  1. 安装searchdb插件

    • 在hexo根目录,启动git,安装插件:

      1
      npm install hexo-generator-searchdb
  2. 开启主题配置

    • 主题目录下配置文件 themes\next\_config.yml

    • 开启本地搜索:

      1
      2
      3
      4
      5
      6
      7
      local_search:
      # 是否开启
      enable: true
      # auto/manual 两个选项,代表搜索的执行是自动的实时执行还是通过回车或按钮来进行
      trigger: auto
      # 每篇文章显示前n个结果,-1表示显示全部
      top_n_per_article: 1


博客底部显示修改

删除强力驱动

路径:/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
  # -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

将相应配置都改为 false

显示具体日期

路径:/themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
10
11
目标内容:
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}&copy; {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} &mdash; {% endif %}{#
#}<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || config.author }}</span>

将其中 YYYY 改为 YYYY-MM-DD

修改底部图标

路径:/themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
目标内容:
<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>

修改为:
<span class="with-love" id="animate">
<i class="fa fa-heart"></i>
</span>

后面的 fa-heart 图标可以换成其他的图标,图标库地址:http://fontawesome.io/icons/

显示访问量相关

使用不蒜子提供的统计功能:(http://ibruce.info/2015/04/04/busuanzi/

  1. 修改卜算子配置(由于原有域名过期,所以需要更换)

    • 路径:\themes\next\layout_third-party\analytics\busuanzi-counter.swig

      1
      2
      3
      4
      5
      6
      7
      8
      9
      目标代码:
      {% if theme.busuanzi_count.enable %}
      <div class="busuanzi-count">
      <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

      修改为:
      {% if theme.busuanzi_count.enable %}
      <div class="busuanzi-count">
      <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  1. 开启主题配置

    • 路径:/themes/next/_config.yml

      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
      # Show PV/UV of the website/page with busuanzi.
      # Get more information on http://ibruce.info/2015/04/04/busuanzi/
      busuanzi_count:
      # count values only if the other configs are false
      enable: false
      # custom uv span for the whole site
      site_uv: true
      site_uv_header: <i class="fa fa-user"></i>
      site_uv_footer:
      # custom pv span for the whole site
      site_pv: true
      site_pv_header: <i class="fa fa-eye"></i>
      site_pv_footer:
      # custom pv span for one page only
      page_pv: true
      page_pv_header: <i class="fa fa-file-o"></i>
      page_pv_footer:

      设置为:
      busuanzi_count:
      enable: true
      site_uv: true
      site_uv_header: <i class="fa fa-user"></i>
      site_uv_footer:
      site_pv: true
      site_pv_header: <i class="fa fa-eye"></i>
      site_pv_footer:
      page_pv: true
      page_pv_header: <i class="fa fa-file-o"></i>
      page_pv_footer:

添加网站运行时间

路径:/themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
添加代码:

<!-- 添加网站运行时间 -->
<span id="timeDate">载入天数...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("04/13/2020 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+" 天 ";
}
setInterval("createtime()",250);
</script>

添加评论系统

  1. 安装valine插件

    • 在hexo根目录,启动git,安装插件:

      1
      npm install valine --save
  2. 开启主题配置

    • 主题目录下配置文件 themes\next\_config.yml

    • 开启本地评论系统:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      # Valine.
      # You can get your appid and appkey from https://leancloud.cn
      # more info please open https://valine.js.org
      valine:
      enable: false
      appid: # your leancloud application appid
      appkey: # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: Just go go # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size
  3. 其他

    • 如果想评论时开启验证码,则verify项改为true,同时Leancloud官网->应用->设置->安全中心中的验证码项也要打开。