↓Skip to main content

装修 | 不想学习那就来装修博客吧！

用了三年多的stack主题终于看烦了，换到blowfish玩玩

·2122 words·5 mins

主要参考：
网友的装修笔记：Hugo + Blowfish｜自装样式记录
主题docs：Blowfish 安装

安装
#

使用Git子模块安装。在blog主目录右键 git bash here，输入如下代码：

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

发现hugo版本不兼容，所以下载了 hugo v0.145.0，这是目前blowfish支持的最高版本的hugo。

友链
#

最先报错的就是这个友链页面，因为之前友链的格式加在主题目录下，这次把东西全部挪到我的站点根目录。
在博客根目录 /assets/css 中新建文件 custom.css，写入如下内容：

展开代码 
  /* ---------- 友链卡片样式开始 ---------- */
    a.friend-link {
      text-decoration: none;
      color: inherit;
      background-size: 0 !important;
    }
    
    a.friend-link:hover {
      text-decoration: none;
      color: inherit;
      background-size: 0 !important;
    } 
  
  .friend-link {  
    display: block;  
    width: 100%;  
    margin: 1rem auto;  
    text-decoration: none;  
    border-radius: 12px;  
    overflow: hidden;  
    background-color: #fff;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  
    transition: transform 0.2s ease;  
  }  
  
  .friend-link-div {  
    display: flex;  
    align-items: center;  
    padding: 0 16px;  
  }  
  
  .friend-avatar {  
    width: 56px;  
    height: 56px;  
    border-radius: 50%;  
    object-fit: cover;  
    flex-shrink: 0;  
    margin-right: 10px;  
  }  
  
  .friend-link-info {  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
  }  
  
  .friend-name {  
    font-size: 16px;  
    font-weight: bolder;  
    font-style: normal;  
    color: #444;  
    margin-bottom: 0;  
    margin-top: 0;  
    margin-left: 12px;  
  }  
  
  .friend-bio {  
    font-size: 14px;  
    color: #666;  
    line-height: 1.4;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    margin-top: 0;  
    margin-bottom: 0;  
    margin-left: 12px;  
  }  
  
  /* 夜间模式适配 */  .dark .friend-link {  
    background-color: #5D5470;  
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);  
  }  
  
  .dark .friend-name {  
    color: #ddd;  
  }  
  
  .dark .friend-bio {  
    color: #F5F5F5;  
  }  
  
  .dark .friend-avatar {  
    border-color: #444;  
  }  
  
  /* 响应式优化 */  @media screen and (max-width: 600px) {  
    .friend-link-div {  
      flex-direction: row;  
      padding: 12px 16px;  
    }  
  
    .friend-avatar {  
      width: 56px;  
      height: 56px;  
      margin-right: 12px;  
    }  
  
    .friend-name {  
      font-size: 16px;  
    }  
  
    .friend-bio {  
      font-size: 14px;  
    }  
  }  
  /* ---------- 友链卡片样式结束 ---------- */

在根目录的 /layouts/shortcodes/ 新建文件 friend.html，加入如下内容：

{{- $name := .Get "name" | default (.Get 0) -}}
{{- $url := .Get "url" | default (.Get 1) -}}
{{- $avatar := .Get "avatar" | default (.Get 2) -}}
{{- $bio := .Get "bio" | default (.Get 3) -}}

<a href="{{- $url -}}" title="{{- $name -}}" class="friend-link" target="_blank" rel="friend">
    <div class="friend-link-div">
        <div class="friend-link-avatar">
            <img src={{ .Get "avatar" }} class="friend-avatar" loading="lazy" alt="Avatar">
        </div>
        <div class="friend-link-info">
            <i class="fa fa-link" aria-hidden="true"></i>
            <i class="friend-name">{{ $name }}</i>
            <p class="friend-bio">{{ $bio }}</p>
        </div>
    </div>
</a>

在 hugo.toml 中加入如下内容：

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

在文件links.md中编辑友链页面的具体内容，其中友链添加的格式为：

<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> 
  <!-- 在中大屏幕中，友链显示为三栏 -->
{{&lt; friend name="Blogname" url="link.to.blog" avatar="link.to.avatar" bio="blog description" &gt;}}
</div>

其中&lt;应为<，&gt;应为>。用尖括号会使上面这行代码被编译，找不到合适的方法避免在这里被编译，因此使用html标签代替。

首页
#

其实还是主题原本的样子，但是修改了调用的参数。在博客目录下新建 layouts/index.html，写入如下内容：

{{ define "main" }}
<main class="flex flex-col items-center justify-center min-h-screen px-4">
  <!-- 插入一个空白区域，设置固定高度 -->
  <div style="height: 137px;"></div> <!-- 你可以调整这个高度 -->

  <!-- 头像显示区 -->
  <img src="/img/Avatar.jpg"
       class="rounded-full w-40 h-40 object-cover shadow-lg mb-6"
       alt="Avatar" loading="lazy" />

  <!-- 博客标题 -->
  <h1 class="text-4xl font-bold mb-2">{{ site.Title }}</h1>

  <!-- 博客简介 -->
  {{ with site.Params.description }}
    <p class="text-lg text-gray-500">{{ . }}</p>
  {{ end }}
</main>
{{ end }}

修改 config/_default/hugo.toml，添加：title = “− 273.15 ℃”
修改 config/_default/languages.en.toml，在 [params] 部分添加：description = “It means a lot.”
把头像放在 static/img/，修改 content/_index.md 包含如下内容：

