This page looks best with JavaScript enabled

记录Blowfish主题美化过程

 ·  ☕ 9 min read

起笔

这篇文章来记录一下美化博客的代码。一样是记录性质，免得自己忘，又要翻GitHub上的提交记录。顺便，回想起刚搭博客的时候四处碰壁，彼时也没有生成类AI工具，有需求只能在Google上搜索，或者是去GitHub偷代码（。）能搜到的美化魔改博文我都看了个遍。现在写代码的门槛降低不少，官方文档做得也很清晰，这篇文章希望抛砖引玉吧。

2025年花了一周时间将杂物间的主题从停更五年的mogege换成了由docker产品经理开发的主题Blowfish，并且进行了一些美化。这次改动最大的一点其实是主题的安装方式，从源码直接安装变成了git submodule子模块方式安装，且以不侵入主题的方式进行修改。这是我第一次尝试用子模块方式安装，后续跟进主题更新也不会有大问题出现，保证可持续性。不过mogege主题是一种非常简约的主题，自定义魔改难度并不大，而切换后的Blowfish是一个相当有体量的主题，所以，可能改动并没有很多，但心理压力并不是很轻松（菜就直说）？

前面说到，这次是子模块安装，以不侵入主题的方式进行修改，所以themes/blowfish目录下的内容是不经过任何变动的，所有魔改都是在项目根目录下以覆盖/拓展方式进行。对hugo主题的安装，配置和blowfish自定义部分有疑问，请看：Blowfish官方文档（中文）。

强调色方案修改

见Blowfish配色方案。Blowfish提供了主题参数colorScheme和开箱即用的13个配色方案供选择，但这13个方案并没有满足我的需求，所以我自己做了一个自定义的。

Blowfish 使用一种定义了整个主题中使用的三色调色板。这三种颜色被定义为neutral、primary和secondary 颜色，每种颜色包含十种色调。

Blowfish的作者提供了一个基于nodejs的工具Fugu来帮助生成这一共30种颜色。Fugu的使用方法是：

  1. Clone 项目到本地或是下载源码zip解压
  2. 运行npm install安装所需依赖（需要nodejs环境）
  3. 选择心仪的颜色，找到对应的RGB值
  4. 打开本地Fugu目录进入终端，执行生成命令，例如：node index.js generate 5c6b73 d05c8a ffbc42，后面的三个参数是RGB颜色的值，去掉前面的#
  5. 将生成的内容放到/assets/css/schemes/<scheme-name>.css，再修改主题参数colorScheme的值为<scheme-name>

就能够自定义主题色了。这里放一下我的配色方案：node index.js generate 5c6b73 d05c8a ffbc42，生成文件even.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

:root { --color-neutral: 255, 255, 255;
    --color-neutral-50:     255,255,255;
    --color-neutral-100:    255,255,255;
    --color-neutral-200:    214,219,222;
    --color-neutral-300:    172,183,188;
    --color-neutral-400:    129,146,154;
    --color-neutral-500:    92,107,115;
    --color-neutral-600:    74,86,92;
    --color-neutral-700:    56,65,70;
    --color-neutral-800:    38,44,47;
    --color-neutral-900:    19,23,24;
    --color-primary-50:     255,255,255;
    --color-primary-100:    255,255,255;
    --color-primary-200:    255,255,255;
    --color-primary-300:    242,211,223;
    --color-primary-400:    225,151,181;
    --color-primary-500:    208,92,138;
    --color-primary-600:    199,60,115;
    --color-primary-700:    170,49,97;
    --color-primary-800:    138,40,79;
    --color-primary-900:    106,31,61;
    --color-secondary-50:     255,255,255;
    --color-secondary-100:    255,255,255;
    --color-secondary-200:    255,255,255;
    --color-secondary-300:    255,242,219;
    --color-secondary-400:    255,215,143;
    --color-secondary-500:    255,188,66;
    --color-secondary-600:    255,174,25;
    --color-secondary-700:    239,155,0;
    --color-secondary-800:    199,128,0;
    --color-secondary-900:    158,102,0;
    }
/*node index.js generate 5c6b73 d05c8a ffbc42*/

node index.js generate 64748b d05c8a ffbc42个人感觉这个配色方案也很好看，可以试一下。自定义赛高！

各类CSS样式

CSS文件位置在项目根目录/assets/css/custom.css，此为Blowfish允许用户自定义样式的位置，喜欢的配置就将代码放在里面就好。

有时您需要添加自定义样式来设置您自己的 HTML 元素的样式。 Blowfish 允许您覆盖自己的 CSS 样式表中的默认样式来进行自定义。只需在项目的assets/css/文件夹中创建一个custom.css文件即可。

custom.css文件将被 Hugo 优化并在所有其他主题样式之后自动加载，这意味着自定义文件中的任何内容都将优先于默认值。

