夢酷の Blog

文章更新提醒功能食用指南 - 超级牛逼！

Sat, 21 Feb 2026 17:32:00 GMT

没错，就是你现在看到的右下角那个并不起眼的小铃铛。

你可能已经注意到了，最近博客右下角多了一个小铃铛图标。这并不是什么订阅推送（虽然它长得很像），而是一个基于客户端的文章更新检测系统。

为什么要搞这个？

很多时候，我们写完一篇文章后，可能会发现有错别字，或者某些观点需要补充，甚至是因为某些原因需要删改内容。

对于读者（也就是你）来说，如果你之前看过这篇文章，再次点进来时，可能很难发现到底哪里变了。是改了个标点？还是加了一大段干货？

为了解决这个“找不同”的难题，我们引入了这个功能。它会记录你上次访问时的文章版本，并在你下次访问时，自动对比服务器上的最新版本，告诉你：这篇文章变了，具体变在哪。

食用方法

其实非常简单，整个流程完全自动化，不需要你手动做任何操作。

1. 发现更新

当你浏览博客时，系统会自动在后台获取最新的 RSS 订阅源，并与你本地缓存的文章记录进行比对。

如果发现了有文章更新（无论是内容、标题还是描述），右下角的小铃铛就会出现一个红点，并且会有一个入场动画提醒你“有新东西了”。

2. 查看列表

点击小铃铛，会弹出一个面板，列出所有有变动的文章。

新文章：带有一个绿色的 NEW 标签，表示这是你上次访问以来新发布的文章。
更新：带有一个蓝色的 UPDATE 标签，表示这篇文章你之前可能看过（或者它存在于你的缓存中），但现在它有了新的变化。

3. 查看 DIFF

这是最核心的功能。点击带有 UPDATE 标签的文章标题，浏览器会直接跳转到该文章，并自动滚动到第一个变更点。

在文章正文中，你会看到类似代码编辑器的 DIFF 效果：

<span style="color:rgb(220 38 38);text-decoration:line-through">红色划线部分</span>：表示被删除或修改前的内容。
<span style="color:rgb(22 163 74);text-decoration:underline">绿色下划线部分</span>：表示新增或修改后的内容。

[!TIP] 如果变更内容较多，我们只会显示变更点附近的几行文字作为上下文（Context），其余未变动的部分会保持原样，不会干扰你的正常阅读。

常见问题

Q: 为什么我没看到小铃铛？ A: 如果没有检测到任何新文章或更新，小铃铛会默认隐藏，以免打扰你阅读。

Q: 为什么有时候明明文章没变化，却提示更新了？ A: 系统不仅检测正文，还会检测标题和描述。有时候我可能只是改了个标点，或者修正了排版，也会触发更新通知。

Q: 我不想看这些红红绿绿的线了怎么办？ A: 在小铃铛面板右上角，有一个清空按钮（垃圾桶图标）。点击它，系统会将当前所有文章标记为“已读/最新”，并清空本地的对比记录。下次再有新变化时，才会再次提醒。

网站加友链的最佳姿势是什么？当然是自动化啦！

Tue, 17 Feb 2026 22:41:17 GMT

起因

正如很多站长都会遇到的那样，如果你通过 PR 来处理友链申请，尤其是在完全没有自动化的情况下，大概率会遇到下面这种场面：

数量多其实还不是最麻烦的，真正麻烦的是：

以及各种格式问题。

是的，我甚至都没有设计什么复杂格式，但很多人提交友链时，连 JSON 都写不明白。上图是忘了引号，下图则连 .json 后缀都没写对。

很长一段时间里，这些小问题我都是手动帮忙修的，毕竟看起来都不算大事。

但问题在于：当你正在打游戏，或者正忙着处理别的事情时，突然弹出一个友链 PR，你到底是现在处理，还是留到之后集中处理？无论怎么选，都挺打断节奏。

所以我就在想：有没有办法把这件事尽可能自动化掉？

正式开始

我们能不能用 GitHub Action 来自动化这件事？

思路是这样的：让用户在提交友链时额外填写一个回链字段，然后由 GitHub Action 实际检测是否存在回链。这样不仅能确认对方确实添加了你的友链，也能顺便完成一次所有权验证。

