Hexo魔改笔记

🎨上次(2019年6月初)因为重装Windows系统的缘故,需要重新部署本地的环境并与Github的仓库进行连接,因为当时正处于期末复习阶段,于是为了省事直接选择备份博客文章后全部重新部署本地环境,而且更换了Hexo主题的版本,第一次(2019年4月底)安装Hexo的时候使用的貌似是5.X的版本,在当时魔改的过程中发现该版本无法完美添加代码复制的按钮,于是在第二次部署的时候特意更换了7.1.1版本的,测试代码复制按钮通过以后就开始魔改其他的配置了。直到前不久…我刚刚发现…一个问题…对于强迫症患者来说是一个致命的问题——分类页面的格式变成了这样子😑

于是我百方求助,有人建议我修改CSS样式,但是因为对CSS不够熟悉,也是无从下手…😵

在尝试了一个上午的时间不更换版本修复这个bug无果,下午我果断调整方向,直接选择更换主题版本。令人惊喜的是,更换版本到6.6.0以后竟然完美解决了这个问题。😎果然还是那句话,重装解决99%的问题。

以下记录这次更换版本后的各种魔改操作,以便日后复查

HEXO版本更换成最新的,避免各种功能不兼容问题(代码复制按钮等)。

添加代码复制按钮

在主题配置文件中启用copy_button即可

1
2
3
4
copy_button:
enable: true
# Show text copy result
show_result: true

修改文章内超链接样式

定位到themes/next/source/css/_custom/custom.styl

添加以下代码

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

修改阅读全文按钮样式

定位到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
.post-button {
margin-top: 30px;
text-align: center;
}

.post-button .btn {
color: #fff;
font-size: 15px;
background: #5c5c5c;
border-radius: 16px;
line-height: 2;
padding: 0 20px;
transition: 0.2s ease-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.post-button a{
margin: 0 8px 8px 0 !important;
border-bottom: 1px solid #666;
border: none;
}

.btn:hover, .post-button .btn:hover {
border-color: #222;
color: #222;
background: #fff;

}

修改主题页面布局为圆角

/themes/next/source/css/_variables处找到custom.styl添加如下代码(以Gemini风格为例):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Variables of Gemini scheme
// =================================================

@import "Pisces.styl";

// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color = #eee

// Borders.
// --------------------------------------------------
$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)

$border-radius-inner = initial
$border-radius = initial
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

引用块样式修改

定位到themes\next\source\css\ _custom\ _custom.styl添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//引用块样式
code {
color: #1ABC9C;
background: #fbf7f8;
margin: 2px;
}

// 引用块?边框的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

引用块设置换行

定位到themes\next\source\css\_common\scaffolding\base.styl,找到blockquote样式,进行如下修改:

1
2
3
4
5
blockquote {
margin: 0;
padding: 0;
word-break: break-all;
}

设置头像边框为圆形框&鼠标悬停头像旋转

定位到themes\next\source\css\_common\components\sidebar\sidebar-author.styl,作如下修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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: 60%;
transition: 2.5s all;
}

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

首页添加Github标签

定位到themes\next\layout\layout.swig,在<div class="headband"></div>下方添加对应颜色的代码

黑色:

1
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

绿色:

1
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

文章永久链接

使用如下命令安装hexo-abbrlink插件:

1
sudo npm install hexo-abbrlink --save

在站点配置文件下进行如下修改:

1
2
3
4
5
6
7
url: https://www.52debug.cn
root: /
permalink: posts/:abbrlink.html
permalink_defaults:
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

文章内页二级分类样式逻辑优化

定位到themes\next\layout\_macro\post.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
{% if post.categories and post.categories.length and theme.post_meta.categories %}
<span class="post-category" >
{% if theme.post_meta.created_at or theme.post_meta.updated_at %}
<span class="post-meta-divider">|</span>
{% endif %}
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('post.in') }}</span>
{% endif %}
{% for cat in post.categories %}
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="{{ url_for(cat.path) }}" itemprop="url" rel="index">
<span itemprop="name">{{ cat.name }}</span>
</a>
</span>