其他主题可能需要在/config/_default/params.toml中要添加以下内容：

 [params.assets]
   customCSS = ["css/custom.css"]

修改全局字体

修改全站中文字体为思源宋体（Noto Serif SC），英文则优先显示同为衬线字体的 Georgia，所有字重都显示 Bold 700。

 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

/** 加载本地英文字体 **/
@font-face {
    font-family: Georgia;
    src: url('/fonts/georgiab.ttf');
}

/* 全站默认字体（正文） */
body, html {
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 700;
    line-height: 1.6;
  }

/* 导航栏主菜单字体为英文 Georgia */
nav a, nav p {
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 600;
  }

  /* 英文小标题保持 serif 并优先使用 Georgia */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 700;
  }
  
  /* 代码字体（代码块） */
  code, pre {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-weight: 500;
  }

/* 标题字体为 Lobster */
nav a[href="/"] {
    font-family: 'Lobster', cursive !important;
    font-weight: bold !important;
    font-size: 1.3em;
    color: inherit;
    transition: color 0.3s ease;
  }

这里借鉴了mogege主题的魔改设计，将博客左上角标题字体设置为 Lobster 英文字体，后面还做了鼠标悬停改色。因为我的杂物间之前是用mogege主题的，很喜欢我的标题样式，于是换成Blowfish主题也保留下来了，注意标题字体仅适用于英文。

全站共使用这上述三种字体，其中两款字体使用cdn，英文字体所用的 Georgia 字体在这里下载bold字重对应的ttf文件放置在本地/static//fonts/georgiab.ttf。放在本地的原因是因为我发现加载会更稳定。

CDN字体资源我选择放在/layouts/partials/extend-head.html。

本主题允许在模板的<head>和<footer>部分直接插入附加代码。这些代码可用于提供不属于主题的脚本或其他逻辑。

只需创建layouts/partials/extend-head.html或layouts/partials/extend-footer.html，这些部分就会自动包含在网站构建中。这两个 partial 将作为最后一项注入到<head>和<footer> 中，因此它们可用于覆盖主题默认值。

1
2
3
4
5

<!-- 字体 -->
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Noto+Serif+SC:wght@700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/firacode@3.1.0/distr/fira_code.min.css" rel="stylesheet">
<link href="https://at.alicdn.com/t/font_1230224_omviwgy4rx.css" rel="stylesheet">  
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Lobster&family=PT+Sans&display=swap" rel="stylesheet">

标题鼠标悬停

上一条提到了标题的字体修改，加上这条鼠标悬停就完成了mogege主题的样式。

1
2
3
4
5
6
7
8

  /* 标题悬停时的颜色变化 */
  nav a[href="/"]:hover {
    color: rgb(var(--color-primary-600));
  }  
  /* 夜间模式下标题悬停时的颜色 */
  .dark nav a[href="/"]:hover {
    color: rgb(var(--color-primary-500)); 
  }

这里面提到的颜色例如rgb(var(--color-primary-600))是Blowfish主题自己定义的全局颜色，这个全局颜色是可以修改的，是Blowfish主题的主题强调色方案。如果比较担心看不懂或是只想修改这里的鼠标悬停色，可以直接改为特定的颜色，例如#D36993。

Logo大小修改

如字面意思，能用上的前提当然是配置了params.logo参数，没有开启Logo当然就用不了。

1
2
3
4
5

/* 修改logo大小 */
 .logo {
    max-width: 50px !important;
    max-height: 50px !important;
  }

文章目录添加下划线动画

当然前提是要为文章开启TOC目录才行，默认配置是开启的。

 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

/* 应用于博客目录链接 hover 下划线动画 */
#TableOfContents a {
    position: relative;
    text-decoration: none; /* 防止默认下划线 */
    display: inline-block;
    color: inherit; /* 保持与正文一致的颜色 */
    transition: color 0.3s ease;
  }
  
  #TableOfContents a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: rgb(var(--color-primary-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  #TableOfContents a:hover::after {
    transform: scaleX(1);
  }

鼠标选中强调色

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


/* 暗色模式：鼠标选中背景 + 柔白文字 */
html.dark ::selection {
    background: #D36993;
    color: #fffafc;
  }
  
  /* 亮色模式：深粉背景 + 深色文字/默认颜色 */
  ::selection {
    background: #D36993;
    color: #4B1E2E;
    /* color: inherit; */
  }

我设置的强调色背景是粉色，同时修改了被选中时文字的颜色。如果不想修改文字的颜色，使用color: inherit;文字就不会发生颜色改变。

黑粉和白粉真的很好看！搭配我自己做的强调色方案也很满意。

强调样式

