
之前在用MacBookPro的时候鼓捣过一阵子Docker,这一晃又是好多年过去了，晚上跟着教程操作了一下最新的Docker相关操作，但是系统不同安装和运行还是有些差别的，一边操作一边记录，老方法来学习。虽然有了AI辅助，但是有些东西该学还是得学，凡事讲究个本源。


## 准备

* 系统：`Ubuntu 24.04.4 LTS`
* Docker: `29.2.1`（当前b最新版本）


## 方法一：官方推荐方式（使用 apt 仓库）

这是 Docker 官方推荐的安装方式，适用于 Ubuntu 22.04/24.04 等 LTS 版本 。

### 1. 卸载旧版本（如有）

```bash
sudo apt-get remove docker docker-engine docker.io containerd runc docker-compose docker-compose-v2 docker-doc podman-docker
```

### 2. 更新系统并安装依赖

```bash
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
```

### 3. 添加 Docker 官方 GPG 密钥

```bash
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
```

### 4. 添加 Docker APT 仓库

```bash
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
```

### 5. 安装 Docker Engine

安装最新版本（包含 Docker Compose 插件）：

```bash
sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

如需安装特定版本，先查看可用版本：
```bash
apt-cache madison docker-ce
```

然后安装指定版本（示例）：
```bash
VERSION_STRING="5:28.3.2-1~ubuntu.24.04~noble"
sudo apt-get install -y docker-ce=$VERSION_STRING docker-ce-cli=$VERSION_STRING containerd.io docker-buildx-plugin docker-compose-plugin
```

### 6. 启动并验证

```bash
# 启动 Docker 服务（通常安装后自动启动）
sudo systemctl start docker
sudo systemctl enable docker
```

```bash
# 验证安装
sudo docker run hello-world
```

这里的验证如果失败，极有可能是网络部通畅无法访问Github造成的，可以先**配置国内镜像加速之后再测试。**



## 配置非 root 用户使用 Docker

默认情况下需要 `sudo` 运行 Docker 命令，可通过以下步骤授权普通用户 ：

```bash
# 创建 docker 用户组（通常已存在）
sudo groupadd docker

# 将当前用户加入 docker 组
sudo usermod -aG docker $USER

# 重新登录或执行以下命令使权限生效
newgrp docker

# 验证（无需 sudo）
docker run hello-world
```




## 配置国内镜像加速（推荐）

编辑或创建 Docker 配置文件：

```bash
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": [
    "https://docker.m.daocloud.io",
    "https://docker.1panel.live",
    "https://hub.rat.dev",
    "https://docker.mirrors.ustc.edu.cn",
    "https://dockerpull.com",
    "https://dockerhub.icu",
    "https://docker.awsl9527.cn"
  ]
}
EOF

sudo systemctl daemon-reload
sudo systemctl restart docker
```

## 常用管理命令

| 命令 | 说明 |
|------|------|
| `docker --version` | 查看版本 |
| `sudo systemctl status docker` | 查看服务状态 |
| `sudo systemctl start/stop/restart docker` | 启动/停止/重启 |
| `sudo systemctl enable/disable docker` | 开机自启/禁用 |
| `docker compose version` | 查看 Compose 版本 |
| `docker info` | 查看系统信息 |

## 卸载 Docker

如需完全卸载 ：

```bash
sudo apt-get purge docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin docker-ce-rootless-extras
sudo rm -rf /var/lib/docker
sudo rm -rf /var/lib/containerd
```

---

**注意事项**：
- 支持的 Ubuntu 版本：22.04 LTS (Jammy)、24.04 LTS (Noble)、25.10 (Questing) 
- 支持的架构：x86_64/amd64、arm64、armhf、s390x、ppc64le
- 安装前确保系统已更新，且没有冲突的防火墙规则（如使用 `ufw` 需注意端口映射会绕过防火墙）



## 构建镜像和运行容器

### 1.1.1 准备代码

创建一个名为 `hello-docker` 的文件夹，并在其中创建一个 `index.html` 文件：

```html
<h1>Hello, Docker!</h1>
```

### 1.1.2 编写 Dockerfile

在同级目录下创建一个名为 `Dockerfile` (无后缀) 的文件：

```dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
```

### 1.1.3 构建镜像

打开终端，进入该目录，执行构建命令：

```bash
$ docker build -t my-hello-world .
```

如果构建失败，很大的可能是网络问题，请**配置镜像加速**。

* `docker build`：构建命令
* `-t my-hello-world`：给镜像起个名字 (标签)
* `.`：指定上下文路径为当前目录



### 1.1.4 运行容器

使用刚才构建的镜像启动一个容器：

```bash
$ docker run -d -p 8080:80 my-hello-world
```

* `docker run`：运行命令
* `-d`：后台运行
* `-p 8080:80`：将宿主机的 8080 端口映射到容器的 80 端口

### 1.1.5 访问测试

打开浏览器访问 [http://localhost:8080](http://localhost:8080)，你应该能看到 “Hello，Docker！”。

### 1.1.6 清理

停止并删除容器：

```bash
## 查看正在运行的容器 ID

