需求整理：三级结构、内容加密、页面警告、邮件订阅、短代码包裹的瀑布流图片展示+点击放大的灯箱效果……

2024 年发生了一件事情。那就是川总当选了。当然川总当选和我的三次元生活没有任何关系——但是，这件事对我的二次元生活，产生了一点小小的影响。美国的右翼一直致力于不干好事还不让别人干好事，这次的议程里就有要拿 NGO 开刀的内容。而我的二次元老家，我们亲爱的敬爱的 AO3，archiveofourown.org，的运营组织，OTW，是，一个，呃，NGO。网站的运营团队在川总当选前后更新了 terms of service，并也给用户发了一些提醒。

我一直是个安全感不足的人，向来觉得数据要握在自己手里才比较安心，而且去中心化的内容目标没那么大，再加上墙的限制本身对文章被阅读有一些门槛，也因为我玩静态博客玩很久了，种种要素综合下来，我决定：为什么不来搭建一个作者个人性质的同人博客网站呢！

我最后搭出来的博客请看： https://fanfic.jajajanonono.me/

如果你也对装修同人博客有兴趣，可以往下看！

开始的开始

当然，搭博客的第一步是，呃，搭博客。

什么是静态博客？怎么搭建？会不会很麻烦？我自己根据流程走下来感受是还好。目前我能做到的是搭建完成后更新文章的时候，只需要新建一个文章的文件，往 Github 上点击 commit 点击推送，你本地的新建文件就能变成一个新的网页界面，被同步到互联网上，被任何知道链接的人看到了！

当然，网站初始化的步骤会比发布新文章的步骤稍微多一点，需要，一台可以翻墙的电脑，新装一个 20M 左右的软件（Hugo)，有 Git，有代码编辑器。不过本博文的重点主要还是二次装修，初始化博客的内容我并不想赘述，在这里放我朋友的一篇文章：Hugo | 一起动手搭建个人博客吧 | 小球飞鱼，告诉大家怎么先跑起来一个静态博客。她解释得很详细，步骤也很清晰，跟着走就能明白。

唯一需要注意的是文章写的比较早，里面给的 Hugo 版本链接会有一点老，可能会有一些现行的主题不能用，建议在下载 Hugo 的时候前往这个网站 Releases · gohugoio/hugo 找到最新的、合适电脑操作系统的版本下载（找最新版本框体里的 Assets 列表展开，windows 电脑最新的下载地址是 hugo_extended_0.145.0_windows-amd64.zip，如果是苹果或者 linux 系统就去前面的 releases 链接找别的吧）。

对于已经有了 Hugo 博客，但是想单独搭建同人博客网站的人（我个人就是这样，因为我比较想把生活内容和同人内容切割开），推荐电脑装多个版本的 Hugo，根据需求选版本。Hugo 的多版本管理相当方便，跟 Python 差不多。在你放 hugo.exe 的同路径下面放一个别的版本的 Hugo.exe，然后重命名一下。比如我现在文件夹里放的是 hugoblog.exe 是个人博客 0.124.0 的 Hugo 版本，而我的同人博客版本是 0.139.3，我命名为 hugofanfic.exe。当我在个人博客的文件夹想要本地预览网页状态的时候我 git bash 的指令是 hugoblog server，同人博客的文件夹想要本地预览的时候我输入的代码是 hugofanfic server，只需要把任何指令里的 hugo 替换成你改后的名字，就可以指定运行哪个版本的 Hugo 啦。

主题？

我的同人博客选定的主题是 cactus，我将在这个主题代码的基础上改装。我喜欢简洁的基础上有一点点风格化的设计，有的主题太过简洁没有风格，有的主题太过有风格有些花哨，有的主题简洁也有风格但全是空白圆角和 padding，信息密度太空太低了，所以选来选去就选择了 cactus。