正式开始（旧的）

我们可以先把整个流程拆开来想一遍。

GitHub Action 本来就是用来处理这类自动化任务的，这不正好符合我们的需求吗？甚至还可以顺手做一些更高级的事情，比如所有权验证，某种程度上和站长平台验证域名的思路很像。

于是，整体流程草图很快就出来了。

接下来再把这份思路交给 AI 帮忙整理实现。

最终你就得到了

没关系，前期看起来乱一点很正常，毕竟 GitHub Action 这类流程很多时候只能在真实环境里慢慢调试。

最终我们就会得到...

看起来是不是很简单？其实并没有。现在看到的这套流程虽然表面上还算清晰，但也是反复梳理和修改之后，才勉强打磨到“基本能用”的状态。

下面再说一些非常容易踩坑的地方。

踩坑

首先，这整套架构虽然最终看起来还算清晰，但实际逻辑并不简单。要是一次就能跑通，那已经算运气很好了；一旦中间某一步出问题，排查起来会相当痛苦。

所以在多次调整架构之后，我最终决定直接使用 GitHub 的标签系统来跟踪进度并锚定规则。

每一步都给 PR 打上明确的标签，就像这样：

这样做的好处是，不仅在外部一眼就能看出某个 PR 卡在哪一步，也能让你在不额外写复杂日志的情况下，大致判断问题出在哪里。

接下来是所有权验证。这个环节其实必须做好错误处理，因为它往往无法一次性顺利跑到底。借助 GitHub 标签，我们可以控制某些步骤是否跳过，从而避免验证文件被重复要求，或者每次都随机生成一个新的文件。

只要打上 所有权验证进行中 这个标签，Action 就会去寻找之前已经创建好的验证文件，而不是重新生成一个新的。

到这里看起来还只是基本功，但后面还有一个更关键的问题。

我发现，只要是从外部仓库拉进来的 PR，Action 就没法直接通过 GITHUB_TOKEN 去合并它。不过这个问题也不算麻烦，额外创建一个自己的个人访问令牌（PAT），再把它绑定到 Action 中即可。

至此，这套自动化流程终于能比较顺畅地跑起来了。

Fuwari静态博客搭建教程

Tue, 16 Sep 2025 16:00:00 GMT

你需要准备的东西

一点基础的折腾能力。遇到问题先自己排查，实在解决不了再搜索或借助 AI，这样搭建过程会顺利很多。
Git - Downloads (git-scm.com)：用于管理本地代码并与 GitHub 仓库同步。如果你更习惯图形界面，也可以尝试 GitHub Desktop | Simple collaboration from your desktop。
Node.js — Run JavaScript Everywhere (nodejs.org)：Fuwari 基于 Node.js，因此需要先安装它。
一个 GitHub 账号：用于创建仓库并托管 Fuwari 项目文件。
一个 Cloudflare 账号：用于创建 Pages 项目并绑定域名。
黑曜石（Obsidian）：这是一个可视化 Markdown 编辑器。由于 Fuwari 的文章和页面都以 Markdown 文件保存，准备一个顺手的编辑器会方便很多。
需要会一些基础的 Markdown 语法。如果暂时不熟悉，可以先看这个教程：Markdown 基本语法 | Markdown 官方教程。

流程图

本地部署Fuwari，编写文章 -> 推送更改到远程Github仓库 -> Cloudflare Pages检测到仓库更新自动构建新的网站静态文件 -> 网站成功更改

让我们开始吧

首先，在本地部署 Fuwari

Fork仓库：

https://github.com/saicaca/fuwari
如果你不熟悉 Fork 仓库的流程，可以参考下面的图片教程。
然后将仓库克隆到本地：git clone <你的仓库URL>。如果可以使用 SSH，后续推送通常会更方便。
先全局安装 pnpm：npm install -g pnpm。如果 npm 在国内下载较慢，可以尝试切换镜像源，例如 npmmirror 镜像站。
接着在项目根目录安装依赖：pnpm install 和 pnpm add sharp。
完成以上步骤后，Fuwari 就已经成功部署到本地了。

[!TIP]