$ docker ps

## 停止容器

$ docker stop <CONTAINER_ID>

## 删除容器

$ docker rm <CONTAINER_ID>
```


## 参考

* [ubuntu 安装 docker](https://yeasy.gitbook.io/docker_practice/di-yi-bu-fen-ru-men-pian/03_install/3.1_ubuntu)

* [快速上手](https://yeasy.gitbook.io/docker_practice/di-yi-bu-fen-ru-men-pian/01_introduction/1.1_quickstart)

* [Docker 从入门到实践](https://yeasy.gitbook.io/docker_practice)

* [Docker 中文教程](https://docker-practice.github.io/zh-cn/)

之前在用MacBookPro的时候鼓捣过一阵子Docker,这一晃又是好多年过去了，晚上跟着教程操作了一下最新的Docker相关操作，但是系统不同安装和运行还是有些差别的，一边操作一边记录。

Ubuntu24.04 Docker安装|调试|编写镜像|运行第一个容器


因为系统改为ubuntu，所以大量使用终端进行操作是不可避免的，跟着vimtutor复习了一下，也算回忆起来了一些。让Kimi整理了一下每一章的重点，并制成表格速查，方便平时使用的时候速查。


---

## vimtutor 全章节速查表

### 第1章：基础移动与退出

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `h` `j` `k` `l` | 左 下 上 右 | **h**orizontal（水平），**j** 像下箭头，**k**ing 向上，**l** 像右箭头 |
| `:q!` | 强制退出不保存 | **q**uit + **!** 强制 |
| `:wq` | 保存并退出 | **w**rite + **q**uit |
| `x` | 删除光标处字符 | 像打叉删除 |
| `i` | 光标前插入 | **i**nsert |
| `A` | 行尾追加 | **A**ppend（大写=大行尾）|

---

### 第2章：删除与撤销

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `dw` | 删除到单词末尾 | **d**elete + **w**ord |
| `d$` | 删除到行尾 | **d**elete + **$** 行尾 |
| `dd` | 删除整行 | **d**elete **d**ouble |
| `2w` | 向前移动2个单词 | 数字前缀=重复次数 |
| `2dw` / `d2w` | 删除2个单词 | 数字可放前或后 |
| `u` | 撤销 | **u**ndo |
| `U` | 撤销整行修改 | 大写=大撤销 |
| `Ctrl+r` | 重做/反撤销 | **r**edo |

**核心概念**：`d` 是**操作符**，`w` `$` 等是**动作对象** → `操作符 + 动作 = 操作`

---

### 第3章：修改、替换与定位

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `r` | 替换单个字符 | **r**eplace，无需Esc |
| `R` | 进入替换模式 | 大写=连续替换 |
| `ce` / `cw` | 修改到单词末尾 | **c**hange，类似 `d` 但进入插入模式 |
| `c$` | 修改到行尾 | **c**hange + **$** |
| `Ctrl+g` | 显示当前位置信息 | **g**et info |
| `G` | 跳到文件最后一行 | **G**o to end |
| `gg` | 跳到文件第一行 | 小写=开头 |
| `行号G` | 跳到指定行 | 如 `15G` |
| `/pattern` | 向下搜索 | **/** 像搜索图标 |
| `?pattern` | 向上搜索 | **?** 反向 |
| `n` | 下一个匹配 | **n**ext |
| `N` | 上一个匹配 | 大写=反向 |
| `Ctrl+o` | 返回旧位置 | **o**ld |
| `Ctrl+i` | 前往新位置 | **i**n |

---

### 第4章：搜索替换与执行外部命令

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `:s/old/new` | 替换当前行第一个 | **s**ubstitute |
| `:s/old/new/g` | 替换当前行所有 | **g**lobal（行内全局）|
| `:#,#s/old/new/g` | 替换指定行范围 | 如 `:5,12s/old/new/g` |
| `:%s/old/new/g` | 替换整个文件所有 | **%** = 全部行 |
| `:%s/old/new/gc` | 替换并确认 | **c**onfirm |
| `:!command` | 执行外部命令 | **!** 表示外部 |
| `:w filename` | 另存为 | **w**rite to |
| `v` + `:w` | 选中后保存到新文件 | 可视模式选择范围 |
| `:r filename` | 读取文件内容插入 | **r**ead |
| `:r !command` | 插入命令输出 | 如 `:r !ls` |