---
title: "− 273.15 ℃"
description: "It means a lot"
images:
  - "img/Avatar.jpg"
---

chatgpt帮我改成这样子的，先这样吧，后面可能还会改首页的样式。

Post 页面显示文章 description
#

修改 /blowfish/layouts/partials/article-link/simple.html，在

{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
    <div class="py-1 max-w-fit prose dark:prose-invert">
        {{ .Summary | plainify }}
    </div>
{{ end }}

之后加上如下代码：

{{ with .Params.description }}
    <div class="text-sm text-neutral-600 dark:text-neutral-400 mt-2">
        {{ . }}
    </div>
{{ end }}

增加文章显示宽度
#

博客的大部分文章都没有content，所以增加宽度让视觉上更好看。找到 /blowfish/layouts/_default/single.html 修改如下部分

<section class="flex flex-col max-w-4xl mt-0 prose dark:prose-invert lg:flex-row mx-auto">

为：

<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row mx-auto">

修改页脚
#

加入了运行年份、文章数和字数统计，修改主题支持到左下角。

找到文件 /themes/blowfish/layouts/partials/footer.html，直接按照如下代码重写：

<footer id="site-footer" class="py-10 print:hidden">
  {{ if .Site.Params.footer.showMenu | default true }}
    {{ if .Site.Menus.footer }}
    <nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
      <ul class="flex flex-col list-none sm:flex-row">
        {{ range .Site.Menus.footer }}
        <li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
          <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center" href="{{ .URL }}"
            title="{{ .Title }}">
            {{ if .Pre }}
            <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
              {{ partial "icon.html" .Pre }}
            </span>
            {{ end }}
            {{ .Name | markdownify }}
          </a>
        </li>
        {{ end }}
      </ul>
    </nav>
    {{ end }}
  {{ end }}

  <div class="flex flex-col gap-2 text-sm text-neutral-500 dark:text-neutral-400">
    {{/* 年份 + 统计数据 */}}
    <div>
      {{ $startYear := 2019 }}
      {{ $currentYear := now.Year }}
      {{ $totalWords := 0 }}
      {{ range .Site.RegularPages }}
        {{ $totalWords = add $totalWords (countwords .Content) }}
      {{ end }}
      {{ $totalArticles := len (where .Site.RegularPages "Section" "post") }}

      <p>
        &copy; {{ $startYear }} - {{ $currentYear }}<br>
        共 {{ $totalArticles }} 篇文章・{{ $totalWords }} 字
      </p>
    </div>

    {{/* Powered by */}}
    {{ if .Site.Params.footer.showThemeAttribution | default true }}
    <p class="text-xs">
      {{ $hugo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
        href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>` }}
      {{ $blowfish := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
        href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a>` }}
      {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Theme" $blowfish) | safeHTML }}
    </p>
    {{ end }}
  </div>

  {{ $jsProcess := resources.Get "js/process.js" }}
  {{ $jsProcess = $jsProcess | resources.Minify | resources.Fingerprint "sha512" }}
  <script type="text/javascript" src="{{ $jsProcess.RelPermalink }}" integrity="{{ $jsProcess.Data.Integrity }}"></script>

  {{ if templates.Exists "partials/extend-footer.html" }}
    {{ partialCached "extend-footer.html" . }}
  {{ end }}
</footer>

有修改的部分应该就是第二块，但我直接把之前的统计字数代码和这个文件原本的代码发给chatgpt，让它给我整合了，懒得再回去看到底改了哪里。

调整 categories 和 tags
#

使用默认设置时，有些 tag 或者 category 太长，会变成两行。整体内容显示偏左，且过窄。

在博客根目录下新建 /layouts/_default/terms.html，写入如下内容：

{{ define "main" }}
<div class="max-w-screen-md mx-auto px-4">
  <h1 class="text-3xl font-bold mb-6 text-neutral-800 dark:text-neutral-200">{{ .Title }}</h1>
  <div class="flex flex-wrap -m-1">
    {{ range .Data.Terms.Alphabetical }}
      <a href="{{ .Page.RelPermalink }}"
         class="m-1 px-2 py-1 text-base text-neutral-800 dark:text-neutral-200 hover:underline hover:underline-offset-2 break-words">
        {{ .Page.Title }} <span class="text-sm text-neutral-500">({{ .Count }})</span>
      </a>
    {{ end }}
  </div>
</div>
{{ end }}

修改字体
#

参考官网的修改字体。
本站使用的字体是猎黑体狸叶黑体 (但我感觉没生效)，淘宝或小红书搜无用商店，九块九永久商用买断！(无用商店来结一下广告费。

修改配色
#

参考官网修改配色方案和自动生成相应颜色css的脚本。我用的配色是 #003865 #609bff #848482，第一个颜色是TARDIS blue，所以我把生成的css改为 tardis.css 放在了相应目录 assets/css/schemes 里。
修改 config/_default/params.toml 的相应部分

colorScheme = "tardis"

亮色背景调了一个淡黄色，加在 custom.css:

html:not(.dark) body {
    background-color: #fefcf6;
}

添加评论区
#

参考：在博客中使用 waline 评论
之前配置过 waline 评论，所以只是抄了 comments.html，把serverURL改成自己的就好。后面在 params.toml 的 article 部分添加 showComments = true。

修改图标
#

参考：修改网站图标

← → 七日谈 | for god's sake