next主题优化(二)

Next主题优化(二)

继上一次的优化没完成的部分,此次继续添加一些优化内容
若是想要更多内容,可以自行百度/Google一下,继续更新内容

1.字数统计和阅读时长

1.安装插件

npm install hexo-symbols-count-time –save

2.修改站点配置文件

找到合适的地方添加下面的代码

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

3.修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# 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

2.给文章添加阴影效果

打开themes/next/source/css/_custom/custom.styl,添加下面的代码:

1
2
3
4
5
6
7
8
// 为文章添加阴影效果
.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);
}

3.添加宠物

1.安装依赖包

安装依赖包,在站点根目录,打开Git Bash ,安装hexo-helper-live2d
站点配置文件或者主题配置文件添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

2.安装想要的宠物文件

npm install {packagename}
Eg:如果安装下面图示的宠物
/1.png)

如效果图所示的宠物名为haruto, 则为 npm install live2d-widget-model-haruto,
其他宠物包点击live2d-widget-models。如果需要修改宠物的位置,可以在display下添加

1
2
3
4
# 水平位置
hOffset: 0
# 垂直位置
vOffset: -20

4.添加网站已运行时间

themes/layout/_parrials/footer.swing中添加

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
<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>

5.添加标签云

next/layout/page.swig中,找到

1
2
3
<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
</div>

如果你想卷标页先显示标签云,再显示基本的卷标页,可以在这段代码之前添加

1
2
3
4
5
6
7
8
9
10
11
12
{% 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 %}

如果是先显示默认的卷标页,再显示标签云,则把上面代码添加到后面。
如果你只想显示标签云就行,可以把

1
2
3
<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
</div>

删去就行

6.修改界面内容显示区域宽度

Next主题默认的设置,两边留白的区域很大。当然我们可以修改设置
在themes\next\source\css_custom的custom.styl添加下面参数

1
2
3
4
5
// 屏幕宽度小于1600px
$content-desktop = 700px

// 屏幕宽度大于或等于 1600px
$content-desktop-large = 900px

只需要修改对应的参数就行,要注意的是,此方法不适用于Pisces主题

---------------- The End ----------------
0%