---

### 第5章：高级编辑技术

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `o` | 下方新建一行并插入 | **o**pen below |
| `O` | 上方新建一行并插入 | 大写=反向 |
| `a` | 光标后插入 | **a**ppend（小写=小位置）|
| `A` | 行尾插入 | 大写=大行尾 |
| `e` | 跳到单词末尾 | **e**nd of word |
| `y` | 复制（yank）| **y**ank |
| `yw` | 复制单词 | **y**ank **w**ord |
| `yy` / `Y` | 复制整行 | **y**ank **y**ank |
| `p` | 在光标后粘贴 | **p**aste |
| `P` | 在光标前粘贴 | 大写=前 |
| `R` | 替换模式 | 覆盖多个字符 |

---

### 第6章：可视模式与多文件

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `v` | 进入字符可视模式 | **v**isual |
| `V` | 进入行可视模式 | 大写=整行 |
| `Ctrl+v` | 进入块可视模式（列选择）| 矩形块 |
| `>` | 选中后缩进 | 右箭头=右移 |
| `<` | 选中后反缩进 | 左箭头=左移 |
| `o` | 可视模式下切换选择端点 | **o**ther end |
| `:e filename` | 打开新文件 | **e**dit |
| `:bn` / `:bnext` | 下一个缓冲区 | **b**uffer **n**ext |
| `:bp` / `:bprev` | 上一个缓冲区 | **b**uffer **p**revious |

---

### 第7章：帮助系统与补全

| 命令 | 作用 | 记忆技巧 |
|------|------|---------|
| `:help` | 打开帮助 | **h**elp |
| `F1` | 同上 | 标准帮助键 |
| `:help cmd` | 查看特定命令帮助 | 如 `:help x` |
| `Ctrl+w` `Ctrl+w` | 窗口间切换 | **w**indow |
| `Ctrl+d` | 命令补全提示 | **d**isplay options |
| `Tab` | 命令补全 | 标准补全键 |
| `Ctrl+n` / `Ctrl+p` | 插入模式自动补全 | **n**ext / **p**revious |

---

## 核心操作符速查表

| 操作符 | 作用 | 可配合动作 |
|--------|------|-----------|
| `d` | 删除 | `w` `$` `0` `e` `G` 等 |
| `c` | 修改（删除并插入）| 同上 |
| `y` | 复制 | 同上 |
| `>` | 缩进 | 行或选中区域 |
| `<` | 反缩进 | 行或选中区域 |
| `=` | 自动格式化 | 行或选中区域 |

**组合公式**：`[数字] + 操作符 + [数字] + 动作`

示例：`d2w` = 删除2个单词，`2yy` = 复制2行

---

## 日常高频命令 TOP 20