{% set cat_length = post.categories.length %}
{% if cat_length > 1 and loop.index !== cat_length %}
{{ __('symbol.comma') }}
{% endif %}
{% endfor %}
</span>
{% endif %}

这一段就是相应的代码

可以看出来

1
2
3
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>

这一部分是分类的小图标

1
2
3
4
5
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="{{ url_for(cat.path) }}" itemprop="url" rel="index">
<span itemprop="name">{{ cat.name }}</span>
</a>
</span>

这一部分是生成链接

1
2
3
{% if cat_length > 1 and loop.index !== cat_length %}
{{ __('symbol.comma') }}
{% endif %}

这一部分就是产生分隔符号(如果多余一个分类并且当前循环不是最后一个)

1
__('symbol.comma')

这个就是 “,” 把它修改成即可

1
{{ ">" }}

即可。

使用使用压缩博文页面,优化访问速度

在站点根目录下安装hexo-neat

1
npm install hexo-neat --save

为站点配置文件添加相关配置,添加如下内容到站点配置文件_config.yml的末尾就可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: false
mangle: false
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'

此处因为笔者的不问博文开启了加密,所以为了避免出现bug,就选择不压缩JS文件,当然如果你想压缩JS文件,也可以通过配置参数将其开启。

压缩前的页面代码包含很多空行

压缩后的网页代码

文章添加置顶和加精功能

笔者是通过安装第三方插件来实现文章的置顶功能的,当然也可以通过修改文件配置来实现(参考:解决Hexo博客文章置顶问题),但是会比直接使用插件略显繁琐。

执行以下命令安装插件

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

在需要置顶的文章的Front-matter中加上top: true 或者top: 任意数字,例如:

1
2
3
4
5
6
7
8
9
title: 漫步者TWS1蓝牙耳机开箱
copyright: true
categories:

- 硬件派
abbrlink: d05fae9e
date: 2019-09-27 19:36:13
top: 100
tags:

其中,top的值越大,文章排序越靠前。

到这里,已经实现了文章排序显示的问题。当然,为了更直观地表达该文章是置顶的,还需要给文章添加“置顶”的标签。

打开/themes/next/layout/_macro/ 目录下的post.swig文件,在<div class="post-meta">的第一个<span>标签下,插入如下代码:

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 %}

同理,可以设置精华文章标签的添加:

1、在/themes/next/layout/_macro/路径,找到post.swig,在前文置顶功能后边,加上如下代码:

1
2
3
4
5
{% if post.essential%}     
<span class="post-meta-item-icon">
<i class="fa fa-newspaper-o jingping">精华</i>
</span>
<span class="post-meta-divider">|</span> {% endif %}

2、在themes/next/source/css/_custom/custom.styl中,增加如下样式:

1
2
3
4
5
.jingping{  
background : #00a8c3;
padding:2px 4px 2px 4px;
color: #fff;
}

3、在需要设置精华的文章Front-matter中,加入如下代码

1
essential: true

到此就完成了精华文章的设置。

常见的音乐的两种语法

使用HTML直接添加网易云音乐

1
2
3
4
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=33911781&auto=1&height=66">
</iframe>
</div>

Hexo专用写法

1
{% aplayer "送别" "李叔同" "https://resource.52debug.cn/music/songbie.mp3" "https://s2.ax1x.com/2019/09/13/nrrMUU.png" "autoplay" %}

其他修改记录:

baidu_site_verification②开启主题配置文件中的disable_baidu_tranformation③主题配置文件开启index_with_subtitle④主题配置文件开启exturl(会导致自定义的超链文字样式失效)

鸣谢

  • 友链样式来自YuYe

  • 很多问题通过阅读Next官方文档得以完美解决

本文标题:Hexo魔改笔记

文章作者:zzzain46

发布时间:2019年07月08日 - 17:07

最后更新:2019年12月28日 - 10:12

原始链接:https://www.52debug.cn/posts/90e45981.html

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

如果你觉得我的文章对你有用,请随意打赏!
0%