Hexo Fluid博客魔改笔记

本文最后更新于：几秒前

Hexo Fluid博客魔改笔记

鸣谢：

公式渲染bug修改

见：Hexo-Fluid的Mathjax数学公式渲染错误问题 - Ywj226

Mac风格代码块

在自定义CSS文件中加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
figure.highlight {
    /*
    background: #21252b;
    background: rgb(246,248,250);
    */
    border-radius: 8px;
    box-shadow: 1px 2px 22px 1px rgba(0, 0, 0, .3);
    padding-top: 25px;
    z-index:998;
}

figure.highlight::before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    left: 12px;
    margin-top: -15px;
    position: absolute;
    width: 12px;
    z-index:999;
}

标题样式修改

在自定义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
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
.markdown-body > h1,
.markdown-body > h2,
.markdown-body > h3,
.markdown-body > h4,
.markdown-body > h5,
.markdown-body > h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    overflow: hidden;
}
.markdown-body > h1:hover a.anchor,
.markdown-body > h2:hover a.anchor,
.markdown-body > h3:hover a.anchor,
.markdown-body > h4:hover a.anchor,
.markdown-body > h5:hover a.anchor,
.markdown-body > h6:hover a.anchor {
    text-decoration: none;
}
.markdown-body > h1 tt,
.markdown-body > h1 code {
    font-size: inherit;
}
.markdown-body > h2 tt,
.markdown-body > h2 code {
    font-size: inherit;
}
.markdown-body > h3 tt,
.markdown-body > h3 code {
    font-size: inherit;
}
.markdown-body > h4 tt,
.markdown-body > h4 code {
    font-size: inherit;
}
.markdown-body > h5 tt,
.markdown-body > h5 code {
    font-size: inherit;
}
.markdown-body > h6 tt,
.markdown-body > h6 code {
    font-size: inherit;
}
.markdown-body > h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
.markdown-body > h2 {
    font-size: 1.75em  ;
    line-height: 1.1;
    /*
    border-bottom: 0px solid #eee;
    */
    color: #158956;
}

.markdown-body > h3 {
    font-size: 1.5em;
    line-height: 1.1;
    color: RGB(47,85,151);
}
.markdown-body > h4 {
    font-size: 1.25em;
}
.markdown-body > h5 {
    font-size: 1em;
}
.markdown-body > h6 {
   font-size: 1em;
    color: #777;
}

首行缩进

也可以使用  来手动缩进。

在自定义CSS文件中加入以下代码：

1
2
3
4
5
6
p {
    text-indent: 2em; /*首行缩进*/
}
li > p {
    text-indent: 0;
}

修改光标

注意进行此项美化会导致大量的网络请求（虽然不会有大数据传输，但大量请求仍然很慢），其直观表现就是网页加载变慢。

在自定义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
34
35
36
37
38
39
40
41
42
43
44
45
46
body, header, div.mask.flex-center, div.scroll-down-bar, #banner.banner, h1,h2,h3,h4,h5,h6 {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a11.cur), auto;
}

a:hover, button:hover, i:hover {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}

#rightside>div>button,
#rightside>div>a {
    display: block;
    margin-bottom: 2px;
    width: 30px;
    height: 30px;
    color: var(--btn-color);
    text-align: center;
    font-size: 16px;
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}

/* 文章标签 */
.layout_post .tag_share .post-meta__tags {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 评论区 */
.vcol * {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
.v[data-class=v] .vicon {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
.v[data-class=v] .vbtn {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 回复 */
.vat {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/*分页器*/
#pagination .page-number:hover {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 分页器的三个点(...) */
.space {
    color: #00c4b6;
}

文章显示框加宽

针对文章主体的Box进行修改，在自定义CSS文件中加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
    width: 123%;
    left: -23%; 
}
@media (max-width: 767px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}
@media (max-width: 424px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}

文章目录样式修改

在目录中加入选中时的底色与字体，在自定义CSS文件中加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
.tocbot-active-link {
    font-weight: bold;
    /*color var(--link-hover-color)*/
    color: #158956;
    background: #00c4b520;
    border-radius: 5px;
}
.toc-list-item::before {
    background: #158956;
}

减少文字页边距

fluid主题本来中间文字框已经不大了，再加上边距，实际文字占宽度一半不到。这或许美观，但不实用。可以将页边距从10%改为5%，视觉上内容会充实许多。

1
2
3
4
5
// hexo-theme-fluid/source/css/_pages/_post/post.styl
.post-content, post-custom
  box-sizing border-box
  padding-left 5%
  padding-right 5%

右下角看板娘

使用了hexo-helper-live2d中的模型

首先下载插件

1
npm install --save hexo-helper-live2d

其次在站点配置文件blog/_config.yml中加入以下代码

1
2
3
4
5
6
7
8
9
10
11
live2d:
    enable: true
    scriptFrom: local
    model: 
        use: live2d-widget-model-hijiki #模型选择
    display: 
        position: left #模型位置
        width: 225      #模型宽度
        height: 350      #模型高度
    mobile: 
        show: false      #是否在手机端显示

再次渲染即可看到看板娘。更多模型参见：xiazeyu/live2d-widget-models: The model library for live2d-widget.js (github.com)

标签样式修改

找到fluid文件夹下的tag的CSS目录，修改内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// hexo-theme-fluid/source/css/_tag/tags.styl
.tagcloud
  padding .5rem 2%
 
  a:before
    content "🔖"
  a
    display inline-block
    vertical-align middle
    padding .2rem
    box-shadow 0px 15px 42px -3px rgba(0,0,0,0.1)
    border-radius 5px
  
    &:hover
      color var(--link-hover-color) !important

同时修改主题配置文件中tag的颜色和文字配置，这个因人而异

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// hexo-theme-fluid/_config.yml
#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:
  enable: true
  banner_img: /img/wallpaper1.jpg
  banner_img_height: 80
  banner_mask_alpha: 0.3
  tagcloud:
    min_font: 22
    max_font: 24
    unit: px
    start_color: "#923daa"
    end_color: "#00c4e9"
日常tips
#fluid
Hexo Fluid博客魔改笔记
http://paopao0226.site/post/cf99d62e.html
作者
Ywj226
发布于
2023年1月17日
更新于
2023年9月23日
许可协议