
偶尔会有一些不完整的想法，如果不马上记下来就会瞬间即逝，「片语」就是这样而来的。


其实就是一个类似微博的一种瞬间短文，记录一下简短的思考和灵感。

## 设计思路

内容 + 时间，然后其他和博客一样存储为.md，然后生成静态资源而已，想法一出，大模型驱动，一把梭哈直接成型。

## 修改

其实也没啥可修改的，后续的两次修改都是在改样式的细节。功能在GLM4.7的面前，ta可能会觉得太简单了。

## 总结

折腾博客，证明我存在。「碎言」「片语」这下圆满了。


偶尔会有一些不完整的想法，如果不马上记下来就会瞬间即逝，「片语」就是这样而来的。

为博客添加了一个小功能「片语」



氛围编程「Vibe Coding」已经逐渐的被太多的程序员甚至是普通人所接受，一场全民「**开挂**」的草木皆兵的编程时代开启了。


自从我开始让大模型（Large Language Models）帮我写代码，我就一直在思考一个问题：LLM给我写的是什么？ta编写的代码技术依赖是什么？我在代码的编写上技术本身就是很糙，如果我不去了解这些大模型给我写的是什么，总有一天，要么骗了自己，要么就是被大模型欺骗了。


另外一个原因就是，我依赖了大模型，它是否会让我的技术止步于此？因为我以前解决编程中遇到问题的过程是：发现问题——记录；搜索+询问——解决问题；理解问题——记录解决问题的过程；实施总结的解决方法——完美的学习与解决过程。优点：我学到了技术、解决问题的思考过程和方法。缺点：缓慢，极度耗费时间。我清楚地记得有的问题甚至花费了我几年的时间（有的时候问题解决了，但是并不理解）。


我相信大部分人在使用大模型写代码的时候，初衷都是在解决一个自己无法搞定的难题。但是大模型非常厉害，以至于我们使用它解决了一个又一个难题，却忽略了它是如何解决的，忘记了这个解决的过程和学习解决的方法。最重要的是，我们忽略了大模型使用了哪些开源技术解决了这些难题，我们要感谢的并不是大模型，而是应该感谢大模型使用的那些技术，以及创建了那些开源技术的个体，也就是那些作者，和那些维护开源的程序员大佬们。


自打去年开始，我就一直在使用Tailwind，Tailwind实在太好用了。即便一个普通的前端只要稍微花一些时间，看看Tailwind的技术文档，就可以在很短的时间内开始编写相关代码。之前我写Tailwind代码的时候，都是去查阅相关的技术文档。但是自从使用了大模型之后，我直接把需求、需要的样式说给大模型，大模型就自动给我编写出Tailwind的代码。这省去了中间很多思考和学习的过程，甚至也不用去Tailwind的网站了。


出现这种情况会导致Tailwind的使用率表现出强劲的增长，但这些都是大模型带来的。不光Tailwind这个框架有这种现象，其他很多开源框架都会出现这种普遍的现象。很多大模型疯狂地去下载和使用这些开源框架。但人们只记得这些是大模型在给自己编写代码，根本不知道大模型使用了哪些开源技术，人们只知道大模型很厉害，去感谢大模型，却忘了大模型也是通过这些开源框架、开源技术才能实现了你的需求。久而久之，我们都忘记了大模型背后的那些开源技术，大家都以为这些技术是大模型研发的，可以信手拈来、随便使用。甚至有很多人使用大模型编写出来的代码，也美其名曰开源软件和开源技术，他们写完代码也不会标明项目中所依赖的技术，甚至不知道项目中所依赖的技术是什么。他们只知道这个项目可以运行，没有问题。这是多么可怕的一件事情。


大模型使人类在代码的编写上狂欢起来，让人类忘记了学习，忘记了理解代码背后编写的逻辑，以及代码的设计方式、维护方式，甚至忘记了那些开源框架和开源工具的作者。他们只记得那是自己写的，而且他们并不会标明这是用大模型生成的一堆垃圾代码。



忽然想到最近在博客添加的一个小功能，就是为每篇文章添加了AI标识，用来表示每篇文章是否依赖了AI或者是大模型进行了辅助编写。我觉得以后在自己编写的代码中，也应该添加适当的标注，标明当前的代码是否使用了AI或大模型辅助，或者是完全由AI生成，以及尽可能地标注当前代码所使用的依赖和框架、模块以及开源技术。当做对开源技术作者和维护人员的尊重，也算是对开源技术的支持尽一点微薄之力吧。


氛围编程「Vibe Coding」已经逐渐的被太多的程序员甚至是普通人所接受，一场全民「开挂」的草木皆兵的编程时代开启了。

Vibe Coding/氛围编程很爽？但别忘了开源生态


不知道怎么了，今年的除夕夜特别不想包饺子。


刚刚，我和老婆说今天晚上不想包饺子了，买些现成的水饺煮着吃得了。老婆问我为啥，大过年的包个饺子能费多大劲儿？我说我不爱包饺子，嫌累，而且我不爱吃蒸饺，尤其是自己在家包的。


包饺子这个事有时候挺烦人的。很小的时候我不会包饺子，每次都是家里大人在包饺子，我就在旁边看着玩，然后等饺子煮熟了就开吃。后来长大了自己学着包饺子，学会了和面、擀皮和调馅。我对擀饺子皮特别反感，记忆中刚学会擀饺子皮的时候，擀得慢且不圆，总有长辈挑三拣四，指导你怎么擀才能又快又圆，但他就不去帮你擀，就一直在指挥，搞得人特别心烦。随着年龄的增长，我越来越不喜欢包饺子、擀饺子皮。包着自己不喜欢的口味的饺子，还得听着别人的唠叨和指点，就像一群圣人在教育一个无知的罪人一样。


人活着有很多事都不能按照自己的意愿去做，就像吃饺子一样，有时你不能选择自己喜欢的口味。你不是这个家的绝对主人，你得照顾老人和孩子的感受，你得考虑老婆的意见。我发现，我仅剩的一点自由就是折腾这个博客，以及偶尔在这上面的自言自语了。


不知道怎么了，今年的除夕夜特别不想包饺子。

我不想包饺子


当我开车的时候，手机放到车里，下车的时候就一定会把手机落在车里；当我更新博客的时候，我会去看一眼博客聚合的网站，他们都不抓取，都不更新。但是，我更新了一篇博客，这篇博客的标题我写错了。发布完之后我才发现，我的标题写错了，心里就在想：可别抓取啊可别抓取啊！不然的话我还得修改标题。然后我就看到这些博客聚合的网站，每一个网站都抓取了rss。这是不是墨菲定律？太特么的神奇了。


今天喝多了，和我的连桥唠嗑的时候谈论到情商。我的连桥跟我说：什么是情商？情商就是他么的谁喝得多，谁喝得多谁就有情商。我说不是。我说你儿子要出去玩，咱们还正在喝酒，正在家宴中，他却不管不顾地就要出去玩，他就没有情商。而你明天要上班，今天却请我们过来吃饭，就是有情商，因为你知道明天你没有时间，大年三十你没有时间，你今天却请我们过来一起聚一聚，把今天当做大年夜来相聚、来一起吃饭，你就是有情商。我说你还想得到我们，站在我们的角度上来说，你就是一个有情商的人。