Hugo 的基础结构是 layouts 文件夹里的 html 文件都是网页元素结构的模板，这些网页模板会用 Go 语言进行编译；不过这种模板生成出来的页面都是在生成的一瞬间就完全定下数字的静态页面，如果有一些动态功能上的改写需求，会需要用到 javascript；这一部分的编程语言和逻辑不太会被主题限制，我提供的一些思路也是在 html 和 javascript 上做文章。主题影响比较大的，可能是具体的每一个元素长什么样。这些方面的代码一般会放在定义样式的文件里，一般是 css 和 scss 结尾的。比较早的 hugo 版本可能不认 scss，所以提一下，cactus 主题是用的 scss 的，所以样式代码可能没法照抄。

这篇文章主要推荐阅读的人群对象还是已经相对了解 Hugo 静态博客的各个模块怎么运行的朋友，或者虽然没接触过 Hugo 但是不畏惧捯饬代码的朋友。如果是既没玩过 Hugo，也对写代码这件事本身有点害怕的完全新手……在久远的将来，我没那么忙的话……我可能（只是可能！）会考虑单独写一个适用同人女和同人文的主题，可能那个对于小白朋友们来说，帮助会更大。（如果写了我再挂过来吧嗯，饼我先画一张在这里……）

此外，本文也适合一些对博客的结构级别要求在三级甚至以上的人看，主要是可以参考一下思路。

最后强调一下，因为我是选定了主题在写的，所以受限于 Hugo版本 和 主题限制，代码未必通用，但是我会写的比较小白，就会啰嗦。此外，因为我代码水平非常小白，很多做法不一定是最优解，如果有别的思路欢迎讨论。

厘清需求

把普通的静态博客装修为同人文网站，首先需要考虑清楚的是一些需求上的差异。以我个人的同人写作和静态博客装修经验，我认为需要关注的有以下几点：

#1 结构层级

博客的大多数时候二级结构就够用，在 content 文件夹下面的 posts 里面直接一个一个 markdown 文件开过去就可以满足绝大部分的需求，很多主题也基本是默认只有二级结构来设计的代码。

但是，文手写作会有多章节的长篇，也有一发完的短篇，会需要考虑博文里面本身做三级结构（甚至更多）出来。或许有人觉得博客直接在 content 下面一排文件夹直接开过去也一样，呃，也没问题，那也是一种思路。但我个人还是喜欢做大功能分区的，在 content 文件夹里，文章的文件都放在统一的 posts 文件夹下，而 taxonomy 的文件夹和 posts 文件夹平行，那样做比较符合我的审美。

不过这种结构层级会对其他部分的内容产生交叉影响，需要记录一下。

#2 同人概念在博客结构上的映射

同人的文章主要需要这么几个标识：原作、CP、标签，有时候做本子的话还会需要一个本子或者系列的标识。

这个其实是比较好的能和 Hugo 博客固有的分类法对应起来的。我的想法是，博客里的 categories 可以对应同人，然后 tags 可以对应 CP 和标签，我会规定在 tags 的参数里面，固定第一个标签为 CP 名字，后面的 tags 则是一些文章本身的标签。本子相关的内容则对应 series。

其实 Hugo 允许自定义分类法的参数，如果想可以单开一个专门的 CP 分类法参数，但我觉得 ta 性质和标签差别也不大，就没单开了。

不过这个需求有一个和因为是放同人文才做的三级结构会有的一个交叉需求。我想要我的长篇文章的分类信息能够合并展示。举例：我的赤安文《结局之后》这篇文有 27 章，我会希望我的博客里点开赤安的标签，显示的是《结局之后》这一篇文，而不是《结局之后·第 1 章》，《结局之后·第 2 章》，《结局之后·第 3 章》……27 篇文章把标签淹没了。其实 Lofter 现在就有这个毛病，因为 Lofter 本来的目标就是做轻博客，因此单位结构是单篇博文而不是一个长篇。这个地方会需要留意。

#3 延伸需求

抄……抄袭 AO3（并根据自己的想法做调整

毕竟我最开始想做有一部分就是万一 AO3 出事了，想给自己的内容上一层保险，所以有一些地方我会想直接照搬 AO3 的设计。

首先是警告和分级。我一直觉得那个东西很麻烦，不过我个人博客，我觉得我不需要像 AO3 这个大体量的网站那么严谨，去做分级那些（而且我自己写文日常 choose not to use warnings）。我对预警和避雷的态度是心情好的时候顺手写一个，保护未曾谋面的读者脆弱的心灵，心情不好就不写，我也不知道什么会成为触痛点，读者你自认倒霉吧。我出生的时候也没人给我预警，世界以痛吻我我报世界以精神创伤，摆了。

