Hexo建站日志 (5) - NexT 主题进阶配置

页面设置

主页文章添加边框阴影效果

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

1
2
3
4
5
6
7
.post {
margin-top: 0px;
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);
}

修改文章间分割线

打开 themes/next/source/css/_common/components/post/ 下的 post-eof.styl ,修改:

1
2
3
4
5
6
7
8
9
.posts-expand {
.post-eof {
display: block;
width: 0%;
height: 0px;
background: $grey-light;
text-align: center;
}
}

博文置顶

  • 打开 Hexo 站点下 node_modules/hexo-generator-index/lib/generator.js 文件,代码全部替换为:
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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
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有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
  • 打开文章添加 top 字段,设置数值,数值越大文章越靠前
1
2
3
4
5
6
---
title:
date:
tags:
top: 100
---

修改文章内文本链接样式

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

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

文末统一添加“本文结束”标记

  • 在路径 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:
1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
{% endif %}
</div>
  • 打开 themes/next/layout/_macro/ 下的 post.swig 文件,添加:
1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
  • 主题配置文件 末尾添加:
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

文章顶部显示更新时间

  • 主题配置文件,搜索关键字 updated_at 设置为 true
1
2
3
4
5
6
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: ture
categories: true
  • 编辑文章,增加关键字 updated
1
2
3
4
5
---
title:
date: 2017-08-18 15:41:18
updated: 2017-09-05 20:18:54 #手动添加更新时间
---

鼠标点击小红心的设置

  • love.js 文件添加到 \themes\next\source\js\src 文件目录下
  • 找到 \themes\next\layout\_layout.swig 文件, 在文件的后面,</body> 标签之前 添加以下代码:
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

背景的设置

  • particle.js 文件添加到 \themes\next\source\js\src 文件目录下
  • 找到 \themes\next\layout\_layout.swig 文件, 在文件的后面,</body> 标签之前 添加以下代码:
1
2
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>

修改内容区域宽度

Pisces Scheme 编辑 themes\next\source\css\_schemes\Picses\_layout.styl 文件,更改以下 css 选项定义值:

1
2
3
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

统计功能

显示文章字数统计、阅读时长、总字数

  • 在站点的根目录下安装插件
1
npm i --save hexo-wordcount
  • 主题配置文件 中,搜索关键字 post_wordcount
1
2
3
4
5
6
7
8
9
10
11
# 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

不蒜子 - 总访客数和总访问量

主题配置文件 中,搜索关键字 busuanzi_count,做如下修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  # Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子统计,用于在页脚显示总访客数和总浏览量,将 false 改为 true 就能直接使用
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: <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
# 页面浏览量,不建议开启,建议用 leancloud_visitors
# 首先 leancloud 更稳定,其次 leancloud 便于管理
page_pv: false
page_pv_header: <i class="fa fa-eye"></i> 阅读次数
page_pv_footer:

LeabCloud - 文章阅读量

  • 注册 LeabCloud访问控制台创建应用 ,新应用名称可任意填写,选择“开发板”创建应用。创建完成之后点击新创建的应用的名字来打开应用参数配置界面,并点击点击左侧右上角的齿轮图标,新建Class,如下图所示:

新建Class名字必须为 Counter

权限选择 无限制 ,如下图所示:

创建完成之后,左侧数据栏应该会多出一栏名为 Counter 的栏目,这个时候我们点击设置,切换到test应用的操作界面。在弹出的界面中,选择左侧的 应用Key 选项,即可发现我们创建应用的 AppID 以及 AppKey ,有了它,我们就有权限能够通过主题中配置好的Javascript代码与这个应用的Counter表进行数据存取操作了。

  • 主题配置文件 中,搜索关键字 leancloud_visitors ,将 false 改为 true ,并复制粘贴上述的 AppID 以及 AppKey
1
2
3
4
leancloud_visitors:
enable: true
app_id: #<AppID>
app_key: #<AppKEY>

需要特别说明的是:记录文章访问量的唯一标识符是文章的发布日期以及文章的标题,因此请确保这两个数值组合的唯一性,如果你更改了这两个数值,会造成文章阅读数值的清零重计。

  • Web 安全。因为 AppID 以及 AppKey 是暴露在外的,因此如果一些别有用心之人知道了之后用于其它目的是得不偿失的,为了确保只用于我们自己的博客,建议开启 Web 安全选项,这样就只能通过我们自己的域名才有权访问后台的数据了,可以进一步提升安全性。

选择应用的设置的 安全中心 选项卡:

Web 安全域名 中填入我们自己的博客域名,来确保数据调用的安全。

添加 Top - 文章阅读量排行榜

  • 在根目录路径下,执行 hexo new page "top" 新建页面
  • 主题配置文件 中,加上菜单 top 和它的 icon:
1
2
menu:
top: /top/ || signal

在语言文件中加上菜单 top,以中文为例:

/themes/next/languages/zh_Hans.yml 中添加:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: Top /* 可以不为 Top,随便取 */
  • 编辑第一步新建页面生成的文件

文件位置:~/source/top/index.md

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
---
title: Top /* 可以不为 Top,随便取 */
comments: false
keywords: top,文章阅读量排行榜
---
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<a href='"+"https://username.github.io"+url+"'>"+title+"</a>"+"<br>"+"<font color='#fff'>"+"阅读次数:"+time+"</font>"+"<br><br>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

必须将里面的里面的 app_idapp_key 替换为你的 在 主题配置文件 中的值,必须替换里面博客的链接,1000是显示文章的数量,其它可以自己看情况更改。

侧栏加入已运行时间

themes/next/layout/_custom/sidebar.swig 文件中添加以下代码:

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
<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

上面 Date 的值记得改为你自己的,且按上面格式,然后在 themes/next/layout/_macro/sidebar.swig 中修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        {# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}&nbsp;
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}

- {% include '../_custom/sidebar.swig' %}

修改颜色,在 themes/next/source/css/_custom/custom.styl 中添加:

1
2
3
4
5
6
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}

站点加速

静态资源压缩

  • 在站点目录下
1
npm install gulp -g
  • 安装 gulp 插件
1
2
3
4
5
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
  • Hexo 站点 下添加 gulpfile.js 文件,文件内容如下:
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
gulp.src('./public/demo/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./public/uploads'));
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);
  • 只需要每次在执行 generate 命令后执行 gulp 就可以实现对静态资源的压缩,压缩完成后执行 deploy 命令同步到服务器
1
2
3
hexo g
gulp
hexo d

使用云盘存放图片资源

使用 七牛云储存,因为 Github 跟 Coding 项目容量有限,而且 Github 的主机在国外,访问速度较慢,把图片放在国内的图床上是个更好的选择,免费用户实名审核之后,新建空间,专门用来放置博客上引用的资源,进入空间后点击「内容管理」,再点击「上传」。

相关阅读

基于Hexo搭建个人博客——进阶篇(从入门到入土)