Hexo-Github搭建自己的博客 --- 心得汇总2018版(主题配置篇)

前言

我这篇文章主要是讲解以next主题的各项具体设置,让自己的博客更加美化。(网上有很多关于Next主题的配置方法,我主要是把网上找到的各个设置做个汇总吧)

NexT是一款简洁优雅且易于使用的主题,配置比较简单,只需要稍微修改配置文件即可,功能也比较全,分类、归档、标签显示明了,让人一看就知道干嘛的。


设置侧边栏设置圆形可旋转头像

设置效果:







设置方法:

找到生成的Hexo目录themes/next/source/css_common/components/sidebar下的sidebar-author.styl,将里面的css样式内容全部替换为:

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
.site-author-image {
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: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: 1.4s all;
}

.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}

.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}

.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}


添加动态背景

设置效果:








设置方法:

打开生成的Hexo目录themes/next/layout/_layout.swig文件,
</body>上面添加代码(注意不要放在</head>的后面)

1
2
3
4
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

配置项说明
color :线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B)
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

然后打开主题配置文件,修改canvas_nesttrue

1
canvas_nest: true


点击出现桃心效果

设置效果:








设置方法:

在网址输入如下
http://7u2ss1.com1.z0.glb.clouddn.com/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>


添加RSS

设置效果:






设置方法:
执行以下命令安装RSS插件

1
npm install hexo-generator-feed --save

编辑网站根目录下的_config.yml,添加以下代码开启

1
2
3
4
5
6
plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20


字数统计

设置效果:





设置方法:
安装统计插件

1
npm i --save hexo-wordcount

NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件themes/next/_config.yml中打开wordcount统计功能即可。如下所示:

1
2
3
4
5
6
7
8
# 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

显示文字
打开post.swig文件,路径:themes/next/layout/_macro/post.swig

修改【字数统计】,找到如下代码:

<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>

添加{{ wordcount(post.content)}} 后面,修改后为:

<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>

同理,我们修改【阅读时长】,修改后如下:

<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>


修改``代码块自定义样式

设置效果:



设置方法:
打开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;
}

博文置顶

设置效果:




设置方法:
首先安装插件:

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章:








置顶功能就完成了。

不过置顶的文章显示在最上面之后,如果没有明确的置顶标志,是不是感觉有点怪怪的呢?

设置置顶标志
打开:themes/next/layout/_macro目录下的post.swig文件,定位到<div class="post-meta">标签下,插入如下代码:

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}


结尾添加“本文结束”标记

设置效果:



设置方法:
在路径themes/next/layout/_macro中新建passage-end-tag.swig文件,并添加以下内容:

1
2
3
4
5
6
7
8
9
<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之前添加如下代码,(大概在350行左右的位置):

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/layout/_macro/post.swig搜索rel=”tag”,将后面的#换成

1
<i class="fa fa-tag"></i>


修改文章内链接文本样式

设置效果:




设置方法:
修改文件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/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);
}


添加站内搜索

设置效果:











设置方法:
安装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


首页不显示全文(只显示预览)

设置效果:









设置方法:
打开主题配置文件/themes/next/_config.yml,将auto_excerpt下面的enable:的值,改成true

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

除了这个方法,还有一个更灵活的方法,直接在编辑的文章中添加<!--more-->标记。这样只会显示<!--more-->标记之前的那部份。


添加顶部加载条

设置效果:



设置方法:
打开themes/next/_config.yml主题配置文件,将pace:的值,改成true
还可以将pace_theme:的值,改成相应的名字,变更不同样式的加载条。









添加到百度统计

设置效果:








设置方法:
首先你要去百度统计注册个账号。

将安装代码复制到github上的index.html文件里面的</head>前面(大约在150行左右)

















然后复制百度统计的KEY







编辑文件themes/next/_config.yml,将Baidu Analytics ID下面的baidu_analytics:的值设置成百度统计的KEY

1
2
# Baidu Analytics ID
baidu_analytics: #百度统计的KEY


侧边栏推荐阅读

设置效果:










设置方法:
编辑文件themes/next/_config.yml,找到# Blog rolls修改成下面的样子就OK了。(links里面写你想要的链接):

1
2
3
4
5
6
7
8
9
10
11
12
# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
优设: http://www.uisdc.com/
廖雪峰: https://www.liaoxuefeng.com/
Web前端导航: http://www.alloyteam.com/nav/
前端书籍资料: http://www.36zhen.com/t?id=3448
百度前端技术学院: http://ife.baidu.com/
google前端开发基础: http://wf.uisdc.com/cn/


生成sitemap文件

设置效果:










设置方法:
首先安装相关插件:

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-seo-friendly-sitemap --save

注:根据个人喜欢选择合适插件即可

接着修改主题配置文件themes/next/_config.yml,找到menu:将下面sitemap前面的#号去掉,再添加baidusitemap: /baidusitemap.xml