| 排名 | 命令 | 使用场景 |
|------|------|---------|
| 1 | `i` / `Esc` | 编辑/返回 |
| 2 | `:wq` / `:q!` | 保存退出/放弃 |
| 3 | `dd` / `p` | 剪切粘贴行 |
| 4 | `yy` / `p` | 复制粘贴行 |
| 5 | `u` / `Ctrl+r` | 撤销/重做 |
| 6 | `w` / `b` | 单词跳转 |
| 7 | `A` / `I` | 行尾/行首编辑 |
| 8 | `r` | 快速替换字符 |
| 9 | `x` | 删除字符 |
| 10 | `/` + `n` | 搜索跳转 |
| 11 | `G` / `gg` | 文件首尾 |
| 12 | `v` + `>` | 选中缩进 |
| 13 | `:%s/a/b/g` | 全局替换 |
| 14 | `:!` | 执行命令 |
| 15 | `Ctrl+g` | 查看位置 |
| 16 | `o` / `O` | 新建行 |
| 17 | `dw` / `cw` | 删除/修改单词 |
| 18 | `ce` | 修改到单词尾 |
| 19 | `yiw` / `diw` | 复制/删除整个单词（含内部）|
| 20 | `.` | 重复上次操作 |

---

## 打印版速记口诀

```
移动：hjkl wbe 0$ ggG
编辑：iIaAoO rR x
删除：dd dw d$ D
复制：yy yw pP
撤销：u Ctrl+r
搜索：/ ? nN
替换：:s :%s
保存：:w :q :wq :q!
```

建议将此表截图保存或打印贴在显示器旁，坚持一周即可形成肌肉记忆！


vimtutor 每章的核心命令速查表


>Ubuntu 是由南非企业家马克·沙特尔沃思（Mark Shuttleworth）创立，Canonical 公司于 2004 年发布。名称源自非洲祖鲁语和科萨语的"ubuntu"哲学概念，意为"人性待人"或"我因我们而存在"。


## 起因 


终于无法接受windows下的开发环境了，之前忍了很长时间，有很多开发的工具都是无法使用的，例如所有需要`Docker`部署的应用，当然也包括`Docker`本身。2016-2022年之间一直在使用MacBook Pro，后来配置太烂了就把本本卖掉了，换了台台式机和Windews10,一直用到现在。但是最近由于接触一些LLM大模型相关的开源应用，有很多需要`Linux`环境的，所以只好安装`Ubuntu`。还有就是windows的系统占用磁盘空间太大了！有时会超过100G，目前系统用的是双路志强CPU+64G内存，为了最大限度的发挥机器硬件的性能，安装`Ubuntu`也算是一个最优选项吧。



## 安装过程

