1.本地近端安装 - 2. 服务器远端安装与设置 - 3. 腾讯云服务器,域名购买与备案 - 4. 七牛图床与PicGo等辅助工具 - 5. (本文)魔改美化汇总


  1. Lete乐特’s Blog’

  2. 小冰博客 小冰插件包 butterfly-orchid 1.0

  3. Akilar

  4. 小嘉的部落格关于我 Butterfly 主题的所有美化

  5. 云玩家:Butterfly 主题魔改记录

  6. 小康DreamyTZK: Hexo博客之butterfly主题优雅魔改系列(持续更新)

文档部件:Tag Plugins Plus

Akilar: Tag Plugins Plus (github:https://github.com/Akilarlxh/Tag_Plugins

  1. 下划线 的文本
  2. 着重号 的文本
  3. 波浪线 的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}

cogs

1
{% tip cogs %}cogs{% endtip %}
1
{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico %}
1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}
1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

标题字体

小嘉的部落格关于我 Butterfly 主题的所有美化

Akilar: Custom Beautify

采取的策略:全局的字体改为艺术字体:目前采用方正字迹-海体正楷 简(个人使用免费),然后用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
@font-face{
font-family:'HaiTiZhengKai' ; /* 字体名自定义即可 */
src:url('http://cdn.huangxiaokai.cn/FZZJ-HaiTZKJW.TTF'); /* 字体文件路径 */
font-display : auto;
}

.code-lang {
font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}


p {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif!important
}

li {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif!important
}

.content {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif!important
}

td {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif!important
}

th {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif!important
}
1
2
3
4
5
6
7
8
9
10
11
font:
global-font-size: "16px"
code-font-size:
font-family: HaiTiZhengKai
code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link: #https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
font-family: HaiTiZhengKai, Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

访客统计Widget

https://clustrmaps.com/site

自定義側邊欄 | Butterfly

首页置顶相关

小冰教程:hexo-magnet 插件 1.0

小冰教程:hexo-swiper 文章置顶插件

Butterfly 主题美化日记

背景相关

目标:首页一图流背景;魔改使得post,page背景可调;文档部件稍稍透明。

Akilar: Custom Beautify

Akilar: 糖果屋微调合集

小嘉的部落格关于我 Butterfly 主题的所有美化

小康DreamyTZK:Hexo 博客之 butterfly 主题优雅更换背景

简述一下策略:我没有使用:

1
2
3
#page-header{
background: transparent!important;
}

这种比较暴力的手段去除顶部图片,而是通过设置顶部图片为全透明png图片的方式。这样做的好处是,我可以自由选择哪些文章顶部图片消失。

大家发现,首页一图流,图片大多是红红火火热热闹闹的图,这种图片很难再和其他图片进行配合搭配,但是不用担心,Akilar: 糖果屋微调合集提供了为文章定制背景的选择。在文章中,我们可以选择比较单调明亮的背景(素色图),好配合顶部图片。总结一下,除了首页一图流,文章页面我的审美风格安排是:

  1. 一图流复杂图。适用:爱好,游戏,二次元,体现个性。
  2. 一图流素色图,同时top_img: false。适用:推公式,体现专业。
  3. 顶部图+背景素色图。适用:一般情况,生活,感悟。

素色背景在:小康DreamyTZK:Hexo 博客之 butterfly 主题优雅更换背景中找,https://www.eggradients.com/gradient-color

header顶部图

首先是把首页顶图换成了一张完全透明,没有任何东西的png:

1
2
# The banner image of home page
index_img: http://cdn.huangxiaokai.cn/xxxxxxxxxxxxxxxxxxxxxxx.png

但是这样不够,因为顶部图片下面还有一张纯色背景,需要去掉:

1
2
3
header#page-header{
background-color: rgba(255, 255, 255, 0);
}

footer页脚

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* footer */

#footer {
background: transparent !important;
}

[data-theme="dark"]
#footer::before{
background: transparent!important;
}
[data-theme="dark"]
#page-header::before{
background: transparent!important;
}

