简单装修1.0

Toolbox

25 May, 2024

简单装修 1.0 版（还会有 2.0 吗，不太可能吧？）。

我的博客搭建是基于 Hugo + Github Pages，没买域名，因为觉得 GitHub 活的时间肯定会比我买的域名久。也不爱给博客搞装修，基本原则是——能看就行。不过有些变动还是需要记录一下，以免后续找起来抓瞎。我不是程序员，对代码不熟悉，全是抄+自己瞎琢磨改改，这篇里不会有细节的教程和说明。

已完成

Google Analytics & Disqus

这俩算是博客装修入门篇吧，非常简单，按照官方教程一行代码的事。虽然各自都有更清爽的替代品（ unami 和 twikoo ）但我这连博客基本样式都懒得搞的人怎么可能有动力折腾，不得不换时再说。

豆瓣书影音墙

在一些偷懒的豆瓣书影音同步流程详细写过。

简单来说就是用 GitHub Action 每天抓取豆瓣标记同步到 blog 仓库对应的书影音 csv 文件，再根据 csv 文件的数据生成图片墙。

书影音墙图片一开始用的是豆瓣 cdn，后来豆瓣加上了防盗外站无法正常显示，豆瓣书影音同步 GitHub Action 作者提供了图片托管服务，只是之前的数据需要自己批量替换（感恩 pandas 和 python，换起来不麻烦），没过多久可能用的人太多，服务流量超额被停了，所以我用他提供的另一个工具 Dover by lizheming - Discovery (deta.space) 自己部署了一个服务，把图片地址又换了一遍。问题是 GitHub Action 后续同步豆瓣数据时图片还是作者的托管服务地址，本来想要么我写个 action 也定期跑一下更新 csv 的 pic src ，但这几天作者又修好了，所以我想凑合着吧，出问题再说！

书籍卡片

2020 年看到这篇文章内显示豆瓣条目（LocalStorage 缓存版）就想着要不要加上，拖到 2024 年~~全世界~~都似乎用上了改良后的豆瓣和 neodb 卡片我才动手。但是，正因为大家都在用，我反倒不那么想用了。短代码是抄的 Hugo 豆瓣短代码，我用的是上面豆瓣同步生成的 csv 表格里的数据，而不是像大家用的 neodb 卡片是走 neodb api 获取，也是不想给 neodb 增加不必要的流量压力（毕竟我没有给人家付钱）。

{{$items := getCSV "," "data/douban/book.csv" }}

{{range $item := $items}}

{{if eq (index $item 0) $dbID }}

{{ $douURL := index $item 5}}

<div class="db-card">
    <div class="db-card-subject">
        <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{index $item 3}}">
        </div>
        <div class="db-card-content">
            <div class="db-card-title"><a href="{{ $douURL }}" class="cute" target="_blank" rel="noreferrer">{{ index $item 1 }}</a></div>
            <div class="db-card-abstract">{{ index $item 2 }}</div>
        </div>
    </div>
</div>
{{end}}
{{end}}

为了方便我也没用链接而是用的条目 id 作为参数，用起来效果如下。

The Stranded Whale

About The Stranded Whale Tender and heartrending, Jane Yolen’s clear-eyed tale of a child’s effort to rescue a beached whale evokes a fierce love of wildlife and a universal sense of loss. Sally and her brothers are walking home from school along the dunes in their Maine town when they come upon an enormous whale. He’s stranded on the beach. Her brother runs for help, and many people rally to respond, but the tide is going out quickly and the whale is just so big. Still, Sally is able to sit near the whale’s massive eye and tell him he’s beautiful and strong, and that she will miss him no matter what happens. Master storyteller Jane Yolen and illustrator Melanie Cataldo have created an authentic portrait of vulnerability that is at once spare, moving, and honest.

字数统计

抄的 Hugo 总文章数和总字数。大概改了改只让它显示总字数。

图片多栏显示

