Hugo | Papermod装修日志（2）

其实很早以前就在想Papermod用的时间太久了，要不换一个新主题吧，但是用得越久花费的装修精力就越多，投入的时间精力越多就越难换，这就是沉没成本的陷阱啊陷阱！上一篇已是2023年，因此干脆开了一篇新的装修记录。

修改博客字体

将博客字体修改为汇文正楷和Esteba。装修的时候发现好像没有霞鹜文楷那样的引用链接，于是让GPT老师帮我写了代码。

在static文件夹下新建fonts文件夹，将字体文件放入其中。
在博客的自定义css文件中添加以下代码：

@font-face {
    font-family: 'HuiwenZhengkai'; /* 自定义字体名称 */
    src: url('/fonts/Huiwen-Zhengkai.ttf') format('truetype'); /* 字体路径 */
    font-weight: normal; /* 设置权重，视字体文件支持的权重而定 */
    font-style: normal; /* 设置风格，例如 normal、italic */
    unicode-range: U+4E00-9FFF;/* 只适用于中文字符 */
}

@font-face {
    font-family: 'Esteban'; 
    src: url('/fonts/Esteban.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

在reset.rss中body模块下的font-family添加'HuiwenZhengkai','Esteban'

取消博客RSS输出

修改config.yaml

outputs: /* 禁用 RSS 输出 */
  home: ["HTML"]
  section: ["HTML"]
  taxonomy: ["HTML"]
  taxonomyTerm: ["HTML"]

删除public/index.xml文件

更改高斯模糊样式

之前的样式是照抄的塔塔教程，最近发现夜间模式下文字颜色不会自动适配，于是修改了一下css样式。

在/assets/css/core/theme-vars.css（其他主题文件可能会有不同）中添加：

:root {
    --blur-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); /* 亮色模式阴影 */
}

.dark {
    --blur-text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5); /* 暗色模式阴影 */
}

修改一下之前写的高斯模糊样式

/* 高斯模糊 */
.blur {
    color: transparent;
    text-shadow: var(--blur-text-shadow);
}

.blur:hover {
    color: var(--primary);
    text-shadow: none;
}

效果展示时间：也可以切换日间/夜间模式看看！

NeoDB短代码

也参与了轰轰烈烈的折腾Neodb短代码的活动，参考教程为白石京的Neodb自动化短评卡片和塔塔的用NeoDB短代码展示书影游短评，除了rss之外基本没做什么大修改，因为现在人在墙外也不太存在API加载不出来的问题于是也就先没管可能存在的本地加载失败的情况（……）真是能省事一点是一点的典范。

在layouts/shortcodes中加入neodb.html文件

个人不需要太多功能，因此大刀阔斧删减了很多，如有需要可以根据上面提到的两篇教程自行添加
Neodb音乐条目的url中显示的种类虽然是“album”，但API提取出的分类实际上是“music”，如果按照“album”编写规则会无法显示“听”字，这里要注意修改。很让人挠头的差异……

{{ $dbUrl := .Get 0 }}
{{ $apiUrl := "https://neodb.social/api/me/shelf/item/" }}
{{ $itemUuid := "" }}
{{ $authToken := "Your own API" }} <!-- Replace with your actual API token -->

{{ $comment := trim .Inner " \n\r" }}

<!-- Extract item_uuid from the URL -->
{{ if (findRE `.*neodb\.social\/.*\/(.*)` $dbUrl) }}
{{ $itemUuid = replaceRE `.*neodb\.social\/.*\/(.*)` "$1" $dbUrl }}
{{ else }}
<p style="text-align: center;"><small>Invalid URL format.</small></p>
{{ return }}
{{ end }}

<!-- Construct the API URL -->
{{ $dbApiUrl := print $apiUrl $itemUuid }}

<!-- Set up the Authorization header -->
{{ $headers := dict "Authorization" (print "Bearer " $authToken) }}

<!-- Fetch JSON from the API -->
{{ $dbFetch := getJSON $dbApiUrl $headers }}

<!-- Determine shelf status -->
{{ $shelfType := $dbFetch.shelf_type }}
{{ $category := $dbFetch.item.category }}
{{ $action := "" }}
{{ $prefix := "" }}
{{ $suffix := "" }}
{{ $displayText := "" }}

<!-- Determine the action based on category -->
{{ if eq $category "book" }}
    {{ $action = "读" }}
{{ else if or (eq $category "tv") (eq $category "movie") }}
    {{ $action = "看" }}
{{ else if or (eq $category "music") (eq $category "podcast")}}
    {{ $action = "听" }}
{{ else if eq $category "game" }}
    {{ $action = "玩" }}
{{ end }}

<!-- Determine the prefix and suffix based on shelf type -->
{{ if eq $shelfType "wishlist" }}
    {{ $prefix = "想" }}
{{ else if eq $shelfType "complete" }}
    {{ $prefix = "" }}
    {{ $suffix = "过" }}
{{ else if eq $shelfType "progress" }}
    {{ $prefix = "在" }}
{{ else if eq $shelfType "dropped" }}
    {{ $prefix = "不" }}
    {{ $suffix = "了" }}
{{ end }}

<!-- Combine prefix, action, and suffix -->
{{ $displayText = print $prefix $action $suffix }}