1
2
3
4
menu:
......
sitemap: /sitemap.xml # 站点地图
baidusitemap: /baidusitemap.xml


添加联系方式

设置效果:








设置方法:
修改themes/next/_config.yml站点配置文件,找到# Social Links,将social:下面对应的·#号去掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/xmzcl || github
E-Mail: mailto:18976787@qq.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: false
transition: false

注释:seoial_icons节点中后面的值是http://fontawesome.io/icons/ 中提供的图标的名称。之后其他链接如推特,微博等都可自行增减。


添加打赏功能

设置效果:








设置方法:
打开themes/next/_config.yml站点配置文件,找到# Rewardwechatpay:alipay:前面的#号删除。然后将自己的二维码文件wechatpay.jpgalipay.jpg图片放入themes/next/source/images中即可。

1
2
3
4
5
# Reward
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png


文章加密访问

设置效果:






设置方法:
打开themes/next/layout/_partials/head.swig文件。
<meta name="theme-color" content="{{ theme.android_chrome_color }}">下面插入代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function () {
if ('{{ page.password }}') {
if (prompt('请输入文章密码') !== '{{ page.password }}') {
alert('密码错误!');
if (history.length === 1) {
location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
} else {
history.back();
}
}
}
})();
</script>

然后在需要加密的文章头上添加password:标签字段,后面跟上你要设置的密码。如下图:








博客加上萌萌的宠物

设置效果:







设置方法:
首先安装live2d插件

1
npm install -save hexo-helper-live2d

然后在在hexo的_config.yml主站配置文件中结尾处添加下面这些代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true

然后刷新一下hexo就可以看到效果了.

1
hexo clean && hexo s

下面这段是出于原创:
萌萌宠物网上找了好多资料,发现没有一个能说清楚live2d是怎么配置和更换宠物的.所以我在这里给大伙写一下我的经验.
如果要变更宠物需要先安装他的插件包,代码如下: 想知道有哪些宠物可以点这里

1
npm install live2d-widget-model-z16

然后在use: live2d-widget-model-wanko这串代码中将live2d-widget-model-wanko变成你安装的宠物名字,如刚才装的live2d-widget-model-z16
再刷新一下hexo就可以看到效果了.
width:150height:300这二个是代表宠物的宽度和高度.你可以自行设置.也是要刷新hexo才可以看到效果.
如果在手机上观看博客,萌宠可能会影响观看.将mobile:下面的show:的值true改成false之后,在手机上就不会显示萌宠了.

1
2
mobile:
show: true


自定义鼠标样式

设置效果:






设置方法:
打开themes/next/source/css/_custom/custom.styl,在里面添加如下代码:

1
2
3
4
5
6
7
// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}

其中url里面必须是ico图片,ico图片可以上传到网上,然后获取外链,复制到url里就行了。

小技巧:二个ICO图标可以设置成一大一小。这样点击起来,就会有动画效果了。


修改主题宽度

设置原因:
因为next默认的主题宽度觉得有点窄,想把他改宽一点,比较好看.所以就有了下面这个方法
设置方法:
themes/next/source/css/_schemes/Picses/_layout.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
// 以下为新增代码!!
header{ width: 70% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 70%; }
.content-wrap { width: calc(100% - 260px); }

.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}


显示阅读百分比

设置效果:






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

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


点击爆炸效果

设置效果:











设置方法:
首先在themes/next/source/js/src里面建一个叫fireworks.js的文件,代码如下:

1
2
3
4
5
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}

再打开themes/next/_config.yml主题配置文件,在文件最后添加:

1
2
# Fireworks
fireworks: true


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

设置方法:
打开themes/next/layout/_partials/footer.swig,使用隐藏符号之间的代码即可,或者直接将这段代码删除。














设置分页显示

设置方法
打开_config.yml主站配置文件,找到index_generator:,设置成如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
index_generator:
path: ''
per_page: 6
order_by: -date

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

说明:index_generator:是设置主页显示多少篇文章开始分页,archive_generator:是设置归档主页显示多少篇文章开始分页,tag_generator:是指底分页条显示多少个分页的链接.


取消Coding跳转页

设置效果:
取消下面这个跳转页面.








设置方法:
打开themes/next/layout/_partials/footer.swig文件。将下面的代码添加到如下图的位置.









1
2
3
4
5
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}

<span>Hosted by <a href="https://pages.coding.me" >Coding Pages</a></span>

然后在Coding网站上,勾选已放置 Hosted by Coding Pages









加入valine在线评论

设置效果:







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







进入应用->设置->应用key,获取你的appid 和 appkey 如图所示:










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

1
2
3
4
5
6
7
8
9
valine:
enable: true
appid: your app id
appkey: your app key
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: ヾノ≧∀≦)o来啊,快活啊!
guest_info: nick,mail,link
pageSize: 10

