上一次写博客装修笔记还是上一次，竟然是2022年12月的事情了。

一年半来倒也没有什么大装修，我对现在这个主题的满意度很高，因为它已经有了我所有想要的特性，不太满意的地方也自己改掉了。没有写备忘纯粹是因为懒。不过近期比较多，还是写一下比较好。

前段时间我的同人博客换成了Diary主题，完成了自己比较想实现的Fandom和Series区分，应该今年都不会再修改了。由于过去的时间比较长，前几天刚好有人留言问了，也在这里做一个简单的回顾。

Archive页面的实现

这个Archive页面是抄了浣心的归档页面，他的主题和配置文件是开源的，给我这段时间的装修提供了非常多的参考。

以下代码来自于浣心的Github。仅做了文字部分的改动，感谢他。

  1. 在目录layouts\_default中增添文件archive.html。
代码部分 
{{ define "main" }}
<div class="post-list-container post-list-container-shadow">
<div class="post">

{{/* begin of archive heading */}}
<div class="post-head-wrapper-text-only">
<div class="post-title"><h1 class="post-title-main">{{ .Title }}</h1></div>

{{- $type := .Type -}}

{{/* **** Category-wide stats **** */}}
{{- $scratch := newScratch -}}
{{- $articles_cat := (where .Site.RegularPages "Type" $type) -}}
{{- $articles_cat_count := len $articles_cat -}}

{{- range (where .Site.RegularPages "Type" $type) -}}
{{- $scratch.Add "allwordcount" .WordCount -}}
{{- end -}}

<div class="post-subtitle">
  
归档页面堂堂上新！这主题用了一年半我终于也有了归档页面。

</div>

{{/* end of archive heading */}}
</div>

<div class="post-body-wrapper">
<div class="post-body archive-body">

{{/* **** Yearly archive **** */}}

{{/* Group articles by year and loop through them */}}
{{- range (.Site.RegularPages.GroupByDate "2006") -}}
{{/* Get articles to display */}}
{{- $articles_yearly := (where .Pages "Type" $type) -}}
{{/* Count articles returned */}}
{{- $articles_yearly_count := len $articles_yearly -}}
{{/* Check if a proper year is returned and if it contains any articles */}}
{{ if and (gt .Key 1) (gt $articles_yearly_count 0) }}
{{- range $index, $value := (where .Pages "Type" $type) -}}
  {{ if not $index }}
  {{/* Display a header in the first loop */}}
  <h3 class="archive--year">{{ .Date.Format "2006" }} / {{ $articles_yearly_count }} {{ if ne $articles_cat_count 1 }}entries{{ else }}entry{{ end }}</h2>
  <ul class="article--list">
  {{ end }}
  {{/* Display articles here */}}
  <li class="archive--list-item">
    <a href="{{ .RelPermalink }}">
    <span class="archive--date">{{ .Date.Format "Jan 02" }}</span>　　{{ if .Draft }}<span class="draft-label">{{ i18n "draft" }}</span>&nbsp;{{ end }}{{ .Title  }}
    </a>
  </li>
  {{ end }}
  </ul>
{{ end }}
{{ end }}

</div>
</div>
</div>
</div>
{{ end }}
  1. 在content\archives中增添文件posts.md，如下内容：
代码部分 
---
title: "Archive✨"
layout: archive
type: posts
summary: This page contains an archive of all posts.
_build:
  list: never
menu:
  main:
    weight: -90
    params:
      icon: fail
toc: false
---

其中关于menu的部分是我的主题把独立页面放在导航栏的方式，如果你的主题是通过在config.toml增添内容实现，则忽略这一段即可。

  1. 然后我做了一些样式的修改，恐怕没有参考的意义。这个直接写在主题的CSS文件即可，例如我的目录是assets\css\critical\10-custom-media.css。
