继 Hexo+GitHub Pages搭建的个人博客 之后,在基础上hexo框架基于next主题深度定制方案
主要有:
- 在右上角或者左上角实现fork me on github
- 添加RSS
- 背景配置
- 添加动态背景
- 实现点击出现桃心效果
- 修改文章内链接文本样式
- 修改文章底部的那个带#号的标签
- 在每篇文章末尾统一添加“本文结束”标记
- 修改作者头像并旋转
- 博文压缩
- 修改“代码块自定义样式
- 侧边栏社交小图标设置
- 主页文章添加阴影效果
- 在网站底部加上访问量
- 添加热度
- 网站底部字数统计
- 添加 README.md 文件
- 设置网站的图标Favicon
- 实现统计功能
- 添加顶部加载条
- 在文章底部增加版权信息
- 添加Gitment评论系统
- 隐藏网页底部powered By Hexo / 强力驱动
- 修改网页底部的桃心
- 文章加密访问
- 添加jiathis分享
- 博文置顶
- 修改字体大小
- 修改打赏字体不闪动
- 侧边栏推荐阅读
- 自定义鼠标样式
- hexo 添加百度站长推送
- hexo NexT主题首页title链接的优化
- Hexo NexT主题修改文章标题样式
- hexo 添加百度站长推送
在右上角或者左上角实现fork me on github
具体实现方法
点击这里 挑选自己喜欢的样式,并复制代码。 例如,我是复制如下代码:
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中放在1
<div class="headband"></div>
的下面,并把href改为你的github地址
添加RSS
具体实现方法
切换到你的blog的路径,例如我是在/Users/Hexo/blog这个路径上,也就是在你的根目录下
然后安装 Hexo 插件:(这个插件会放在node_modules这个文件夹里)1
$ npm install --save hexo-generator-feed
接下来打开配置文件
在里面的末尾添加:(请注意在冒号后面要加一个空格,不然会发生错误!)1
2
3# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子:(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)1
2
3
4# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
配置完之后运行:
$ hexo g
重新生成一次,你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效,之后再部署到 Github 中。
背景配置
背景透明
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl这个文件的
第65行background:删除掉
按钮背景
博客根目录 themes\next\source\css\_common\components\post\post-button.styl 第七行修 background: ;
站点概况背景
博客根目录 themes\next\source\css\_schemes\Pisces\_sidebar.styl
菜单栏背景
next\source\css_schemes\Pisces\_layout.styl 文件里.header-inner 这个选择器下的background 就是背景色
添加动态背景
具体实现方法
修改代码
打开next/layout/_layout.swig,在之前添加如下代码:1
2
3{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
修改主题配置文件
打开/next/_config.yml,添加以下代码:1
2
3
4
5
6# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
运行hexo clean 和 hexo g hexo s之后就可以看到效果了
实现点击出现桃心效果
具体实现方法
点击这里love.js
然后将里面的代码copy一下,新建love.js文件并且将代码复制进去,然后保存。将love.js文件放到路径/themes/next/source/js/src里面,然后打开\themes\next\layout_layout.swig文件,在末尾(在前面引用会出现找不到的bug)添加以下代码:1
2<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
修改文章内链接文本样式
具体实现方法
修改文件 themes\next\source\css_common\components\post\post.styl,在末尾添加如下css样式,:1
2
3
4
5
6
7
8
9
10
11// 文章内链接文本样式
.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;
}
}
其中选择.post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。
修改文章底部的那个带#号的标签
具体实现方法
修改模板/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成1
<i class="fa fa-tag"></i>
在每篇文章末尾统一添加“本文结束”标记
具体实现方法
在路径 \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;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
接着打开\themes\next\layout_macro\post.swig文件,在post-body 之后, post-footer 之前添加如下画红色部分代码(post-footer之前两个DIV):
代码如下:1
2
3
4
5<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件(_config.yml),在末尾添加:1
2
3# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。
修改作者头像并旋转
具体实现方法
打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl,在里面添加如下代码: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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60.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);
}
}
博文压缩
在站点的根目录下执行以下命令:1
2$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
在如下图所示,新建 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
33var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 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'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);
生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩。
修改“代码块自定义样式
具体实现方法
打开\themes\next\source\css_custom\custom.styl,向里面加入:(颜色可以自己定义)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
侧边栏社交小图标设置
具体实现方法
打开主题配置文件(_config.yml),搜索social_icons:,在图标库找自己喜欢的小图标,并将名字复制在如下位置,保存即可
主页文章添加阴影效果
具体实现方法
打开\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);
}
在网站底部加上访问量
具体实现方法
打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话:
代码如下:1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后再合适的位置添加显示统计的代码,如图:
代码如下:1
2
3
4
5<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
在这里有两中不同计算方式的统计代码:
- pv的方式,单个用户连续点击n篇文章,记录n次访问量
1
2
3<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
uv的方式,单个用户连续点击n篇文章,只记录1次访客数1
2
3<span id="busuanzi_container_site_uv">
本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>
添加之后再执行hexo d -g,然后再刷新页面就能看到效果
添加热度
具体实现方法
next主题集成leanCloud,打开/themes/next/layout/_macro/post.swig,在画红线的区域添加℃:
然后打开,/themes/next/languages/zh-Hans.yml,将画红框的改为热度就可以了
网站底部字数统计
具体方法实现
切换到根目录下,然后运行如下代码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>
添加 README.md 文件
每个项目下一般都有一个 README.md 文件,但是使用 hexo 部署到仓库后,项目下是没有 README.md 文件的。
在 Hexo 目录下的 source 根目录下添加一个 README.md 文件,修改站点配置文件 _config.yml,将 skip_render 参数的值设置为
skip_render: README.md
保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。
设置网站的图标Favicon
具体方法实现
在EasyIcon中找一张(32*32)的ico图标,或者去别的网站下载或者制作,并将图标名称改为favicon.ico,然后把图标放在/themes/next/source/images里,并且修改主题配置文件:
# Put your favicon.ico into hexo-site/source/
directory.
favicon: /favicon.ico
实现统计功能
具体实现方法
在根目录下安装 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
添加顶部加载条
具体实现方法
打开/themes/next/layout/_partials/head.swig文件,添加红框上的代码
代码如下:1
2<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才link的后面)1
2
3
4
5
6
7
8
9
10
11
12
13<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
目前,博主的增加顶部加载条的pull request 已被Merge
现在升级最新版的next主题,升级后只需修改主题配置文件(_config.yml)将pace: false改为pace: true就行了,你还可以换不同样式的加载条.
在文章底部增加版权信息
在目录 next/layout/_macro/下添加 my-copyright.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
28
29
30
31
32{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
在目录next/source/css/_common/components/post/下添加my-post-copyright.styl: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.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,在代码1
2
3
4
5<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>
之前添加增加如下代码:1
2
3
4
5<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
如下:
修改next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:1
保存重新生成即可。
如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加 copyright: true 的设置,类似:
小技巧:如果你觉得每次都要输入 copyright: true 很麻烦的话,那么在 /scaffolds/post.md 文件中添加:
这样每次hexo new “你的内容”之后,生成的md文件会自动把copyright:加到里面去
(注意:如果解析出来之后,你的原始链接有问题:如:http://yoursite.com/前端小项目:使用canvas绘画哆啦A梦.html,那么在根目录下_config.yml中写成类似这样:)
就行了。
添加Gitment评论系统
具体实现方法见 为 hexo NexT 添加 Gitment 评论插件
隐藏网页底部powered By Hexo / 强力驱动
打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可,或者直接删除。
修改网页底部的桃心
还是打开themes/next/layout/_partials/footer.swig,找到:
,然后还是在图标库中找到你自己喜欢的图标,然后修改画红线的部分就可以了。
文章加密访问
具体实现方法
打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:
代码如下:1
2
3
4
5
6
7
8
9
10<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>
添加jiathis分享
在主题配置文件中,jiathis为true,就行了,如下图
默认是这样子的:
如果你想自定义话,打开themes/next/layout/_partials/share/jiathis.swig修改画红线部分就可以了
博文置顶
修改 hero-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 ;
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---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---
修改字体大小
打开\themes\next\source\css\_variables\base.styl文件,将 $font-size-base改成16px ,如下所示:1
$font-size-base = 16px
修改打赏字体不闪动
修改文件next/source/css/_common/components/post/post-reward.styl,然后注释其中的函数wechat:hover和alipay:hover,如下:1
2
3
4
5
6
7
8
9
10
11
12/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/
侧边栏推荐阅读
打开主题配置文件修改成这样就行了(links里面写你想要的链接):1
2
3
4
5
6
7
8
9
10
11# Blogrolls
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
优设: http://www.uisdc.com/
张鑫旭: http://www.zhangxinxu.com/
Web前端导航: http://www.alloyteam.com/nav/
前端书籍资料: http://www.36zhen.com/t?id=3448
百度前端技术学院: http://ife.baidu.com/
google前端开发基础: http://wf.uisdc.com/cn/
自定义鼠标样式
打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码1
2
3
4
5
6
7// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto
}
其中 url 里面必须是 ico 图片,ico 图片可以上传到网上(我是使用七牛云图床),然后获取外链,复制到 url 里就行了
hexo 添加百度站长推送
具体实现方法见 hexo 添加百度站长推送
hexo NexT主题首页title链接的优化
具体实现方法见 hexo NexT主题首页title链接的优化
Hexo NexT主题修改文章标题样式
进入主题目录
hexo\themes\next\source\css\_common\components\post
修改post.styl文件,在配置的后面添加下面的代码。该文件是博文的样式表。
注意如果想把主页标题样式一同修改,可以用把 .page-post-detail 去掉1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21/*添加下面的CSS代码来修改博客标题样式*/
.page-post-detail .post-title {
font-size: 26px;
text-align: center;
word-break: break-word;
font-weight: $posts-expand-title-font-weight
background-color: #b9d3ee;
border-radius:.3em;
line-height:1em;
padding-bottom:.12em;
padding-top:.12em;
box-shadow:2px 2px 7px #9fb6cd;
+mobile() {
font-size: 22px;
}
}
/*添加上面的CSS代码来修改博客标题样式*/
@import "post-expand";
@import "post-collapse";
@import "post-type";
@import "post-title";
hexo 添加百度站长推送
具体见 hexo 添加百度站长推送