Blowfish 文档外自定义指南

1 用Blowfish创建了博客！泰裤辣！😄#

2 博客修改#

{{< alert “circle-info” >}} 所有例子中，/指主仓库根目录我的网站目录在~/文/my-blog ，因此/themes/blowfish/指的是~/文/my-blog/themes/blowfish/ {{< /alert >}}

2.1 修改侧栏(TOC)和标题颜色#

效果：新建 /assets/css/custom.css

写入以下代码：

1
/* 浅色模式下的彩虹色标题 */
2
:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
3
  color: #dc2626 !important; /* 红色 */
4
}
5

6
:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
7
  color: #ea580c !important; /* 橙色 */
8
}
9

10
:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
11
  color: #16a34a !important; /* 绿色 */
12
}
13

14
:where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
15
  color: #2563eb !important; /* 蓝色 */
16
}
17

18
:where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
19
  color: #9333ea !important; /* 紫色 */
20
}
21

22
/* 深色模式下的彩虹色标题 */
23
.dark :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
24
  color: #f87171 !important; /* 浅红色 */
25
}
26

27
.dark :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
28
  color: #fb923c !important; /* 浅橙色 */
29
}
30

31
.dark :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
32
  color: #4ade80 !important; /* 浅绿色 */
33
}
34

35
.dark :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
36
  color: #60a5fa !important; /* 浅蓝色 */
37
}
38

39
.dark :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
40
  color: #a78bfa !important; /* 浅紫色 */
41
}
42

43

44