代码部分 
.archive--list-item {
  margin-bottom: 8px; /* 修改列表项的底部间距 */
  padding-left: 0px; /* 移除圆点位置，这个数值可以根据需要调整 */
}

.archive--list-item:hover,
.archive--list-item:focus {
  color: var(--primary); /* 选中时的文字颜色 */
}

.archive--date {
  color: var(--fg); /* 使用前景颜色 */
}

.draft-label {
  color: var(--red1); /* 草稿使用红色 */
}

.archive--list-item:hover .archive--date,
.archive--list-item:focus .archive--date {
    color: var(--primary); /* 选中时日期的颜色和文字一致 */
}

友情链接的样式

本段写于2024年6月23日。因为最近和毛象上的大家交换了友链，大家的友链都会放描述或头像，也会有友友写自己的描述，但当时我的友链是没有描述的纯URL，感觉还是想更认真地对待这件事，就给每个友友都有比较正式的介绍——但这样页面就变得超级漫长欸！所以我对友链样式重新做了修改。

之前的友链

之前的友链样式如下。如果有人想知道实现方式的话，正巧之前在毛象上写过一次，涉及到无序列表的更改，这个方式不需要手动分隔号和调整间距。

样式及代码部分 

<style>
.content li::marker {
  content: "♡  "; 
  color: var(--primary-alt); 
}
/* 让无序列表前的圆点变成爱心 */

a.link--external::after {
    content: " | ";
    padding: 0 0.1em;
}
/* 让每个超链接后都有个分隔号，并调整间距大小*/

a.link--external:last-child::after {
    content: none;
}
/* 最后一个链接不需要分隔号 */
</style>

/* 之后这样就可以显示出来了！ */

- [name](link.com) [name2](link2.com)
- ....

因为它只用在友链的文件里嘛，所以这些代码我是直接添加进友链文件的正文的。进而导致RSS阅读器中阅读会看见代码本身……不过没事啦（擦汗）因为我一直都只在一个文件里修改更新，应该不会有人重复的到RSS提醒，搬家感觉也很方便。

目前的友链

目前的页面是这样的：无序列表，博客名称的链接，加以一段文字描述。同时无序列表的黑色圆点修改成了爱心，并且每一次刷新得到的排列顺序不同，每7个列表项后增添一个分割线，以提升阅读的舒适程度。

于是效果如下：

效果及代码部分 

<style>
.post-meta {
  display: none;
}
.post div[style] {
  display: none;
}

.content li::marker {
  content: "♡  ";
  color: var(--primary-alt);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 获取带有 post-content 类的文章内容
    var articleContent = document.querySelector(".post-content");

    // 获取文章内容内部的所有列表项
    var items = articleContent.querySelectorAll("ul li");

    // 将列表项转换为数组
    var itemsArray = Array.from(items);

    // 随机排列数组中的元素
    for (var i = itemsArray.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = itemsArray[i].innerHTML;
        itemsArray[i].innerHTML = itemsArray[j].innerHTML;
        itemsArray[j].innerHTML = temp;
    }

    // 获取每隔6个项后的分割线
    for (var i = 6; i < itemsArray.length; i += 7) {
        var hr = document.createElement("hr");
        itemsArray[i].parentNode.insertBefore(hr, itemsArray[i].nextSibling);
    }
});
</script>

标签<script>内的部分是用来实现无序列表随机排列的，它会对当前整个网站页面包括导航栏等等的无序列表生效。所以为了限定它只对文章内的无序列表生效，在第一段注释中有一个获取带有 post-content 类的文章内容的步骤，这是因为我网站主题中，文章正文的类是post-content，这是根据我的主题的情况写的。

如果你不知道应该怎么做和修改这部分，请在自己的网站上按F12，查看主题的源代码，点进去用选择器查找和看自己文章部分的所属的类是什么，然后替换掉上述代码里我的post-content部分即可。

全站字体修改