你也可以使用创建一个新的空仓库然后手动上传文件，并且可以将仓库可见性设为：Private

改写Fuwari的基本信息并且清理多余文件

刚创建的 Fuwari 可能带有默认的博主名称、图标、链接、简介和示例文章。为了让站点更符合你的使用场景，建议先把这些内容改成自己的信息。

在根目录的 src 文件夹中找到 config.ts，这里是站点的核心配置文件。
- title：你的博客主标题
- subtitle：你的博客副标题。可选，在首页会显示为“主标题 - 副标题”

lang：博客显示语言。注释里已经列出了一些常见值，例如 en、zh_CN、zh_TW、ja、ko
themeColor：hue 表示博客主题色。你可以先在博客右上角的调色板里挑选喜欢的颜色，再把数值写回配置中。
banner：src：即banner图片，支持http/https URL
favicon：src：即网站图标，支持http/https URL
links：即友情链接，这些链接在导航栏上
avatar：你的头像
name：你的名字
bio：个性签名，会显示在头像和名字下方
NavBarConfig 用于配置导航栏链接，ProfileConfig 用于配置个人资料区域的链接，效果如下图所示。
icon：你可以前往 icones.js 搜索想要的图标。例如 QQ 可以填写 fa6-brands:qq。Fuwari 默认支持 fa6-brands、fa6-regular、fa6-solid、material-symbols 等类型，必要时也可以在 astro.config.mjs 中继续扩展。
这里我附上我的 config.ts

import type {
  LicenseConfig,
  NavBarConfig,
  ProfileConfig,
  SiteConfig,
} from './types/config'
import { LinkPreset } from './types/config'

export const siteConfig: SiteConfig = {
  title: 'AcoFork Blog',
  subtitle: '爱你所爱！',
  lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
  themeColor: {
    hue: 355,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
    fixed: false,     // Hide the theme color picker for visitors
  },
  banner: {
    enable: true,
    src: 'https://eo-r2.2x.nz/myblog/img/222.webp',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
    position: 'center',      // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
    credit: {
      enable: false,         // Display the credit text of the banner image
      text: '',              // Credit text to be displayed
      url: ''                // (Optional) URL link to the original artwork or artist's page
    }
  },
  favicon: [    // Leave this array empty to use the default favicon
     {
       src: 'https://q2.qlogo.cn/headimg_dl?dst_uin=2973517380&spec=5',    // Path of the favicon, relative to the /public directory
       //theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
       sizes: '128x128',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
     }
  ]
}

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    {
      name: '随机图',
      url: 'https://pic.onani.cn',     // Internal links should not include the base path, as it is automatically added
      external: true,                               // Show an external link icon and will open in a new tab
    },
    {
      name: 'GitHub',
      url: 'https://github.com/saicaca/fuwari',     // Internal links should not include the base path, as it is automatically added
      external: true,                               // Show an external link icon and will open in a new tab
    },
  ],
}

export const profileConfig: ProfileConfig = {
  avatar: 'https://eo-r2.2x.nz/myblog/img/111.webp',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
  name: '二叉树树',
  bio: 'Protect What You Love./爱你所爱！',
  links: [
    // {
      // name: 'Twitter',
      // icon: 'fa6-brands:twitter',       // Visit https://icones.js.org/ for icon codes
                                        // You will need to install the corresponding icon set if it's not already included
                                        // `pnpm add @iconify-json/<icon-set-name>`
      // url: 'https://twitter.com',
    // },
    // {
      // name: 'Steam',
      // icon: 'fa6-brands:steam',
      // url: 'https://store.steampowered.com',
    // },
    {
      name: 'GitHub',
      icon: 'fa6-brands:github',
      url: 'https://github.com/afoim',
    },
    {
      name: 'QQ',
      icon: 'fa6-brands:qq',
      url: 'https://qm.qq.com/q/Uy9kmDXHYO',
    },
    {
      name: 'Email',
      icon: 'fa6-solid:envelope',
      url: 'mailto:email@example.com',
    },
  ],
}

export const licenseConfig: LicenseConfig = {
  enable: true,
  name: 'CC BY-NC-SA 4.0',
  url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
}