署名，其实我不太涉及到和其他人合写的情况，但是我的网站做个人本子的展示，有些本子有邀请其他写手写的 Guest 文，我不能全默认是我写的，所以会做一个参数，把那些不是我写的文署名署给 Guest 文的作者。

系列的概念：我的本子和系列合并成了一个概念，我会单独做一个本子的展示页面，展示收录的文章，封面，以及一些插图和排版设计局。cacuts 的侧边栏原本做的是页面内的 TOC (Table of Content)（就是静态博客页面根据 markdown 语法的多级标题分出的目录大纲），但是按照我目前用来放同人文的主题使用方式，其实单个网页内不太会有分级结构。我会把这个地方利用起来，用侧边栏用来展示长篇文章的章节列表或者同系列的其他文章的快捷跳转。

系列跳转和上下章按钮：AO3 的文章如果在系列里，会有地方可以跳转同系列前后的文章，而多章节文章，也会有前一章后一章按钮，这种很方便，我也会弄。

点赞和评论：这个从结构上会需要一个后端，因为是读者动态写评论和点赞展示的，不完全是我静态博客本身可以生成的。所幸静态博客自己有适配得还蛮不错的评论系统——waline，自带反应和评论统计，我就打算直接用 waline，自己不操心了。

文章前后的 Notes：我一般不太用文章前的，只是某一章写完会有点感想。需要注意的是我不想让 Notes 的字数计入正文字数，所以直接放在 markdown 文件里手写不太合适。

邮件订阅：很多独立博客有专门的 newsletter 和更新推送机制，不难但最好做一下。

AO3 没有的？

部分内容加密：之前看到有网友的结论是静态博客无法加密，只是形式上加密，没有内容的直接加密，页面元素直接能查出来加密内容。但我在研究装修的时候看到了有一个博客有这种功能。具体功能实现的方法是这样的，Li4n0/hugo_encryptor: A tools for encrypting hugo posts。思路是先用 AES-256 加密，把原本需要隐藏的页面元素内容替换成加密后的结果（并 display:none），加入 <scripts> 片段来验证输入的密码是否正确，如果密码正确，再把原本的加密后的结果通过 AES-256 解密出来，把解密内容展示在页面里。我虽然没有办法评估这个加密方法有多么牢靠，但我可以确定的是需要加密的原始内容是不会出现在页面元素上的。

这个加密有一些操作麻烦，后来我找到了一个可以用 vercel 部署来自动化加密过程的方式，如果你也是跟着我文章前面列举的朋友塔塔的教程来搭建自己的静态博客的，可以参考这个用法： hotjuicew/hugoArticleEncryptor: hugoArticleEncryptor is a tool for encrypting Hugo articles。

搜索方案：其实我觉得 AO3 的搜索真的超级不好用。死活搜不出来我想要的中文同人文的文章。然后如果只有我自己博客的文章需要搜索的话，静态博客的搜索方案大多都能够解决问题。我最后既定首页加一个单独的搜索页面链接，搜索页面里可以显示搜索结果的前后文，侧边栏加搜索按钮，点击出搜索栏，可以搜索出一个短的快捷列表。这个部分主要涉及到 javascript，蛮通用的，我给个人博客也用上了。

随便逛逛：这个很多静态博客都有啦，我觉得很有意思所以给同人博客也打算加上，这样的话不知道该看哪篇文的朋友点击按钮可以随便看同人文。唯一的问题是需要控制一下随机的结果，我只想长篇文的第一章和单独的短篇可以被随机出来，不想随机到单独的一个长文的中间某一章。可以用参数控制一下。

热力图：热力图我做的版本可以根据年份显示哪天写了多少文章，并且根据字数多少显示颜色深浅，我觉得这种综合汇报很有意思，所以打算放进来。

准备动手吧！

需求总结完毕！接下来就可以动手了！有时候需求写着写着会发展和细化，感觉是很正常的，我经常会修，所以就，呃，也还好吧。有大概基础的预期是比较好的！