大家应该都注意到了吧！我把网站的主题修改成了霞鹜文楷，由于我不知道怎么样引入非Google字体的字体，就在网上找了一下。发现了这个仓库：霞鹜文楷Web字体。它的简介表示使用与Google Fonts相同的技术对中文字体进行分包和压缩，以便于用于网页端分发——

什么意思？我是看不懂啦，但会用能用就行。根据使用说明具体操作如下：

  1. 在网站的Head部分引入CSS文件。

在我的文件路径layouts\partials\head\head_start.html中写入下面内容：

<!-- 霞鹜文楷 Regular -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/satouriko/LxgwWenKai_Webfonts@v1.101/dist/LXGWWenKai-Regular.css" />
  1. 应用字体样式。

寻找一下你的网站字体部分在哪里。然后把字体LXGWWenKai放到最前面。

在我的文件assets\css\critical\20-base.css中做了如下修改：

:root {
  --font-monospace: LXGWWenKai, "Fira Code", "Lucida Console", Monaco, monospace;
  --font-sans-serif: LXGWWenKai, Verdana, Helvetica, sans-serif;
  --font-serif: LXGWWenKai, "Fira Code","Roboto Slab", Georgia, serif;
}
  1. 刷新一下，能用欸！好耶！

同人博客的魔改笔记

首先声明，我的博客是在浣心的魔改Diary主题基础上做的修改，他魔改后也对自己的主题进行开源：仓库。

我使用后发现，这个主题的基础就是Series、Tag和Categories都是不进行区分的，都是相同的样式。

但我希望Category可以呈现我同人的“原作（Fandom）”，而Series则呈现我同人故事的“系列（Series）”。那么就必须对它进行区分了。魔改后的效果已放在文末。

我的实现步骤如下文，全靠ChatGPT写的，请灵活参考。

Fandom与Series区分的实现过程

  1. 修改/layouts/_default/terms.html文件内容如下：
代码部分 
{{ define "main" }} 

<div class="post-list-container post-list-container-shadow" data-pagefind-ignore>
  <a class="a-block">
    <div class="post-item-wrapper post-item-wrapper-no-hover">
      <div class="post-item post-item-no-gaps">
        <div class="post-item-info-wrapper">
          <div class="post-item-title post-item-title-small">
            {{ .Title }} /&#32; 
            <!-- 显示页面标题 -->
            {{- $pageCount := len .Data.Terms -}}
            {{- $pageCount -}}&#32;{{- if ne $pageCount 1 -}}entries{{- else -}}entry{{- end -}} 
            <!-- 显示条目数 -->
          </div>
          <span class="post-content">
            {{.Content}} 
            <!-- 显示页面内容 -->
          </span>
        </div>
      </div>
    </div>
  </a>

  <!-- 区分 tags, series 和 categories -->
  {{ if eq $.Section "tags" }}
  <div class="tags">
    {{ range .Data.Terms.ByCount }} 
    <!-- 遍历 tags，并按计数排序显示 -->
    <div class="tag">
      <a href="{{.Page.RelPermalink}}" class="btn btn-outline-secondary position-relative rounded-pill">
        {{ .Page.Title }} 
        <!-- 显示 tag 标题 -->
        <span class="badge">({{ .Count }})</span> 
        <!-- 显示 tag 数量 -->
      </a>
    </div>
    {{ end }}
  </div>

  {{ else if eq $.Section "series" }}
  <div class="series">
    {{ range sort .Data.Terms.ByCount ".Page.Params.weight" "desc" }} 
    <!-- 遍历 series，并按 weight 参数降序排列显示 -->
    <div class="series-tag">
      <a href="{{.Page.RelPermalink}}" class="a-block">
        <div class="post-item-wrapper">
          <div class="post-item post-item-no-divider">
            <div class="post-item-info-wrapper">
              <div class="post-item-title">{{ .Page.Title }}（{{ .Count }}）</div> 
              <!-- 显示 series 标题和数量 -->
              {{ if .Page.Params.description }}
              <div class="post-item-summary term-summary">{{ .Page.Params.description }}</div> 
              <!-- 显示 series 描述 -->
              {{ end }}
              {{ if .Page.Params.warn }}<span class="warn">{{ .Page.Params.warn }}</span>{{ end }} 
              <!-- 显示警告信息 -->
            </div>
          </div>
        </div>
      </a>
    </div>
    {{ end }}
  </div>

  {{ else if eq $.Section "categories" }}
  <div class="categories">
    {{ range sort .Data.Terms.ByCount ".Page.Params.weight" "desc" }} 
    <!-- 遍历 categories，并按 weight 参数降序排列显示 -->
    {{ if not .Page.Params.hidden }}
    <div class="category-tag">
      <a href="{{.Page.RelPermalink}}" class="a-block">
        <div class="post-item-wrapper">
          <div class="post-item post-item-no-divider">
            <div class="post-item-info-wrapper">
              <div class="post-item-title">{{ .Page.Title }}（{{ .Count }}）</div> 
              <!-- 显示 category 标题和数量 -->
              {{ if .Page.Params.description }}
              <div class="post-item-summary term-summary">{{ .Page.Params.description }}</div> 
              <!-- 显示 category 描述 -->
              {{ end }}
              {{ if .Page.Params.warn }}<span class="warn">{{ .Page.Params.warn }}</span>{{ end }} 
              <!-- 显示警告信息 -->
            </div>
          </div>
        </div>
      </a>
    </div>
    {{ end }}
    {{ end }}
  </div>
  {{ end }}
