Hexo-Next主题优化

1. 添加动态背景

动态背景就是我的博客背景中动的那些粒子。

只需修改主题配置文件 /themes/next/_config.yml

1
2
3
4
5
6
7
8
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: true

上面三个,想开哪个背景,就把哪个改为true。

2. 添加背景图片

1>. 首先,找一张大一点的图片,

建议在Bing引擎B上找。比如我找到这么一张,分辨率是1920*1080,在此给它命名为bk1.jpg.

把这张图片存在/themes/next/source/images,然后配置程序,

2>. \themes\next\source\css_custom中,加入以下代码,

1
2
3
4
5
6
7
body {
background: url(/images/bk1.jpg); //https://source.unsplash.com/random
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size:cover;
}
  • background: url(/images/bk1.jpg); //这里是图片的路径 我后面给的网址填进去可以让每次打开博客都有不同的背景图片。
  • background-repeat: no-repeat;//让图片不重复出现。比如,如果你的图片比较小,网页又比较短,这个背景图就会生成多个同样的图片去覆盖整个页面,样式很丑。💩
  • background-position:50% 50%; //这里是设置图片大小,默认设置最合适不过了,不用修改。
  • background-size:cover; //完美覆盖。👍

3>. 修改透明度

背景图片遮盖文章内容,让阅读者很难受,所以需要调整文章背景的透明度。

到\themes\next\source\css_custom,在里面加入以下代码

1
2
3
4
5
6
7
.main-inner { 
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #FFFFF0;
opacity: 0.8;
min-height: 500px;
}
  • margin-top: 60px; padding: 60px 60px 60px 60px; //文章背景框框的大小这样挺合适的,不用改。(针对一般用户)
  • background: #FFFFF0;//修改文章背景框内部颜色。
  • opacity: 0.8; //设置透明度,博主调了很多数值,个人认为0.8最合适。(0是全透明,1是不透明)
  • min-height: 500px; //顾名思义,背景高度。

效果你现在就可以看到我的博客背景及文章样式,在此就不脱裤子放p(–多此一举)了呢!😁

3. 侧边栏设置

1>. 修改合适的主题方案

首先打开主题配置文件

/themes/next/_config.yml,找到以下代码,

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

需要哪个方案就把哪个主题前面的“#”去掉,这里需要强调的是有些主题方案是不带侧边栏的,所以选择时需要注意。

2>. 修改侧边栏参数

(contrl+F)在主题配置文件搜索sidebar,找到以下代码段

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
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/icon.jpg #设置你的头像的图片
#rounded: true
#opacity: 0.5
#rotated: true
# Table Of Contents in the Sidebar
toc:
enable: true #文章打开时显示目录

# Automatically add list number to toc.
number: false

# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: right #侧边栏显示的位置
#position: left

# Sidebar Display, available value (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle.
display: post #侧边栏只在看文章时自动打开,其他时候需要手动点击按钮
#display: always #侧边栏一直打开
#display: hide #侧边栏保持隐藏,需要手动打开
#display: remove #取消侧边栏的存在

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12

# Back to top in sidebar (only for Pisces | Gemini).
b2t: false

# Scroll percent label in b2t button. 返回按钮上的百分比显示
scrollpercent: true

# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false

博主昵称和站点描述你需要在站点配置文件(不好好注意这几个字的都不是乖宝宝😡)中修改,设置author和description。

3>. 设置社交链接

侧边栏链接的修改包括两个部分,||前面时链接,||后面是链接图标。这里都是在主题配置(/themes/_config.yml)文件修改。

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
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# 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/yourname || github
E-Mail: mailto:mlf2410211674@qq.com || envelope
QQ: http://wpa.qq.com/msgrd?v=3&uin=2410211674&site=qq&menu=yes || qq
#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

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
优惠券领取网: http:www.meilinfengdaiwang.cn

Next内置了很多网站的链接,需要哪个就打开哪个,例如

1
2
3
social:                 
#GitHub: https://github.com/yourname || github
E-Mail: mailto:mlf2410211674@qq.com || envelope

也可以添加它本来没有设置的网站链接,如我的QQ链接

1
QQ: http://wpa.qq.com/msgrd?v=3&uin=2410211674&site=qq&menu=yes || qq

这里大家想要把自己的QQ链接放在侧边栏,可以复制上面的代码,只需改变QQ号就行。

4>. 设置友情链接

1
2
links: 
优惠券领取网: http:www.meilinfengdaiwang.cn

此处添加你的友情链接,我在这里放了一个优惠券领取网,是我前段时间学习建站做出来的网站。

4. 头像设置(圆形+旋转)

1>. 先打开主题配置文件

/themes/_config.yml

找到

1
2
3
4
5
6
7
8
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/icon.jpg
rounded: true #设置圆形
opacity: 0.5 #透明度
rotated: true #设置旋转
#Table Of Contents in the Sidebar

在命令行,分3步(不要写$符号)

1
2
3
$ hexo clean
$ hexo g
$ hexo s --debug

检查侧边栏的头像,看看有没有设置成功,如果没成功,说明和博主的Next版本差不多,请继续往下看。

2>. /themes/next/sourse/css/_commen/components/sidebar/sidebar-author.syl

打开,找到或添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
//设置旋转
transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}

你需要加入我用中文注释的那三段代码。

至此,头像圆形特效应该就设置成功了。

5. 浏览页面显示当前浏览进度

打开主题配置文件/themes/_config.yml,搜索关键字==scrollpercent==,把false改为true即可。