45
/* 浅色模式下的TOC彩虹色 */
46
.toc ul ul li a { color: #dc2626 !important; } /* H2对应红色 */
47
.toc ul ul ul li a { color: #ea580c !important; } /* H3对应橙色 */
48
.toc ul ul ul ul li a { color: #16a34a !important; } /* H4对应绿色 */
49
.toc ul ul ul ul ul li a { color: #2563eb !important; } /* H5对应蓝色 */
50
.toc ul ul ul ul ul ul li a { color: #9333ea !important; } /* H6对应紫色 */
51

52
/* 深色模式下的TOC彩虹色 */
53
.dark .toc ul ul li a { color: #f87171 !important; } /* H2对应浅红色 */
54
.dark .toc ul ul ul li a { color: #fb923c !important; } /* H3对应浅橙色 */
55
.dark .toc ul ul ul ul li a { color: #4ade80 !important; } /* H4对应浅绿色 */
56
.dark .toc ul ul ul ul ul li a { color: #60a5fa !important; } /* H5对应浅蓝色 */
57
.dark .toc ul ul ul ul ul ul li a { color: #a78bfa !important; } /* H6对应浅紫色 */

2.2 字体修改#

2.2.1 优点#

此方法和文档中的相比，能让访问者从国内第三方网站下载字体，提高字体加载速率

2.2.2 操作方法#

从网站找到代码，比如：https://fonts.zeoseven.com/items/442/#embed

选中 HTML强化，用里面的代码进行导入

{{< alert “circle-info” >}} 在我这里，常规CSS无法使用，所以用HTML强化

英文子集化可以让所有英文显示为指定字体

全部版本可以展示所用可用的字型，可与选择适合的字型链接替代HTML强化中的链接 {{< /alert >}}

新建 /themes/blowfish/layouts/partials/extend-head.html

把内容放进去

最后差不多这个样：

1
<!--导入LXGW WenKai Mono字体-->
2
<link rel="preload" as="style" crossorigin
3
    href="https://fontsapi.zeoseven.com/292/medium/result.css"
4
    onload="this.rel='stylesheet'"
5
    onerror="this.href='https://fontsapi-storage.zeoseven.com/292/medium/result.css'" />
6
<noscript>
7
    <link rel="stylesheet" href="https://fontsapi.zeoseven.com/292/medium/result.css" />
8
</noscript>
9

10
<!--导入Maple Mono NF-CN字体-->
11
<link rel="preload" as="style" crossorigin
12
    href="https://fontsapi.zeoseven.com/442/main/result.css"
13
    onload="this.rel='stylesheet'"
14
    onerror="this.href='https://fontsapi-storage.zeoseven.com/442/main/result.css'" />
15
<noscript>
16
    <link rel="stylesheet" href="https://fontsapi.zeoseven.com/442/main/result.css" />
17
</noscript>
18

19
<style>
20
/*
21
无需专门导入字体，让所有英文显示为Maple Mono NF-CN字体
22
@font-face {
23
    font-family: "ZSFT-ENMin-442";
24
    src: url("https://fontsapi.zeoseven.com/442/main.woff2") format('woff2'),
25
        url("https://fontsapi-storage.zeoseven.com/442/main.woff2") format('woff2');
26
    unicode-range: U+0061-007A, U+0041-005A, U+0030-0039, U+002E, U+002C, U+0021, U+003F, U+003A, U+003B, U+002D;
27
}
28
*/
29

30
/* (需专门导入字体)让所有正文显示为LXGW字体 */
31
    body {
32
        font-family: "LXGW WenKai";
33
        font-weight: normal;
34
    }
35

36
/* (需专门导入字体)让所有代码块显示为Maple Mono NF-CN字体 */
37
code, kbd, samp, pre {
38
    font-family: "Maple Mono NF CN";
39
}
40

41
</style>

2.2.3 注意事项#

如果你用git下载/管理的blowfish主题，修改/themes/blowfish（添加了/themes/blowfish/layouts/partials/extend-head.html）会遇到子模块冲突

1
下列子模组路径所包含的修改在任何远程源中都找不到：
2
  themes/blowfish
3

4
请尝试
5

6
  git push --recurse-submodules=on-demand
7

8
或者进入到子目录执行
9

10
  git push
11

12
以推送至远程。
13

14
致命错误：正在终止。
15
~/文/my-blog (main|↑1|✔) [128]$

你有两个选择:

选项 A: 保留你的字体修改,推送到子模块的 fork/分支

请见站内文章《优雅地自定义 Hugo Blowfish 主题（或任何 Git 子模块）》

选项 B: 删除子模块，把字体修改直接保存到主仓库中

1
# 1. 回到主仓库根目录
2
cd ~/文/my-blog
3

4
# 2. 移除子模块配置(但保留文件)
5
git rm --cached themes/blowfish
6
rm -rf .git/modules/themes/blowfish
7

8
# 3. 编辑 .gitmodules 文件,删除 blowfish 相关配置
9
nano .gitmodules  # 或用你喜欢的编辑器删除 blowfish 部分
10

11
# 4. 如果 .gitmodules 为空,删除它
12
rm .gitmodules  # 如果没有其他子模块的话
13

14
# 5. 将 themes/blowfish 作为普通目录添加
15
git add themes/blowfish
16
git add .gitmodules  # 如果修改了的话
17

18
# 6. 提交更改
19
git commit -m "Convert blowfish theme from submodule to regular directory"
20
git push

2.3 字体大小修改#

文档有云：

我们也提供更改网站的字体大小的示例。 Blowfish 使这一切变得简单，因为它在整个主题中使用源自基本 HTML 语言的缩放字体大小方法。默认情况下，Tailwind 将默认大小设置为 12pt ，但您可以将其更改为喜欢的大小。

参考[上面的说明]({{< ref “#overriding-the-stylesheet” >}}) 创建一个 custom.css 文件并添加以下 CSS 声明：
1
/* Increase the default font size */
2
html {
3
 font-size: 13pt;
4
}
只需更改此值，您网站上的所有字体大小都将调整为此新大小。因此，要增加使用的整体字体大小，请将该值设置为大于 12pt 。同样，要减小字体大小，请将值设置为小于 12pt 。

我尝试了发现：主页字体调整了，但是博文字体大小未改变

我的方案是添加

1
/* 只针对文章内容提高文字大小，默认1rem */
2
.prose {
3
  font-size: 1.1rem;
4
}

2.4 avif支持#

你猜我为啥用avif 因为hugo对avif图片调节不完善，所以改成true增强AVIF支持：

1
disableImageOptimization = true
2
disableImageOptimizationMD = false #和上面的类似，改成AVIF增强AVIF支持

disableImageOptimization对网站有效（比如我的博客的背景图）

disableImageOptimizationMD只针对博文文本有效

我true了disableImageOptimization似乎就对整个网站生效了，就这样吧。

2.5 评论区#

配置指南
我修改了些许配置，见github
还get到了网址拆分这个功能（见博客内文章）

2.6 网站访问数统计#

2.6.1 页头显示#

效果如下：

这个组件的行为是由/themes/blowfish/layouts/partials/meta/views.html决定的，默认是使用Firebase的，但是Firebase国内访问不了，遂换成Vercount（这个能显示网站访问数但是不能显示喜欢数，但对我来说够了）

/themes/blowfish/layouts/partials/meta/views.html复制到/layouts/partials/meta/views.html ，这样会让blowfish读取后者而不是前者，从而实现自定义

完成复制操作以后，修改views.html内容，见 https://github.com/Sunrongguo2008/my-blog/blob/main/layouts/partials/meta/views.html 。这样会让views.html在实现原有的样式（眼睛+动画）的程度下，将Firebase替换为Vercount

编辑/config/_default/params.toml，把你想要的部分的showViews改成true {{< alert “circle-info” >}} [taxonomy]管理www.example.com/tags/ 域名
[term]管理www.example.com/tags/xxx/ 等域名
[list]管理www.example.com/posts/ 域名 {{< /alert >}}

⚠️注意： {{< alert >}} 修改views.html后，每个页面只能显示一个网站访问数，其他无法加载。而在”Posts” “最近的文章” 等页面，[article]下的showViews打开以后，会统统显示，导致异常。所以[article]下的showViews请false。否则： （😊别担心，后文有解决方法） {{< /alert >}}

2.6.2 页尾显示#

效果如下：新建/layouts/partials/extend-footer.html并写入：

1
<hr>
2
<!-- Vercount浏览量组件 -->
3
<script defer src="https://events.vercount.one/js"></script>
4
<div class="flex flex-wrap gap-4 justify-center items-center text-sm text-neutral-500 dark:text-neutral-400">
5
<span>📊 总访问 <span id="busuanzi_value_site_pv">-</span> 次</span>
6
<span>•</span>
7
<span>👥 总访客 <span id="busuanzi_value_site_uv">-</span> 人</span>
8
<span>•</span>
9
</div>

{{< alert “circle-info” >}} views.html定义了“本页访问量”，加上前文说过的“每个页面只能显示一个网站访问数”。所以这里的extend-footer.html没有定义“本页访问量” {{< /alert >}}

2.6.3 “页头显示”的遗留问题解决#

修改views.html后，每个页面只能显示一个网站访问数，其他无法加载。而在”Posts” “最近的文章” 等页面，[article]下的showViews打开以后，会统统显示，导致异常。所以[article]下的showViews请false。

过来解决！

我们不使用[article]下的showViews，而是自定义一个功能一样的模块，只在正文上出现而不在”Posts” “最近的文章”出现即可

/themes/blowfish/layouts/_default/single.html复制到

打开/layouts/_default/single.html，查找

1
      <div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
2
        {{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
3
      </div>

替换为以下内容即可

1
div class="flex flex-row flex-wrap items-center">
2
{{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
3
<span class="px-2 text-primary-500">·</span>
4
{{ partial "/meta/views.html"}}
5
<!-- [INFO]此处调用了views.html并模仿软主题加了蓝·-->
6
</div>

欢迎!