理论上来说，只需要在 css 文件里用上 column-count 和 p:has(> img:nth-child） 就能够方便控制图片多栏显示。然而我真的不明白这个主题的 css 怎会搞得如此复杂！

  {{ if .Site.IsServer }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
  {{ else }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
  {{ end }}

苍天啊为什么要写成这样？总之改来改去直接动 styles.css 就疯狂报错，甚至把 stylesheet 的 href 换成 static 里的文件也不行，我气昏了头，放弃。之前是用简单粗暴的方式，每当有博文需要多图排版，我就在对应的 md 文档里加 <style>。后来有一天我突然醒悟，管不了整个站的 css，我可以改 layouts 文件夹里 single.html 文件啊！所以最后就是，在 single.html 里加上了以下内容，姑且就这么糊弄着了！

<style>

p:has(> img:nth-child(2)){column-count:2;column-gap:8px;margin:6px 0;}

p:has(> img:nth-child(3)){column-count:3;}

p:has(> img:nth-child(4)){column-count:4;}

p:has(> img:nth-child(5)){column-count:5;}

p:has(> img:nth-child(6)){column-count:4;}

p:has(> img:nth-child(2)) img{display:inherit;}

p:has(> img:nth-child(6)) img{margin-bottom:8px;}

</style>

RSS

Hugo 自带 RSS ，一般是在 layouts 文件夹下的 rss.xml 文件。

之前我只是改动了 output 变成全文输出。嗯我知道很多人会特意选择不显示全文，我不太在意，想着真有人愿意在 RSS 阅读器订阅的话，不经过跳转一次性看完全文挺好的，我也喜欢只在 Inoreader 里看，只有觉得有特殊排版和想留言时才访问原链接。

最近一次折腾是为了把部分日记和书摘设置成 rss_ignore，对应的博文 md 文件增加 rss_ignore property 为 true，再利用 Hugo 本身就有的 filter 语句设置过滤规则，把 rss.xml 文件里的 range 改成 {{ range where (where .Site.Pages "Params.rss_ignore" "!=" true) "Kind" "page" }} ，这样就可以过滤掉不想输出到 RSS 的博文，只是我在折腾的过程中不小心出了点纰漏，结果 Inoreader 居然那么智能飞速把书影音甚至只是试验用的 neodb 电影页面一并抓取了！我眼前一黑，理解了那么三秒钟为什么有人不愿意加 RSS。

待办（大概率会鸽）

搜索框

等到不得不在自己博客搜东西时我会加上的。

Ko-fi 链接

ko-fi 官方的指引很明确，我对于加赞赏链接并没有心理负担，但问题在于，ko-fi 如果绑定的只是个人 PayPal 账户，那么对方支付时会看到我的实名。可以通过升级 PayPal 账户为 business account 来解决，但是 PayPal 一遍又一遍让我做安全验证，死活通过不了，算了，以后再说。

图片说明

看到两篇参考教程，同样，日后再说……

让 Hugo 自动给图片加上说明文字 - 叶寻的博客 (cyrusyip.org)

Caption images with markdown render hooks in Hugo | Sebastian De Deyne

美化 categories 和 tags 页面

现在真的是太丑了……但，眼不见为净，我没看到就不需要优化（掩耳盗铃）。

热力图

2020 年刚搭博客我就雄心壮志想仿照 GitHub 热力图做个 blog 版本的，拖啊拖的我的友邻椒老师行动力爆棚写出来了我却还没动手，也懒得加了。需要的朋友请参考如何给Hugo 博客添加热力图| 椒盐豆豉。

结语

对我的博客其实还挺满意，有些看上去很 fancy 的功能于我是个累赘。这个主题虽然也有很多不足，但是精挑细选之下至少中文博客我还没碰上撞车的，坚决不用大家都用的主题（我的个人怪癖）。

还有在自留地小小吐槽下，个人博客的确是想怎么折腾都好，可是我始终不能理解在所有文字博文里添加动态背景一刻不停往下掉东西的，把鼠标光标搞成一点击就放烟花炸仙女棒的，以及弄闪瞎眼的高饱和荧光色的！是有多么不想别人看清楚字吗！以及自定义右键选项菜单、音乐自动播放，这都是我不想再次访问的网站类型。嗯，当然，也不想和这类交换友链（想太多）。