132 lines
12 KiB
Markdown
132 lines
12 KiB
Markdown
---
|
||
title: 理想乡构筑手记（1）：Hello，Hermeneutics
|
||
date: 2025-01-22
|
||
summary: 写了个主题捏
|
||
description: 本文介绍了作者在期末考试后，利用 AI 编辑器 Cursor，以野心开发模式快速构建其博客新主题「Hermeneutics」的经历。新主题采用 UnoCSS 框架，样式灵感主要来源于 Innei 的 Mix Space Shiro。文章详细描述了如何向 AI 提出需求、快速迭代，并最终完成一个可用的主题。尽管遇到了一些挑战，例如代码风格混乱和部分功能需要手动实现，但作者仍然认为这种结合 AI 的开发模式对于个人项目来说高效且具启发性。最后，作者解释主题命名源于一首同名歌曲，并留下了一个值得读者思考的问题。
|
||
categories: ["百草园"]
|
||
series: 理想乡构筑手记
|
||
tags:
|
||
- 博客
|
||
- Hermeneutics
|
||
- Cursor
|
||
slug: hello-hermeneutics
|
||
featuredImage: https://img.viento.cc/cover/hello-hermeneutics-cover.webp
|
||
---
|
||
|
||
各位老友们好，我是 Chlorine。
|
||
|
||
如各位所见，小氯也是成功从荆棘遍野天堑绝崖的期末寄活下来了。尽管是考得一团糟，但是你就说活没活下来吧（`骄傲脸.avif`）。
|
||
|
||
那么既然考完了，报仇雪恨般的摆烂自然是必不可少的。当然，小氯的摆烂不是打游戏或者刷一天的视频，而是折腾自己喜欢的东西，例如小氯心爱的园子，或者是（后续）学一学 Rust、Python，或者是机器学习和统计学。
|
||
|
||
> 你这哪叫什么摆烂？
|
||
|
||
你说得对。小氯不知道，节奏不快的自我提升什么时候都成了摆烂了。
|
||
|
||
好的，回来。既然有了充足的时间，那么园子的一周年庆典就要提上日程了。小氯打算开一个新系列，仔细说一说小氯装修园子的过程，以及一些有的没的的感想。由于没有找到什么好的名字，就随便起了一个「理想乡构筑手记」。构筑和手记都明显，而这里的「理想乡」，来自于园子英文名的直译。
|
||
|
||
> Chlorine's Eutopia
|
||
|
||
本期是「 [理想乡构筑手记](/series/理想乡构筑手记) 」的第一篇，主题是园子的新主题——「Hermeneutics」（中文直译：解释学 / 诠释学）。
|
||
|
||
这篇文章还可以有一个更加学术化的名字：
|
||
|
||
> 基于 Cursor 的野心开发模式——以 Hugo 主题为例
|
||
|
||
不过就其详细程度而言，其远远担不起这个名字。
|
||
|
||
> [!warning]
|
||
> 下文所述的开发策略具有很强的场景和个人局限性，可能不适用于所有的场景，请自行取舍。
|
||
|
||
## 前言
|
||
|
||
如各位老友所见，小氯非常喜欢 [Shadcn UI](https://ui.shadcn.com) 的风格。至于到底喜欢什么部分，难说，可能是其流畅的动画、美观的圆角、微妙的阴影和大胆的黑白撞色吧。然而，小氯并没能成功将其应用于自己的任何一个主要项目，只在几个单页 HTML 中（在 AI 的帮助下）实现过一些类似的风格。
|
||
|
||
小氯之前的博客主题是基于 [Landscape](https://github.com/kkbt0/Hugo-Landscape) 魔改的 Efímero（浮光）。确实是很美观且有特色的主题，而且在小氯持之以恒的魔改下，基本上复刻了 Fuwari 大部分的功能（除了 Banner 高度的变化）。但是小氯对这个主题也只能魔改，把主题整个的样式布局拆了重来，对小氯来说还是太难了，而令人又爱又恨的 Swup 也是不忘每时每刻为小氯上血压，至今小氯也没能完美地修复 KaTeX 的加载问题。
|
||
|
||
而前几日（应该是前很多日了），[时雨](https://shiyu.dev)老友自己动手做了一个新的博客 <https://test.shiyu.dev/>，效果相当不错。于是，小氯动了换个主题的心思，打算做一个 Shadcn 风格的主题，奈何没这个能力知道吗（范大将军音），而且在期末寄搞这个无异于紫砂，于是小氯就把这件事搁下了。
|
||
|
||
这一转眼，寄也寄完了，那么这些工作也该提上日程了。当然，这么大（迫真）的项目，普通的 AI 辅助是胜任不了的，小氯打算试一试最近很火的 [Cursor](https://www.cursor.com)。
|
||
|
||
小氯最早是在 [Pseudoyu](https://pseudoyu.com) 老师的博客了解到的 Cursor。Yu 老师对 Cursor 的评价相当高，称其「体验感和可用性已经和我想象的形态越来越近了」。[^1]在后续几个渠道了解到的评价中，都对 Cursor 赞不绝口。
|
||
|
||
于是小氯花了一点时间去搜集了一下 Cursor 的相关信息，大致就是一个超高校级的 AI Editor，可以结合整个项目、在线文档等满足你的代码需求，甚至直接上手帮你改代码。虽然说不开源，但是功能也是真的很强。
|
||
|
||
Cursor 虽然没有教育账户，但是有一个试用期，应该是足够我完成这个项目了（事实证明并非如此，不知道为什么，我的免费额度用得极快，这一个项目干碎了我六七个免费账户，没办法，为了完成项目只好先亏欠一下 Cursor 了）。
|
||
|
||
## Tech Stack
|
||
|
||
Hugo 的主题自然是不能请 React 等乱七八糟的前端神仙的，~~就算能小氯也不会~~。于是，小氯打算只用一个不算是框架的 UnoCSS。至于 Swup，哪凉快哪待着去，再处理那些 JavaScript 加载问题我要疯了。
|
||
|
||
## 主题风格
|
||
|
||
如前文所述，小氯原本是想做一个 Shadcn 风格的主题的，不过做着做着就跑偏了。现在的主题可谓是 Anything But Shadcn（雾）。大体上也没什么风格可言了，高情商的说法可能是简洁、优雅和响应式，低情商的说法我不敢想。
|
||
|
||
不过，对于经常逛博客圈子的老友来说，这个风格应该不难看出其溯源：**拾壹老师（[Innei](https://innei.in)）的 Mix Space Shiro**，准确来说应该是「白い」。尤其是首屏，不能说是很相似吧，只能说是一模一样。
|
||
|
||
作为一位前端开发的大神，拾壹老师的个人网站堪称我见过最美观的，甚至可以说没有之一。虽然说小氯还做不到像拾壹老师做得那么好，但是小氯自己已经比较满意了。
|
||
|
||
这里再说一下版权和许可的问题：Shiro 以 AGPLv3 开源，「白い」是闭源的。小氯做的主要是参考样式，最多是把网页截图之后扔给 AI 做参考图，控制台都没开几次，代码更是**完全没看**。所以，小氯认为这份代码应该不受 AGPLv3 传染性的制约。而且小氯的主题本身也是以 MIT 协议开源的，应该不会有什么法律风险。
|
||
|
||
那么下面，就简单说说开发的问题吧。小氯不会讲具体的开发流程，因为小氯也忘记了 (/ω＼)
|
||
|
||
## 野心开发
|
||
|
||
这个词是小氯现想出来的，不过也确实有这个词。Aggressive Development，也可以翻译为激进开发、侵略性开发。简单来说就是用各种手段，以极快的速度搓一个 Production-Ready 的 MVP 产品。对于抢占蓝海市场份额或者是初创公司的 IPO 这样的场景来说，这个策略很有用。
|
||
|
||
小氯只是开发一个自用的主题，自然谈不上抢占市场份额，事实上，小氯只是「急功近利」而已——希望以最快的速度完成一个可以实装到园子的主题。而且，就小氯的经验来说，AI 写的代码如果没有关键性 Bug，大部分都是可用但是风格和性能不甚佳的。Cursor 的 AI 再聪明，应该也逃不出这个规律，那用来做这种 MVP 可是再合适不过了。
|
||
|
||
具体来说，小氯只做了这样几件事：提要求，检查是否可用，如果可用，下一个 feature，否则改。例如在写 `index.html`（现在的 `home.html`）时，小氯直接把拾壹老师的首页截了个图扔给 AI，告诉它「我希望这样的首页效果」；而在写最新文章时，小氯则是用比较复杂的自然语言描述了一下我希望的效果，事实证明 Cursor 对其理解得还行。
|
||
|
||
此外，也有一些部分是 AI 搞不定的，例如 Twikoo 的美化。可能是因为 Twikoo 本身不算是一个大众的东西，也并没有完整的 CSS 文档。
|
||
|
||
小氯采取的策略依然是拾人牙慧。博友圈中，有谁用的是 Twikoo，而且样式比较美观呢？第一个想到的肯定是[洪哥](https://zhheo.com)。很可惜，洪哥的 Heo 主题是闭源的，于是我盯上了[安知鱼老师](https://blog.anheyu.com)的主题。AnZhiYu 主题是开源的，于是小氯获得了一个 `Twikoo.styl`。
|
||
|
||
当然这个东西是不能直接拿来用的，不仅是因为其是 Stylus，就算把 Stylus 转回 CSS，好多变量小氯也没有。就算是把变量都抄下来，也不符合小氯主题的风格（~~你事怎么这么多？~~）。于是小氯也只好动手自己写。
|
||
|
||
结果就是花了大概大半个晚上，小氯拿着浏览器的控制台和开发者工具一点点地调，终于做出了一个看着还行的效果。然而现在 Twikoo 的样式还有问题，例如在回复中展开表情面板会被卡片遮挡，这个以后还要修。
|
||
|
||
插一句话，Twikoo 中按钮的颜色，其实就是小氯虚拟形象头发颜色的柔化版 (/ω＼)
|
||
|
||
做个不太详细的总结的话，野心开发对于这种急功近利的场景还是可以的，建议大致就是以下几条：
|
||
|
||
- 尽可能详细地描述你的要求，但是不要使用「非通用性的语言」。例如，你说「iOS-style」，AI 是懂的；但是你说「类似 Innei 的设计风格」，AI 就很难听懂了，因为这并不是一种被业界广泛认可并且形成固定模式的风格，自然不能被 AI 很好地预先学习。
|
||
- 先完成最主干的部分，例如整体的布局、大块组件，把动画、细节优化和配色调整这种事情放到以后做。
|
||
- 不要想着能看懂所有代码再继续，那不现实。AI 开发的代码规模增长速度远超你的预期。你只需要关注关键部分，保证不被落得太远即可。
|
||
|
||
当然，野心开发也是有很大的缺点的，最主要的就是「太着急了」，造成代码风格的混乱以及整体的难以理解（人类跟不上它的速度）。此外，AI 直接生成的代码虽然说可以跑，但是大部分时候也就是可以跑而已。代码风格的不统一和缺功能不说，很多地方还有一些离谱的 bug（或者是 feat），比方说在页面内点击目录链接居然还会触发加载动画。这些都需要小氯一点点自己改。当然，小氯把这个工作主要放到了 Alpha 之后，方式主要是 `⌘ + K` 唤出 AI 进行细粒度编辑，以及自己手动审查和修改。后者能费点时间，但是效果好一些。
|
||
|
||
## 命名
|
||
|
||
最后，说点有趣的东西，就是「Hermeneutics」这个奇怪的名字是怎么来的。
|
||
|
||
下面的解释引自 Wikipedia：[^2]
|
||
|
||
> 解释学（英语：hermeneutics），又称诠释学、阐释学，是关于文本解释的理论。在中世纪欧洲，主要是对于《圣经》的解释。18世纪施莱尔马赫把解释学扩展到解释文本意义和文化意义的一般规则的理论。
|
||
>
|
||
> 广义的解释为意义之理解(understanding)或诠释(interpretation)的理论或哲学。由于意义经常有许多歧义，须透过理解诠释方能把握全部涵意，诠释学即是探究如何形成理解及如何实践理解之科学理论。
|
||
|
||
这么看来，「Hermeneutics」似乎是一个极简的、高度文字性的主题，然而事实并非如此：Hermeneutics 做得相当精致（至少我自己是这么认为的），同时也谈不上文字主导。
|
||
|
||
OK，事情是这样的：小氯在期末季的时候偶然听到了一首歌：《[解释学 Hermeneutics](https://www.bilibili.com/video/BV18S4y1v7gV)》:
|
||
|
||
> If it comes first, they call that true love
|
||
>
|
||
> If it comes second, they call that infatuation
|
||
>
|
||
> They call that memory when it is over
|
||
>
|
||
> But I call them all delusion, all delusion, all delusion
|
||
>
|
||
> Beautiful delusion
|
||
|
||
小氯很喜欢这首歌，于是打算将其作为主题的名字（甚至把这段歌词直接放到了主题的 readme 中）。如果这个主题还是当初希望的 Shadcn 风格，这个名字应该是相当合适的，不过现在，就外观而言，可能就没那么贴切了。
|
||
|
||
不过，各位，想想小氯的主题大部分的代码都是由 AI 生成的。
|
||
|
||
**所以，这是否也是一件值得「解释」的事呢**？
|
||
|
||
[^1]: Pseudoyu. 周报 #69 - AI Coding 体验与学习的源动力\[EB/OL\]. (2024-08-19)\[2025-01-21\]. <https://www.pseudoyu.com/zh/2024/08/19/weekly_review_20240819/>.
|
||
|
||
[^2]: Wikipedia. 解释学\[EB/OL\]. \[2025-01-21\]. <https://zh.wikipedia.org/wiki/%E8%A7%A3%E9%87%8B%E5%AD%B8>.
|
||
|