最后!记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去.

刷新一下~ 是不是就能看到评论框了?


压缩博客

设置方法:
运行下面的命令安装插件:

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
33
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');
// 压缩 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的配置,对博客进行压缩了。

小技巧: linux下可以,将下面的代码添加到~/.bashrc文件的结尾。


代码:
1
2
alias up='hexo clean && hexo g && hexo d' #部署到网上
alias upg='hexo clean && hexo g && gulp && hexo d' #压缩后部署到网上

添加完后,刷新~/.bashrc文件。

1
source ~/.bashrc

这样部署时只需要输入up或者upg就可以实现部署了,不用打那么多字了。


实现fork me on github

设置效果:





设置方法:
点击这里或者这里挑选自己喜欢的样式, 复制代码:

粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中,放在<div class="headband"></div>的下面,并把href改为你的github地址
















显示文章热度

设置效果:

设置方法:
next主题集成leanCloud,打开themes/next/layout/_macro/post.swig,在画红线的区域添加


打开,themes/next/languages/zh-Hans.yml,将画红框的改为热度.

打开themes/next/_config.yml找到leancloud_visitors,将enable:改成true,再填上自己的app_idapp_key不懂怎么看app_id和app_key的可以点这里!

1
2
3
4
leancloud_visitors:
enable: true
app_id: #你自己的id
app_key: #你自己的key



hexo载入动画效果

设置方法:
编辑themes/netx/_config.yml找到motion,将enable的值,改成true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn #主页载入效果
post_header: bounceRightIn #文章标题载入效果
post_body: slideDownIn
coll_header: bounceLeftIn
# Only for Pisces | Gemini.
sidebar: bounceLeftIn #侧边栏载入效果

#号里都是载入效果,有时间可以自己多试一试!


建立md模板

你是在站点文件夹根目录用hexo new <title>新建的文章,那么其实它就是将文章的模版文件~/scaffolds/post.md复制了一份到~/blog/source/_posts/下,所以这也意味着:

你可以直接通过在~/blog/source/_posts/下新建.md结尾的文件来写新的文章。
你可以通过自定义文章的模版文件,从而每次命令行新建的文章都会有你自定义的内容。
下面是我的post.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
title: {{ title }}
date: {{ date }}

categories:
/* 分类,支持多级,比如:
- technology
- computer
- computer-aided-art
*/

tags:
/* 标签
** 多个可以这样写
- 标签1
- 标签2
- 标签3
*/

description:
/* 文章的描述,在每篇文章标题下方显示
*/

comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/

photos:
/* Gallery support,用来支持画廊 / 相册,用法如下:
- photo_url_1
- photo_url_2
- photo_url_3
*/

link:
/* 文章的外部链接
*/

top: true
/* 文章置顶
** true就是开启,flase就是关闭置顶。
*/

password:
/* 文章密码,参考本文"1.20.文章加密访问"
** 需配置好,否则请勿添加!
*/


在博文中添加版权信息

设置效果:

设置方法:
在目录themes/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
{% 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 src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<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');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}

在目录themes/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;
}

修改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
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加:

1
@import "my-post-copyright"

然后保存退出。

在需要增加版权信息显示的博文抬头,添加copyright: true。如下图:


按文章更新时间排序

这个功能我单独写了一篇文章,请访问下面的链接了解。

利用vim实现HEXO文章按更新时间自动排序


美化右侧滚动条

设置效果:









设置方法:
打开themes\next\source\css\_custom\custom.styl文件,将下面的代码添加进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//设置滚动条的样式
//参考https://segmentfault.com/a/1190000003708894
::-webkit-scrollbar {
width: 5px;
height: 5px;

}
//滚动槽
::-webkit-scrollbar-track {
background: #eee;

}
//滚动条滑块
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ccc;

}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(247, 149, 51);

}


优化选择的文字样式

设置效果:

设置方法:
打开themes\next\source\css\_custom\custom.styl文件,将下面的代码添加进去。

1
2
3
4
5
::selection {
background-color: rgb(255, 241, 89);
color: #555;

}


valine评论实现邮箱提醒

这个功能我单独写了一篇文章,请访问下面的链接了解。

Hexo博客之valine评论实现邮箱提醒的方法


未完待续…….

本文标题:Hexo-Github搭建自己的博客 --- 心得汇总2018版(主题配置篇)

文章作者:Hank ZHU

发布时间:2018年07月25日 - 12:15

最后更新:2020年02月14日 - 08:44

原始链接:http://zealot.top/Hexo-Github搭建自己的博客2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际

如需转载请注明文章出处,并保留原文链接及作者。感谢您尊重别人的劳动成果!


-------------本文结束 感谢您的阅读-------------
-------------如果觉得这篇文章不错,可以请作者喝杯咖啡!-------------