1. 备份重要的文件，这个一定要仔细备份，我这边基本都是在Github上备份过了，所以问题不大。（但是，还是不小心有个项目丢了一个版本。）
2. 下载`Ubuntu`的桌面版的稳定最新版iso文件。
3. 下载U盘启动盘制作软件 [Rufus](https://rufus.ie/zh/)，启动盘的制作非常的简单，选好iso文件，点击开始制作，等会就好了。
4. 开机设置U盘启动，按着提示安装即可。
5. 剩下的就是进入系统设置你需要的环境了。

## 使用

上次想更换系统为Ubuntu的时候大约是几年前，当时在玩游戏，因为游戏环境的原因没有更换，这次下定决心安装的主要原因除了一些编程学习项目的需要之外，就是觉得游戏不再重要了，另外如果非得要玩一玩，也找到了运行的方式，稍后测试。

一些注意事项：

* 显卡驱动在系统安装完毕后要手动安装:`sudo ubuntu-drivers autoinstall`，验证：`nvidia-smi`
* ip如果你不设置固定的内网ip，那么基本上重启之后就可以自动上网了，有固定IP的可以在网络设置里进行设置，和windows基本相似。
* 其他node、python等环境问题，一般让AI操作即可，这可比以前方便多了，以前只能是在网上搜索，还不一定管用。


## 总结

好了，既然已经更换为Ubuntu了，那么就全面拥抱开源软件了。


终于无法接受windows下的开发环境了，之前忍了很长时间，有很多开发的工具都是无法使用的，例如所有需要`Docker`部署的应用，当然也包括`Docker`本身。

终于把Windows10更换为Ubuntu



## LobsterAI

> 一个7×24小时帮你干活的全场景个人助理 Agent

网易不声不响的出品了一个类似OpenClaw的有道龙虾。 前几天还在琢磨要不要搞一下，结果因为没有Mac mini，也没有LLM大模型的API Key，嗯，就放弃了测试。


## OpenClaw的成本


最低成本方案（¥1,500 以内）：

    硬件：Beelink EQ12 Pro 或旧笔记本（4核+8GB）
    系统：Ubuntu 24.04 LTS
    模型：通过 Ollama 运行 Qwen2.5 或 Llama 3.2（4-bit 量化）
    成本：仅电费（约 ¥20/月）


最佳体验方案（¥4,000-5,000）：

    硬件：Mac Mini M4（16GB 内存）
    系统：macOS Sonoma+
    模型：本地 Mistral 7B / Qwen 14B
    优势：原生集成、语音唤醒、低功耗

OpenClaw 大约几百与到-几千元，这些成本取决于你的token的使用量和硬件的成本。


## 安装

LobsterAI的安装非常简单，也没有什么繁琐的设置，下载后安装即可，如果本地装有ollama，可以直接连接ollama的大模型。

下载地址：

[LobsterAI 有道龙虾](https://lobsterai.youdao.com/#/index)


本地模型我使用的是:`qwen3-vl:8b`，虽然能用，但是很卡啊，有其他LLM的API key，可以试试的。

可以连接的机器人有：钉钉和飞书。LobsterAI的0成本上手你还要什么OpenClaw？赶紧试试吧。


## 总结

安装简单，配置简单，适合windows系统，可以0成本一试。


网易不声不响的出品了一个类似OpenClaw的有道龙虾。 

网易竟然也开始搞「海鲜」: LobsterAI 有道龙虾



>Pagefind
>Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.


## 起因

不知道为什么对博客中现有的搜索功能非常不满意，然后就尝试询问LLM有何其他的解决方案，LLM一致推荐Pagefind，并给出很细致的解释。那么作为一个一脸懵的人类自然会相信了，那么就让他开始设计和构建了。

## 结果

花了很多时间，断断续续的花了几个小时，并且在几天内重构了三次，最终勉强的实现了全站静态页面内容的模糊搜索。

先说优点，确实可以全站的模糊搜索，而且速度很快，构建的时候也把索引给一并创建了，算是很方便。

缺点：

1. 搜索太全面了，模糊到一个关键字能把所有静态页面都给展示在结果中，这就失去了搜索的意义。
2. 索引的文件太多了，以至于我放弃了这个功能，在删除这些索引的时候竟然花了很多时间。

![认证](https://suiyan.cc/assets/images/2025/Snipaste_2026-02-20_10-32-59.png)

当然，这个时间的消耗主要是我没有直接删除，而是把这些索引删除到了回收站，但是我没有先到这些索引竟然有10000+，博客不过几百个页面而已，就生成了这么多的索引。

而且，清空回收站是，回收站一直卡在那里，后来没办法了，让LLM写了个python的脚本，我看了下，使用终端的命令行来删除的这些文件，好在最后都删除了。


## 总结

这是一起过度相信LLM造成的后果，确实没有让LLM给出Pagefind缺点，让我权衡之后再选择，以后选择技术和框架的时候不光要考虑优点，也要让LLM给出缺点一并考虑，避免造成不必要的时间成本的浪费。

同时，对LLM推荐的技术或框架的不了解也是一大弊端，使用一个自己并不了解的技术或框架这本身就是一个危险。

不知道为什么对博客中现有的搜索功能非常不满意，然后就尝试询问LLM有何其他的解决方案，LLM一致推荐Pagefind，并给出很细致的解释。那么作为一个一脸懵的人类自然会相信了，那么就让他开始设计和构建了，结果却出人意外！

Pagefind一定要慎用！


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


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

## 设计思路

内容 + 时间，然后其他和博客一样存储为.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(大模型)聊天，ta要的是一个回应，答案是否正确或许并不重要。