Hexo博客Next6.0版本主题配置（二）
新建404界面
在站点根目录下，输入hexo new page 404，在默认Hexo站点下/source/404/index.md
打开新建的404界面，编辑属于自己的404界面，可以显示腾讯公益404界面，代码如下：
静态资源压缩
【Hexo博客Next6.0版本主题配置（二）】静态资源压缩
在站点目录下安装插件：
$ npm install gulp -g
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文件，文件内容如下：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命令同步到服务器：
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修改为：background: rgba(255,255,255,0.7);
//0.7是透明度
菜单栏背景 根博客目录
themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下background: white修改为：background: rgba(255,255,255,0.7);
//0.7是透明度
站点概况背景 根博客目录
themes\next\source\css\_schemes\Pisces\_sidebar.styl文件.sidebar-inner标签下background: white修改为：background: rgba(255,255,255,0.7);
//0.7是透明度
修改然后根博客目录
themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar标签下background: $body-bg-color修改为：background: rgba(255,255,255,0.7);
//0.7是透明度
网站底部字数统计
具体方法实现
切换到根目录下，然后运行如下代码
npm install hexo-wordcount --save
然后在
/themes/next/layout/_partials/footer.swig文件尾部加上：博客全站共{{ totalcount(site) }}字添加侧栏推荐阅读
编辑主题配置文件，如下配置即可：
# 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中代码替换为：'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = https://www.it610.com/article/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值，值越大，越靠前：
---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---
网页底部信息隐藏
网页底默认最新一次使用，需要取消
since注释，设定年份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 button将scrollpercent:的值,改成true# Scroll percent label in b2t button
scrollpercent: true
浏览页面的时候显示当前浏览进度
如果想把top按钮放在侧边栏,打开
themes/next下的_config.yml,搜索关键字b2t,把false改为true# Back to top in sidebar
b2t: true # Scroll percent label in b2t button
scrollpercent: true
加入valine在线评论
设置效果：
设置方法：
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.
拿到
appid和appkey之后，打开themes/next/_config.yml主题配置文件，查找valine，填入appid和 appkey我的配置:
添加网站已运行时间
在
themes/layout/_parrials/footer.swing后添加载入天数...载入时分秒...添加头像
打开
themes/next下的_config.yml文件，搜索 Avatar关键字，修改url的参数avatar:
# in theme directory(source/images): /images/avatar.gif
# in sitedirectory(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: falseurl链接默认是
themes/next/source/images下的avatar.gif文件,有两种方法修改连接1、本地连接，不建议用比较大的图片（大于1M文件），加载图片需要时间
url: /images/avatar.gif或者url: /images/xx.jpg等类型图片
2、图床外链，建议使用
url: http://example.com/avatar.png
添加站内搜索
设置效果：
设置方法：
安装
hexo-generator-searchdb插件npm install hexo-generator-searchdb --save
编辑
_config.yml站点配置文件，新增以下内容到任意位置：search:
path: search.xml
field: post
format: html
limit: 10000
编辑
themes/next/_config.yml主题配置文件，启用本地搜索功能,将local_search:下面的enable:的值，改成true# Local search
local_search:
enable: true
底部跳动图标实现
注意点：需要到
next\layout_partials下的footer.swig文件中，在你所需要调动的图标所对应的span中增加对应的ID去到主体的
css文件（next\source\css_variables\custom.styl，增加以下代码即可//底部爱心小图标跳动
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);
}
我的个人博客文章地址，欢迎访问
我的CSDN文章地址，欢迎访问
我的文章地址，欢迎访问
我的GitHub主页，欢迎访问
推荐阅读
- mysql的单页应用框架搭建_采用vue+webpack构建的单页应用——私人博客MintloG诞生记...
- webpack|采用 vue+webpack 构建的单页应用——私人博客 MintloG 诞生记
- python|博客目录索引
- Python|Python 博客园快速备份脚本
- ES6中的Symbol
- 记一次进程阻塞诊断
- 刷题日常计~JS|刷题日常计~JS⑥
- DS博客作业01--线性表
- mysql数据库基础|mysql数据库基础 博客_MySQL数据库基础与实例教程-课后试题第一章
- 走着走着就散了