Hexo 静态站点具有一定的局限性,需要借助第三方插件来扩展站点的功能。
网上很多教程都是直接添加某些代码,但现在很多也已经merge到源码了,所以修改就比较方便了,true
or false
,开启或关闭功能,有些功能可能还需要在第三方服务上注册账号,获取API
和APK
。
利用Hexo搭建博客的人很多,但不都是千篇一律的,有些好的还是要借鉴的,更好的是能够有自己的风格~~~
RSS
什么是RSS?
简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。发布一个RSS文件后,这个RSS Feed中包含的信息就能
直接被其他站点调用
,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。——百度百科
1 生成RSS文件
安装hexo-generator-feed
插件
$ npm install --save hexo-generator-feed
打开站点配置文件
,字段Extensions,添加如下
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
打开主题配置文件
,字段rss,添加如下
rss: /atom.xml
配置完成,执行下列命令,可以看到/public
文件夹中多了一个atom.xml
文件
$ hexo g
发布之后,在侧边栏会生成一个RSS图标
2 RSS迁移
安装hexo-migrator-rss
插件
$ npm install --save hexo-migrator-rss
执行下列命令,从 RSS 迁移所有文章。source
可以是文件路径或网址。
$ hexo migrate rss <source>
评论系统
NexT支持多款评论系统
如果想要取消某个页面or文章的评论,在文章的属性中增加
comments: false
1 Valine
一款基于Leancloud的快速、简洁且高效的无后端评论系统。
支持匿名评论
- 效果图:
-
获取
APP ID
和APP KEY
进入应用 > 设置 > 应用Key,可以看到
APP ID
和APP KEY
-
配置
打开
主题配置文件
,字段Valine# Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org valine: enable: true appid: # 填写获取的APP ID appkey: # 填写获取的APP KEY notify: true # 邮件提醒 verify: true # 验证码 placeholder: Just go go # 评论提示语 avatar: mm # 头像,具体看Valine官网 guest_info: nick,mail,link # 评论者相关属性 pageSize: 10 # 分页
2 畅言
需要实名登录,最不能接受的是还要绑定手机
-
获取
APP ID
和APP KEY
比较麻烦的是站点需要备案,没有备案只能使用15天
有种投机取巧的方式,自行搜索
进入 >
后台总览
,就可以看到了 -
配置
打开
主题配置文件
,字段changyanchangyan: enable: true appid: # 填写获取的APP ID appkey: # 填写获取的APP KEY
访问统计
页脚设计:/themes/next/layout/_partials/footer.swig
文章设置:/themes/next/layout/_macro/post.swig
1 不蒜子统计
进入主题配置文件
,字段busuanzi
相关设置文件/themes/next/layout/_third-party/analytics/busuanzi-counter.swig
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site 整个网站访问用户量
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# custom pv span for the whole site 整个网站访问总次数
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# custom pv span for one page only 一篇文章的阅读次数
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次
2 LeanCloud统计
leancloud_visitors: # 文章阅读次数统计
enable: true
appid: # 填写获取的APP ID
appkey: # 填写获取的APP KEY
3 字数统计
-
安装插件
$ npm install --save hexo-wordcount
-
配置
post_wordcount: item_text: true wordcount: false # 文章字数 min2read: false # 阅读时长预计 totalcount: true # 全站字数 separated_meta: false # 分行
博文置顶
修改插件hero-generator-index
,文件node_modules/hexo-generator-index/lib/generator.js
// var posts = locals.posts.sort(config.index_generator.order_by);
// 改为
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 只有一篇文章top有定义,将排在最前面
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
文章属性添加top
值,数值越大越靠前
top: # 数值
文章搜索
-
安装插件
$ npm install hexo-generator-searchdb --save
-
站点配置文件
,添加search: path: search.xml field: post format: html limit: 10000
-
主题配置文件
,字段local_search# Local search # Dependencies: https://github.com/flashlab/hexo-generator-search local_search: enable: ture # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1
添加挂件
-
安装插件
$ npm install -save hexo-helper-live2d
-
安装挂件
$ npm install --save live2d-widget-model-xxx # xxx为挂件名
-
配置
站点配置文件
,添加live2d: enable: true scriptFrom: local model: # 挂件模型 use: live2d-widget-model-hijiki display: # 位置 # position: right width: 80 height: 160 bottom: -120 mobile: # 手机显示 show: false
在线联系
基于DaoVoice实现
-
注册账号
邀请码
832ef3b6
-
获取API
应用设置 > 安装到网站
-
配置
文件
/themes/next/layout/_partials/head.swig
,添加{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice('update'); </script> {% endif %}
主题配置文件
, 添加# Online contact daovoice: true daovoice_app_id: # 你获取的API
-
效果
当有人发信息给你的时候,你可以通过DaoVoice在线交流,也可以关注DaoVoice小程序,绑定你的账号
添加音乐
网易云音乐外链
-
单曲
复制代码,粘贴在你想要的位置,可以是文章 或者是 侧边栏
歌单
自己的歌单是没有生成外链。分享 动态 外链
-
效果
可以缩放
Aplayer
-
引入js文件
-
APlayer.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
位置
themes/next/layout/_partials/head.swig
-
Meting.min.js
<script src="https://cdn.jsdelivr.net/npm/meting@1.0.1/dist/Meting.min.js"></script>
位置
themes/next/layout/_partials/footer.swig
-
-
添加音乐
-
音乐平台
<div class="aplayer" data-id="" data-server=""></div>
参数解释:
- data-id: 歌曲/专辑/歌单 ID
- data-server: 音乐平台,支持如下参数
- netease (网易云音乐)
- tencent (qq音乐)
- xiami (虾米音乐)
- kugou (酷狗音乐)
- baidu (百度音乐)
- data-type: 请求类型,支持如下参数
song (单曲)
album (专辑)
playlist (歌单)
-
search (搜索)
-
音乐外链(参数名可能与Aplayer中的不一样)
<div class="aplayer" data-title="" data-author="" data-url="" data-pic="" data-lrc=""></div>
参数解释:
data-title: 歌名
data-author: 歌手
data-url: 音乐链接
data-pic: 音乐封面
-
data-lrc: 歌词
-
其他参数
- data-mode: 播放模式
- random (随机)
- single (单曲)
- circulation (列表循环)
- order (列表)
- data-autoplay: 自动播放
false
-
true
- data-mode: 播放模式
-
-
推荐
Aplayer自定义比iframe还好,可以加载有版权问题的音乐,墙裂推荐!!!
(。・∀・)ノ゙嗨!一下
这部分纯属玩乐,有点酷炫,我把它设置在了头像上,可以点击试一试
音乐有点鬼畜,想不有什么好的,节奏可以配上该动画
参考来自:Hexo high一下小功能
-
资源
js:http://oxv1k8kvi.bkt.clouddn.com/High.js
可以自行下载来看一下
里面的音乐地址和css可以替换一下
-
配置
文件
/themes/next/layout/_partials/head.swig
,添加<script type="text/javascript" src="http://oxv1k8kvi.bkt.clouddn.com/High.js"></script>
然后,在你想要点击实现
high一下
功能的地方,添加<a title="(。・∀・)ノ゙嗨!一下" style="underline: none" rel="alternate" class="mw-harlem_shake_slow wobble shake" href="javascript:shake()"> XXX </a>