b2t: false 这个是设置把top按钮放在侧边栏里边,但是只适用于Pisces 、Gemini两种主题方案,如果要打开,改成true即可。

1
2
3
4
5
# Back to top in sidebar (only for Pisces | Gemini).
b2t: false

# Scroll percent label in b2t button.返回按钮上的百分比显示
scrollpercent: true

6. 添加顶部加载条

打开主题配置文件/themes/_config.yml,搜索关键字pace,设置为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: false
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

以上加载样式自行选择,博主实在欣赏不来,就是用默认的了。😜

7. Hexo-Next代码复制功能

1>. 下载clipboard.js

点击链接下载 https://github.com/zenorocha/clipboard.js

tMbc6S.png

clipboard.js-master里面找到里边的clipboard.js和clipboard.min.js文件(注意是两个文件,如果设置了第一个文件,页面代码段右上角有显示复制的按钮,但是却没有功能,不要问我是怎么知道的😅)放置在./themes/next/sourse/js/src下。

2>. clipboard.js的使用

也是在.\themes\next\source\js\src目录下,创建clipboard-use.js,文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*页面载入完成后,创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);

然后在.\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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//代码块复制按钮
.highlight{
//方便copy代码按钮(btn-copy)的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}

3>. 引用

.\themes\next\layout\_layout.swig文件中,添加引用(注:在 swig 末尾或 body 结束标签(</body>)之前添加):

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

效果如下

tMbWwj.png

8. 自定义友链页面

1>. 第一种样式,是这样的

tMbRmQ.png

如何设置请点击这里,查看上面的侧边栏设置的第4点。

但是,当友链变多后,页面排版就会出现问题,所以我想给友链设置一个单独的页面。

2>. 新增页面

在命令行输入

1
$ hexo new page links

主题配置文件下找到menu,

1
2
3
4
5
6
7
menu:
home: /|| home
links: /links/|| user #记得要增加这一行
tags: /tags/|| tags
categories: /categories/|| th
archives: /archives/|| archive
音乐: /music/|| music

首先我们转到/themes/next/layout新建links.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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}

<div id="links">
<style>

#links{
margin-top: 5rem;
}

.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 300px;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;

}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 236px;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">

{% for link in theme.mylinks %}

<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>

{% endfor %}

</div>
{{ page.content }}
</div>
</div>

{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}

接着修改/themes/next/layout/page.swig文件,在

1
2
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#

位置添加以下代码

1
2
3
<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}{#

如下

1
2
3
4
5
6
7
8
9
10
11
12
  #}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#

<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}{#
#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

然后我们引入links.swig,在/themes/next/layout/page.swig,引入新建的links.swig

1
2
3
<!-- 友情链接-->
{% elif page.type === 'links' %}
{% include 'links.swig' %}

把上面代码段复制到links.swig下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
      {% elif page.type === 'categories' %}
<div class="category-all-page">
<div class="category-all-title">
{{ _p('counter.categories', site.categories.length) }}
</div>
<div class="category-all">
{{ list_categories() }}
</div>
</div>

<!-- 友情链接-->
{% elif page.type === 'links' %}
{% include 'links.swig' %}

{% else %}
{{ page.content }}
{% endif %}
</div>
{#####################}
{### END PAGE BODY ###}
{#####################}

最后我们来配置友链,在主题配置文件/themes/next/_config.yml中,末尾处新增mylinks,如下

1
2
3
4
5
6
7
8
9
10
11
12
defaultlinks:

- nickname: 幕光倾城-Linfeng-Mei # 昵称
avatar: https://meilinfeng.coding.net/p/myblogs/d/myblogs/git/raw/master/images/icon.jpg # 头像地址
site: https://meilinfengdaiwang.cn #友链地址
info: 钝学累功-勤能补拙

friendslinks:
- nickname: 幕光倾城-Linfeng-Mei # 昵称
avatar: https://meilinfeng.coding.net/p/myblogs/d/myblogs/git/raw/master/images/icon.jpg # 头像地址
site: https://meilinfengdaiwang.cn #友链地址
info: 钝学累功-勤能补拙

做到这儿,是不是页面还是没出现友链???😱

不要慌😕,我们打开/sourse/links/index.md,最前边添加type: “links” (这一步很重要,我做这个的时候查了很多资料,前边都做完了,检查了很久,友链就是显示不出来,然后想到了这个类型,所以一定要注意)

1
2
3
title: links
date: 2020-05-15 20:19:34
type: "links" <!--一定要注意中间有空格-->

至此,这就成功添加了一个漂亮的友链新页面。可否赏脸互链呢,hhh😋

在这里插个话,如果你的头像是本地的,交换友链的时候,头像地址不好写,博主推荐一个网站,图床,它可以把你的头像图片准换为网址的形式,而且访问很快。

9. 给个别文章加密

1>. 下载加密插件

在hexo根目录,使用

1
npm install hexo-blog-encrypt

2>. 打开根目录配置文件

./config.yml,文末处加上

1
2
encrypt:
enable: true

3>. 需要加密的文章设置

打开.md文件,文首阴影处(YMAL Front Matter)写下

1
2
3
4
5
title: 标题自拟
date: 2020-05-17 21:57:14
tags: ["1111"]
categories:
password: muguangqingcheng

加上password: 字母段

即可,注意这里的密码只能设置为英文字母,博主用数字试了确实不行。


给个好评呗
Donate comment here
0%