清理多余文件。根目录下的 src/content/posts 文件夹里会带有一些示例文章，这些内容主要用于演示 Markdown 语法和 Fuwari 的基本用法。你可以先备份到别处，再按需删除。
完成这些设置后，就可以开始撰写自己的文章了。

让我们开始写作！

推荐使用黑曜石（Obsidian）

首先，在项目根目录执行：pnpm new-post <这里填写你的文章标题>
然后，在根目录下的 src/content/posts 文件夹中会多出一个 xxx.md文件
用 MarkText 打开这个文件后，你会看到一组基础元数据，其中有几项最需要关注。
```
title: xxx
published: 2024-10-14
description: ''
image: ''
tags: []
categories: ''
draft: false 
lang: ''
```
- title：文章标题
- published：文章创建时间
- description：文章描述，正常会显示在文章标题下面
- image：文章封面图（同目录需要写 ./ 如：./https://eo-r2.2x.nz/myblog/img/2024-10-14-11-33-28-image.webp）
- tag：文章标签
- categories：文章分类
还需要修改根目录下的 astro.config.mjs，把其中的 site: 改成你自己的站点 URL，例如：site: "https://onani.cn",。
如果你想在 Markdown 文章里方便地插入图片，也可以顺手把编辑器配置好。
这并不复杂。借助 MarkText，可以像使用传统博客编辑器一样直接复制粘贴图片，不过需要先做一点简单配置：

依次点击 MarkText 左上角菜单 -> File -> Preferences -> 左侧 Image 分类，然后按照下图进行设置。注意把第一个选项改成以 Copy 开头的模式，开启 Prefer 开关，并在上下两个文本框中分别填写绝对路径和相对路径。
这样一来，插入图片时就会先把图片复制到 https://eo-r2.2x.nz/myblog/img 对应的位置，再自动以 ![1](https://eo-r2.2x.nz/myblog/img/1.webp) 这样的格式写入 Markdown 文件。你只需要复制粘贴，剩下的步骤 MarkText 会自动完成。

配置完成后，你就可以比较高效地用 MarkText 编写 Markdown 博文了。

本地预览，然后发布到Github

当你觉得文章写得差不多时，可以在项目根目录执行：pnpm dev。稍等片刻后，就能在本地预览博客效果。
接下来就可以使用 Git 把这些改动发布到 GitHub。

首先，让 Git 知道你是谁：git config --global user.name "你的GitHub用户名" 和 git config --global user.email "你的GitHub邮箱@example.com"
然后，将远程仓库地址改成 SSH 形式（如果你本来就是通过 SSH 克隆的，就不需要再修改）：git remote set-url origin git@github.com:xxx/xxx
随后，提交所有变更：git add .
接着，创建一次本地提交：git commit -m "项目初始化"
最后，把本地更改推送到远程仓库：git push

完成后，你的 GitHub 仓库里就应该能看到新的提交记录了。

让Cloudflare连接上Github，使用Pages服务展示你的博客（FREE！）

前往Cloudflare的 Workers 和 Pages 页面，创建一个新Pages
然后选择连接Git存储库，连接你的Github，随后设置构建命令：pnpm build ，然后设置构建输出目录：dist ，如图
绑定自定义域，访问自定义域即可访问你的博客！
随后，你只需要在本地编写文章，然后使用Git将更改推送到远程仓库，Cloudflare就会自动部署，更新你的博客！

隐私政策

Thu, 31 Dec 1998 19:20:15 GMT

[!NOTE] 站点合规说明：本页面为本博客（夢酷の Blog）的 Cookie 与数据隐私政策说明，整理于此供访客查阅。

All Cookies

Strictly necessary cookies（必要的cookies）

Cloudflare Analytics：收集站点的基本访问情况
Umami：收集站点的基本访问情况
Giscus：提供评论功能

Functionality cookies（功能性cookies）

Tracking cookies（追蹤cookies）

百度统计：收集站点的基本访问情况
Google Analytics：收集站点访问情况
Microsoft Clarity：收集站点访问情况

Targeting and advertising cookies（定位和廣告cookies）

Google Adsense：提供广告服务

latest update: 2026/02/04

夢酷 の Blog