</div>

{{ end }}
  1. 创建categories\_index.md文件。内容如下。
---
title: "Fandom"
slug: categories
---
根据原作进行分类，并未列出所有作品，可以在系列合集里面看看。

正文内容会显示为对页面的描述。这时候你的网站/categories/就会显示出目前所有的分类列表。

  1. 对分类信息进行自定义。

假如我希望自定义《无间道2》这个分类，那么我所需要做的是创建文件categories\无间道2\_index.md，并在内容中写入如下内容。

---
title: "无间道 Infernal Affairs"
description: 如果这次被我搞定，我们倪家从此就可以抬头做人。
warn: 哥攻抚慰Only
type: series
weight: 99
---

于是我所有打上了categories: ["《无间道2》"]的文章内容都会显示在这个/categories/无间道2/（示例）这个链接下。

此示例中的书名号并不是失误，在此是希望提醒，你的本地文件夹的名字是什么，Slug/短链就是什么。书名号并不会体现在短链中，所以无论你文章的Categories是无间道2还是《无间道2》都会出现在同一个页面。如果搞不太清楚自己文件夹的命名，那么就和文章填写的Categories保持一致即可。

  1. Series的实现方式同上。

创建series\_index.md文件。为你的每一个Series创建一个文件夹，如如series\香港电影同人\，并放入_index.md文件（无论下划线还是命名都不可以更改）。

在_index.md正文填入相应的信息。然后你想放进这个Series的文章，就在Metadata的部分写进series: ["香港电影同人"]。之后文章就会显示出来。

如果不显示的话，关闭本地预览，重新开启，一般就可以看见了。

应该没有别的需要补充的部分了，遇事不决可以询问ChatGPT老师。

效果展示

然后放一下我的同人博客更新后的样子。

浣心魔改后的主题本身对处于一个Series的文章做了新的显示效果如下，如果想要实现，具体请看他的文章：在Hugo里显示系列文章。

最后的话

其实还做了一些很多其他的改动。因为每次装修都在无关紧要的细节上进行长时间的大思考，所以暂时不打算再对博客做其他修改了……下一次写装修笔记应该又是明年了。

如果您对本站及同人站的特性感到好奇，欢迎在这一篇文章的评论区留言！我会很乐意分享的。