酒过三巡，菜过五味，回到家里，我和老婆提起了这件事，我老婆第一件事就是说我太能墨迹了：“去吧，你就和你的狗子讨论这个事吧，讨论关于情商的事”。她一点都不感兴趣，然后说我太能墨迹了。确实，我最近确实太能墨迹了，因为我看了一些哲学相关的书。不好意思，我又看了莫比乌斯的的博客[https://onojyun.com/](https://onojyun.com/)，我怎能不去思考哲学这件事情呢？我说，苏格拉底是永恒不变的追问。我说，柏拉图是因果关系的构建。我说，亚里士多德是逻辑体系的奠基。我老婆说什么？她说："你快去和你的狗说吧，然后赶紧去睡觉了，我看你是喝多了。"

我能说什么？我说我是个程序员，我突然间又喜欢了哲学。我虽然不知道哲学是个什么玩意，但是最近确实迷上了哲学。有的时候我就在想，哲学有个屁用啊？哲学能干什么？哲学能炒菜吗？哲学能教我开车吗？哲学能统治一个国家吗？哲学能改变人生吗？不能。哲学就是他妈的一个骗子。
普通人根本就不会去接触这玩意，所以哲学没有屁用，屁用都没有。这就是逻辑，我觉得我说的没有错。哲学能让人赚钱吗？不能。我觉得大部分哲学家要么是疯子，要么就是闲得没事做。如果哲学能改变这个社会、改变这个国家、改变这个世界、改变宇宙的话，那么哲学一定是所有学科中最重要的学科了。所以我觉得哲学就是个垃圾，因为你去学了哲学，你在哲学专业毕业，甚至深造，你毕业了，你就是一个垃圾。你不会有工作，你也不会找到工作。当别人问起你的专业是什么的时候，你说你学的是哲学，别人会问：哲学到底是做什么的？它有什么用？你如何解释？


这个时候我就会想起，逢年过节的时候，亲友就会问起我：你是做什么工作的？我说我是一名程序员，我是一个设计师。那么亲戚都会一脸雾水：什么是程序员？什么是设计师？你在做什么？难道我要跟他们说，我在改变世界，我的目标是改变宇宙？简直就是一个笑话。
如果一个程序员对哲学感兴趣，我估计他一定是对抽象的类感兴趣。类就是抽象的，它并不能做什么，类只是抽象出来了一个虚构的现实，而具体的实现需要你对这个类的每一个方法做出具体的代码编写。而作为一个程序员，尤其是一个业余的程序员，我最讨厌抽象的类。我记得以前我学习Java的时候，我就讨厌类，我讨厌接口，我讨厌抽象。这些东西能做什么？我认为它们就是狗屁。我要的就是读取文件、统计数据，渲染出一个我能看得懂的UI。你为什么需要让我去了解这些抽象的东西？我不知道这些到底有什么用。我不需要这些，为什么需要抽象？

也许就像我老婆说的，你去跟你的狗说吧，也许它都能睡得更好、更香。每当我跟我孩子正在聊哲学的事的时候，她一脸雾水，就像一个无知的孩子看着我：爸爸，你在说什么？我根本听不懂。

这个时候我也在想，哲学有个屁用啊？真是没用啊。但是为什么我却对哲学感了兴趣？


哲学就是个狗屁



闲来无事，更新一下博客中的**关于我**，但是一些久远的网站历史竟让没有任何记忆了。忽然想起一个网站，可以保存该域名的网页历史快照，然后就Google了一下，立马找到了：

[https://archive.org/](https://archive.org/)

> 互联网档案馆（Internet Archive）是一家501(c)(3)非营利组织，致力于构建一个互联网网站及其他文化资源的数字化图书馆


这个网站流弊之处在于你可以通过该平台免费获取和借阅数以百万计的数字化资源，包括：

* 网页：著名的 Wayback Machine 保存了超过 1 万亿个网页的历史快照。
* 图书：提供数千万本免费电子书和可借阅的数字化文本。
* 多媒体：涵盖电影、视频、录音、音乐、图片和播客。
* 软件：包含历史软件、经典 PC 游戏及各种模拟器资源

这样的话，你可以查询到很多**数字痕迹**，赶紧试试吧，看看你以前的网站和博客是什么样子的？


闲来无事，更新一下博客中的关于我，但是一些久远的网站历史竟让没有任何记忆了。忽然想起一个网站，可以保存该域名的网页历史快照，然后就Google了一下，立马找到了

来，查查你在互联网上的痕迹


前几天，我想极简一下博客的代码，我删除了所有css代码，我只保留了：

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

我觉得这就是极简，看，我没有写一行css代码，我觉的之前写的css都是多余的，tailwind是万能的。之后我刻意的不去写纯css代码，因为我要极简生活，极简的博客，极简的css代码。

直到某一天的某一刻，我觉得，我被抓起来了，被抓到了一个监狱里，这个监狱里不能写CSS代码，必须使用tailwind的class名称。

## 我看上了一个按钮

我的首页下边有一个按钮，这个按钮的title：全部文章，功能是当用户点击后会链接到文章的归档。之前我就用文字做了个链接，但是我又怕用户看不到，或者说是看到了没有点击的欲望，所以，我要美化他，我尝试很多基于tailwind的按钮样式，但是都不太满意。

但是，我知道在我的收藏夹里有个收藏，它使用纯css写的按钮样式，很酷也很适合我的需求，但是，我说过我要极简，不会再往博客里写任何的CSS代码了。

## 极简误区

我曾经了解了极简的误区：**为了极简而极简，陷入新的焦虑。**

但我还是在不知不觉中被关进了**伪极简**极端化的监狱，所以，去他喵的极简，我不需要焦虑和束缚。

我在`globals.css`文件中复制我喜欢的样式代码。




前几天，我想极简一下博客的代码，我删除了所有css代码...

我被关进了「禁止写CSS」的监狱里


对于Next.js的开发者来说，前端集成tailwind可以说是现代开发必备依赖了，有几个不用tailwind的？因为tailwind实在的太好用太简单了！推荐几个无需安装即插即用（Copy & Paste）直接复制代码就能用样式库给大家。

## 1. HyperUI

* **特点**：HyperUI 的核心特点是**纯 HTML + Tailwind CSS**、**无需安装**、**即插即用（Copy & Paste）**。
* **适用场景**：登陆页面、营销网页、表单。
* **地址**：[https://www.hyperui.dev/](https://www.hyperui.dev/)

## 2. Meraki UI (最接近 HyperUI)

Meraki UI 是 HyperUI 的最佳替代品。它提供了一套完整的组件，设计风格非常干净现代。

* **特点**：完全免费，支持 RTL（从右到左阅读），提供预览和一键复制代码。
* **适用场景**：登陆页面、营销网页、表单。
* **地址**：[merakiui.com](https://merakiui.com/)

## 3. Tailblocks (最快排版)

如果你需要快速搭出一个网页的轮廓（如 Header、Hero、Footer），Tailblocks 是神器。

* **特点**：它提供了一个交互式的界面，你可以直接预览不同的布局块，然后点击 “View Code” 复制。
* **适用场景**：快速原型开发、静态页面。
* **地址**：[tailblocks.cc](https://tailblocks.cc/)

## 4. Preline UI (大而全)

这是一个由 HTML、Tailwind CSS 和少量原生 JS 组成的库。它比 HyperUI 更专业，包含更多复杂的逻辑组件（如抽屉、模态框）。

* **特点**：除了简单的 HTML 复制，它还提供了针对不同框架（React, Vue）的适配代码。
* **适用场景**：中大型项目、管理后台。
* **地址**：[preline.co](https://preline.co/)

## 5. Mamba UI (极简轻量)

Mamba UI 专注于提供极简的 UI 组件块，代码非常精炼，没有冗余的 JS 逻辑。

* **特点**：所有组件都有多种颜色变体预览，代码清晰。
* **适用场景**：需要高度自定义样式的个人网站。
* **地址**：[mambaui.com](https://mambaui.com/)

---

## 快速对比表

| 框架名称 | 组件丰富度 | 是否含 JS 逻辑 | 核心优势 |
| --- | --- | --- | --- |
| **HyperUI** | 中 | 极少 | 风格轻量，纯粹 HTML |
| **Meraki UI** | 高 | 无 | 设计感强，适合营销页 |
| **Tailblocks** | 中 | 无 | 预览直观，适合整页布局 |
| **Preline UI** | 极高 | 有 (原生 JS) | 几乎包含所有 Web 元素 |
| **Mamba UI** | 中 | 无 | 极致精简，易于二次开发 |

---

## 特别推荐：Flowrift

这是一个专门收集 Tailwind "Blocks" 的网站。它的每个组件都像积木一样，点击一下就能得到代码，非常适合寻找特定的 FAQ 区域、价格表或导航栏。

* **地址**：[flowrift.com](https://flowrift.com/)


## 总结

珍惜生命，节约时间，**不要重复造轮子**，能复制的就不要再自己敲了，直接复制有时候比AI都快，最主要的是这些代码都是前人的经验和总结。

对于Next.js的开发者来说，前端集成tailwind可以说是现代开发必备依赖了，推荐几个无需安装即插即用（Copy & Paste）直接复制代码就能用样式库给大家。

纯HTML+Tailwind CSS代码,无需安装即插即用（Copy & Paste）


最近在读一本哲学入门的书：《苏菲的世界》，今天刚好读到苏格拉底那章。我有个习惯，就是当我觉得书中某段内容很有趣的时候，就会读给孩子听。

>我们知道苏格拉底生于雅典，他有生之年大半时间都在市中心广场与市场等地与他遇见的人闲谈。他说："乡野的树木不能教我任何东西。"有时他也会连续好几小时站着思想、发呆。

当我把这段文字读给孩子听时，孩子显得非常不耐烦，并且很快就把话题转移到我脚丫子很臭的事情上了。好吧，每次只要她对我说的事情不感兴趣，就会想办法转移话题，这件事我早已经习惯了。打游戏或是看《斗罗大陆》的时候，她从没提起过这么一回事，哪怕是一边看电视一边吃东西都不会提。


书中，苏菲刚好14岁，比我家孩子大一岁，但是苏菲却表现出了对哲学浓厚的兴趣，以至于我产生了对当下教育体制深深的忧虑。但也不排除孩子确实对哲学没有兴趣的可能性，因为随便和人谈起苏格拉底，这个话题肯定没有当前的微博或抖音热门话题来得更有趣。


的确如此，看完这章之后，我扫了一眼评论：

![认证](https://suiyan.cc/assets/images/2025/0211.jpg)

当我看完苏格拉底这章之后，我对这本书的兴趣才刚刚燃起。之前我读的时候是很勉强的，但是随着小苏菲收到的信越来越多，内容越来越深入哲学的本质和核心问题，我也和她一样开始思考和着迷了。

看这本书之前，我并不是对哲学很感兴趣，只是觉得思考是一件很有趣的事情。最近几天，看了一些书还有一些博文之后，我发现所谓的思考其实就是在了解世界和人的本质，这和哲学的目的几乎是一样的。所以，有一天我就和Kimi聊起了哲学，并让Kimi推荐一些哲学方面的入门书籍。我并不打算深入系统地学习哲学，只是对哲学感兴趣而已。


因为哲学家们大多都是疯子、叛逆者，而我只是一个普通人而已。我只是希望换一种思维方式去思考问题罢了。


书中的开篇提到了哲学最初的起源，大体就是古希腊时期，人们开始思考并质疑世界的起源。当时人们普遍相信世界是由神创造的，人们相信神话，但是有一些人开始质疑神话的真实性，自然派哲学家就是在这个时候出现的。自然派哲学家在那个时候就像是一群疯子。你想象一下，我们现在的人都知道地球是一个球体，是太阳系的一员，宇宙浩瀚无边，而突然有一天，有人说地球其实是一个巨大的汉堡包，太阳系就是一家快餐店……那么你一定会觉得这个人疯了！


哲学家就是这样的一群人，但是他们并不是胡说八道，而是通过观察和理性思考得出的结论。


我们或许不用再去争论世界的由来与人类的起源，这些都是书本上可以找到答案的，我们甚至可以通过AI更方便地得到你要的答案。但是，随着人类生活的巨变，新的问题也应运而生，其中一个例子就是人工智能。机器人最终会获得意识或自知力吗？人脑如何运作？人类和机器的区别是什么？甚至，离我们更近的问题：如果有一天我们死了，我们的博客怎么办？会不会考虑把所有的数据都喂给大模型，然后让大模型模拟我们，每隔一定时间发布一篇博文，让AI生成的我和来访者互动，让这个博客继续以我的习惯和思维方式演变运作下去？


哲学的起源是早于科学的，有很多无法解释的科学现象都可以用哲学来解释，而且这些哲学解释有很多都被后来的科学所证实了。


也许这就是哲学的魅力所在吧。这是本让我慢慢去读的书，因为书中有很多内容需要我去思考和理解。也许，我会带着问题和苏菲一起成长，一起思考和探索。哲学就是让我们像孩子一样去好奇地探索和思考这个世界的本质，去质疑和批判。

当苏格拉底遇见青春期少女，哲学的光芒能否穿透脚丫子的阴影？

苏格拉底不如脚丫子


简单来说，Mastodon（长毛象） 是一个开源的、去中心化的分布式微博客平台。如果你注册登录，第一感觉他就像Twitter/X或者微博一样。

## 起因

之前关注了一个博客：[極客死亡計劃](https://www.geedea.pro/)，在其中的几篇文章中做了简单评论，然而，没几天这个「极客小子」就把评论给关了。

当然，我的评论肯定没有那么大的「魅力」，让人家把博客的评论关闭而后又换了一个新的评论方式。

这个链接：[所以怎么点赞和评论你的博客](https://www.geedea.pro/posts/site-report-4/#%E6%89%80%E4%BB%A5%E6%80%8E%E4%B9%88%E7%82%B9%E8%B5%9E%E5%92%8C%E8%AF%84%E8%AE%BA%E4%BD%A0%E7%9A%84%E5%8D%9A%E5%AE%A2)，提到了[極客死亡計劃](https://www.geedea.pro/)是如何把Mastodon引入他的博客中用作评论的，感兴趣的可以看看，这里就不在继续讨论这件事了。

## Mastodon是什么？


> 永不出售的社交网络
> 您的主页应该展示对您有意义的内容，而不是某个公司认为您应该看到的内容。完全不同的社交媒体，主动权回到用户手中。

官方在首页的第一屏中间的位置写着如上的文字。Mastodon 第一感觉他就像Twitter/X或者微博一样。但是你再注册的时候就会发现，你需要选择一个「实例」。

### 核心概念：什么是“去中心化”？

在Twitter或微博上，所有数据都存在一家公司的服务器里。但在 Mastodon 中：

* 实例（Instances/Servers）：没有一个统一的“Mastodon 官网”，而是由成千上万个独立运行的服务器（实例）组成。你注册在 mastodon.social，我注册在 mstdn.jp。

* 联邦宇宙（Fediverse）：虽然我们在不同的服务器，但我们可以互相关注、聊天。就像你用 Gmail，我用 Outlook，我们依然可以互发邮件。

* 主权在我：每个实例都有自己的管理规则。如果你不喜欢当前的实例，你可以带着你的粉丝和关注列表直接“搬家”到另一个实例。


### 关键特性

* 没有算法推荐：你的时间轴是严格按时间顺序排列的。没有广告，也没有 AI 强制塞给你的“你可能感兴趣的内容”。

* 字数限制更宽：标准限制通常是 500 字符（部分实例会更高），支持 Markdown 风格的部分语法。

* 内容警告 (CW)：非常强大的功能。如果你发的内容涉及剧透、政治或敏感话题，可以添加一个折叠层，只有别人点击“显示更多”时才能看到。

* 隐私控制：你可以针对每一条动态设置可见性（公开、仅粉丝、仅提及的人）。


### 三种时间轴


在 Mastodon 上，你通常会看到三个不同的世界：

* 主页 (Home)：你关注的人的动态。

* 本站 (Local)：你所在的这个服务器上所有用户发布的公开动态。

* 跨站 (Federated)：你的服务器“认识”的所有其他服务器上的公开动态。

### 为什么它在技术圈很火？

* 协议开放：基于 ActivityPub 协议，这意味着它不仅能连接 Mastodon，还能连接 PeerTube（视频）、PixelFed（图片）等其他去中心化平台。

* API 友好：正如你之前提到的，利用 API 可以轻松把 Mastodon 当作博客评论系统或状态监测器。

* 无商业化：绝大多数实例是靠捐款运营的，不追踪用户数据，不卖广告。


## 可以作为博客的评论系统

从技术角度上来说，使用Mastodon作为自己的博客评论系统实现起来并不是很难，但是从使用门槛上来说对于普通用户并不友好，尤其的大陆的网友。

但是极客们的想法都是独立特行的，性格也是古怪的很，如果你不喜欢普通人去评论你的博客，使用Mastodon是可以上一道门槛的，比giscus的Github讨论更难一些吧。

如果自己创建并部署实例，并融合到自己的博客，那么他还是挺厉害的。本来我还是考虑了一下要不要也弄个Mastodon的评论，转念一想，还是算了吧别折腾了。看看年轻人鼓捣就好了。

## Mastodon注册和认证

### 注册

Mastodon的注册还是挺简单的，有个邮件就好，在官方网站-资源下，有很多实例，选哪个并不重要，除非你很理解你选择这个实例的目的。

如果只是体验，像我无脑选择官方的实例就好。

* [Mastodon 官方站](https://joinmastodon.org/zh) 永不出售的社交网络
* [官方的实例](https://mastodon.social/) The original server operated by the Mastodon gGmbH non-profit


### 认证

对于认证，就是X或微博里带对号的名人和组织，但是在Mastodon中的认证是免费而且简单的，认证后的效果如下：

![认证](https://suiyan.cc/assets/images/2025/Snipaste_2026-02-09_22-31-09.png)

| 平台 | 操作位置 | 关键动作 |
|------|----------|----------|
| GitHub | Settings -> Public Profile | 在 Social accounts 栏填入 Mastodon 主页链接 |
| 个人博客 | HTML 的 `<head>`区域 | 添加 `<link rel="me" href="https://实例的网址/@你的ID">` |
| Mastodon | Edit Profile -> Profile Metadata | 在"内容"栏填入 GitHub 和 博客的完整 URL |


这样就可以完成了Mastodon与博客和Github主页的**双向的链接**确认。

### 作者归属

> 你是否在 Mastodon 之外撰写新闻或博客文章？控制它们被分享到 Mastodon 时的署名方式。

通俗的说，你发布你博客的网址到Mastodon，就会有一个署名方式。

方法很简单，

1. 添加代码：`<meta name="fediverse:creator" content="@J_sky@mastodon.social">` 在你文章的 HTML中。
2. 添加域名列表到资料验证中的列表处。

这样，你以后在Mastodon发表「嘟文」的内容中加入你的博文网址，就会自动显示归属，无论被人转发多少层也会显示。效果如下：

![认证](https://suiyan.cc/assets/images/2025/Snipaste_2026-02-09_22-42-34.png)

## 还有什么？

还有什么可以玩的？目前我也就研究到这里了，高级的玩法就是自己创建实例，加入联邦宇宙，祝大家玩得开心。

感兴趣的可以来[**Mastodon上本篇博文的相关讨论**](https://mastodon.social/@J_sky/116041221850651265)进行探讨。


简单来说，Mastodon（长毛象） 是一个开源的、去中心化的分布式微博客平台。如果你注册登录，第一感觉他就像Twitter/X或者微博一样。

Mastodon和联邦宇宙是怎么一回事？

RSS 是博客的核心功能，但默认的 XML 格式在浏览器中看起来不够友好。传统的解决方案需要自己编写 XSLT 样式表，这对很多博主来说是个技术门槛。

今天介绍一个超简单的解决方案——**RSS.Beauty**，它是一个在线服务，可以自动为你的 RSS 源生成漂亮的样式表，而且完全免费！

效果如下：

![PSI](https://suiyan.cc/assets/images/2025/rssbeauty.png)

在线预览：

[https://www.suiyan.cc/feed](https://www.suiyan.cc/feed)

## 什么是 RSS.Beauty？

RSS.Beauty 是一个在线服务，专门用于为 RSS 源生成美观的 XSLT 样式表。它的特点是：

- ✅ **零代码**：无需编写任何 XSLT 或 CSS
- ✅ **在线生成**：访问网站即可生成样式
- ✅ **即插即用**：生成的样式表可以直接使用
- ✅ **完全免费**：不需要注册，没有使用限制
- ✅ **CDN 托管**：样式表托管在 CDN 上，访问速度快

## 使用方法

### 步骤 1：访问 RSS.Beauty

打开浏览器，访问 [RSS.Beauty](https://rss.beauty) 网站。


### 步骤 2：获取样式表链接

RSS.Beauty 提供了多种样式表链接，你可以选择：

**选项 1：使用官方 CDN（推荐）**
```
https://rss.beauty/xsl/pretty-feed-v3.xsl
```

**选项 2：自定义样式**
点击 "Customize" 按钮，可以调整颜色、字体等参数，生成自定义的样式表链接。

### 步骤 3：修改 RSS 源

在你的 RSS 生成代码中，添加 XSLT 引用。以 Next.js 为例：

```typescript
// src/app/feed/route.ts
const rssContent = `<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://rss.beauty/xsl/pretty-feed-v3.xsl"?>
<rss version="2.0"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>你的博客标题</title>
        <link>https://你的博客网址</link>
        <description>你的博客描述</description>
        
    </channel>
</rss>`;
```

关键修改就是这一行：
```xml
<?xml-stylesheet type="text/xsl" href="https://rss.beauty/xsl/pretty-feed-v3.xsl"?>
```

### 步骤 4：部署验证

保存修改后，重新部署你的博客：

```bash
npm run build
npm start
```

访问你的 RSS 源（例如 `https://你的博客网址/feed`），现在应该能看到美化的页面了！

## 本地部署

如果你希望完全掌控样式表，或者担心依赖外部服务，可以将样式表下载到本地使用。这样可以避免跨域问题，并且完全自托管。

### 步骤 1：下载样式表文件

访问以下链接下载你需要的样式表文件：

- **RSS 样式表**：https://rss.beauty/xsl/pretty-feed-v3.xsl
- **Atom 样式表**：https://rss.beauty/xsl/pretty-feed-atom-v3.xsl

直接访问这些链接，浏览器会显示 XSLT 代码，然后右键选择"另存为"保存文件。

### 步骤 2：放置到静态资源目录

将下载的文件放置到你网站的静态资源目录中。不同框架的静态资源目录位置：

- **Next.js**：`public/rss.xsl` 或 `public/atom.xsl`
- **Astro**：`public/rss.xsl` 或 `public/atom.xsl`
- **Hugo**：`static/rss.xsl` 或 `static/atom.xsl`
- **Hexo**：`source/rss.xsl` 或 `source/atom.xsl`

**重要提示**：样式表文件必须放在同一个域名下，不能跨域引用。

### 步骤 3：修改 RSS 源引用

在你的 RSS 生成代码中，将 XSLT 引用改为本地路径。

以 Next.js 为例，如果你的 RSS 源在 `src/app/feed/route.ts`：

```typescript
// src/app/feed/route.ts
const rssContent = `<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/rss.xsl"?>
<rss version="2.0"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>你的博客标题</title>
        <link>https://你的博客网址</link>
        <description>你的博客描述</description>
        
    </channel>
</rss>`;
```

如果是 Atom 源，则使用：

```xml
<?xml-stylesheet type="text/xsl" href="/atom.xsl"?>
```

### 步骤 4：验证部署

保存修改后，重新部署你的博客：

```bash
npm run build
npm start
```

然后访问：

- `https://你的博客网址/rss.xsl` - 确认样式表文件能正常访问
- `https://你的博客网址/feed` - 确认 RSS 源显示美化的页面

### 本地部署 vs 在线服务

| 对比项 | 本地部署 | 在线服务 |
|--------|---------|---------|
| **依赖性** | 完全独立 | 依赖 RSS.Beauty |
| **跨域** | 无跨域问题 | 可能存在跨域限制 |
| **自定义** | 可自由修改 | 受限于在线生成器 |
| **维护** | 需要自己维护 | 自动更新 |
| **CDN** | 需要自己配置 | 内置 CDN 加速 |
| **适合场景** | 企业级、高定制需求 | 个人博客、快速上线 |

### 修改样式表

本地部署的优势是可以自由修改样式表。打开 `rss.xsl` 文件，找到 `<style>` 标签，你可以：

```xml
<style>
  /* 修改主色调 */
  :root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
  }

  /* 修改字体 */
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  /* 自定义布局 */
  .container {
    max-width: 1000px; /* 改变宽度 */
    padding: 50px;     /* 改变内边距 */
  }

  /* 添加自定义元素 */
  .custom-banner {
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    /* 你的自定义样式 */
  }
</style>
```

修改完成后保存，无需重新部署，刷新浏览器即可看到效果。

### 不同框架的本地部署示例

#### Next.js

**目录结构：**
```
your-project/
├── public/
│   └── rss.xsl          ← 样式表文件放在这里
├── src/
│   └── app/
│       └── feed/
│           └── route.ts ← RSS 生成代码
```

**RSS 引用：**
```xml
<?xml-stylesheet type="text/xsl" href="/rss.xsl"?>
```

#### Astro

**目录结构：**
```
your-project/
├── public/
│   └── rss.xsl          ← 样式表文件放在这里
├── src/
│   └── pages/
│       └── rss.xml.js   ← RSS 生成代码
```

**RSS 生成代码：**
```javascript
import rss from '@astrojs/rss';

export const GET = async () => rss({
  title: '你的博客',
  description: '博客描述',
  site: 'https://你的博客网址',
  items: getPosts(),
  stylesheet: '/rss.xsl',  // 使用本地样式表
});
```

#### Hugo

**目录结构：**
```
your-project/
├── static/
│   └── rss.xsl          ← 样式表文件放在这里
├── layouts/
│   └── _default/
│       └── rss.xml      ← RSS 模板
```

**RSS 模板：**
```xml
<?xml version="1.0" encoding="UTF-8"?>
{{ printf "<?xml-stylesheet type=\"text/xsl\" href=\"%s\"" "/rss.xsl" | safeHTML }}
<rss version="2.0">
  
</rss>
```

#### Hexo

**目录结构：**
```
your-project/
├── source/
│   └── rss.xsl          ← 样式表文件放在这里
├── _config.yml          ← 配置文件
```

**配置文件：**
```yaml
# _config.yml
feed:
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - rss2.xml
  limit: 20
  rss:
    xml_stylesheet: '/rss.xsl'  # 使用本地样式表
```

## 总结

RSS.Beauty 是一个非常实用的工具，特别适合不想折腾技术的博主：

- ⚡ **极速上手**：5 分钟完成配置
- 🎨 **美观大方**：现代化设计，响应式布局
- 💰 **完全免费**：不需要任何费用
- 🔧 **零维护**：无需自己维护样式
- 🌐 **稳定可靠**：CDN 托管，访问速度快

如果你还没有美化 RSS 源，或者觉得自己写 XSLT 太麻烦，强烈推荐试试 RSS.Beauty！

## 参考资源

- [RSS.Beauty 官网](https://rss.beauty)
- [RSS.Beauty 自定义页面](https://rss.beauty/customize)
- [RSS 2.0 规范](https://validator.w3.org/feed/docs/rss2.html)
- [XSLT 官方文档](https://www.w3.org/TR/xslt/)

---

**后记**：有时候，最好的解决方案不是自己造轮子，而是善用现有的优秀工具。RSS.Beauty 就是这样一款工具，它让 RSS 美化变得简单快捷，让博主可以专注于内容创作，而不是纠结于技术细节。推荐大家使用！

RSS.Beauty 是一个在线服务，可以为 RSS 源自动生成漂亮的 XSLT 样式表。本文介绍如何使用 RSS.Beauty 快速为博客 RSS 添加美化效果，无需编写任何代码。

一分钟美化 RSS：使用 RSS.Beauty 让你的博客 RSS 源更漂亮


天下武功，唯快不破！最近优化博客搞得有点魔怔了。原本的计划是用 Astro 彻底重构整个项目，毕竟 Astro 在静态站点生成方面的优势实在太明显了。但在深入了解之后，我发现 Next.js 其实也能实现几乎相同的效果，而且迁移成本更低。本文就来分享一下这次 Next.js 静态化改造的完整过程。

## 为什么想要重构？

其实原因很简单：性能和成本。目前的博客使用 Next.js 的 SSG（静态站点生成）模式，但仍然依赖 Next.js 的服务端运行时。这意味着：

- 部署时需要一个 Node.js 服务器（虽然 Vercel 免费提供）
- 每次访问都有一定的运行时开销
- 托管成本虽然不高，但不是真正的零成本

而 Astro 是纯静态站点生成器，输出的是纯粹的 HTML/CSS/JS，可以部署到任何免费的静态托管服务上，真正的零成本。这让我心动了很久。

## Next.js 静态化的可能性

在准备切换到 Astro 之前，我仔细研究了 Next.js 的静态导出功能。结果 Next.js 完全可以实现和 Astro 几乎相同的静态化效果。

### 对比分析

| 特性 | Astro | Next.js 静态导出 |
|------|-------|----------------|
| **静态 HTML 输出** | ✅ 默认 | ✅ 支持（`output: 'export'`） |
| **零运行时成本** | ✅ 纯静态 | ✅ 纯静态 |
| **免费托管** | ✅ 任何静态服务 | ✅ 任何静态服务 |
| **React 生态** | ❌ 需要集成 | ✅ 原生支持 |
| **迁移成本** | ❌ 需要重写大部分代码 | ✅ 只需修改配置 |
| **学习曲线** | ❌ 新框架、新语法 | ✅ 无需学习 |
| **现有组件复用** | ❌ 需要改写 | ✅ 100% 复用 |

看到这些对比，还切换什么Astro？Next.jsy一样挺香啊。

最关键的是，性能差异几乎可以忽略不计。静态导出后的 Next.js 博客，Lighthouse 分数可以轻松达到 95+，和 Astro 几乎没有区别。

## 实施过程

### 1. 修改 Next.js 配置

首先，在 `next.config.mjs` 中添加静态导出配置：

```javascript
export default {
  output: 'export',           // 启用静态导出
  trailingSlash: true,         // 添加尾随斜杠
  images: {
    unoptimized: true,         // 禁用图片优化（静态导出必需）
  },
  // ... 其他配置保持不变
}
```

### 2. 禁用 ISR

在所有使用 `getStaticProps` 的页面中，添加 `revalidate: false`：

```javascript
export async function getStaticProps() {
  // ... 数据获取逻辑
  return {
    props: { /* 数据 */ },
    revalidate: false,  // 禁用 ISR，纯静态生成
  };
}
```

### 3. 配置 App Router 路由

如果使用了 App Router（如 RSS Feed、Sitemap 等），需要添加：

```javascript
export const dynamic = 'force-static';
```

### 4. 优化搜索功能

搜索功能遇到了一个有趣的问题。原本使用动态路由 `/search/[query]`，但静态导出后无法预生成所有可能的搜索词路由。

解决方案是将搜索功能改为纯客户端实现：

```javascript
// 在 /search 页面中
export async function getStaticProps() {
  const allPosts = getAllPosts();  // 获取所有文章数据
  return {
    props: { allPosts },          // 传递给客户端
    revalidate: false,
  };
}

// 客户端实时搜索
const [searchQuery, setSearchQuery] = useState('');
const [filteredPosts, setFilteredPosts] = useState([]);

useEffect(() => {
  if (searchQuery.trim()) {
    const filtered = allPosts.filter(post =>
      post.title?.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setFilteredPosts(filtered);
  }
}, [searchQuery, allPosts]);
```

这样既解决了静态导出的问题，又提供了更好的用户体验（实时搜索）。

### 5. 添加本地预览脚本

为了方便测试，在 `package.json` 中添加了预览脚本：

```json
{
  "scripts": {
    "preview": "python -m http.server 8000 --directory out"
  }
}
```

## 构建验证

完成配置后，运行构建命令：

```bash
npm run build
```

构建成功后，会看到类似这样的输出：

```
Route (pages)
┌ ● / (920 ms)
├ ● /blog/[id] (374947 ms)
│ ├ /blog/20260206132113 (1578 ms)
│ └ [+365 more paths]
├ ● /tags/[tag] (123863 ms)
│ ├ /tags/react (1128 ms)
│ └ [+148 more paths]
└ ● /search (920 ms)
```

构建产物会输出到 `out` 目录，包含所有生成的静态文件。

## 部署方式

现在部署方式完全和 Astro 一样了：

### 本地测试

```bash
npm run build      # 构建
npm run preview    # 预览（访问 http://localhost:8000）
```

### 部署到静态托管服务

可以选择任何免费的静态托管服务：

- **Cloudflare Pages**（推荐）：全球 CDN、免费 SSL
- **GitHub Pages**：完全免费，GitHub 原生支持
- **Netlify**：免费额度大，部署简单
- **Vercel**：仍然可以使用，但现在是纯静态部署

最棒的是，如果你之前已经部署到 Vercel，**部署流程完全不需要改变**！只需要 `git push`，Vercel 会自动识别静态导出配置并正确部署。

## 性能对比

### 之前（SSG 模式）

- 构建时间：~30 秒
- 部署方式：需要 Next.js 运行时
- 冷启动：可能存在延迟
- 运行时成本：免费但有配额限制

### 现在（静态导出）

- 构建时间：~11 秒
- 部署方式：纯静态文件
- 冷启动：立即响应
- 运行时成本：真正的零成本

### Lighthouse 性能

静态导出后的性能表现：

- **Performance**: 95+
- **Accessibility**: 100
- **Best Practices**: 100
- **SEO**: 100

和 Astro 几乎没有区别！

## 经验总结

这次静态化改造让我学到了很多：

1. **不要盲目追求新技术**：Astro 很棒，但不是唯一选择
2. **渐进式优化优于重构**：小步快跑，逐步改进
3. **了解现有工具的潜力**：Next.js 的功能远比我想象的强大
4. **成本效益分析很重要**：考虑迁移成本，而不仅仅是技术优劣

## 最终决定

最终我选择了 Next.js 静态化，而不是 Astro。原因很简单：

- ✅ 零迁移成本
- ✅ 100% 代码复用
- ✅ 相同的性能表现
- ✅ 更低的维护成本
- ✅ 团队熟悉的技术栈

Astro 依然是一个优秀的框架，但对于已经使用 Next.js 的项目来说，静态导出可能是更务实的选择。

## 下一步

静态化只是第一步，接下来还可以考虑：

- 进一步优化图片（手动压缩、转换为 WebP/AVIF）
- 添加 CDN 加速
- 实现更高级的缓存策略
- 优化构建产物大小

但目前的性能已经非常好了，这些可以作为后续的优化方向。

## 参考资源

- [Next.js 静态导出文档](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)
- [Next.js 性能优化](https://nextjs.org/docs/app/building-your-application/optimizing)
- [Astro 官方文档](https://docs.astro.build)

---

**总结**：有时候，最好的解决方案不是追逐最新的技术，而是充分利用现有工具的潜力。Next.js 静态导出让我在不改变技术栈的情况下，获得了和 Astro 几乎相同的性能优势，这是最完美的选择。

本来打算用 Astro 重构博客，但发现 Next.js 也能实现同样的静态化效果。本文分享了选择 Next.js 静态化的理由和完整的改造过程。

Next.js 静态化改造：放弃 Astro 的理由与实践



> 我一直认为，能否极简地生活，要看你能否辨别出什么才是真正重要的东西。能够分辨什么是重要之物，就是一种智慧，就是明禅理。—《禅与极简生活艺术》

## 禅与极简生活艺术

最近迷上了极简，突然觉得极简是一种智慧。至于为什么开始极简，生活、工作、学习，甚至是博客？我在进行这些极简操作的同时，也一直在思考这个问题。前几天看了一本书：《禅与极简生活艺术》。我对这本书的推荐程度是一般吧，因为这本书的作者是一位日本禅修大师，他在书中借鉴了大量的佛家禅修事例，而我只是想了解极简生活和极简主义，可能是我并不理解把禅和极简合并到一起的精华吧。当然，这本书当中有一段可能是作者没有想到的，正是因为这一段，可能会有很多人对这本书做出一般或者很差的评价。他在书中写道：

>前几天我坐了一次电车。当时，在我前面的座位上，坐着一个年轻的女孩。这个女孩身穿时下流行的漂亮服装，外貌看起来也很漂亮。从周围的男乘客都时不时地看她就可以看出，她确实很漂亮。然而，这个女孩刚一坐下就从手提包中取出化妆工具，对着小镜子化妆。看到她做出这番举止后，周围人都不约而同地将视线从她身上移开。毫无疑问，我也情不自禁地闭上了眼睛。


其实在前边读的时候，一直觉得这本书还是很不错的，直到我看到上面这段文字，之前所有不错的感觉都被这段话给抹杀了。可能我还没有达到作者高僧的那个境界吧，而且十分不理解他这么写的含义。然后就是勉强把这本书读完，最后给了一个一般的评价。

但是这本书里关于极简的阐述还是很不错的，他介绍了大量关于生活、工作、情绪以及人际关系中的极简之道，这些极简的理念还是值得我们去学习的。那么什么是极简？

## 什么是极简？

>简单可能比复杂更难：你必须努力理清思路，让它变得简单。但这一切都是值得的，因为一旦你达到了那种简单，你就能移山。——史蒂夫·乔布斯

**少即是多，生活的艺术在于持续地摆脱多余的东西。**

我所理解的极简：

* 极简生活:专注内心真实的需求，减少无效社交，家人朋友永远放在第一位。
* 极简工作:专注核心任务，排除干扰。
* 数字极简:电脑和手机，删除无用的软件，定期深度整理数字内容。
* 极简博客:功能极简、样式极简、内容极简。

当然，极简不是越少越好，是刚刚好，是一种平衡，或者说可以少到让你不必分心或过度关注。

## jQuery的极简主义哲学

2006年，John Resig发布jQuery时提出的口号"Write less, do more"，不仅是营销话术，更是一套完整的软件极简主义哲学。

jQuery大家应该都接触过，尤其是那些早期在互联网上折腾网站的站长，对于jQuery的使用应该是很多的。早些年，我在网页端制作一些交互操作的时候，使用原生的JS写是很复杂的，至少对于我来说是很复杂、很有难度的。有一段时间我接触到jQuery，不太相信代码的编写可以这样的简单和优雅——编写更少的代码，做更多的事情，这不就是我们想要的吗？

## 践行极简

### 极简博客

这阵子我可以说是正在大刀阔斧地执行极简主义的理念和生活方式。首当其冲的就是把博客的源代码和主题进行了极为大胆的精简，无论是从编写方式还是从主题设计，都采用了极简开发和极简设计原则。对于博客的编写，我删除了大量无用的功能，这样就减少了大量的依赖，使当前博客整体的代码量大幅度减少。

博客主题也采用了浅色界面、大量留白的极简风格，删除了所有动画以及一些多余的功能，哪怕只要让我感觉有一点多余，我都要给它删除。你现在看到的界面就是我对博客进行极简优化的结果。由于结构的精简代码的减少，我对于细节的掌控更加细致入微了。我删除了站内的所有的自定义css，博客的所有样式的细节全部采用tailwind CSS框架的class

>Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。
> 他快速、灵活、可靠，没有运行时负担。

对于博客的一些数据统计，我通通都删除了，包括文章统计、访问量统计，我都给删除了。因为我不想看到这些数据，我构建这个博客、撰写这些博文，并不是因为这些数据的多少才去创作。我去编写代码撰写文字，是因为我想做我喜欢，而不是因为看的人多了我才去做。**彻底消除数字焦虑，无论是我还是读者。**

删除访问统计，不留下任何人的访问信息，尊重来访者的隐私。而且我把文章的评论设置为默认隐藏，我想读者是因为他想评论而去评论，而不是因为看到很多人在评论而去评论。

删除了太多无用的HTML代码结构，优化了页面的打开速度。网站的ping值只是一个单纯的测试网站是否能打开的连接速率的侧面数值。对于用户来说，网站的体验的多方面的，这个可以参考Google PageSpeed Insights [https://pagespeed.web.dev/](https://pagespeed.web.dev/),

> PageSpeed Insights (PSI) 可提供有关网页在移动设备和桌面设备上的用户体验的报告 并提供有关如何改进该页面的建议。

PSI是专业可以信赖的，可以作为极简网站改进的依据。


### 极简生活

断离舍的极简生活并不是随意的扔东西，有价值的东西还是要保留的，极简空间的精髓应该是去除杂物，这好比去除心中的杂念一般了。临近新年，正是大扫除的时候，趁机可以清除一些旧物，例如很多的旧书，我的书架上有很多老旧的编程书籍，大约能有二三十本，是时候该处理更换一些新的书籍了。不过，最近喜欢使用微信读书来阅读，功能虽然不多但胜在实用，这也是用户对软件极简设计的反馈吧。

最近，我还把车里的杂物清理了干净了。以及更换了一个装杂物的箱子，因为之前的太大了。我非常反感车里堆满各种东西，后背箱塞得满满的。车子就是载人和装载必要的东西，其他的真是没必要放在车里了。

目前我还是极简生活的初级阶段，很多极简的生活方式还有待于我去体验。

### 极简人际关系

人际关系有的时候会让人很疲惫的，其实人际关系并不需要刻意的去精简，当你理解了人与人交往的目的，你自然就会产生一个极简的人际关系。当然，如果你有能力处理复杂的人际关系，另当别论了。


## 误区

当然，过度的极简也是一种错误，例如为了极简而极简，是自己陷入了一个新的焦虑。为了物品上的极简，过度的丢弃具有价值和意义的物品，这都将是很重要的损失。也不要为了达到某些极简行动的数值而进入强迫的极简操作行为，这些都是极简主义践行的误区。


## 总结：极简主义的本质

极简主义不是：
* ❌ 苦行僧式的生活
* ❌ 昂贵的"极简风"装修
* ❌ 统一的标准（如必须少于100件物品）
* 
极简主义是：
* ✅ 为生命做优先级排序的智慧
* ✅ 从占有者变为使用者的视角转换
* ✅ 认清什么对自己最重要后，有勇气放弃其他的选择力
正如日本禅宗所言："当你意识到无一物欠缺时，整个世界都属于你

极简是一种智慧，也是一种艺术，正如日本禅宗所言：**当你意识到无一物欠缺时，整个世界都属于你。**。




我一直认为，能否极简地生活，要看你能否辨别出什么才是真正重要的东西。能够分辨什么是重要之物，就是一种智慧，就是明禅理。—《禅与极简生活艺术》

回归简单，极简生活

之前，一直对文章页的markdown排版样式不满意（自己编写的css样式），总觉得不够专业进而影响阅读体验，直到发现了@tailwindcss/typography，这玩意简直就是行业的标杆。然后就直接使用了，珍惜生命，拒绝造轮子。


## 核心功能

### 1. `prose` 类
只需添加 `prose` 类，即可自动为容器内的所有子元素应用专业的排版样式：
- 标题层级（h1-h6）
- 段落、列表、引用块
- 代码块、表格、水平线
- 链接、粗体、斜体等行内样式

```html
<article class="prose">
  
  <h1>文章标题</h1>
  <p>正文内容...</p>
  <ul>
    <li>列表项</li>
  </ul>
</article>
```

### 2. 尺寸变体
支持响应式调整排版大小：
- `prose-sm` - 小尺寸
- `prose`（默认）
- `prose-lg` - 大尺寸  
- `prose-xl` - 超大尺寸

```html
<article class="prose md:prose-lg lg:prose-xl">
  
</article>
```

### 3. 颜色主题

| 类名              | 色调倾向  | 视觉感受      | 适用场景          |
| --------------- | ----- | --------- | ------------- |
| `prose-gray`    | 纯灰色   | 中性、标准     | 通用场景，默认选择     |
| `prose-slate`   | 偏蓝灰   | 冷峻、现代、科技感 | 科技类网站、SaaS 产品 |
| `prose-zinc`    | 偏青灰   | 清新、中性偏冷   | 现代极简风格        |
| `prose-neutral` | 偏暖灰   | 温暖、柔和     | 需要温和感的网站      |
| `prose-stone`   | 偏黄/褐灰 | 复古、自然、温暖  | 博客、文学类内容      |


5种灰度配色方案：
- `prose-gray`（默认）
- `prose-slate`
- `prose-zinc`
- `prose-neutral`
- `prose-stone`

```html
<article class="prose prose-slate">
  
</article>
```

### 4. 暗色模式支持
通过 `dark:prose-invert` 自动切换为适合暗色背景的配色：

```html
<article class="prose prose-slate dark:prose-invert">
  
</article>
```

## 安装配置

### Tailwind CSS v4（推荐）
```bash
npm install -D @tailwindcss/typography
```

在 CSS 文件中引入：
```css
@import "tailwindcss";
@plugin "@tailwindcss/typography";
```

### Tailwind CSS v3
```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
```


## 适用场景

- **博客文章**：Markdown 渲染的内容
- **文档站点**：技术文档、API 文档
- **CMS 内容**：后台富文本编辑器生成的 HTML
- **邮件模板**：需要一致排版的邮件内容

## 注意事项

1. **不要嵌套**：避免在 `prose` 容器内再嵌套 `prose`，会导致样式冲突
2. **优先级问题**：Tailwind 的 preflight 基础样式可能与 prose 产生冲突，必要时检查具体性
3. **v4 兼容性**：Tailwind CSS v4 采用 CSS-first 配置方式，与 v3 的 JavaScript 配置有所不同 

这个插件解决了 Tailwind 默认重置所有浏览器样式后，对富文本内容排版困难的问题，是构建内容型网站的必备工具。


[tailwindcss-typography 官方地址](https://github.com/tailwindlabs/tailwindcss-typography)


[typography 样式演示地址](https://tailwindcss-typography.vercel.app/)

之前，一直对文章页的markdown排版样式不满意（自己编写的css样式），总觉得不够专业进而影响阅读体验，直到发现了@tailwindcss/typography，这玩意简直就是行业的标杆。然后就直接使用了，珍惜生命，拒绝造轮子。

@tailwindcss/typography 提供美观的默认排版样式库


> 既然独立博客以真实和独立为根本，那么有必要告知访客正在读的内容是不是 AI 生成，AI 都参与了哪些部分？

> 这不仅是独立博客自信的表现，也是对访客读者的尊重和负责。

—— 引用自：[给你的文章添加 AI 创作等级标识](https://jb18.cm/blog/2026-02-01-%E7%BB%99%E4%BD%A0%E7%9A%84%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0-ai-%E5%88%9B%E4%BD%9C%E7%AD%89%E7%BA%A7%E6%A0%87%E8%AF%86/)

## AI 创作等级标识系统


注：本创意来源于 [给你的文章添加 AI 创作等级标识](https://jb18.cm/blog/2026-02-01-%E7%BB%99%E4%BD%A0%E7%9A%84%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0-ai-%E5%88%9B%E4%BD%9C%E7%AD%89%E7%BA%A7%E6%A0%87%E8%AF%86/)。

我在博客中新增了一个 [AI 创作等级标识页面](/AI-Label)，详细说明了四个等级的含义：

| 等级 | 标识 | 主题 | 说明 |
|:---:|:---:|:---:|:---|
| AI 0 | 👤 | 纯粹个体 | 完全由人类大脑和双手完成 |
| AI 1 | ✨ | 魔法润色 | 主要是人在写，AI 做了些修改 |
| AI 2 | 🤝 | 握手协作 | 人机五五开，平等对话 |
| AI 3 | 🤖 | 机器主体 | 绝大部分由 AI 生成 |

### 等级详解

**AI 0 - 纯粹个体**
- AI 参与程度：0%
- 创作方式：完全由人类大脑和双手完成
- 特点：每个字都是作者独立思考、亲手敲出，没有任何 AI 参与

**AI 1 - 魔法润色**
- AI 参与程度：< 25%
- 创作方式：主要是人在写，AI 做了些修改
- 特点：像"魔法棒"一样点缀修饰，主体内容和思想是作者的，AI 仅辅助检查、润色、优化表达

**AI 2 - 握手协作**
- AI 参与程度：= 50%
- 创作方式：人机五五开，平等对话
- 特点：你出想法，它出骨架；主体和思想各一半，作者与 AI 共同创作，互相引导

**AI 3 - 机器主体**
- AI 参与程度：> 50%
- 创作方式：绝大部分由 AI 生成
- 特点：内容由机器生成，人类仅做后期校对、复核和轻微修改，思想被 AI 引导或左右

### 使用建议

- **AI 0**：深度思考、个人感悟、技术总结等需要原创性的内容
- **AI 1**：需要 AI 检查语法、优化表达，但核心观点是自己的文章
- **AI 2**：与 AI 头脑风暴、共同探索某个话题，双方贡献相当
- **AI 3**：教程整理、资料汇总、快速生成参考内容等场景


### 效果展示

请抬头查看文正标题下方的 AI 创作等级标识，标识为 AI 2，说明文章是人机五五开，平等对话创作的。

## 总结一下

- AI 帮我检查作业，告诉我错在哪？我来改。
- 这题我不会，AI 告诉我该怎么做。
- AI 给我写作业，或我照抄。

## 为什么必须标注？

> 那么有同学要问了：博主，文章是我自己写的只是让 AI 检查一下，为啥要标注？
> 
> 抱歉，用了就是用了，没什么可狡辩的，自欺欺人罢了。

—— 引用自：[给你的文章添加 AI 创作等级标识](https://jb18.cm/blog/2026-02-01-%E7%BB%99%E4%BD%A0%E7%9A%84%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0-ai-%E5%88%9B%E4%BD%9C%E7%AD%89%E7%BA%A7%E6%A0%87%E8%AF%86/)

这个观点我非常认同。独立博客的核心价值在于真实和独立，如果使用了 AI 却不标注，那就是对读者的不尊重，也是对自己博客的不负责任。

从今天开始，我博客的所有文章都会在标题下方显示对应的 AI 创作等级标识，让读者清楚了解每篇文章的创作方式。


独立博客以真实和独立为根本，有必要告知访客正在读的内容是不是 AI 生成，AI 都参与了哪些部分。

给你的文章添加 AI 创作等级标识


这次设计的主题还有一个小小的意外，那就是Google PageSpeed Insights（PSI）竟然拿到了4个100分的满分，有心栽花花不开，无心插柳柳成荫啊。

![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_15-03-59.png)


## PSI

PageSpeed Insights（PSI） 是 Google 提供的免费网页性能分析工具，用于评估网站加载速度和用户体验，并提供具体的优化建议。它是目前网站性能优化和 SEO 工作中最常用的工具之一。

它的评分系统主要有四个指标：

| 维度                 | 中文名            | 评估内容                                |
| ------------------ | -------------- | ----------------------------------- |
| **Performance**    | **性能**         | 页面加载速度、交互响应、视觉稳定性（核心）               |
| **Accessibility**  | **无障碍**        | 是否对残障用户友好（如图片 alt 属性、对比度、键盘导航）      |
| **Best Practices** | **最佳实践**       | 是否遵循 Web 开发的安全和性能最佳实践（如 HTTPS、安全漏洞） |
| **SEO**            | **搜索引擎优化**     | 页面是否对搜索引擎友好（如移动适配、meta 标签、结构化数据）    |


## 如何使用

1. 访问工具：[https://pagespeed.web.dev/](https://pagespeed.web.dev/) 输入网址：粘贴需要分析的页面 URL，点击"分析"

2. 在 Chrome 浏览器中按 F12 → Lighthouse 标签页生成报告。

## PSI作用是什么？

自 2021 年 5 月起，Core Web Vitals 成为 Google 搜索排名因素 。良好的 PSI 分数意味着：

* 更好的搜索排名
* 更低的跳出率
* 更高的转化率（电商网站研究显示，页面加载每慢 1 秒，转化率可能下降 7%）

所以，如果你还在使用感觉或是一些ping值来评估网站的打开速度和用户体验，那么我推荐你试试PSI。


## 我的PSI

![PSI](https://suiyan.cc/assets/images/2023/lcp6.png)

上图是2023年8月份的一次截图，当时我的博客应该是部署在Github，性能方面因首页面的健在元素过多和文件过大，造成了性能分值极低。同时，我也没有在意无障碍和SEO，导致了整体分数极低的状态，以至于后来我在Google的索引以及排名一直在降低，桌面版的核心网页指标也全部丢失了。这里不再多说，

感兴趣的请点传送门： [关于Google LCP 问题：超过了2.5秒 验证已通过](https://www.suiyan.cc/blog/20230813204827)

这次主题设计完成之后的评分是这样的

![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_14-37-29.png)

该死的强迫症又犯了，然后查看了具体的原因如下：

![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_14-38-04.png)

![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_14-38-29.png)


![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_14-38-38.png)


还好，修改难度极低，直接按着要求修改了，然后重新部署，刷新测试，桌面版满分，移动端除了性能92分之外，其他三项也都是满分。

![PSI](https://suiyan.cc/assets/images/2025/psi/Snipaste_2026-02-01_15-03-59.png)


## 总结


PageSpeed Insights（PSI）真是网站主的极简设计的精简利器，因为你需要精简页面上无用的元素和功能。元素和功能越多，网站就越不受你的控制，因为过多的依赖会导致很多不确定的因素，过度的元素会导致页面的HTML、JavaScript代码过于臃肿，结果就是有些并不是你自己弄的东西会莫名地给你的指标减分。

当然，不要追求100分：90+分已属优秀，边际效益递减，需权衡开发成本。但是，良好的网站加载速度和用户体验不光是对来访者提供更好的浏览体验，还可以提高网站的SEO，方便搜索引擎的索引。

Google PageSpeed Insights（PSI）并不是网站评分的最终指标，他只是一个侧面的参考，有Google定制的一个业内标准。而网站的极简设计也并不只是页面的颜色和内容，还有很多的设计和功能细节值得我们反复推敲，设计的目标是什么？网站的初衷是什么？每个站长或许都不一样，但是，好的设计风格和浏览体验，用户一定会有真实的反馈的。



这次设计的主题还有一个小小的意外，那就是Google PageSpeed Insights（PSI）竟然拿到了4个100分的满分，有心栽花花不开，无心插柳柳成荫啊。

PageSpeed Insights 满分攻略


就在刚刚，我注销了拼多多的先用后付、美团的美团月付、支付宝的花呗，还有京东的白条。

还好，整个注销的流程还是挺通畅的，基本上没有什么特别反感的地方。只要你想注销，基本上能找到注销的按钮。只是在注销的过程中，点击确认注销的按钮是灰色的，而取消注销的按钮都是通红的，明显是在反向阻止你注销这些功能。这点挺不好，有点像那些流氓软件的卸载和关闭——反正让你找不到关闭确认的按钮，卸载的按钮通通都给你整成小字、灰色，稍微一不注意就点成别的了。好在最后都成功注销了。

我就是比较反感收到那些让你还款的通知。而且有的时候，我只想马上就把钱付了，习惯这种正常支付、下单购买、然后等待收货的流程，非常不习惯那种先用后付的流程。

因为有的时候你已经消费完毕，心理上就是一种"我已经花过钱，然后已经消费完毕，本次交易就已经结束"的完整心理。但是过了一段时间，你会突然间收到一条短信，提示你下个月有一笔要还的款项，然后心里就会非常不舒服。早就有想法把这些都关闭了，结果今天就这么做了，挺好的，以后也不开通了。整个世界清静了。

理性消费，正常消费，简单的生活，挺好。


就在刚刚，我注销了拼多多的先用后付、美团的美团月付、支付宝的花呗，还有京东的白条。

注销了四个平台的「花呗」


一转眼到三十一号了，马上就要到二月份。仔细想了想，从开年到现在，**好像做了很多，但又没做什么**。好像挺忙，但又都是在瞎忙。那么，我1月份都做了什么？

## 读书

1月份读完了两本书，一本是《以日为鉴》，另一本是《游戏剧本怎么写》。已经读了一半的有《阿甘正传》。刚刚开始看的有《禅与极简生活艺术》，以及一本哲学入门的书《苏菲的世界》。也不知道为什么要看这本书，可能是看到有些大佬写的博客太有哲学味了，所以想了解一些哲学的知识吧。怎么说呢，就是太闲了。

## rss

* [莫比乌斯](https://onojyun.com/)    经常看他的博文，更新频率几乎每天一文，质量还不错的，至少是我喜欢的风格，能激发你的思考。

* [極客死亡計劃](https://www.geedea.pro/) 写的了代码，做得了游戏，会设计又会写作，很**有才气**的年轻人，喜欢看他记录折腾的那些玩意（很多没见过）。

## 折腾博客

1月份没少折腾博客。首先是博客的样式，折腾来折腾去总是不满意，前前后后大约修改了有半个月，最后到月底一次推翻，把之前所有的设计都放弃了，重新设计了一个极简的浅色主题，这次感觉还好，以后就用这个了。另外，在博客的一些细节上增加了一些功能，添加了一些以前想了很久却没有去做的东西，比如说静态博客文章的访问量统计，以及为文章添加了"喜欢"的功能。大体上就这样吧。本来还想用更轻的CSS样式库重构博客，但是改起来还是很麻烦的，而且样式修改了之后，和自己预想的完全不一样，然后就放弃了。

## 代码

最近流行使用AI写代码，叫**氛围编程**，所以也抽空把之前的一些老项目都重构了一下。前后对比了一下，之前自己写的代码真是错误和漏洞百出啊。好在现在AI真的很厉害，之前花了十天半月写的东西，现在只需要10分钟。不知道这是很爽，还是很无奈。AI编程使普通人和程序员都很兴奋，因为以前需要花很多时间来解决的问题，现在瞬间都可以通过AI来实现、来解决，而且非常复杂的问题也可以通过AI来拆分，来逐步实现。这大大减轻了程序员在编写项目上的负担。最主要的就是在排查错误和重复代码方面，太方便了，而且还可以方便地编写测试，让AI帮你测试程序，这样大大提高了程序的健壮性，减少了漏洞和错误。
除了重构项目，还有我之前写的游戏也一直在继续，中间用AI重构了一下。这个游戏重构的过程中发现了之前很多自己没有想到的问题，都被AI给优化了。目前来说，游戏整体优化得还是不错的，大大方便了后续项目的推进，而且AI也给出了后续游戏推进的一些建议和规划，有很多是我没有想到的。在优化和编写游戏的同时，在B站上发布了一些关于Godot引擎制作游戏的基础教程，一不小心粉丝还超过了1000人，竟然还有了一点点收益。还有人催更，搞得我现在都不知道还要不要继续做下去，因为后边的教程做起来会越来越难，所以先放到那里吧。

## 游戏

暗黑3的新赛季玩起来也是很无聊，所以这个游戏也处于濒临卸载的边缘，偶尔还能上去看一下。每天都在做原神的任务，大约需要15分钟吧。终于等到了原神的月之三版本，抽到了月神哥伦比娅，但是足足花了160抽，这次的运气可真是不咋地。本来月之四版本还想抽机器人伊涅芙，可惜小保底歪了。大保底抽到了25抽，但是马上池子就要关闭了，估计1号还能抽个10抽，可能就是这样了，抽不到了。


## 观影

最近也没看什么电影，孩子放假，每天晚上我和孩子都会看《斗罗大陆2》，连续看4集，预计开学的时候正好把整个《斗罗大陆2》都看完。当然，这种爽文爽片的动画片，看起来还是很有意思的。之前看了《阿甘正传》，还有《天下无贼》，甚至还有一些外国的经典电影，总体感觉还是可以的。开学之后，孩子就没有时间看电影了，所以有机会还是多陪她看看吧。

## 过年

马上就要过年了，中国有句老话：还有什么事吗？等等吧，马上就要过年了，过完年再说吧。所以可能有一些计划就会暂时搁浅了，即便想去努力一把，可能在时间和精力上也不允许。所以嘛，在这里我就先提前祝大家春节愉快，万事如意，心想事成！


博文的一转眼到三十一号了，马上就要到二月份。仔细想了想，从开年到现在，好像做了很多，但又没做什么。好像挺忙，但又都是在瞎忙。那么，我1月份都做了什么？简介

一月小计，活着

详细介绍如何在实际项目中实现文章阅读量和喜欢功能，包括Supabase数据库创建、API开发、前端组件实现以及Vercel部署配置

基于 Next.js + Supabase 的文章阅读量和喜欢功能

2026如何在平凡的生活中捕捉一些细节？联想到一些新的思考，发现新的创意和灵感？