字数统计和阅读时长(网站底部/文章内)
效果如图
文章内
post-wordcount.png
网页顶部
page-wordcount.png
安装插件
npm install hexo-symbols-count-time --save
修改 站点配置文件
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true
修改 主题配置文件
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
#文章中的显示是否显示文字（本文字数|阅读时长）
item_text_post: true
#网页底部的显示是否显示文字（站点总字数|站点阅读时长）
item_text_total: false
# Average Word Length (chars count in word)
awl: 4
# Words Per Minute
wpm: 275
文章底部添加版权信息
效果如图
copyright.png
修改 主题配置文件
# 把 enable: 设为true
post_copyright:
enable: true
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>
网页底部信息隐藏
只需要把 主题配置文件的相关数据改为false就行
footer:
since: 2018
# Icon between year and copyright info.
icon:
name: user
animated: false
color: "#808080"
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false
给文章增加阴影效果
效果如图
post-shadow.png
修改custom.styl 文件，具体为themes/next/source/css/_custom/custom.styl
// 为文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
为博客添加宠物
效果如图
live2d.png
安装依赖包,在站点根目录，打开Git Bash ，安装hexo-helper-live2d
npm install --save hexo-helper-live2d
在站点配置文件或者主题配置文件添加以下内容
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true
安装需要的宠物文件
npm install {packagename}
如效果图所示的宠物名为haruto， 则为 npm install live2d-widget-model-haruto,其他宠物包点击live2d-widget-models。如果需要修改宠物的位置，可以在display下添加
# 水平位置
hOffset: 0
# 垂直位置
vOffset: -20
详细内容可参考hexo-helper-live2d
添加网站已运行时间
效果如图
counttime.png
在themes/layout/_parrials/footer.swing 中添加
<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(2018,06,07,12,00,00); // 设置建立网站的时间
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
}
siteTime();
</script>
把代码放在你想要的位置，插入位置不同，效果显示的位置也会不同。若想要显示为简体或者英文，只要把对应的文字修改就行。
添加标签云
效果如图
tag-cloud.png
在next/layout/page.swig中，找到
<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
</div>
如果你想卷标页先显示标签云，再显示基本的卷标页，可以在这段代码之前添加
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}
如果是先显示默认的卷标页，再显示标签云，则把上面代码添加到后面。
如果你只想显示标签云就行，可以把
<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
</div>
删掉就行。
修改界面内容显示区域宽度
Next主题默认的设置，两边留白的区域很大。当然我们可以修改设置
在themes\next\source\css\_custom的custom.styl添加下面参数
// 屏幕宽度小于1600px
$content-desktop = 700px
// 屏幕宽度大于或等于 1600px
$content-desktop-large = 900px
修改对应的参数就行，此方法不适用于Pisces主题。
添加文章时，自动打开markdown编辑器
找到博客根目录，打开scripts活页夹(没有的话，自己创建一个)。
创建一个JavaScript文件，可任意命名。
打开所创建的JavaScript文件，输入以下内容
var spawn = require('child_process').exec;
//根据自己安装的hexo版本选择
// Hexo 2.x 复制这段
hexo.on('new', function(path){
spawn('start "" "markdown编辑器绝对路径" ' + path);
});
// Hexo 3 复制这段
hexo.on('new', function(data){
spawn('start "" "markdown编辑器绝对路径" ' + data.path);
});
注意: markdown编辑器绝对路径 格式为(例如打开Typora)
C:\\Program Files\\Typora\\Typora.exe
添加在线联系功能
一个在线的联系功能:DaoVoice
注册DaoVoice , 获取app_id
点击 http://www.daovoice.io/ ,并点击注册。可以填入邀请码：98657237
得到 app_id
daovoice_id.png
修改head.swig
修改next\layout_partials\head\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 %}
修改_config.yml
在主题配置文件中，添加以下内容
# daovoice 配置
daovoice: true
daovoice_app_id: # 填入刚才的app_id
部署到网站
hexo clean && hexo g && hexo d 就能看到效果了，网页右下角多了个 图标
具体修改图表的样式，位置。可以在daovoice网页中 应用设置-聊天设置 中配置
daovoice2.png
网友评论