Steam's Blog Init / 卷土重来的热气·二五八月记(下)

Created Thu, 21 Aug 2025 00:00:00 +0000 Modified Thu, 21 Aug 2025 13:37:33 +0800
4930 Words

[TOC]

日记太麻烦,不如一个帖子随便记记。加上最近看的书,以及自己偏爱的体裁是随记,姑且自己给自己当读者吧。

就在前天,说了没有下篇。但,Claude 带来的喜悦值得一篇新的文稿。(终于有理由写下篇了。

对对,虽然我中篇的公告说不知道写给谁看。但这个小博客,每周还是又 4-6 个人在看的,遗憾的是当中有 2 个我(德国的我,和日本的我)。GA 统计 ip 的个数,但不能告诉我具体是谁在看。

找工作进度

本篇 Claude 是主角,但主角的出场总是得有一定的前景提要。

从 07.31 开始,算是正式开始找工作。期待着简历投递的结果,但简历仿佛沉入了大海般沉寂。也是,这是预想的结果。毕竟快 1.5 年的 gap 不是轻易能被忽略的。因为投递简历受挫了,刚好上周拿到 mini2024 之后,VS Code 的页面出现了 Chat Copilot 的对话框。本想将博客的样式设计实现再拖一拖,但心情实在太差了。跳了 30 分钟的尊巴,也没缓过来,昨晚花了 3 个小时让 Claude 给我干活了,虽然中途不顺让我发脾气了,很快 Claude 用随机证明了自己的了不起(我的心情变得很好,因为博客样式变了)。

工作进展,虽说是进展吧,但毫无进展能说是进展吗?进度条(面试机会 / 投递次数):0 / 4

了不起的 Claude

我决定在这里展示我的愚蠢,把输入给 Copilot 的话全都 cv 贴过来。(这么一看,我废话还挺多的)

一开始,我没管模型,用的默认的 GPT-4o,然后它既没有实现我的需求,又把原有的主题样式改崩了,让它回滚,又滚不回去。最后一把删了,重新 clone 了一份原始样式。所以,这里的对话丢失了,因为项目被我删了。

下面这是 Claude Sonnet 3.7 的出色之处(对不起,愚蠢的我对你发了脾气)

熟悉项目

这是一个 hugo 构建的项目,项目的前端页面样式由 theme 文件下的 github-style 下的文件控制。

请阅读这个项目的代码,告诉使用 markdown 的高亮语法 ``,生成的文字样式由那些变量控制。

我让 Claude 去熟悉了下项目,因为不懂所有的编程技术,我也不知道 hugo 到底有多普及(我的认知是,东西约普及,AI 掌握得越好,因为信息会越多,而所有信息又可以相互验证,来排除错误的数据…)。

备份很重要

现在这个代码仓库状态是「版本0」,请记住这个仓库状态。

现在我们开始修改代码,我想针对正文部分使用到 Markdown 高亮语法 `` 的文字进行样式定制,将其背景设定为 #D6F3FF,文字色号为 #006EFD,请修改对应的文件。

注意,本项目的样式由 css 文件,或者部分 html、js 文件控制,请不要修改其他的配置文件,特别是 toml 文件

有了前车的 GPT 之鉴,我觉得备份很重要,所以要插个版本状态先,以便随时能再滚回去。

理论上所有样式都应该通过 theme 主题下的 github-style 进行控制,请将相关的代码变更在其目录下执行,并将非 github-style 目录下的文件理解成不可变更的文件。

还是 GPT 带来的应激反应,我要重申下修改的文件目录范围。其实,作为个人项目,修改哪里都可以。但是我想把本次样式变更所有的代码变更提交给原始的 github-style 主题那边(issue #162 我提了,就等作者回复了。)

Claude 开工

样式已经生效了,但是有个问题是,它把 Markdown 的 ``` 代码块里的代码也变成蓝色的了,你可以再处理下吗

测试员上钟,开始第一次的样式验收。

现在效果是对的,但是本项目的所有样式配置都在 dark.css 和 light.css 下,你查看 syntax.css 文件,它并不涉及具体的样式参数设定,你可以参考原先的代码逻辑,将现在 syntax 下的修改,移动到 light.css 和 dark.css 这两个文件夹下。保持 syntax.css 文件内容同“版本0”时的内容一致吗?

Claude 实现了我的功能,但它修改的是 theme 目录下的 syntax.css 文件,这和主题作者 Meik 的风格不一致。所以,让它改了下实现的文件位置。

旧的需求已完,新的需求又来

谢谢,上面的需求已经圆满实现了。下面是新的需求

暗黑模式下,即在 dark.css 文件下进行修改代码。在暗黑模式下,我希望章节标题的字号是 123456,麻烦修改下对应的代码。

贴心的 Claude 还是实现了这个功能,并温馨提示我,这个 123456 这个字号是不是太大了。我才反应过来,我把字体颜色说成了字号。

稍等一会,123456 并不是像素大小,而是标题的字号,更精准的参数是 #123456

修复我前面的错误。

大活开始了

感谢你的实现。下面这个需求有点大。可以阅读 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 页面,理解该页面对 markdown 文件的目录结果展示样式之后,仿造该样式,修改现在这个 hugo 项目 content 目录下 post 目录里的 markdown 文件的章节目录呈现形式吗?

抄袭开始,修改 css 的样式代码也许我自己倒腾倒腾也能实现。不过,和 Claude 对话,我才发现作者把 markdown 的高亮语法的样式变量设定为 code,而代码段则是 heightlight,所以 Claude 第一次修复的时候,把代码块的背景改了。(貌似 GitHub 高亮变量也用的 code,代码段变量我没查看过)

请先回滚上面的操作,我的需求没有讲述清楚,不好意思。

我想你访问 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 页面,理解该页面对 markdown 文件的目录结果展示样式之后,这里指的是 Outline 样式。

再仿造该样式,修改现在这个 hugo 项目 content 目录下 post 目录里的 markdown 文件的章节目录呈现形式。

修改需求描述,更精准点。

我的需求描述有些不准确。现在实现的效果页面有些错位。

本来我想再修正一遍措辞,发现不小心回车,发送出去了。Claude 及时响应,已经开始处理了(就等着看结果呗。

请先回滚上面的操作,我的需求没有讲述清楚,不好意思。

我想你访问 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 页面,理解该页面对 markdown 文件的目录结果展示样式之后,这里指的是 Outline 样式。

再仿造该样式,修改现在这个 hugo 项目 content 目录下 post 目录里的 markdown 文件的章节目录呈现形式。不需要删除现有的 TOC 按钮,但你要实现将现有的点击 TOC 弹出目录结构的效果,变更为右侧弹出要抄袭的 Outline 样式。

我看一遍,又一遍,我还以为我拷贝了一份上面的输入,仔细一看,这次的描述还是修改了一点点的。

实现的效果不对,点击 toc 按钮不但没有弹出来对应的目录结构,post 的 header 样式也错位了。

理论上该需求不会涉及 post-header 这块的样式修改,只要实现点击 post-header 上的 TOC 按钮,保持现有页面的宽度不变,在右侧弹出 TOC 结构

验收员上钟,打开控制台,看变量名,给一点点指引——其实我也不知道算不算指引,也许我不说 post-header 之类的,Claude 也能一次次的尝试,最终正确。就是随机大法终究抵达彼岸。

弹出效果是有了,但是你为什么修改了 post-header 这块的样式,还给它添加了阅读时长多少。现在 post-header 的样式是错位的。

不要 post-header 这儿的图标和样式,以及请调整下右侧目录结构弹出的位置,应该是同 post 同高,且被框在一个 box 里的

不知道 Claude 读 GitHub 那边的原始样式,记住了什么东西。。就突然出现了个没有的功能(阅读时长——个人觉得阅读时长没啥卵用,一个估算值,不怎么精准之外,有啥用呢?字数统计是不是更有用呢?一篇一万字的稿件,显示字数 1 万更友好呢?还是阅读时长半小时更友好呢?我还是喜欢字数统计)

修了一个 bug,又加入了一个 bug

为什么你还是修改了 post-header 这块的 TOC 图标,原图标是个类似菜单的图标,且没有文字描述。

除了上面这点,你还把字数统计弄没了

好吧,bug 没修好不止,还引入了个新的 bug。

微调,我们加入一点点细节

你可以阅读「版本0」那时候 post-header 这块的代码吗?你的修复并没有生效,字数统计是添加回来了,但你又把阅读时间加回来了——这是不需要的。此外,TOC 那块的图标为什么有模糊的框?

请再修复下,以及右侧的目录结构请仿造 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 页面的样式设计,将 post 的页面高度同右侧的目录结构同高。现在右侧目录结构是同 div d-flex 同高的

回滚吧。回滚和重启一样伟大!

现在效果是正确的,但是弹出的右侧目录结构位置不对,应该是同 div post-header 同高。以及请再次访问 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 读取 Outline 这块对各级标题的字号设置,以及对应的行高、字间距等参数设置。

了不起,终于把样式试正确了。微调,微调下。

两个问题:

  1. 右侧目录结构高度不对,你可以请查看 div post-header 的高度设置,请记住是同 post-header 这个 div 同高。
  2. 右侧目录水平位置也不对,请阅读 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 查看 Box-sc-g0xbh4-0 gFKFyc BlobViewHeader-module__Box_1–PPihg 和 section TableOfContentsPanel-module__Box–ehst0 的距离
  3. 右侧目录的文字字号不对,请阅读 Outline 这块的文字字号大小,以及对应的行高和字间距

依旧调整样式中,贴心的 Claude 没指出我不会数数的问题。直接回复,现在着手处理这三个问题(对不起,我一开始真的以为是两个问题,没想到临时多了一个)。

3 个问题一个都没修复。

第三个问题,右侧目录结构的章节字号,不是同 markdown 文件中的各级章节标题字号等同,而是考虑到目录结构的可阅读行,统一采用了 14px 的字号。

请!再修复

我有点生气。

这两个问题没修复:

  1. 右侧目录结构高度不对,你可以请查看 div post-header 的高度设置,请记住是同 post-header 这个 div 同高。
  2. 右侧目录水平位置也不对,请阅读 https://github.com/DistSysCorp/ddia/blob/main/ch03.md 查看 Box-sc-g0xbh4-0 gFKFyc BlobViewHeader-module__Box_1–PPihg 和 section TableOfContentsPanel-module__Box–ehst0 的距离

额外,post-header 这块的 toc 图标又出现了蒙层背景。原先是没有的

生气是没用的,得解决问题。再开控制台,看变量名。

太棒了,高度问题和背景问题都修复好了。现在就剩下正文的 div file-pytest 和右侧目录结构 div gh-outline 的间距问题了。姑且将二者的间距设置为 24 px

Claude 再试。

问题没修复,麻烦修复下:

  1. 已实现:post 正文的 post header 点击之后,在其 box 边框右侧弹出的目录结构是仿造 outline 实现的目录结构。优化下,在 post 所在 box 或是 div 右侧 24px 处弹出 post 的目录结构;
  2. post header 的 toc 按钮无论点击后,会产生蒙层,请修复下,将其变为无论点击没有,都不会有任何蒙层背景;
  3. 右侧的目录结构读取的 post 里的章节标题,如果标题过长的话,不要折叠使用 … 来展示,请自动截断换行;

这是一个优化需求,一开始我并没有说到底目录结构样式如何呈现,是文字过长截断呢?还是保留文字,换行处理呢?

现在问题变成了

  1. 目前实现是在 post 所在 box 或是 div 的右侧边框左侧 24px 弹出目录结构。请修正为在右侧 16px 处;
  2. 同之前的问题 2.,它并没有修复
  3. 之前的 3. 修复了,干得好。但是各级标题并没有体现缩进关系,设定为:
    1. post 名(如果有的话)为一级标题,同二级标题同水平线;
    2. 二级标题 ## 下有缩进的三级标题 ###,以此类推;
    3. 所有同级标题同水平线,二级标题和二级标题对齐,三级标题和三级标题对齐,依次类推

不知道怎么的,我突然觉得列表的 123,非常适合来讲需求,也好同 Claude 讲到底需求1 没实现呢?还是需求2。

干得好,问题 2、3 都修复了,但是 1 没有

继续尝试修问题。

活都干完了,又来新需求了

你太棒了。需求都实现了,棒极了

我有个小小的优化需求,可以在右侧的目录结构 outline 中引入本 github-style 对列表样式的设定吗?

post 的一级标题为纯文本,从二级标题开始使用 github-style 的列表圆圈样式,二级标题为一级列表样式,三级标题为二级列表样式,四级、五级以及以后等级标题统一用三级列表样式;

多像雇主啊,员工刚干完活,立马指派新的活。

第三次重申我的需求:

在右侧的目录结构 outline 中引入本 github-style 对列表样式的设定:

post 的一级标题为纯文本,从二级标题开始使用 github-style 的列表圆圈样式,二级标题为一级列表样式,三级标题为二级列表样式,四级、五级以及以后等级标题统一用三级列表样式;

此外,再额外增加一个需求,目前 post 的 post header 的 toc 图标是需要点击才弹出右侧目录结构,我希望一开始右侧目录结构就是直接罗列的,下面需求不需要实现:用户关掉右侧目录结构可以通过 post header 的目录结构再次打开

重申需求就是 cv 再贴一遍。。之外,再加一个新需求。

我有个需求:保持右侧目录结构始终显示,无论光标点击了哪里,除非点击了右侧目录结构的关闭按钮;

此外,之前右侧的目录结构里的各级章节显示前面带有列表样式这个需求你并没有实现

验收,反馈结果,让 Claude 再试。

现在右侧目录结构的一级标题也有列表的圆圈,请去掉,一级标题直接从文字部分进行展示

也是我之前需求没描述清楚的锅。补一下。

你真是个了解的家伙!优秀,谢谢你

大团圆!

使用小心得

描述需求的时候,采用需求 1、需求 2,列表形式会更方便后续的纠错;如果你让 Claude 去抄作业,还是要把抄袭的东西具体的样式再描述清楚,到底是直接文本形式呈现呢?还是套用现有的其他文本样式。

以及,让 Claude 改代码,不知道为何让我产生了让 midjourney 生图的相似感。mj 生图全靠随机,这次不行,OK,retry,试,再试,再来一遍…叠基数,总能滚到满意的效果图。Claude 似乎也是如此,try,retry,again。。。最后,幸福美满。大概,AI 还是需要多次尝试才能去掉错误的答案,达到确定性。或许编程比艺术,具有更高的确定性,所以 Claude 达到最终效果的尝试次数会低于 mj。

人生啊,总是充满不确定性的呀。

特别鸣谢

感谢 GitHub Copilot 的免费额度,用掉了 11.7% 的 Premium requests(其实也不知道是个啥),白嫖了 Claude Sonnet 3.7 模型,GPT-5 不给白用(小气)。

遗留问题

已经把上面 Claude 的实现功能写了个 issue 告知了 github-style 的作者。也讲清楚了其实有一些遗留问题:

  1. 固定的目录结构对窄屏,尤其是手机阅读不友好。是需要处理的;
  2. 暗黑的章节标题字体颜色设置,影响了个人主页 README.md 的展示,需要处理下;

不过嘛,如果 Meik23333 不要 Claude 的代码,这些变更就会变成我专属变更,修不修都无所谓。毕竟我用 27 寸的显示器看自己的博客。

Contents