本文章讲述了TreeHouse由无到有, 不断开枝散叶的过程。
(通俗点说,就是hexo的相关搭建及应用的各效果的实现)
工具相关
添加阅读统计功能
用LeanCloud加入阅读统计功能
- 注册账号
LeanCloud官网 - 创建应用
点击应用,创建应用,输入应用名称(可修改),不勾选schema - 创建统计类
点击创建Class,保存博客的相关访问数据,Class名称为Counter(必须),设置不限制数据条目的ACL权限 - 获取App ID与App Key
点击最左侧的设置,下属的应用Key,可以看到App ID及App Key - 配置App ID与App Key
打开Next主题的_config.yml文件,找到leancloud_visitors,配置相关字段,不要忘了enable要为true哟。 - 对Web安全的设置
点击最左侧的设置,下属的安全中心,在Web安全域名处,设置可以更新数据的自己博客域名。
然后就可以在应用中的Counter类里看到相关阅读数据了,并且文章下面也有访问数量记录了。
动态背景
我的next版本是5.1.4, 已经集成了这个功能,只需要打开开关即可(在next配置文件)
1 | # Canvas-nest |
如果要修改相关配置(线条颜色,粗细,数量等等),可以在下面文件修改。
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 |
|
更详细的配置可参考注释中的两个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功能
安装feed插件
在hexo根目录,启动git,安装feed插件:
1
npm install hexo-deployer-feed --save
修改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'
修改主题配置
主题目录下配置文件 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
本地搜索功能
安装searchdb插件
在hexo根目录,启动git,安装插件:
1
npm install hexo-generator-searchdb
开启主题配置
主题目录下配置文件 themes\next\_config.yml
开启本地搜索:
1
2
3
4
5
6
7local_search:
# 是否开启
enable: true
# auto/manual 两个选项,代表搜索的执行是自动的实时执行还是通过回车或按钮来进行
trigger: auto
# 每篇文章显示前n个结果,-1表示显示全部
top_n_per_article: 1
博客底部显示修改
删除强力驱动
路径:/themes/next/_config.yml
1 | # ------------------------------------------------------------- |
显示具体日期
路径:/themes/next/layout/_partials/footer.swig
1 | 目标内容: |
修改底部图标
路径:/themes/next/layout/_partials/footer.swig
1 | 目标内容: |
后面的 fa-heart 图标可以换成其他的图标,图标库地址:http://fontawesome.io/icons/
显示访问量相关
使用不蒜子提供的统计功能:(http://ibruce.info/2015/04/04/busuanzi/)
修改卜算子配置(由于原有域名过期,所以需要更换)
路径:\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>
开启主题配置
路径:/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 | 添加代码: |
添加评论系统
安装valine插件
在hexo根目录,启动git,安装插件:
1
npm install valine --save
开启主题配置
主题目录下配置文件 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
其他
- 如果想评论时开启验证码,则verify项改为true,同时Leancloud官网->应用->设置->安全中心中的验证码项也要打开。