Hexo+Github Pages博客美化及优化

本人博客地址：zhyoung.cn

博客打开太慢

• 编辑主题配置文件，注释一行代码：

family: Lato

• 编辑/themes/next/layout/_partials/head/external-fonts.swig文件，把fonts.googleapi.com改为fonts.useso.com

指定不渲染文件

• 在Hexo目录下的source目录下添加不需要渲染的文件：test.html

• 修改Hexo目录下_config.yml里的skip_render选项，格式如下：

skip_render: [test1.html,test2.html]

Fork me on GitHub

• 点击这里或这里挑选合适的样式，并复制代码。

• 打开themes/next/layout/_layout.swig，在

  一行的下面粘贴所复制的代码，并将代码中href改为自己的GitHub地址。

鼠标点击桃心效果

• 复制下面这段内容，并写入/themes/next/source/js/src/love.js保存。

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e

• 编辑/themes/next/layout/_layout.swig，在末尾添加以下代码：

修改文章底部带#号的标签

修改文件/themes/next/layout/_macro/post.swig，将rel="tag">#中#换成

在文末添加“本文结束”标记

• 新建/themes/next/layout/_macro/passage-end-tag.swig文件，添加如下内容：

{% if not is_index %}
-------------本文结束感谢您的阅读-------------
{% endif %}

• 编辑/themes/next/layout/_macro/post.swig，在post-body与post-footer之间(post-footer之前两个div)添加：

{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}

• 在主题配置文件_config.yml末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

头像旋转

编辑/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，在里面添加如下代码：

.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转 
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

博文压缩

• 在站点根目录下执行以下命令：

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

• 在根目录下新建gulpfiles.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');

// 压缩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'))
});
// 压缩css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}), 
imagemin.jpegtran({'progressive': true}), 
imagemin.optipng({'optimizationLevel': 7}), 
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);

• 每次生成时使用命令：hexo g && gulp即可。

侧边栏社交小图标设置

• 打开主题配置文件_config.yml，搜索social_icons，在图标库里找到喜欢的图标，将名字复制到对应位置。

文章添加阴影效果

• 打开/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);
}

不蒜子网页计数器

• 编辑/themes/next/layout/_partials/footer.swig，在适当位置添加：

本站总访问量次

设置网站的图标favicon

• 自己制作一张32*32的ico图标命名为favicon.ico，把图标存放到/themes/next/source/images/。修改主题配置文件:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

实现文章统计功能

• 在根目录下安装hexo-wordcount，运行：npm install hexo-wordcount --save

• 修改主题配置文件：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

添加顶部加载条

• 修改/themes/next/layout/_partials/head.swig，在下添加如下代码：

• 修改进度条颜色，继续在上面代码后添加：

文章底部添加版权信息

• 新建next/layout/_macro/my-copyright.swig:

{% if page.copyright %}






本文标题:{{ page.title }}
文章作者:{{ theme.author }}
发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}
最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}
原始链接:{{ page.permalink }}


许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
  


{% endif %}

• 新建next/source/css/_common/components/post/my-post-copyright.styl：

.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

• 修改next/layout/_macro/post.swig。在如下代码前：

{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}

添加：

{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}

• 编辑next/source/css/_common/components/post/post.styl，在最后一行添加：
  @import "my-post-copyright"

• 在每篇文章前设置copyright: true即可

文章加密访问

• 编辑themes/next/layout/_partials/head.swig，在标签下添加如下代码：

• 在需要密码解锁的文章前设置password: password。后面的password自行设置。