footer页脚文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2020
custom_text: <p><a style="margin-inline:5px"target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为 Hexo" alt="HEXO"></a>
<a style="margin-inline:5px"target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用 Butterfly" alt="Butterfly"></a>
<a style="margin-inline:5px"target="_blank" href="https://www.qiniu.com/"><img src="https://img.shields.io/badge/CDN-%E4%B8%83%E7%89%9B%E4%BA%91-brightgreen" title="本站使用七牛云为静态资源提供CDN加速" alt="七牛云"></a>
<a style="margin-inline:5px"target="_blank" href="https://cloud.tencent.com/"><img src="https://img.shields.io/badge/Server-%E8%85%BE%E8%AE%AF%E4%BA%91-yellow" title="本站使用腾讯云服务器" alt="腾讯云"></a>
<a style="margin-inline:5px"target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" alt="img" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a><br>
<a href="https://beian.bizcn.com/login.jsp"><img src="/img/icp1.png"><span>皖ICP备20009501号</span></a></p>
copyright: false # Copyright of theme and framework
ICP: # Chinese ICP License
enable: true
url: https://beian.bizcn.com/login.jsp
text: 皖ICP备20009501号
icon: /img/icp.png

Background

背景上我给各种板块加上一点点的透明度,感觉高级一点。需要注意的是,不要忘记对夜间模式做出对应的修改。还有就是透明度加上一点点就可以了(我用白色,透明度0.95),否则背景干扰阅读正文是非常令人反感的。

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
div#post{
background: rgba(255, 255, 255, 0.95);
}
div#page{
background: rgba(255, 255, 255, 0.95);
}
div#archive{
background: rgba(255, 255, 255, 0.95);
}
div#tag{
background: rgba(255, 255, 255, 0.95);
}
div#category{
background: rgba(255, 255, 255, 0.95);
}

#recent-posts>.recent-post-item, .layout>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
background: rgba(255, 255, 255, 0.97);
}

#aside-content .card-widget {
background: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"]
div#post{
background: rgba(0, 0, 0, 0.8)!important;
}
[data-theme="dark"]
div#page{
background: rgba(0, 0, 0, 0.8)!important;
}
[data-theme="dark"]
div#archive{
background: rgba(0, 0, 0, 0.8)!important;
}
[data-theme="dark"]
div#tag{
background: rgba(0, 0, 0, 0.8)!important;
}
[data-theme="dark"]
div#category{
background: rgba(0, 0, 0, 0.8)!important;
}
[data-theme="dark"]
#recent-posts>.recent-post-item, .layout>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
background: rgba(0, 0, 0, 0.8);
}
[data-theme="dark"]
#aside-content .card-widget{
background: rgba(0, 0, 0, 0.7)!important;
}

自定义文章background

Akilar: 糖果屋微调合集

  1. 修改[Blogroot]\themes\butterfly\layout\includes\layout.pug

    1
    2
    3
    4
    5
    6
      if theme.background
    - #web_bg
    + if page.background
    + #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
    + else
    + #web_bg
  2. 如此即可在每个页面的

    markdown文件的 front-matter中使用background配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 糖果屋微调合集
    top_img:
    cover: 'https://cdn.jsdelivr.net/gh/Akilarlxh/Picgo@v1.0/Candyhome/20201115152231.png'
    background: url(https://cdn.jsdelivr.net/gh/Akilarlxh/Picgo@v2.3/tencent/site-elements/index.webp)
    description: 将本站针对butterfly主题的亿点点小改动做个集锦。
    ---

右下角选择按钮,滚动条

Lete乐特’s Blog’

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
/* 滚动条 */

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background-color: #e58a8a;
background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 2em;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-moz-selection {
color: rgb(97, 97, 97);
background-color: #e58a8a;
}

/* 右下角按钮圆角 */

button#rightside_config {
border-radius: 10px;
}
button#go-up {
border-radius: 10px;
}
button#readmode {
border-radius: 10px;
}
button#darkmode {
border-radius: 10px;
}
button#hide-aside-btn {
border-radius: 10px;
}
button#mobile-toc-button {
border-radius: 10px;
}

版权声明美化

Akilar: (二创)Copyright-beautify

阿里巴巴图标

https://akilar.top/posts/d2ebecef/

导航栏与Social图标:阿里巴巴与动画

Akilar: 糖果屋微调合集 (菜单栏多色图标配置教程,Social 卡片彩色图标引入)

评论区

Waline

https://blog.slqwq.cn/2021/posts/rbblakpo/

https://blog.ccknbc.cc/posts/waline-commens-system-deployment-logs/

https://waline.js.org/client/recentcomment.html

Twikoo

颜色设置备忘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
enable: true
main: "#FF002B"
paginator: "#FF9900"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#A3A3A3"
blockquote_padding_color: "#49b1f5"
blockquote_background_color: "#49b1f5"