前面我说过，全局字重我都设成了Bold 700，因为我是粗字体狂热爱好者。导致的结果是，全局文字全部是加粗，那么正常该加粗的<strong>元素和普通文字混杂在一起，根本看不清到底谁是<strong>元素。因此我做了这个样式，同样也给h4小标题也安排上了。

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

/* strong 标签 常驻重点色下划线*/
.article-content strong {
  position: relative;
  font-weight: bold;
  cursor: pointer;
  background: linear-gradient(transparent 60%, #D36993 60%);
}

/* 小标题 常驻重点色下划线*/
h4 {
  font-weight: bold;
  display: inline-block;  /* 让元素宽度跟随文字 */
  background: linear-gradient(transparent 60%, #D36993 60%);
}

夜间模式文字颜色修改

上面我说，我对自己设计的主题强调色方案很满意，唯独不够满意的就是夜间模式下的文字颜色太暗，所以在保留主题强调色方案的同时我新增了以下内容，让夜间模式文字变亮一些。

1
2
3
4
5
6
7
8
9

/* 夜间模式下 正文颜色 */
html.dark .prose {
  color: #d4d4d8; /* 更亮的灰白色，适合夜间背景 */
}

/* 夜间模式下 strong 标签 同样正文颜色*/
html.dark .article-content strong {
  color: #d4d4d8;  /* 与正文保持一致 */
}

HTML元素修改

顶部阅读进度条

mogege主题经过魔改后自带了一个粉色的阅读进度条放在博客最顶端，非常优美。Blowfish只有一个右下角的“返回顶部”功能，没有最顶部的阅读进度条，所以参考之前的魔改记录自己做了一个。这一版的逻辑更简单粗暴，让博客所有页面都显示该进度条，删掉了一些我认为不需要的东西。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 顶部阅读进度条 */
.top-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 0;
    height: 3px;
    background: #d05c8a;
  }

上面定义的是进度条的样式，真正发挥作用的代码放在/layouts/partials/extend-footer.html：

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

<!-- 进度条逻辑 -->
<script>
    window.addEventListener('scroll', () => {
      const bar = document.querySelector('.top-scroll-bar');
      if (!bar) return;
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const width = (scrollTop / scrollHeight) * 100;
      bar.style.width = width + '%';
      bar.style.display = 'block';
    });
</script>

然后在头部页进行引用。正常来说是要放在类似于主题目录下面类似header.html里面的，但是Blowfish主题提供了拓展选项/layouts/partials/extend-head.html，当然要放在这里更美观了：

1
2

<!-- 进度条 -->
<div class="top-scroll-bar"></div>

我们的宗旨是主题目录本身不动，主题的代码文件尽可能覆盖地越少越好，所以放进拓展里是最合适的。

爱心点击特效

CDN资源，我放在/layouts/partials/extend-head.html。

1
2

<!-- 爱心点击特效 -->
<script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>

Live2D看板娘

我的博客不能没有看板娘！！同样放在/layouts/partials/extend-head.html。

 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

<!-- Live2D，网页上的小人，可以修改live2d_config.js来修改模型，模型都在static/live2d_models里面 -->
<!-- 你也可以把js文件下载下来，放到static/js/目录下，就不依赖别人的服务了 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.0.min.js"></script>

<script type="text/javascript">
    L2Dwidget.init({
        model: {
            scale: 1,
            hHeadPos: 0.5,
            vHeadPos: 0.618,
            jsonPath: 'https://cdn.jsdelivr.net/gh/MicroSic/live2d-model@main/xier/model.json',       // xxx.model.json 的路径,换人物修改这个
        },
        display: {
            superSample: 5,     // 超采样等级
            width: 150,         // canvas的宽度
            height: 250,        // canvas的高度
            position: 'left',   // 显示位置：左或右
            hOffset: 0,         // canvas水平偏移
            vOffset: 0,         // canvas垂直偏移
        },
        mobile: {
            show: true,         // 是否在移动设备上显示
            scale: 1,           // 移动设备上的缩放
            motion: true,       // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1,  // 默认透明度
            opacityOnHover: 1,  // 鼠标移上透明度
        },
     });
</script>

插播一条Mastodon认证

Mastodon站点-设置-个人资料-验证，拿到你的relme代码，例如我的：

1

<a rel="me" href="https://fairy.id/@Zokiio">Mastodon</a>

放在页脚拓展/layouts/partials/extend-head.html。如果本地运行hugo server发现页脚多了一个可见的Mastodon字样的话，那么可以改成：

1

<a rel="me" href="https://fairy.id/@Zokiio" style="display: none;">Mastodon</a>

加一行display: none字段，就不会影响页面整体外观了。然后将你的博客链接放到Mastodon的个人资料中，就能够发现有一个绿色的✅代表该链接属于此毛象账户，已被认证。

Roelxy
WRITTEN BY
Roelxy
新世紀摸魚戰士

See Also