Hexo主题Next配置

Hexo主题Next配置

新建404界面

在站点根目录下,输入hexo new page 404,在默认Hexo站点下/source/404/index.md
打开新建的404界面,编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

静态资源压缩

静态资源压缩

在站点目录下安装插件:

1
$ npm install gulp -g
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

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用<!---->隐藏之间的代码即可,或者直接删除。位置如图:
hexo


各版块透明度修改

内容板块透明

根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.content-wrap标签下background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景

根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景

根博客目录themes\next\source\css\_schemes\Pisces\_sidebar.styl文件.sidebar-inner标签下background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

修改然后根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar标签下background: $body-bg-color修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

网站底部字数统计

具体方法实现

切换到根目录下,然后运行如下代码

1
npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上:

1
2
3
4
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

添加侧栏推荐阅读

编辑主题配置文件,如下配置即可:

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
Swift 4: https://developer.apple.com/swift/
Objective-C: https://developer.apple.com/documentation/objectivec

博文置顶

修改hexo-generator-index插件,把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
7
8
9
---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---

网页底部信息隐藏

网页底默认最新一次使用,需要取消since注释,设定年份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2017

# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: user #设置图标,想修改图标从https://fontawesome.com/v4.7.0/icons获取
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#808080"

# If not defined, `author` from Hexo main config will be used.
copyright: by AomanHao #版权

显示文章阅读进度百分比

设置方法:
打开themes/next/_config.yml主题配置文件,找到# Scroll percent label in b2t buttonscrollpercent:的值,改成true

1
2
# Scroll percent label in b2t button
scrollpercent: true

浏览页面的时候显示当前浏览进度

如果想把top按钮放在侧边栏,打开themes/next下的_config.yml,搜索关键字b2t,把false改为true

1
2
3
4
5
# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

加入valine在线评论

设置效果:

设置方法:
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.

拿到appidappkey之后,打开themes/next/_config.yml主题配置文件,查找valine,填入appidappkey
我的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid:
appkey:
notify: true # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 欢迎交流讨论... # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # if false, comment count will only be displayed in post page, not in home page

Hexo添加阅读次数

next 集成了 leancloud 。可以在leancloud进行账号注册。
创建一个新的应用。点击应用进入。
创建名称为CounterClass,名称必须为Counter

k1gdSK.md.png

点击设置 > 应用Key 复制App ID 和 App Key
k1gUW6.md.png

修改配置文件
在主题themes目录下有第三方提供的主题配置文件\themes\next_config.yml
打开主题配置文件 添加app_idapp_key:

1
2
3
4
5
6
7
8
9
10
11
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.文章热度
leancloud_visitors:
enable: true
app_id:
app_key:
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false
betterPerformance: false

Web安全性
为了保证应用的统计计数功能仅应用于自己的博客,你可以在应用 > 设置 > 安全中心的Web安全域名中加入自己的博客域名,保证数据的调用安全。

k1gwQO.md.png


显示文章热度

首先要先去LeanCloud注册一个帐号.然后再创建一个应用.

设置方法:
next主题集成leanCloud,打开themes/next/layout/_macro/post.swig,准备添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{# LeanCloud PageView #}
{% if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
{% endif %}
<span class="leancloud-visitors-count"></span>
<span></span>
</span>
{% endif %}

插入摄氏度到倒数第三句,如下:

1
<span>℃</span>

打开,themes/next/languages/zh-CN.yml,将views后的文字描述改为热度.

1
views: 热度

有的版本不一样,打开,themes/next/languages/zh-Hans.yml,将以下

1
visitors: 热度

然后打开themes/next/_config.yml找到leancloud_visitors,将enable:改成true,再填上自己LeanCloudapp_idapp_key

1
2
3
4
5
6
7
8
9
10
11
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.文章热度
leancloud_visitors:
enable: true
app_id: 你自己的id
app_key: 你自己的key
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true
betterPerformance: false

添加网站已运行时间

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("11/27/2017 12:00:00");//在此处修改你的建站时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = " Runing "+dnum+" D ";
document.getElementById("times").innerHTML = hnum + " H " + mnum + " M " + snum + " S";
}
setInterval("createtime()",250);
</script>

添加头像

打开themes/next下的_config.yml文件,搜索 Avatar关键字,修改url的参数

1
2
3
4
5
6
7
8
9
10
11
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.gif
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false

url链接默认是themes/next/source/images下的avatar.gif文件,有两种方法修改连接

1、本地连接,不建议用比较大的图片(大于1M文件),加载图片需要时间

1
2
3
4
5
url: /images/avatar.gif

或者

url: /images/xx.jpg等类型图片

2、图床外链,建议使用

1
url: http://example.com/avatar.png

添加站内搜索

设置效果:

设置方法:
安装hexo-generator-searchdb插件

1
npm install hexo-generator-searchdb --save

编辑_config.yml站点配置文件,新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

编辑themes/next/_config.yml主题配置文件,启用本地搜索功能,将local_search:下面的enable:的值,改成true

1
2
3
# Local search
local_search:
enable: true

底部跳动图标实现

注意点:需要到next\layout_partials下的footer.swig文件中,在你所需要调动的图标所对应的span中增加对应的ID
去到主体的css文件(next\source\css_variables\custom.styl,增加以下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//底部爱心小图标跳动
keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}

//图标所对应的span中的ID
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 113);
}

实现统计功能

具体实现方法:在根目录下安装 hexo-wordcount,运行:

1
npm install hexo-wordcount --save

然后在主题的配置文件中,配置如下:

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

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

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

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

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