<!-- Check if data is retrieved -->
{{ if $dbFetch }}
<div class="db-card">
    <div class="db-card-subject">
        <div class="db-card-post">
            <img src="{{ $dbFetch.item.cover_image_url }}" alt="Cover Image"
                style="max-width: 100%; height: auto;">
        </div>
        <div class="db-card-content">
            <div class="db-card-title">
                <a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">
                    {{ $dbFetch.item.title }}
                </a>
            </div>
            <div class="db-card-rating">
                {{ $dbFetch.created_time | time.Format "2006-01-02T15:04:05Z" | time.Format "2006年01月02日" }} {{ $displayText }}
            </div>
            <!-- 这里显示手动输入的评论 -->
            <div class="db-card-comment">
                {{ if $comment }}
                <p>{{ $comment | safeHTML }}</p>
                {{ else }}
                <p>{{ $dbFetch.comment_text | safeHTML }}</p>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ else }}
<p style="text-align: center;"><small>Failed to fetch content, please check the API validity.</small></p>
{{ end }}

按照喜好调整rss样式

/*Neodb card style*/
.db-card {
    margin: 0.5rem 0.5rem;
    background: var(--color-codebg);
    border-radius: 7px;
}

.db-card-subject {
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
    padding: 12px 0px 12px 5px;
    position: relative;
}

.dark .db-card {
    background: var(--color-codebg);
}

.db-card-content {
    flex: 1 1 auto;
    overflow: auto;
    margin-top: 8px;
}

.db-card-post {
    width: 20%;
    margin-right: 15px;
    margin-top: 10px;
    display: flex;
    flex: 0 0 auto;
}

.db-card-title {
    margin-bottom: 3px;
    font-size: 19px;
    color: var(--card-text-color-main);
    font-weight: bold;
}

.db-card-title a {
    text-decoration: none!important;
}

.db-card-rating {
    font-size: 0.9em;
}

.db-card-comment {
    font-size: var(--body-font-size);
    margin-top: 10px;
    margin-bottom: 15px;
    color: var(--card-text-color-main);
}

.db-card-cate {
    position: absolute;
    top: 0;
    right: 0;
    background: #8aa2d3;
    padding: 1px 8px;
    font-size: small;
    font-style: italic;
    border-radius: 0 8px 0 8px;
    text-transform: capitalize;
}

 .db-card-post img {
    width: 120px!important;
    height: flex;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 600px) {
    .db-card {
        margin: 0.8rem 0.5rem;
    }
    .db-card-title {
        font-size: calc(var(--body-font-size) * 0.75);
    }
    .db-card-rating {
      font-size: calc(var(--body-font-size) * 0.7);
    }
    .db-card-comment {
      font-size: calc(var(--body-font-size) * 0.7);
    }
}

上面的版本是只能调用私有API，如果没有标记过的条目会报错。因为有时候想在博客里引用一些没有标记过的条目（例如上篇的人狼村之谜），所以想达成 “优先调用私有API，如果失败则切换到Neodb的公共API” 的效果。然后和GPT老师折腾了三天也没搞好，条件语句就是写不出了……最后决定放过自己，先简单粗暴把内容拆成两个短代码文件分开使用。

使用公共API的短代码部分：

{{ $dbApiUrl := "https://neodb.social/api/" }}
{{ $dbType := "" }}

{{ $customComment := .Inner }}

{{ if ( findRE `^.*neodb\.social\/.*` $dbUrl ) }}
    {{ $dbType = replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
{{ else }}
    {{ $dbType = $dbUrl }}
    {{ $dbApiUrl = "https://neodb.social/api/catalog/fetch?url=" }}
{{ end }}

{{ $dbFetch := getJSON $dbApiUrl $dbType }}

{{ if $dbFetch }}
    {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
    <div class="db-card">
        <div class="db-card-subject">
            <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
            <div class="db-card-content">
                <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
                <div class="db-card-comment"><p>{{ $customComment | safeHTML }}</p></div>
            </div>
        </div>
    </div>
{{else}}
    <p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
{{end}}

除了不会显示标记时间和状态之外剩下基本一致。

书影游展示墙

虽然搭起来很久了但在这放一下代码！因为用的是Neodb源然后又不会自己写所以没用上自动化轮子，看似高端的界面实际上一直是在手动填数据……

参考教程：

在layouts/_default中添加books.html，movies.html，games.html（点击链接即可看到代码）
在content内加入markdown文件，以books.md举例：

---
title: "阅读室"
layout: "books"
summary: "books"
---

在data/neodb内加入csv文件，我的代码对应的csv文件列数是id， title， poster，url， genres， tags， star_time，但只显示&需要填写加粗的几项即可（没删除其他的只是因为懒而不是必要……）

一点说明：
- 删去影片tag和评分，只保留年份筛选，如果有需要可以根据参考教程的两篇博客自行添加；
- html文件里的{{index $item "number"}}中的数字代表的是csv列数，注意点是go语言是从0开始计数，即csv中的title是{{index $item 1}}，若在csv中增减列数，需要记得修改代码中的这部分；
- 展示顺序是按照csv项目顺序而不是star_time，后者只作为筛选条件，想按照从新到旧显示需要手动将最新项目放在第一行。

现在就可以试试尝试访问了！

修改博客字体#

取消博客RSS输出#

更改高斯模糊样式#

NeoDB短代码#

书影游展示墙#

修改博客字体

取消博客RSS输出

更改高斯模糊样式

NeoDB短代码

书影游展示墙