Yuer6327 Blog

记高中三年最后一餐盒饭

Sat, 30 May 2026 00:00:00 GMT

记高中三年最后一餐盒饭

<font color="#595959">鄙人高二，只是高三待遇好点不吃盒饭了</font>

即使是最后一次，好像跟之前的无数次并没有什么不一样的

想到了要珍惜，想到了值得怀念，但嘴还是很诚实的没有做到光盘

总是想怀念些什么，但作为17岁的我们又有什么是真的值得怀念的呢？

人类能回忆起的最早记忆平均可以追溯到两岁半，大脑在20多岁时达到巅峰状态，然后开始逐渐衰退。

而作为“巅峰”时期的我们，却天天囿于寻找意义之中，意义何在呢？

Fuwari「稍后再读」功能

Fri, 29 May 2026 00:00:00 GMT

在文章页面添加「稍后再读」书签按钮，点击后文章内容自由落体掉出屏幕、侧栏列表静默刷新，同时支持在侧栏点击已收藏文章直接跳转。纯前端 localStorage 存储，无后端依赖。

:::important Fuwari 使用 Swup 4 做页面切换，侧栏（包括「稍后再读」widget）位于 #swup-container 外部，不受 Swup DOM 替换影响。所有交互脚本必须使用 <script is:inline> 以保证在 Swup 切页后仍可执行。 :::

一、数据结构

使用 localStorage 存储，key 为 readLater，值为 JSON 数组，上限 20 条，最新添加的排在最前：

[
  {
    "slug": "post-slug",
    "title": "文章标题",
    "url": "/posts/post-slug/",
    "addedAt": 1716950000000
  }
]

slug：文章标识，用于去重判断
url：相对路径（/posts/xxx/），兼容 Swup 的 navigate() 方法
addedAt：Date.now() 时间戳，用于显示"5分钟前"等相对时间

二、i18n 配置

2.1 新增枚举

编辑 src/i18n/i18nKey.ts，在枚举末尾追加：

readLater = "readLater",
readLaterAdd = "readLaterAdd",
readLaterRemove = "readLaterRemove",
readLaterEmpty = "readLaterEmpty",

2.2 各语言翻译

编辑 src/i18n/languages/*.ts（共 9 个文件），在 translation 对象中追加对应的 key-value。以 zh_CN.ts 和 en.ts 为例：

// zh_CN.ts
[I18nKey.readLater]: "稍后再读",
[I18nKey.readLaterAdd]: "加入稍后再读",
[I18nKey.readLaterRemove]: "移除稍后再读",
[I18nKey.readLaterEmpty]: "暂无文章",

// en.ts
[I18nKey.readLater]: "Read Later",
[I18nKey.readLaterAdd]: "Add to Read Later",
[I18nKey.readLaterRemove]: "Remove from Read Later",
[I18nKey.readLaterEmpty]: "No saved articles",

2.3 类型声明

编辑 src/global.d.ts，在 Window 接口中添加：

ReadLaterStore?: {
    getList: () => Array<{slug: string; title: string; url: string; addedAt: number}>;
    saveList: (list: Array<{slug: string; title: string; url: string; addedAt: number}>) => void;
    has: (slug: string) => boolean;
    add: (item: {slug: string; title: string; url: string}) => void;
    remove: (slug: string) => void;
    renderButton: () => void;
    renderSidebar: () => void;
    pulseReadLaterCard: () => void;
};

三、ReadLaterButton 组件

新建 src/components/ReadLaterButton.astro，放在文章标题右侧，与 ShareButton 并列。

3.1 模板

两个图标切换显示：未收藏时显示 bookmark-outline，已收藏时显示实心 bookmark，通过 CSS 类 .saved 控制显隐。

---
import { Icon } from "astro-icon/components";

interface Props {
    slug: string;
    title: string;
    url: string;
    class?: string;
}
const { slug, title, url } = Astro.props;
const className = Astro.props.class || "";
---

<div class:list={["readlater-container inline-flex items-center", className]}>
    <button
        id="read-later-btn"
        class="readlater-btn btn-plain rounded-lg h-9 w-9 flex items-center justify-center"
        data-slug={slug}
        data-title={title}
        data-url={url}
        aria-label="稍后再读"
    >
        <Icon name="material-symbols:bookmark-outline-rounded" class="readlater-icon text-[1.1rem]" />
        <Icon name="material-symbols:bookmark-rounded" class="readlater-active-icon text-[1.1rem]" />
    </button>
</div>

3.2 样式

使用 <style is:inline>，因为按钮的 .saved 类由 JS 动态添加，Astro 的 scoped style 无法匹配。

.readlater-container { display: inline-flex; align-items: center; }
.readlater-btn .readlater-icon { display: inline; }
.readlater-btn .readlater-active-icon { display: none; }
.readlater-btn.saved .readlater-icon { display: none; }
.readlater-btn.saved .readlater-active-icon { display: inline; }
.readlater-btn.saved { color: var(--primary) !important; }

3.3 ReadLaterStore 全局对象

整个功能的核心是 window.ReadLaterStore，一个挂载在 window 上的全局对象，被按钮组件和侧栏 widget 共享。使用 if (!window.ReadLaterStore) 守卫，确保无论哪个组件先加载，都只初始化一次。

if (!window.ReadLaterStore) {
    var STORE_KEY = 'readLater';
    var MAX_ITEMS = 20;

    window.ReadLaterStore = {
        getList: function() {
            try { return JSON.parse(localStorage.getItem(STORE_KEY)) || []; }
            catch(e) { return []; }
        },
        saveList: function(list) {
            try {
                if (list.length > MAX_ITEMS) list = list.slice(0, MAX_ITEMS);
                localStorage.setItem(STORE_KEY, JSON.stringify(list));
            } catch(e) {}
        },
        has: function(slug) {
            return this.getList().some(function(i) { return i.slug === slug; });
        },
        add: function(item) {
            // 先过滤掉同 slug 条目，再插入最前面，天然去重且保留最新
            var list = this.getList().filter(function(i) { return i.slug !== item.slug; });
            list.unshift({
                slug: item.slug, title: item.title,
                url: item.url, addedAt: Date.now()
            });
            this.saveList(list);
        },
        remove: function(slug) {
            var list = this.getList().filter(function(i) { return i.slug !== slug; });
            this.saveList(list);
        },
        // ... renderButton / renderSidebar / pulseReadLaterCard
    };
}

renderButton() 同步按钮的视觉状态（检查 localStorage 中是否有当前文章 slug），renderSidebar() 重绘侧栏列表 HTML，两者均在 add/remove 后立即调用。

3.4 自由落体动画

这是实现中最复杂的部分。需求是：点击收藏后，文章内容向下掉落并消失，同时露出首页内容，整个过程没有页面刷新感。

克隆策略

核心矛盾：如果直接隐藏原始内容（visibility: hidden），内容区会变空白，看起来像"刷新"。

解决方案：不隐藏原内容，克隆 #content-wrapper 并用 position: fixed + z-index: 60 覆盖在原内容上方。原内容始终可见，被克隆体遮住，用户无感。

function prepareFallClone() {
    var contentEl = document.getElementById('content-wrapper');
    if (!contentEl) return null;
    var rect = contentEl.getBoundingClientRect();

    var clone = contentEl.cloneNode(true);
    clone.removeAttribute('id');
    clone.style.cssText =
        'position:fixed;left:' + rect.left + 'px;top:' + rect.top + 'px;' +
        'width:' + rect.width + 'px;height:' + rect.height + 'px;' +
        'z-index:60;margin:0;overflow:hidden;pointer-events:none;' +
        'will-change:transform,opacity;transform-origin:center center;' +
        'opacity:1;animation:none;';  // ← 关键：覆盖 onload-animation 的 opacity:0
    document.body.appendChild(clone);
    // 不隐藏原内容 —— 克隆体遮着，无空白闪烁
    return { clone: clone, contentEl: contentEl };
}

:::caution[必须设置 animation:none] #content-wrapper 带有 onload-animation 类（opacity: 0; animation: 300ms fade-in-up）。克隆体会继承这个动画并从头播放，导致克隆体初始 opacity: 0 而完全不可见。必须在 inline style 中显式设置 opacity:1;animation:none; 覆盖。 :::

动画与 Fetch 并行

动画和首页数据获取同时进行。两个异步任务通过 cloneDone 和 fetchDone 两个布尔标志协调，只有两者都完成时才执行 reveal() 替换内容：

function animateFallClone(state, callback) {
    var clone = state.clone;
    var cloneDone = false, fetchDone = false, newContentEl = null;

    function reveal() {
        if (!cloneDone || !fetchDone) return;  // 两者都就绪才执行
        if (clone.parentNode) clone.remove();
        if (newContentEl) {
            newContentEl.style.opacity = '1';   // 瞬间显示，无渐显
            newContentEl.style.transition = '';
        }
        window.scrollTo(0, 0);
        if (window.ReadLaterStore) window.ReadLaterStore.renderSidebar();
        callback();
    }

    // CSS Transition: 自由落体
    requestAnimationFrame(function() {
        requestAnimationFrame(function() {
            clone.style.transition = 'transform 1s cubic-bezier(0.4,0,1,1), opacity 1s ease-in';
            clone.style.transform = 'translateY(120vh) scale(0.3)';
            clone.style.opacity = '0';
        });
    });

    clone.addEventListener('transitionend', function() { cloneDone = true; reveal(); });
    setTimeout(function() { cloneDone = true; reveal(); }, 1500); // 安全超时

    // Fetch 首页 HTML
    fetch(window.location.origin + '/')
        .then(function(r) { return r.text(); })
        .then(function(html) {
            var doc = new DOMParser().parseFromString(html, 'text/html');
            var newSwup = doc.getElementById('swup-container');
            var swupEl = document.getElementById('swup-container');
            if (newSwup && swupEl) {
                swupEl.innerHTML = newSwup.innerHTML;  // 替换内容区
                newContentEl = document.getElementById('content-wrapper');
                if (newContentEl) {
                    newContentEl.style.opacity = '0';   // 先隐藏，等动画结束再显示
                    newContentEl.style.transition = 'none';
                }
            }
            fetchDone = true;
            reveal();
        })
        .catch(function() { window.location.href = '/'; });  // fallback
}

:::important[为什么用 fetch + innerHTML 而不是 swup.navigate()？] swup.navigate('/') 会触发 Swup 自己的退出动画（约 300ms），在动画期间内容区 opacity: 0，用户会看到明显的内容消失再出现。用 fetch + innerHTML 直接替换内容，配合 opacity:0 → 1 瞬间切换，完全跳过 Swup 的动画周期，实现真正的"无刷新"。 :::

时序图

点击书签
├─ prepareFallClone()    → 克隆体创建，覆盖在原内容上方
├─ localStorage.add()    → 写入数据（被克隆体遮住，用户无感）
├─ renderButton()        → 按钮变为已收藏状态
├─ renderSidebar()       → 侧栏列表更新（被克隆体遮住）
│
├─ animateFallClone()
│   ├─ [并行] clone: translateY(120vh) scale(0.3) opacity:0   ← 1秒
│   ├─ [并行] fetch('/') → 获取首页 HTML → 替换 #swup-container
│   │                      → newContentEl opacity:0（先隐藏）
│   └─ 两者都完成 → reveal()
│       → 移除克隆体
│       → newContentEl opacity:1（瞬间显示首页）
│       → renderSidebar()

四、侧栏 Widget

新建 src/components/widget/ReadLater.astro，使用 Fuwari 原生的 WidgetLayout 壳子。

4.1 模板

---
import I18nKey from "../../i18n/i18nKey";
import { i18n } from "../../i18n/translation";
import WidgetLayout from "./WidgetLayout.astro";

interface Props { class?: string; style?: string; }
const className = Astro.props.class;
const style = Astro.props.style;
---

<WidgetLayout name={i18n(I18nKey.readLater)} id="read-later" class={className} style={style}>
    <div id="read-later-content">
        <div id="read-later-empty" class="hidden text-sm text-black/50 dark:text-white/50 py-1">
            {i18n(I18nKey.readLaterEmpty)}
        </div>
        <div id="read-later-list" class="flex flex-col gap-0.5"></div>
    </div>
</WidgetLayout>

4.2 侧栏列表渲染

侧栏组件的 <script is:inline> 中也包含一个 ReadLaterStore 定义（带 if (!window.ReadLaterStore) 守卫），以及独立的 renderReadLaterSidebar() 函数。

关键点是事件委托：列表的点击事件绑定在 #read-later-list 容器上，而不是每个 <a> 标签上。这样无论列表内容如何更新（innerHTML 重写），点击处理始终有效：

var __readLaterListDelegated = false;

function renderReadLaterSidebar() {
    var listEl = document.getElementById('read-later-list');
    var emptyEl = document.getElementById('read-later-empty');
    if (!listEl) return;
    var items = window.ReadLaterStore.getList();

    // 事件委托：只绑定一次
    if (!__readLaterListDelegated) {
        __readLaterListDelegated = true;
        listEl.addEventListener('click', function(e) {
            var link = e.target.closest('a[data-slug]');
            if (!link) return;
            e.preventDefault();
            var slug = link.dataset.slug;
            var url = link.getAttribute('href');
            // 先从列表中删除，再跳转
            if (window.ReadLaterStore) {
                window.ReadLaterStore.remove(slug);
                renderReadLaterSidebar();
            }
            if (url) {
                if (window.swup && window.swup.navigate) {
                    window.swup.navigate(url);  // SPA 跳转，无全量刷新
                } else {
                    window.location.href = url;
                }
            }
        });
    }

    // 渲染列表条目（带 data-slug 属性供事件委托使用）
    if (items.length === 0) {
        listEl.innerHTML = '';
        if (emptyEl) emptyEl.classList.remove('hidden');
        return;
    }
    if (emptyEl) emptyEl.classList.add('hidden');
    listEl.innerHTML = items.map(function(item) {
        return '<a href="' + item.url + '" data-slug="' + item.slug + '" ' +
            'class="read-later-item btn-plain rounded-lg w-full h-9 px-2 ' +
            'flex items-center gap-2 text-sm cursor-pointer ...">' +
            '<span class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">' +
                item.title.replace(/</g, '&lt;') + '</span>' +
            '<span class="text-xs text-black/30 dark:text-white/30 shrink-0">' +
                timeAgo(item.addedAt) + '</span>' +
            '</a>';
    }).join('');
}

侧栏 widget 还注册了 Swup 的 page:view 钩子，在每次切页后重新渲染列表（此时列表 DOM 已被 Swup 替换为初始空状态）：

window.swup.hooks.on('page:view', function() {
    setTimeout(function() { renderReadLaterSidebar(); }, 50);
});

五、接入页面

5.1 文章页

编辑 src/pages/posts/[...slug].astro，在 PostMetadata 旁插入 ReadLaterButton：

import ReadLaterButton from "../../components/ReadLaterButton.astro";

// 在 metadata 区域：
<div class="flex items-start gap-4 mb-5">
    <PostMetadata class="flex-1 min-w-0 overflow-hidden" ... />
    <div class="flex items-center gap-1 shrink-0">
        <ReadLaterButton slug={getEntrySlug(entry)} title={entry.data.title} url={Astro.url.pathname} />
        <ShareButton title={entry.data.title} url={postUrl} />
    </div>
</div>

url 使用 Astro.url.pathname（相对路径 /posts/xxx/）而非完整 URL，保证 Swup 的 navigate() 方法能正确匹配路由。

PostMetadata 加 overflow-hidden 确保窄屏时内部内容被裁剪而不是把按钮挤出容器。

5.2 侧栏

编辑 src/components/widget/SideBar.astro，在 Weather 和 Tag 之间插入 ReadLater widget：

import ReadLater from "./ReadLater.astro";

<Weather class="onload-animation" style="animation-delay: 150ms"></Weather>
<ReadLater class="onload-animation" style="animation-delay: 200ms"></ReadLater>
<Tag class="onload-animation" style="animation-delay: 250ms"></Tag>
<Categories class="onload-animation" style="animation-delay: 300ms"></Categories>

侧栏位于 #swup-container 外部（Fuwari 的 grid 布局中独占一列），Swup 的 containers: ["#swup-container", "#toc"] 配置不包含侧栏，因此 Swup 切页时侧栏 DOM 不会被替换，widget 脚本无需重复执行。

六、踩坑记录

克隆体不可见

#content-wrapper 带有 onload-animation 类（opacity: 0; animation: 300ms fade-in-up）。cloneNode(true) 会继承这个类，克隆体追加到 <body> 后动画从头播放，初始 opacity: 0 导致克隆体完全隐形。

修复：在克隆体的 inline style 中设置 opacity:1;animation:none; 覆盖继承的动画。

侧栏跟随掉落

最初克隆整个 #main-grid（含侧栏），导致侧栏跟着一起掉。改为只克隆 #content-wrapper（纯内容列），侧栏不在克隆范围内，始终保持不动。

内容注入闪烁

swupEl.innerHTML = newSwup.innerHTML 替换内容后，新的 #content-wrapper 带有 onload-animation 类，从 opacity: 0 渐显到 1，造成"空白闪烁"。

修复：注入后立即设置 newContentEl.style.opacity = '0'，等动画克隆体消失后（reveal()）再瞬间设为 1，无渐显过渡。

侧栏点击全量刷新

最初侧栏链接使用 window.location.href = url，导致整页刷新。改用 window.swup.navigate(url) 做 SPA 跳转，只替换 Swup 容器内容，侧栏和其他区域不受影响。

七、文件清单

文件	操作	说明
`src/i18n/i18nKey.ts`	修改	新增 4 个枚举值
`src/i18n/languages/*.ts`（9个）	修改	各语言翻译
`src/global.d.ts`	修改	`ReadLaterStore` 类型声明
`src/components/ReadLaterButton.astro`	新建	书签按钮 + 自由落体动画 + `ReadLaterStore`
`src/components/widget/ReadLater.astro`	新建	侧栏 widget + 事件委托 + Swup 钩子
`src/pages/posts/[...slug].astro`	修改	插入 `ReadLaterButton`
`src/components/widget/SideBar.astro`	修改	插入 `ReadLater` widget

Fuwari 匿名留言板功能

Sat, 23 May 2026 00:00:00 GMT

在博客中添加一个 /board/ 页面，读者可以匿名发布最多 200 字的短消息，支持自定义头像（邮箱 Gravatar 或直链图片），留言以社交动态流的形式展示。数据存储在 Supabase 中，全程客户端原生 JS 实现，不引入额外依赖。

demo：说说

一、Supabase 数据库设置

1. 建表

进入 Supabase 项目的 SQL Editor，执行：

CREATE TABLE messages (
    id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
    content text NOT NULL CHECK (char_length(content) <= 200 AND char_length(content) > 0),
    nickname text DEFAULT '匿名',
    avatar text DEFAULT '',
    fingerprint text NOT NULL,
    created_at timestamptz DEFAULT now()
);

-- 启用行级安全策略
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;

-- 公开读取
CREATE POLICY "public_select" ON messages
    FOR SELECT USING (true);

-- 公开写入
CREATE POLICY "public_insert" ON messages
    FOR INSERT WITH CHECK (true);

-- 允许删除（实际所有权校验在客户端通过 fingerprint 完成）
CREATE POLICY "owner_delete" ON messages
    FOR DELETE USING (true);

字段说明：

字段	类型	用途
`id`	uuid	主键，自动生成
`content`	text	留言内容，最长 200 字，数据库层面用 CHECK 约束
`nickname`	text	昵称，默认"匿名"
`avatar`	text	头像 URL（已解析后的），默认空字符串表示使用首字彩色圆圈
`fingerprint`	text	浏览器指纹，用于标识匿名用户身份
`created_at`	timestamptz	创建时间，默认当前时间

删除策略用 USING (true) 是因为 RLS 无法直接匹配客户端计算的 fingerprint。实际的"只能删除自己的留言"逻辑在客户端实现：删除请求的 URL 同时携带 id=eq.X 和 fingerprint=eq.Y 两个条件，PostgREST 只删除同时满足两者的行。对于匿名留言板这个安全等级足够。

2. 获取凭据

如果之前做过文章反应功能，Supabase 凭据已经配置好了，跳过此步。

否则进入 Supabase 控制台 → Settings → API，记录 Project URL 和 anon public key，写入 .env：

PUBLIC_SUPABASE_URL=https://xxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJ...

部署在 Cloudflare Pages 的话，在 Pages → Settings → Environment variables 中同步添加。

二、创建留言板页面

新建 src/pages/board.astro。

页面采用社交动态流风格，不使用卡片堆叠。结构分为四个区域：标题栏、输入区、消息列表、加载更多。

---
import MainGridLayout from "../layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
---

<MainGridLayout title="说说" description="留言板 - 分享碎片化的想法">
    <!-- 页面标题栏 -->
    <div class="flex items-center gap-3 mb-6 onload-animation"
         style="animation-delay: var(--content-delay)">
        <div class="w-9 h-9 rounded-lg bg-[var(--btn-regular-bg)] flex items-center justify-center">
            <Icon name="material-symbols:chat-bubble-outline-rounded"
                  class="text-lg text-[var(--btn-content)]" />
        </div>
        <h1 class="text-2xl font-bold text-90">说说</h1>
        <span id="board-count" class="text-sm text-50 ml-auto"></span>
    </div>

    <!-- 输入区域 -->
    <div class="rounded-2xl bg-[var(--card-bg)] transition-all duration-300
                ease-out mb-6 onload-animation overflow-hidden"
         style="animation-delay: calc(var(--content-delay) + 50ms)">
        <!-- 收起态：单行提示 -->
        <div id="compose-collapsed"
             class="flex items-center gap-3 px-4 py-3 cursor-text group">
            <div class="w-8 h-8 rounded-full flex items-center justify-center
                        flex-shrink-0"
                 style="background: oklch(0.75 0.14 var(--hue) / 0.15)">
                <Icon name="material-symbols:edit-rounded"
                      class="text-sm text-[var(--primary)]" />
            </div>
            <div class="text-50 text-sm group-hover:text-[var(--primary)]
                        transition flex-1">
                分享你的想法...
            </div>
            <button class="btn-regular rounded-lg h-8 px-3 text-xs font-medium
                           active:scale-95 opacity-50 pointer-events-none">
                发布
            </button>
        </div>
        <!-- 展开态 -->
        <div id="compose-expanded" class="compose-panel">
            <!-- 昵称 + 头像预览 -->
            <div class="flex items-center gap-2 mb-3 pb-2
                        border-b border-dashed border-[var(--line-divider)]">
                <div id="compose-avatar-preview"
                     class="w-8 h-8 rounded-full flex items-center justify-center
                            flex-shrink-0 text-xs font-bold text-white overflow-hidden"
                     style="background: oklch(0.75 0.14 var(--hue) / 0.3)">
                    <Icon name="material-symbols:person-rounded"
                          class="text-sm text-[var(--primary)]" />
                </div>
                <input id="compose-nickname" type="text" maxlength="20"
                    placeholder="昵称 (选填，默认匿名)"
                    class="flex-1 bg-transparent text-90 text-sm outline-none
                           placeholder:text-50 placeholder:text-sm" />
            </div>
            <!-- 头像输入 -->
            <input id="compose-avatar" type="text" maxlength="200"
                placeholder="头像：邮箱 或 图片链接 (选填)"
                class="w-full mb-2 bg-transparent text-90 text-sm outline-none
                       placeholder:text-50 placeholder:text-xs pb-2
                       border-b border-dashed border-[var(--line-divider)]" />
            <!-- 内容输入 -->
            <textarea id="compose-textarea" maxlength="200" rows="3"
                placeholder="说点什么吧..."
                class="w-full min-h-[5rem] bg-transparent text-90 text-sm
                       resize-none outline-none placeholder:text-50
                       placeholder:text-sm"></textarea>
            <!-- 底部操作栏 -->
            <div class="flex items-center justify-between mt-3 pt-3
                        border-t border-dashed border-[var(--line-divider)]">
                <span id="char-count" class="text-30 text-xs">0 / 200</span>
                <div class="flex items-center gap-2">
                    <span id="board-error"
                          class="text-sm text-red-500 hidden"></span>
                    <button id="compose-cancel"
                            class="btn-plain rounded-lg h-8 px-3 text-xs
                                   font-medium">
                        取消
                    </button>
                    <button id="compose-submit"
                            class="btn-regular rounded-lg h-8 px-4 text-xs
                                   font-medium active:scale-95 opacity-50
                                   pointer-events-none">
                        发布
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息列表容器，由 JS 动态填充 -->
    <div id="board-messages" data-initialized="false" data-offset="0">
        <div id="board-loading"
             class="flex flex-col items-center justify-center py-16">
            <div class="w-12 h-12 rounded-full bg-[var(--btn-regular-bg)]
                        flex items-center justify-center mb-3 animate-pulse">
                <Icon name="material-symbols:progress-activity"
                      class="text-xl text-[var(--btn-content)] animate-spin" />
            </div>
            <div class="text-50 text-sm">加载中...</div>
        </div>
    </div>

    <!-- 空状态 -->
    <div id="board-empty"
         class="hidden flex-col items-center justify-center py-20 text-center">
        <div class="w-16 h-16 rounded-full bg-[var(--btn-regular-bg)]
                    flex items-center justify-center mb-4">
            <Icon name="material-symbols:chat-bubble-outline-rounded"
                  class="text-3xl text-[var(--btn-content)]" />
        </div>
        <div class="text-75 text-base font-medium mb-2">还没有说说</div>
        <div class="text-50 text-sm">快来发布第一条想法吧</div>
    </div>

    <!-- 加载更多 -->
    <div id="board-load-more-area"
         class="hidden flex-col items-center py-6 gap-3">
        <button id="board-load-more"
                class="btn-regular rounded-lg h-9 px-6 text-sm font-medium
                       active:scale-95">
            加载更多
        </button>
    </div>
    <div id="board-load-more-loading"
         class="hidden flex items-center justify-center gap-2 py-6 text-50
                text-sm">
        <Icon name="material-symbols:progress-activity"
              class="text-base animate-spin" />
        加载中...
    </div>
    <div id="board-no-more"
         class="hidden text-center py-6 text-30 text-sm">
        - 没有更多了 -
    </div>

    <!-- 展开动画和头像预览样式 -->
    <style is:inline>
        #compose-collapsed:hover .btn-regular {
            opacity: 0.85;
            pointer-events: auto;
        }
        .compose-panel {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            padding: 0 1rem;
            transition: max-height 0.35s ease-out,
                        opacity 0.25s ease-out,
                        padding 0.3s ease-out;
        }
        .compose-panel.expanded {
            max-height: 400px;
            opacity: 1;
            padding: 1rem;
        }
        #compose-avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 9999px;
        }
    </style>
</MainGridLayout>

要点说明：

展开动画：收起态和展开态不用 hidden 类切换（瞬间跳变），而是用 max-height + opacity 过渡。.compose-panel 默认 max-height: 0; opacity: 0，添加 .expanded 类后过渡到 max-height: 400px; opacity: 1，配合 padding 变化实现平滑展开收起
头像预览：compose-avatar-preview 是一个 8×8 的圆形区域，输入头像地址后 JS 会自动更新其内容为 <img> 标签
样式使用 <style is:inline>：与 Reactions 组件一致，避免 Astro 的 scoped style 属性选择器干扰动态 DOM
onload-animation：标题栏和输入区域各自带递增的 animation-delay，复用 Fuwari 已有的 fade-in-up 入场动画

三、Layout.astro 添加交互逻辑

在 Layout.astro 的主 <script> 块中，initReactions() 函数之后添加 initBoardMessages()。

1. 辅助函数

相对时间

function timeAgo(dateStr) {
    const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
    if (seconds < 60) return '刚刚';
    const minutes = Math.floor(seconds / 60);
    if (minutes < 60) return `${minutes}分钟前`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}小时前`;
    const days = Math.floor(hours / 24);
    if (days < 30) return `${days}天前`;
    const months = Math.floor(days / 30);
    return `${months}个月前`;
}

XSS 转义

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

所有用户输入（昵称、内容）在插入 innerHTML 前必须经过这个函数。textContent 赋值时浏览器会自动转义 <、>、& 等字符，再通过 innerHTML 读出的就是安全的 HTML 实体。

头像 URL 解析

async function resolveAvatarUrl(raw) {
    const trimmed = raw.trim();
    if (!trimmed) return '';
    if (trimmed.includes('@')) {
        // 邮箱 → loli.net Gravatar 镜像 (SHA-256)
        const data = new TextEncoder().encode(trimmed.toLowerCase());
        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
        const hash = Array.from(new Uint8Array(hashBuffer))
            .map(b => b.toString(16).padStart(2, '0')).join('');
        return `https://gravatar.loli.net/avatar/${hash}?d=404`;
    }
    return trimmed; // 直链直接返回
}

两种头像来源的判断逻辑：包含 @ 视为邮箱，计算 SHA-256 哈希后拼接 Gravatar 镜像地址；否则视为直链图片 URL。

Gravatar 标准使用 MD5 哈希邮箱，但 gravatar.loli.net 同时支持 SHA-256。使用 SHA-256 的原因是浏览器原生的 SubtleCrypto API 只提供 SHA 系列哈希，无需额外引入 MD5 库。

?d=404 参数表示：如果该邮箱没有设置 Gravatar 头像，返回 404 而非默认图片。前端检测到 404 后会回退显示首字彩色圆圈。

头像 HTML 生成

function getAvatarHtml(avatarUrl, nickname) {
    const firstChar = (nickname || '匿').charAt(0);
    const hue = (firstChar.charCodeAt(0) * 37) % 360;
    if (avatarUrl) {
        return `<div class="w-10 h-10 rounded-full flex-shrink-0
                            overflow-hidden bg-[var(--btn-regular-bg)]">
            <img src="${escapeHtml(avatarUrl)}" alt=""
                 class="w-full h-full object-cover"
                 onerror="this.parentElement.innerHTML='...'"/>
        </div>`;
    }
    // 无头像：显示首字彩色圆圈
    return `<div class="..." style="background-color: oklch(0.65 0.15 ${hue})">
        ${escapeHtml(firstChar)}
    </div>`;
}

头像颜色由昵称首字的 Unicode 编码确定性生成：charCode * 37 % 360 映射到 oklch 色环的 0-359 度。同一个昵称总是同一个颜色。oklch 的 C（色度）和 L（亮度）固定，只变化 H（色相），保证所有头像的视觉亮度和饱和度一致。

onerror 回退逻辑：<img> 加载失败时（404 或网络错误），把父容器的 innerHTML 替换为首字圆圈。这样即使用户填错了图片地址，也不会显示破碎图片图标。

2. 消息列表渲染

function createMessageEl(msg, animate) {
    const el = document.createElement('div');
    el.className = animate ? 'msg-enter' : '';
    el.dataset.msgId = msg.id;
    const isOwner = msg.fingerprint === fingerprint;
    el.innerHTML = `
        <div class="flex gap-3 py-5 px-1 group">
            ${getAvatarHtml(msg.avatar || '', msg.nickname || '匿名')}
            <div class="flex-1 min-w-0">
                <div class="flex items-baseline gap-2 mb-1.5">
                    <span class="font-bold text-sm text-90">
                        ${escapeHtml(msg.nickname || '匿名')}
                    </span>
                    <span class="text-30 text-xs">
                        ${timeAgo(msg.created_at)}
                    </span>
                    ${isOwner ? '<button class="board-delete-btn ..." data-id="...">删除</button>' : ''}
                </div>
                <div class="text-75 text-sm leading-relaxed
                            break-words whitespace-pre-wrap">
                    ${escapeHtml(msg.content)}
                </div>
            </div>
        </div>
        <div class="border-t border-dashed border-black/10
                    dark:border-white/[0.15]"></div>
    `;
    return el;
}

要点说明：

每条消息是一行 flex 布局：左侧 10×10 圆形头像，右侧昵称 + 时间 + 内容
虚线分隔线复用了 Fuwari 的 PostCard 分隔线样式（border-dashed border-black/10 dark:border-white/[0.15]），自动适配亮暗主题
删除按钮用 opacity-0 group-hover:opacity-100 实现 hover 显示，不影响默认布局
animate 参数控制是否添加 msg-enter 类（入场动画），初始加载和加载更多用 true，后续追加用 false

3. 数据获取

async function fetchMessages(offset, limit) {
    const resp = await fetch(
        `${supabaseUrl}/rest/v1/messages?` +
        `select=id,content,nickname,avatar,fingerprint,created_at` +
        `&order=created_at.desc&limit=${limit}&offset=${offset}`,
        {
            headers: {
                'apikey': supabaseKey,
                'Authorization': `Bearer ${supabaseKey}`,
            },
            signal: controller.signal,
        }
    );
    if (!resp.ok) throw new Error(`Fetch failed: ${resp.status}`);
    return await resp.json();
}

使用 PostgREST 的 order=created_at.desc 实现最新消息在前，limit + offset 实现分页。每次加载 20 条。

4. 输入区域交互

展开收起通过切换 CSS 类实现：

const collapsed = document.getElementById('compose-collapsed');
const expanded = document.getElementById('compose-expanded');

function expandCompose() {
    collapsed.classList.add('hidden');
    expanded.classList.add('expanded');   // 触发 CSS 过渡动画
    textarea.focus();
}

function collapseCompose() {
    expanded.classList.remove('expanded');
    collapsed.classList.remove('hidden');
    textarea.value = '';
    // 昵称和头像不清除，保留供下次使用
}

collapsed.addEventListener('click', expandCompose);
cancelBtn.addEventListener('click', collapseCompose);

收起时清除内容但保留昵称和头像输入——这两个值已持久化到 localStorage，清除输入框只是视觉层面的，下次展开时会自动恢复。

头像输入带 500ms 防抖预览：

let avatarDebounce;
avatarInput.addEventListener('input', () => {
    clearTimeout(avatarDebounce);
    avatarDebounce = setTimeout(updateAvatarPreview, 500);
});

async function updateAvatarPreview() {
    const raw = avatarInput.value.trim();
    if (!raw) {
        // 无输入时显示默认 person 图标
        avatarPreview.innerHTML = '<svg ...>...</svg>';
        return;
    }
    const url = await resolveAvatarUrl(raw);
    avatarPreview.innerHTML = `<img src="${url}" onerror="..." />`;
}

防抖的原因：邮箱地址需要做 SHA-256 哈希，虽然是异步操作但频繁触发也无意义。500ms 内用户停止输入后才实际解析并加载预览图。

5. 提交留言

submitBtn.addEventListener('click', async () => {
    const content = textarea.value.trim();
    if (!content || content.length > 200) return;

    // 关键词过滤
    if (content.includes('徐博闻')) {
        errorEl.textContent = '内容包含不允许的词汇';
        errorEl.classList.remove('hidden');
        return;
    }

    // 30 秒冷却
    const lastSubmit = localStorage.getItem('board_last_submit');
    if (lastSubmit) {
        const elapsed = Date.now() - parseInt(lastSubmit);
        if (elapsed < 30000) {
            errorEl.textContent = `操作太频繁，请${Math.ceil((30000 - elapsed) / 1000)}秒后再试`;
            errorEl.classList.remove('hidden');
            return;
        }
    }

    const nickname = nicknameInput.value.trim() || '匿名';
    const avatarRaw = avatarInput.value.trim() || '';
    const avatar = avatarRaw ? await resolveAvatarUrl(avatarRaw) : '';

    const resp = await fetch(`${supabaseUrl}/rest/v1/messages`, {
        method: 'POST',
        headers: {
            'apikey': supabaseKey,
            'Authorization': `Bearer ${supabaseKey}`,
            'Content-Type': 'application/json',
            'Prefer': 'return=representation',
        },
        body: JSON.stringify({ content, nickname, avatar, fingerprint }),
    });

    const [newMsg] = await resp.json();

    // 持久化用户信息
    localStorage.setItem('board_nickname', nickname);
    if (avatarRaw) localStorage.setItem('board_avatar', avatarRaw);
    localStorage.setItem('board_last_submit', String(Date.now()));

    // 乐观插入到列表顶部
    container.prepend(createMessageEl(newMsg, true));
});

三个防护机制：

关键词过滤：客户端 includes() 检查，硬编码在代码中。不是安全防线，只是第一层拦截
冷却时间：localStorage 记录上次提交时间戳，30 秒内不可重复提交。跨标签页有效（localStorage 共享）
数据库约束：CHECK (char_length(content) <= 200) 在数据库层面兜底，即使绕过前端也能阻止超长内容

Prefer: return=representation 让 PostgREST 在 INSERT 后返回完整的插入记录（包括数据库生成的 id 和 created_at），拿到后直接用 createMessageEl 渲染并 prepend 到列表顶部。

头像在提交时先通过 resolveAvatarUrl 解析为最终 URL 再存入数据库，这样读取时不需要再做邮箱→URL 的转换。

6. 删除留言

使用事件委托，监听整个消息容器的 click 事件：

container.addEventListener('click', async (e) => {
    const target = e.target;
    if (!target.classList.contains('board-delete-btn')) return;
    const msgId = target.dataset.id;
    if (!msgId || !confirm('确定要删除这条留言吗？')) return;

    const resp = await fetch(
        `${supabaseUrl}/rest/v1/messages` +
        `?id=eq.${encodeURIComponent(msgId)}` +
        `&fingerprint=eq.${encodeURIComponent(fingerprint)}`,
        { method: 'DELETE', headers: { ... } }
    );

    if (resp.ok) {
        const msgEl = target.closest('[data-msg-id]');
        // 淡出动画后移除 DOM
        msgEl.style.transition = 'opacity 0.3s, max-height 0.3s, ...';
        msgEl.style.opacity = '0';
        requestAnimationFrame(() => {
            msgEl.style.maxHeight = '0';
            msgEl.style.overflow = 'hidden';
        });
        setTimeout(() => msgEl.remove(), 300);
    }
});

删除请求的 URL 同时带 id 和 fingerprint 两个过滤条件，PostgREST 只会删除同时匹配的行，保证用户只能删自己的留言。

移除 DOM 前先播放一个 300ms 的淡出收缩动画：opacity → 0，max-height → 0，视觉上消息"缩回消失"，动画结束后 remove()。

四、接入 Swup 生命周期

Fuwari 使用 Swup 做页面切换。Swup 切页时会替换 #swup-container 内的全部 DOM，留言板页面的 data-initialized 会被重置为 false。

在两个位置调用 initBoardMessages()：

// 首次加载
function init() {
    loadTheme();
    loadHue();
    setTimeout(() => { initTwikoo() }, 100)
    initReactions()
    initBoardMessages()  // ← 添加
}

// swup 切页后
window.swup.hooks.on('page:view', () => {
    // ...
    initReactions()
    initBoardMessages()  // ← 添加
});

函数入口的 guard 检查确保只在留言板页面执行：

async function initBoardMessages() {
    const container = document.getElementById('board-messages');
    if (!container || container.dataset.initialized === 'true') return;
    // ...
}

其他页面没有 #board-messages 元素，getElementById 返回 null，函数直接退出，零开销。

五、动画

编辑 src/styles/transition.css，追加：

/* 留言条目入场动画 */
@keyframes msg-slide-in {
    0% { transform: translateY(0.75rem); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.msg-enter { animation: 300ms msg-slide-in ease-out; }

比 Fuwari 已有的 fade-in-up（位移 2rem）更轻微（位移 0.75rem），适合消息列表中逐条出现的场景，不至于太"跳"。

六、导航链接

编辑 src/config.ts，在 navBarConfig.links 中添加：

{
    name: "说说",
    url: "/board/",
    external: false,
},

七、keep-alive

编辑 scripts/keep-alive.mjs，在 methods 数组中添加对 messages 表的定期查询：

{
    name: "messages query",
    fn: async () => {
        const limit = randomInt(1, 5);
        const resp = await fetch(
            `${supabaseUrl}/rest/v1/messages?select=id&limit=${limit}`,
            {
                headers: {
                    apikey: supabaseKey,
                    Authorization: `Bearer ${supabaseKey}`,
                },
            }
        );
        if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`);
    },
},

Supabase 免费项目 7 天无活动会自动暂停。已有 GitHub Actions 每天两次执行 keep-alive 脚本查询 reactions 表，现在加上 messages 表一起保活。

八、LocalStorage 持久化

留言板用到以下几个 localStorage key：

Key	用途	生命周期
`reactions_fp`	浏览器指纹	永久（复用反应功能的指纹）
`board_nickname`	用户填写的昵称	永久
`board_avatar`	用户填写的头像原始值	永久
`board_last_submit`	上次提交时间戳	永久（用于 30 秒冷却判断）

昵称和头像在每次提交成功后写入 localStorage，页面加载时自动恢复到输入框。用户不需要每次重新填写。头像原始值（邮箱或 URL）存储的是未解析的原始输入，而非解析后的最终 URL——这样邮箱格式的头像在预览时能正确走 Gravatar 解析流程。

九、防刷与安全总结

层级	机制	作用
客户端	30 秒冷却（localStorage）	防止短时间内大量提交
客户端	关键词过滤	第一层内容拦截
客户端	fingerprint 匹配	只能删除自己的留言
数据库	`CHECK (char_length <= 200)`	内容长度兜底
数据库	RLS + DELETE 带 fingerprint 条件	即使绕过前端，也无法删别人的留言

浏览器指纹不是密码学身份标识，清 localStorage 或换浏览器/设备就能绕过冷却和删除限制。对于个人博客的留言板来说这个安全等级足够。如果需要更严格的限制，可以加 Supabase Edge Function 做 IP 频率限制，或接入 Turnstile 验证码。

Fuwari侧边栏天气组件实现

Wed, 06 May 2026 00:00:00 GMT

为 Fuwari 侧边栏添加天气小组件，自动定位后显示当前所在地的温度、天气、湿度、风速等信息，点击设置按钮可手动搜索城市。

一、技术选型

1.1 天气 API：Open-Meteo

Open-Meteo 是完全免费的天气 API，无需 API Key，无需注册。两个接口：

接口
`https://geocoding-api.open-meteo.com/v1/search?name={城市名}&count=5&language=zh`
`https://api.open-meteo.com/v1/forecast?latitude={纬度}&longitude={经度}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,apparent_temperature`

1.2 定位：浏览器 Geolocation API

优先使用浏览器原生定位，失败时降级为手动搜城市。定位得到经纬度后，再通过 Open-Meteo Geocoding API 反查城市名。

1.3 Swup 兼容性

Fuwari 使用 Swup 做页面切换。Swup 只替换两个容器的内容：#swup-container（主内容区）和 #toc（目录）。侧边栏在 Swup 容器之外，跨页面持久存在，不需要注册任何 Swup hooks。

这一点很重要：只要把天气组件放在侧边栏，它就不会被 Swup 替换，只需要初始化一次。

二、实现步骤

2.1 新建 Weather.astro

在 src/components/widget/ 下新建 Weather.astro，复用 Fuwari 已有的 WidgetLayout 组件（和 Tags、Categories 用法一致）。

组件结构分为三部分：

模板：Astro 模板，只负责渲染 HTML 骨架，数据由客户端 JS 填充
SVG 图标：WMO 天气码到内联 SVG 的映射表，嵌入在 <script> 里，不依赖外部 CDN
客户端脚本：<script is:inline> 块，负责 API 调用、DOM 操作、缓存管理

模板部分

---
import I18nKey from "../../i18n/i18nKey";
import { i18n } from "../../i18n/translation";
import WidgetLayout from "./WidgetLayout.astro";
---

<WidgetLayout name={i18n(I18nKey.weather)} id="weather">
    <div id="weather-content">
        <div id="weather-loading">Loading...</div>
        <div id="weather-display" class="hidden">
            <!-- 图标、温度、描述 -->
            <!-- 湿度、风速、体感温度 -->
            <!-- 城市名 + 设置按钮 -->
        </div>
        <div id="weather-settings" class="hidden">
            <!-- 自动定位按钮 -->
            <!-- 城市搜索输入框 + 下拉建议 -->
        </div>
    </div>
</WidgetLayout>

模板里没有任何动态数据——温度、图标、城市名全是占位符（--°C、--），由客户端脚本填充。

:::important 必须用 <script is:inline>，不能用普通的 <script>。普通 <script> 会被 Astro 打包成 ES module 注入 <head>，但 Fuwari 配置了 updateHead: false，Swup 切页时不会重新执行。is:inline 让脚本直接写入 HTML，页面加载时同步执行——这样才能在首帧渲染前就把 localStorage 缓存的天气数据显示出来，避免页面加载后"闪一下"。 :::

SVG 天气图标

Open-Meteo 返回的 weather_code 是 WMO 标准天气码（0 = 晴，2 = 多云，61 = 小雨，95 = 雷暴……）。需要一张映射表把天气码转成图标。

不用 Iconify CDN，也不装额外依赖——直接把 Material Symbols 的 SVG path 写在 JS 对象里：

var WMO_ICONS = {
    0: '<svg viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10"><path d="M12 7c-2.76 0-5..."/></svg>',
    2: '<svg viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10"><path d="M19.35 10.04A7.49..."/></svg>',
    // ... 其余 WMO 码
};

图标的 SVG 数据从 @iconify-json/material-symbols 包里提取，也可以直接去 Iconify 网站复制。天气描述同理，用一个 WMO_DESC 对象映射成中文。

客户端脚本核心逻辑

整个脚本包在一个 IIFE 里，用 var 避免污染全局（is:inline 脚本不做模块化处理）。

数据流：

页面加载
  ↓
检查 localStorage 缓存（30 分钟有效期）
  ↓ 有缓存 → 立即渲染，结束
  ↓ 无缓存
尝试 Geolocation API
  ↓ 成功 → 拿到经纬度 → 反查城市名 → 请求天气 → 渲染 + 存缓存
  ↓ 失败 → 显示城市搜索面板，等用户手动输入

localStorage 缓存结构：

{
    "timestamp": 1714980000000,
    "temperature": 23,
    "humidity": 65,
    "weather_code": 2,
    "wind": 12,
    "feels_like": 21,
    "city": "上海",
    "lat": 31.23,
    "lon": 121.47
}

反向地理编码：

Geolocation API 只返回经纬度，不返回城市名。用 Open-Meteo Geocoding API 做反查：

async function reverseGeocode(lat, lon) {
    var url = GEOCODING_API + "?name=" + lat.toFixed(1) + "," + lon.toFixed(1) + "&count=1&language=zh";
    var resp = await fetch(url);
    var json = await resp.json();
    if (json.results && json.results.length > 0) return json.results[0].name;
    return lat.toFixed(2) + ", " + lon.toFixed(2);
}

城市搜索（带防抖）：

输入框监听 input 事件，300ms 防抖后调用 Geocoding API，结果渲染为下拉列表：

cityInput.addEventListener("input", function() {
    clearTimeout(debounceTimer);
    var query = cityInput.value.trim();
    if (query.length < 2) { suggestions.classList.add("hidden"); return; }
    debounceTimer = setTimeout(async function() {
        var results = await searchCity(query);
        // 渲染下拉建议，每项绑定 click → fetchWeather(r.latitude, r.longitude, r.name)
    }, 300);
});

点击建议项后清空输入框、隐藏下拉、请求天气数据。

2.2 注册到 SideBar.astro

编辑 src/components/widget/SideBar.astro，在 Tags 组件后面加上 Weather：

---
// ... 已有 import
import Weather from "./Weather.astro";
---

<!-- 在 #sidebar-sticky 容器内，Tags 后面 -->
<Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
<Weather class="onload-animation" style="animation-delay: 250ms"></Weather>

animation-delay: 250ms 保证入场动画在 Tags（200ms）之后，形成依次出现的视觉效果。

2.3 添加 i18n 翻译

在 src/i18n/i18nKey.ts 枚举里加一个键：

weather = "weather",

然后在每个语言文件里添加对应翻译：

文件	翻译
`zh_CN.ts`	`"天气"`
`en.ts`	`"Weather"`
`ja.ts`	`"天気"`
`ko.ts`	`"날씨"`
`es.ts`	`"Clima"`
其余语言文件	对应翻译

i18n 函数在 Astro 服务端渲染时调用，读的是 siteConfig.lang，不需要客户端参与。

Fuwari文章分享功能实现

Wed, 06 May 2026 00:00:00 GMT

为 Fuwari 主题实现两个功能：

分享按钮 — 文章页面一个分享图标，点击调用系统原生分享面板（移动端）或复制链接（桌面端）
社交卡片预览 — 在 <head> 注入 og:image 等 Open Graph 标签，微信/Telegram 等客户端打开链接时自动渲染为带封面图的卡片

:::important Fuwari 使用 Swup 做页面切换，内容区 DOM 会被整体替换，所以事件绑定不能依赖首次加载时的 getElementById，要用内联 onclick 或事件委托 :::

一、社交卡片：注入 `og:image`

1.1 问题

Fuwari 的 Layout.astro 已有 og:title、og:description、og:url 等标签，但没有 og:image。没有这个标签，微信/Telegram 等客户端打开文章链接时不会显示封面图预览。

1.2 给 Layout.astro 添加 ogImage prop

编辑 src/layouts/Layout.astro，在 Props 接口中新增 ogImage 字段：

interface Props {
    title?: string;
    banner?: string;
    description?: string;
    lang?: string;
    setOGTypeArticle?: boolean;
    ogImage?: string;  // 新增
}

解构处同步添加：

let { title, banner, description, lang, setOGTypeArticle, ogImage } = Astro.props;

在 <head> 的 OG 标签区域添加：

{ogImage && <meta property="og:image" content={new URL(ogImage, Astro.site).toString()}>}

关键： ogImage 与 banner 完全独立。Layout.astro 第 47 行会强制把 banner 覆盖为站点配置的 banner 图，所以不能复用 banner 做 og:image，必须用独立的 prop。

1.3 透传到 MainGridLayout.astro

MainGridLayout.astro 是 Layout 和文章页之间的中间层，需要把 ogImage 透传下去。

编辑 src/layouts/MainGridLayout.astro：

Props 接口加 ogImage?: string，解构加 ogImage，Layout 调用处加 ogImage={ogImage}：

<Layout title={title} banner={banner} description={description} lang={lang}
        setOGTypeArticle={setOGTypeArticle} ogImage={ogImage}>

1.4 在文章页传入封面图

编辑 src/pages/posts/[...slug].astro，在 MainGridLayout 调用处添加 ogImage：

<MainGridLayout
    ...
    ogImage={entry.data.image || "/favicon/gravatar.png"}
    ...>

逻辑：有封面图用封面图，没有则 fallback 到 public/favicon/gravatar.png（站点头像，需要放在 public/ 目录下以保证 URL 稳定）。

构建后在浏览器开发者工具检查 <head>，确认 og:image 指向正确的图片 URL。

二、分享按钮：ShareButton.astro

2.1 新建组件

创建 src/components/ShareButton.astro：

---
import { Icon } from "astro-icon/components";

interface Props {
    title: string;
    url: string;
    class?: string;
}

const { title, url } = Astro.props;
const className = Astro.props.class || "";
---

<div class:list={["share-btn-container inline-flex items-center", className]}>
    <button
        class="share-btn btn-plain rounded-lg h-9 w-9 flex items-center justify-center"
        data-title={title}
        data-url={url}
        onclick="(async function(btn){var url=btn.dataset.url;try{if(navigator.share){await navigator.share({title:btn.dataset.title,url:url})}else{await navigator.clipboard.writeText(url);btn.classList.add('success');clearTimeout(btn._t);btn._t=setTimeout(function(){btn.classList.remove('success')},1500)}}catch(e){}})(this)"
    >
        <Icon name="fa6-solid:arrow-up-from-bracket" class="share-btn-icon text-[1.1rem]" />
        <Icon name="material-symbols:check-rounded" class="share-btn-success-icon text-[1.1rem]" />
    </button>
    <span class="share-btn-text text-xs text-[var(--primary)] whitespace-nowrap">已复制</span>
</div>

<style is:inline>
.share-btn-container { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; }
.share-btn .share-btn-icon { display: inline; }
.share-btn .share-btn-success-icon { display: none; }
.share-btn.success .share-btn-icon { display: none; }
.share-btn.success .share-btn-success-icon { display: inline; }
.share-btn.success { color: var(--primary) !important; }
.share-btn-text { opacity: 0; transition: opacity 0.2s; }
.share-btn-container .share-btn.success ~ .share-btn-text { opacity: 1; }
</style>

2.2 设计决策说明

为什么用内联 onclick 而不是 <script> + addEventListener？

Swup 切页时会替换 #swup-container 内的整个 DOM。如果用 document.getElementById('share-btn').addEventListener(...) ，首次加载可以工作，但 Swup 导航到新页面后，旧的 DOM 节点被移除，新节点上的事件监听器不存在了。内联 onclick 是 HTML 属性，随 DOM 一起渲染，天然兼容 Swup，不需要在 swup.hooks.on('page:view', ...) 中重新绑定。

为什么用 data-title / data-url 属性？

Astro 的 define:vars 可以把变量注入 <script>，但我们的 onclick 已经是内联的，用 data-* 属性更简洁，也避免了 HTML 属性中转义 JavaScript 的复杂性。

为什么 <style is:inline>？

Astro 默认对 <style> 做 scope 隔离（加 data-astro-cid-xxx 选择器），但我们的 onclick 是原生 HTML 属性，不在 Astro 的 scope 内，scoped 样式无法匹配到。is:inline 让样式成为全局 CSS，配合内联 onclick 正常工作。

2.3 按钮样式

使用 Fuwari 原生的 btn-plain 类，自带 hover 变色、expand-animation 涟漪效果
h-9 w-9（36px）与 Fuwari 的 meta-icon 尺寸一致
图标使用 fa6-solid:arrow-up-from-bracket（分享箭头），复制成功后切换为 material-symbols:check-rounded（勾号）
"已复制" 文字通过 CSS 相邻兄弟选择器 .share-btn.success ~ .share-btn-text 控制显隐，无需 JavaScript 操作

2.4 点击行为

环境	行为
iOS / Android 浏览器	调用 `navigator.share()`，弹出系统原生分享面板（可选微信、Twitter、复制链接等）
桌面浏览器（无 Web Share API）	`navigator.clipboard.writeText()`，图标变勾号，显示"已复制"，1.5秒后恢复

clearTimeout(btn._t) 防止快速多次点击时 timeout 冲突。

三、集成到文章页面

编辑 src/pages/posts/[...slug].astro。

导入组件：

import ShareButton from "../../components/ShareButton.astro";

获取文章 URL：

const postUrl = Astro.url.toString();

将 ShareButton 放在 PostMetadata 同行右侧：

<div class="flex items-start justify-between mb-5">
    <PostMetadata class="flex-1 min-w-0" ... />
    <ShareButton title={entry.data.title} url={postUrl} class="ml-4 shrink-0" />
</div>

flex-1 min-w-0 让 PostMetadata 占满剩余空间，min-w-0 防止内容过长时溢出
shrink-0 防止 ShareButton 被压缩
items-start 让按钮对齐行首，PostMetadata 换行时不影响按钮位置

四、验证

构建后检查：

有封面图的文章：<head> 中 og:image 指向文章封面图 URL
无封面图的文章：og:image 指向 fallback 头像 URL
分享按钮出现在日期/分类/标签行右侧
移动端点击：弹出系统分享面板
桌面端点击：图标变勾号 + 显示"已复制"
Swup 页面切换后，新页面的分享按钮功能正常
亮色/暗色主题下按钮样式一致

文件清单

文件	操作	说明
`src/layouts/Layout.astro`	修改	Props 加 `ogImage`，添加 `og:image` meta 标签
`src/layouts/MainGridLayout.astro`	修改	透传 `ogImage` 到 Layout
`src/pages/posts/[...slug].astro`	修改	传入 `ogImage` 和 `postUrl`，插入 ShareButton
`src/components/ShareButton.astro`	新建	分享按钮组件
`public/favicon/gravatar.png`	已有	`og:image` fallback 头像

Fuwari 文章反应功能

Wed, 06 May 2026 00:00:00 GMT

在每篇文章底部添加一组表情反应按钮（👍❤️😮🎉🤔👀），点击即可投票，再次点击取消。数据存储在 Supabase 的免费 PostgreSQL 数据库中。

一、Supabase 数据库设置

1. 创建项目

前往 Supabase 注册并创建一个免费项目，选择离你最近的区域。

2. 建表

进入项目的 SQL Editor，执行以下 SQL：

-- 反应表：每行记录一个用户对一篇文章的一种 emoji 投票
CREATE TABLE reactions (
    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
    post_slug text NOT NULL,
    emoji text NOT NULL,
    fingerprint text NOT NULL,
    created_at timestamptz DEFAULT now(),
    -- 每个用户对每篇文章的每种 emoji 只能投一次
    CONSTRAINT reactions_post_slug_emoji_fingerprint_key
        UNIQUE (post_slug, emoji, fingerprint)
);

-- 按文章 slug 查询的索引
CREATE INDEX idx_reactions_post_slug ON reactions (post_slug);

-- 启用行级安全策略
ALTER TABLE reactions ENABLE ROW LEVEL SECURITY;

-- 匿名用户可读（公开数据）
CREATE POLICY "Allow public read" ON reactions
    FOR SELECT USING (true);

-- 匿名用户可写入（投票）
CREATE POLICY "Allow public insert" ON reactions
    FOR INSERT WITH CHECK (true);

-- 匿名用户可删除自己的投票（取消投票）
CREATE POLICY "Allow public delete own" ON reactions
    FOR DELETE USING (true);

3. 获取凭据

进入 Supabase 控制台 → Settings → API，记录两个值：

Project URL：形如 https://xxx.supabase.co
anon public key：以 eyJ 开头的长字符串

将它们写入项目根目录的 .env 文件：

PUBLIC_SUPABASE_URL=https://xxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJ...

如果部署在 Cloudflare Pages，需要在 Pages → Settings → Environment variables 中同步添加这两个变量。

二、创建 Reactions 组件

新建 src/components/Reactions.astro。这是一个纯静态组件，只负责渲染 HTML 骨架和样式，不包含任何 <script> —— 交互逻辑统一由 Layout.astro 管理。

这种模式和项目中的 MathGraph、Twikoo 一致：组件输出静态 HTML，Layout.astro 的全局脚本通过 swup 的 page:view 钩子负责初始化。

---
interface Props {
    slug: string;
}
const { slug } = Astro.props;
---

<div id="post-reactions" class="post-reactions onload-animation"
     data-post-slug={slug} data-initialized="false">
    <div class="reactions-divider"></div>
    <div class="reactions-label">这篇文章对你有帮助吗？</div>
    <div class="reactions-container">
        <button class="reaction-btn" data-emoji="👍" disabled>
            <span class="reaction-emoji">👍</span>
            <span class="reaction-count">·</span>
        </button>
        <button class="reaction-btn" data-emoji="❤️" disabled>
            <span class="reaction-emoji">❤️</span>
            <span class="reaction-count">·</span>
        </button>
        <button class="reaction-btn" data-emoji="😮" disabled>
            <span class="reaction-emoji">😮</span>
            <span class="reaction-count">·</span>
        </button>
        <button class="reaction-btn" data-emoji="🎉" disabled>
            <span class="reaction-emoji">🎉</span>
            <span class="reaction-count">·</span>
        </button>
        <button class="reaction-btn" data-emoji="🤔" disabled>
            <span class="reaction-emoji">🤔</span>
            <span class="reaction-count">·</span>
        </button>
        <button class="reaction-btn" data-emoji="👀" disabled>
            <span class="reaction-emoji">👀</span>
            <span class="reaction-count">·</span>
        </button>
    </div>
</div>

<style is:inline>
.post-reactions {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}
.reactions-divider {
    border-bottom: 1px dashed var(--line-divider);
    margin-bottom: 1.25rem;
}
.reactions-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.75rem;
}
html.dark .reactions-label {
    color: rgba(255, 255, 255, 0.5);
}
.reactions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.reaction-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 2px solid var(--btn-regular-bg);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    user-select: none;
    color: inherit;
}
.reaction-btn:hover:not(:disabled):not(.voted):not(.pending) {
    background: var(--btn-plain-bg-hover);
    border-color: var(--primary);
    color: var(--primary);
}
.reaction-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.reaction-btn.pending {
    pointer-events: none;
}
.reaction-btn.voted {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.reaction-btn.voted:hover:not(.pending) {
    opacity: 0.85;
}
.reaction-btn:active:not(:disabled):not(.pending) {
    transform: scale(0.95);
}
.reaction-count {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    font-variant-numeric: tabular-nums;
    min-width: 0.5rem;
    text-align: center;
}
html.dark .reaction-count {
    color: rgba(255, 255, 255, 0.5);
}
.reaction-btn.voted .reaction-count {
    color: white;
}
</style>

要点说明：

按钮初始状态为 disabled，计数显示 · 占位符，等 JS 加载数据后替换
data-post-slug 存储文章标识（不使用完整 URL，避免 URL 结构变化导致数据丢失）
data-initialized 用于防止 swup 切页时重复初始化
样式使用 <style is:inline> 而非 <style>，因为 Astro 的 scoped style 会添加属性选择器，与动态 DOM 操作不兼容
颜色全部引用 Fuwari 的 CSS 变量（--primary、--btn-regular-bg、--btn-plain-bg-hover），自动适配亮/暗主题

三、在文章页放置组件

编辑 src/pages/posts/[...slug].astro。

在 frontmatter 中添加 import：

import Reactions from "../../components/Reactions.astro";

在 #post-container 内部、License 组件之后放置：

{licenseConfig.enable && <License ...></License>}

<Reactions slug={getEntrySlug(entry)} />

</div>  <!-- #post-container 的关闭标签 -->

四、Layout.astro 添加交互逻辑

这是改动最多的文件，分为三步。

1. 注入 Supabase 凭据

在 Layout.astro 的 <head> 区域，主题加载脚本之后添加一个 <script is:inline define:vars> 块，将 .env 中的变量注入到 window 对象上：

<script is:inline define:vars={{
    supabaseUrl: import.meta.env.PUBLIC_SUPABASE_URL,
    supabaseKey: import.meta.env.PUBLIC_SUPABASE_ANON_KEY
}}>
    window.__SUPABASE_URL = supabaseUrl;
    window.__SUPABASE_ANON_KEY = supabaseKey;
</script>

这里用 define:vars 而不是在 JS 中硬编码，是因为 Astro 在构建时会把 import.meta.env.PUBLIC_* 替换为实际值，同时密钥不会出现在源码仓库中。

2. 添加 `initReactions()` 函数

在 Layout.astro 的主 <script> 块中（initTwikoo() 函数之后），添加完整的反应功能逻辑。核心分为三个部分：

浏览器指纹生成

async function generateFingerprint() {
    const components = [
        navigator.userAgent,
        screen.width + 'x' + screen.height,
        String(screen.colorDepth),
        String(new Date().getTimezoneOffset()),
        navigator.language,
        String(navigator.hardwareConcurrency || ''),
        String((navigator as any).deviceMemory || ''),
    ];
    // Canvas 指纹
    try {
        const canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 50;
        const ctx = canvas.getContext('2d');
        if (ctx) {
            ctx.textBaseline = 'top';
            ctx.font = '14px Arial';
            ctx.fillStyle = '#f60';
            ctx.fillRect(125, 1, 62, 20);
            ctx.fillStyle = '#069';
            ctx.fillText('fingerprint', 2, 15);
            components.push(canvas.toDataURL());
        }
    } catch (e) { /* ignore */ }
    // WebGL 渲染器信息
    try {
        const gl = document.createElement('canvas').getContext('webgl');
        if (gl) {
            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
            if (debugInfo) {
                components.push(String(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)));
            }
        }
    } catch (e) { /* ignore */ }
    const data = components.join('|||');
    const hashBuffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(data));
    return Array.from(new Uint8Array(hashBuffer))
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
}

async function getFingerprint() {
    let fp = localStorage.getItem('reactions_fp');
    if (!fp) {
        fp = await generateFingerprint();
        localStorage.setItem('reactions_fp', fp);
    }
    return fp;
}

原理：收集浏览器的 UA、屏幕分辨率、色深、时区、语言、CPU 核数、内存、Canvas 渲染结果、WebGL 渲染器名称，拼接后做 SHA-256 哈希。同一浏览器（相同配置和硬件）会生成相同的哈希值，结果缓存在 localStorage 中只需计算一次。

这个指纹不是密码学级别的身份标识，但足以在"无登录"场景下起到基本的防重复投票作用。无痕模式下 localStorage 隔离，指纹自然独立。

数据获取与渲染

async function initReactions() {
    const container = document.getElementById('post-reactions');
    if (!container || container.dataset.initialized === 'true') return;

    // 用 AbortController 取消上一次未完成的请求（应对快速切页）
    const existingController = (container as any).__abortController;
    if (existingController) existingController.abort();
    const controller = new AbortController();
    (container as any).__abortController = controller;

    const slug = container.dataset.postSlug;
    if (!slug) return;

    const supabaseUrl = (window as any).__SUPABASE_URL;
    const supabaseKey = (window as any).__SUPABASE_ANON_KEY;
    if (!supabaseUrl || !supabaseKey) return;

    container.dataset.initialized = 'true';

    try {
        const fingerprint = await getFingerprint();

        // 一次请求获取该文章的所有反应记录
        const resp = await fetch(
            `${supabaseUrl}/rest/v1/reactions?post_slug=eq.${encodeURIComponent(slug)}&select=emoji,fingerprint`,
            {
                headers: {
                    'apikey': supabaseKey,
                    'Authorization': `Bearer ${supabaseKey}`,
                },
                signal: controller.signal,
            }
        );

        if (!resp.ok) return;
        const rows = await resp.json();

        // 客户端统计计数（数据量极小，无需服务端聚合）
        const counts = {};
        const userVotes = new Set();
        for (const row of rows) {
            counts[row.emoji] = (counts[row.emoji] || 0) + 1;
            if (row.fingerprint === fingerprint) {
                userVotes.add(row.emoji);
            }
        }

        // 启用按钮、显示计数、标记已投票状态
        const buttons = container.querySelectorAll('.reaction-btn');
        buttons.forEach(btn => {
            const emoji = btn.dataset.emoji;
            btn.disabled = false;
            const countEl = btn.querySelector('.reaction-count');
            countEl.textContent = String(counts[emoji] || 0);

            if (userVotes.has(emoji)) {
                btn.classList.add('voted');
            }

            // 绑定点击事件（见下文）
            btn.addEventListener('click', () => handleClick(/* ... */));
        });
    } catch (e) {
        if (e.name === 'AbortError') return;
    }
}

使用 PostgREST 的过滤语法 ?post_slug=eq.xxx&select=emoji,fingerprint 一次性拿到该文章的全部记录，客户端做分组统计。对博客文章来说数据量极小（每篇文章最多 6 种 emoji），不需要服务端聚合。

点击事件：乐观更新 + 切换投票

btn.addEventListener('click', async function handleClick() {
    if (btn.classList.contains('pending')) return;
    btn.classList.add('pending');  // 防快速重复点击

    const cache = JSON.parse(localStorage.getItem('reactions_votes') || '{}');
    const alreadyVoted = cache[slug] && cache[slug][emoji];
    const adding = !alreadyVoted;  // 切换方向

    // 乐观更新 UI（先改界面，再发请求）
    btn.classList.toggle('voted', adding);
    const prevText = countEl.textContent;
    const current = parseInt(prevText) || 0;
    countEl.textContent = String(Math.max(0, adding ? current + 1 : current - 1));

    try {
        let ok;
        if (adding) {
            // 投票：POST 新记录
            const r = await fetch(`${supabaseUrl}/rest/v1/reactions`, {
                method: 'POST',
                headers: {
                    'apikey': supabaseKey,
                    'Authorization': `Bearer ${supabaseKey}`,
                    'Content-Type': 'application/json',
                    'Prefer': 'return=minimal',
                },
                body: JSON.stringify({ post_slug: slug, emoji, fingerprint }),
                signal: controller.signal,
            });
            ok = r.ok || r.status === 409;  // 409 = 唯一约束冲突，视为成功
        } else {
            // 取消投票：DELETE 匹配记录
            const r = await fetch(
                `${supabaseUrl}/rest/v1/reactions?post_slug=eq.${encodeURIComponent(slug)}&emoji=eq.${encodeURIComponent(emoji)}&fingerprint=eq.${encodeURIComponent(fingerprint)}`,
                {
                    method: 'DELETE',
                    headers: {
                        'apikey': supabaseKey,
                        'Authorization': `Bearer ${supabaseKey}`,
                    },
                    signal: controller.signal,
                }
            );
            ok = r.ok;
        }

        if (ok) {
            // 更新本地缓存
            if (!cache[slug]) cache[slug] = {};
            if (adding) cache[slug][emoji] = true;
            else delete cache[slug][emoji];
            localStorage.setItem('reactions_votes', JSON.stringify(cache));
        } else {
            // 请求失败，回滚 UI
            btn.classList.toggle('voted', !adding);
            countEl.textContent = prevText;
        }
    } catch (e) {
        if (e.name === 'AbortError') return;
        btn.classList.toggle('voted', !adding);
        countEl.textContent = prevText;
    } finally {
        btn.classList.remove('pending');
    }
});

三个设计要点：

乐观更新：先改 UI 再发请求。网络请求可能需要几百毫秒甚至更长，如果等到响应回来再改界面，用户会感到明显延迟。
切换投票：已投票时再点会发送 DELETE 请求删除对应行，同时 UI 回退。localStorage 缓存记录每个 slug+emoji 的投票状态，避免每次都要查数据库。
防快速点击：请求期间给按钮添加 pending 类（pointer-events: none），阻止重复提交。

3. 注册调用点

在 Layout.astro 中，initReactions() 需要在两个地方被调用：

// 初始页面加载
function init() {
    loadTheme();
    loadHue();
    setTimeout(() => { initTwikoo() }, 100)
    initReactions()  // ← 添加
}

// swup 切页后
window.swup.hooks.on('page:view', () => {
    // ... 其他初始化 ...
    setTimeout(() => { initTwikoo() }, 100)
    initReactions()  // ← 添加
});

swup 切页时会替换 #swup-container 内的全部 HTML，新页面的 #post-reactions 元素带有 data-initialized="false"，initReactions() 会检测到这个状态并重新执行初始化。旧页面的 AbortController 被 abort，防止过期请求更新错误的 DOM。

五、动画延迟

编辑 src/styles/transition.css，在 #post-container :nth-child(6) 之后添加：

#post-container :nth-child(7) { animation-delay: calc(var(--content-delay) + 400ms) }

Fuwari 的文章内容区通过 nth-child 逐子元素设置递增的入场动画延迟，Reactions 作为第 7 个子元素需要补上对应的延迟，否则会没有渐入效果。

六、防刷策略总结

本方案采用三层防护，不依赖用户登录：

层级	机制	作用
客户端	`localStorage` 投票缓存	同一浏览器即时阻止重复投票，无需查库
客户端	浏览器指纹 SHA-256	跨页面、跨 session 识别同一用户
数据库	`UNIQUE (post_slug, emoji, fingerprint)` 约束	即使绕过前端，数据库也会拒绝重复插入

客户端指纹不是密码学身份标识，清除 localStorage 或换浏览器就能绕过。对于个人博客来说这个防护等级足够。如果需要更严格的限制，可以在 Supabase Edge Function 中添加基于 IP 的频率限制，但需要额外配置。

七、注意事项

Supabase 的 anon key 设计为公开使用，配合 RLS 策略不会暴露数据。不要使用 service_role key，那个有完全数据库权限。
确保 .env 中的 PUBLIC_SUPABASE_URL 不包含 /rest/v1/ 后缀，代码会自动拼接这个路径。
如果部署在 Cloudflare Pages，需要在 Pages 的环境变量设置中同步添加 Supabase 凭据，部署后重新构建。
Supabase 免费项目在 7 天无活动后会自动暂停，首次访问会有一两秒的冷启动延迟。

Site Bot

Sun, 12 Apr 2026 00:00:00 GMT

正好前段时间薅到了元宝的 Bot ，拿来试试手
尝试在评论区@Bot，机器人看到就会回复！

2026-04-30更新：实在太费token了😂，还是停机了吧。

Demo

Mon, 06 Apr 2026 00:00:00 GMT

Mermaid 图表

pie title 月度支出分布
    "餐饮" : 35
    "交通" : 15
    "娱乐" : 20
    "学习" : 20
    "其他" : 10

mindmap
  root((周末计划))
    工作
      写周报
      回复邮件
    生活
      健身房
      超市购物
    娱乐
      看电影
      朋友聚会
    学习
      阅读 1 小时
      练习英语

xychart-beta
    title "2025 下半年月度数据对比"
    x-axis ["7月", "8月", "9月", "10月", "11月", "12月"]
    y-axis "数值" 0 --> 100
    bar [45, 60, 55, 70, 65, 80]
    line [30, 40, 50, 55, 70, 85]

flowchart LR
    A[开始] --> B{是否完成？}
    B -->|是| C[✅ 结束]
    B -->|否| D[🔄 继续执行]
    D --> B

数学图形交互演示

你可以通过滑动条实时调整参数，观察函数图像的变化。

基础示例：二次函数

让我们从一个简单的二次函数开始：$f(x) = ax^2 + bx + c$

sliders:
  a: [-3, 1, 3, 0.1]
  b: [-5, 0, 5, 0.1]
  c: [-5, 0, 5, 0.1]
expressions:
  - a*x*x + b*x + c
axis: true
grid: true

通过调整参数 $a$、$b$、$c$，你可以观察到：

$a$ 控制抛物线的开口方向和宽度
$b$ 控制抛物线的对称轴位置
$c$ 控制抛物线的上下平移

三角函数组合

让我们看看三角函数的组合效果：

sliders:
  a: [0.1, 1, 3, 0.1]
  b: [0.1, 1, 5, 0.1]
  c: [-3.14, 0, 3.14, 0.1]
expressions:
  - a*sin(b*x + c)
  - a*cos(b*x + c)
axis: true
grid: true

这里展示了：

正弦函数 $\sin(x)$ 和余弦函数 $\cos(x)$
参数 $a$ 控制振幅
参数 $b$ 控制频率
参数 $c$ 控制相位

指数函数与对数函数

sliders:
  a: [0.5, 2, 4, 0.1]
  b: [0.1, 1, 2, 0.1]
expressions:
  - a*exp(b*x)
  - a*log(b*x + 1)
axis: true
grid: true

多项式函数

sliders:
  a: [-2, 1, 2, 0.1]
  b: [-3, 0, 3, 0.1]
  c: [-2, 0, 2, 0.1]
expressions:
  - x*x*x + a*x*x + b*x + c
axis: true
grid: true

使用说明

在 Markdown 中使用以下语法创建交互式数学图形：

```mathgraph
sliders:
  参数名: [最小值, 默认值, 最大值, 步长]
expressions:
  - 数学表达式
axis: true/false
grid: true/false
```

支持的数学函数

基本运算：+, -, *, /, ^, %
三角函数：sin(x), cos(x), tan(x), asin(x), acos(x), atan(x)
指数对数：exp(x), log(x), log10(x), sqrt(x)
其他：abs(x), floor(x), ceil(x), round(x)

注意事项

参数名只能使用字母和数字
表达式中使用 x 作为自变量
滑动条参数格式：[最小值, 默认值, 最大值, 步长]
可以同时绘制多条曲线

数学图像功能实现教程

Mon, 06 Apr 2026 00:00:00 GMT

功能预览

Demo

✅ 在 Markdown 中使用 mathgraph 代码块
✅ 自动渲染交互式数学图形
✅ 滑动条实时调整参数
✅ 左图右参数布局
✅ 自动适配 Fuwari 主题
✅ 支持亮色/暗色模式
✅ 移动端响应式设计

:::note 所有代码都是AI敲的，所以相关问题不要问我 :::

实现步骤

步骤 1: 下载 JSXGraph 库到本地

首先，我们需要将 JSXGraph 库下载到本地，避免远程调用可能遇到的网络问题。

# 创建目录
mkdir -p public/jsxgraph

# 下载 JSXGraph 核心库
curl -o public/jsxgraph/jsxgraphcore.js https://cdn.jsdelivr.net/npm/jsxgraph@1.8.0/distrib/jsxgraphcore.js

# 下载 JSXGraph 样式
curl -o public/jsxgraph/jsxgraph.css https://cdn.jsdelivr.net/npm/jsxgraph@1.8.0/distrib/jsxgraph.css

说明：

public/ 目录下的文件会被直接复制到构建输出
使用本地文件避免依赖远程 CDN
确保部署到任何平台都能正常工作

步骤 2: 创建 Remark 插件

创建 src/plugins/remark-mathgraph.js 文件，用于解析 Markdown 中的 mathgraph 代码块。

import { visit } from "unist-util-visit";

/**
 * Remark plugin to detect and transform mathgraph code blocks.
 * Converts ```mathgraph code blocks to interactive math graph components.
 */
export function remarkMathGraph() {
  return (tree) => {
    visit(tree, "code", (node) => {
      if (node.lang === "mathgraph") {
        const config = parseMathGraphConfig(node.value || "");
        const configJson = JSON.stringify(config);
        const graphId = `mathgraph-${Math.random().toString(36).substr(2, 9)}`;
        
        // 创建完整的 HTML 结构
        node.data = {
          hName: "div",
          hProperties: {
            className: ["math-graph-container"],
          },
          hChildren: [
            {
              type: "element",
              tagName: "div",
              properties: {
                className: ["math-graph-wrapper"],
              },
              children: [
                {
                  type: "element",
                  tagName: "div",
                  properties: {
                    className: ["math-graph-canvas"],
                    id: graphId,
                    "data-config": configJson,
                  },
                  children: [],
                },
              ],
            },
          ],
        };
      }
    });
  };
}

function parseMathGraphConfig(content) {
  const config = {
    sliders: [],
    expressions: [],
    axis: true,
    grid: true,
  };
  
  const lines = content.split("\n");
  let currentSection = "";
  
  for (const line of lines) {
    const trimmed = line.trim();
    
    // 跳过空行和注释
    if (!trimmed || trimmed.startsWith("#")) continue;
    
    // 检测区块
    if (trimmed === "sliders:") {
      currentSection = "sliders";
      continue;
    }
    if (trimmed === "expressions:") {
      currentSection = "expressions";
      continue;
    }
    
    // 解析滑动条配置
    if (currentSection === "sliders") {
      const sliderMatch = trimmed.match(/^(\w+):\s*\[([^\]]+)\]$/);
      if (sliderMatch) {
        const name = sliderMatch[1];
        const values = sliderMatch[2].split(",").map((v) => parseFloat(v.trim()));
        if (values.length >= 3) {
          config.sliders.push({
            name,
            min: values[0],
            value: values[1],
            max: values[2],
            step: values[3] || 0.1,
          });
        }
      }
    }
    
    // 解析表达式
    if (currentSection === "expressions") {
      const exprMatch = trimmed.match(/^-\s*(.+)$/);
      if (exprMatch) {
        config.expressions.push(exprMatch[1].trim());
      }
    }
    
    // 解析其他配置
    if (trimmed.startsWith("axis:")) {
      config.axis = trimmed.split(":")[1].trim() === "true";
    }
    if (trimmed.startsWith("grid:")) {
      config.grid = trimmed.split(":")[1].trim() === "true";
    }
  }
  
  return config;
}

代码说明：

使用 unist-util-visit 遍历 Markdown AST
检测 lang === "mathgraph" 的代码块
解析配置内容（滑动条、表达式等）
生成 HTML 结构，包含配置数据

步骤 3: 注册 Remark 插件

在 astro.config.mjs 中注册插件：

import { remarkMathGraph } from "./src/plugins/remark-mathgraph.js";

export default defineConfig({
  // ... 其他配置
  markdown: {
    remarkPlugins: [
      // ... 其他插件
      remarkMathGraph,
    ],
  },
});

步骤 4: 添加样式

创建 src/styles/mathgraph.css 文件：

/* MathGraph 样式 - 左图右参数布局 */

.math-graph-container {
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--line-divider);
}

/* 左图右参数布局 */
.math-graph-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 400px;
}

.math-graph-canvas-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
}

.math-graph-canvas {
  width: 100%;
  height: 400px;
  background: var(--page-bg);
}

/* 参数控制面板 */
.math-graph-controls {
  width: 280px;
  min-width: 280px;
  background: var(--btn-regular-bg);
  border-left: 1px solid var(--line-divider);
  display: flex;
  flex-direction: column;
}

.math-graph-controls-title {
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--btn-content);
  border-bottom: 1px solid var(--line-divider);
  text-align: center;
}

/* 滑动条样式 */
.math-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--card-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--line-divider);
}

.math-slider-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--btn-content);
  display: flex;
  justify-content: space-between;
}

.math-slider-value {
  color: var(--primary);
}

.math-slider-input {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--btn-plain-bg-hover);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.math-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .math-graph-layout {
    flex-direction: column;
  }
  
  .math-graph-controls {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line-divider);
  }
}

样式要点：

使用 Fuwari 的 CSS 变量（--card-bg, --primary 等）
左图右参数布局（桌面端）
移动端自动切换为上下布局

步骤 5: 在 Layout 中引入样式和脚本

编辑 src/layouts/Layout.astro：

---
// 在文件顶部引入样式
import "../styles/mathgraph.css";
---

<head>
  <!-- 其他 head 内容 -->
  
  <!-- JSXGraph 库 -->
  <link rel="stylesheet" href="/jsxgraph/jsxgraph.css" />
  <script src="/jsxgraph/jsxgraphcore.js" defer></script>
</head>

步骤 6: 添加初始化脚本

在 src/layouts/Layout.astro 的 <script> 标签中添加初始化代码：

// ========== 数学图形初始化 ==========
let mathGraphObserver = null;

function initMathGraphs() {
  const containers = document.querySelectorAll(
    '.math-graph-canvas[data-config]:not([data-initialized])'
  );
  
  if (containers.length === 0) return;
  
  // 检查 JSXGraph 是否已加载
  if (!window.JXG) {
    waitForJSXGraph().then(initMathGraphs);
    return;
  }
  
  containers.forEach((container) => {
    const configStr = container.getAttribute('data-config');
    if (!configStr) return;
    
    try {
      const config = JSON.parse(configStr);
      createMathGraph(container, config);
      container.setAttribute('data-initialized', 'true');
    } catch (e) {
      console.error('MathGraph config parse error:', e);
    }
  });
}

// 使用 MutationObserver 监听 DOM 变化
function observeMathGraphs() {
  if (mathGraphObserver) {
    mathGraphObserver.disconnect();
  }
  
  initMathGraphs();
  
  mathGraphObserver = new MutationObserver((mutations) => {
    let shouldInit = false;
    
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node instanceof Element) {
          if (node.classList?.contains('math-graph-canvas') || 
              node.querySelector?.('.math-graph-canvas')) {
            shouldInit = true;
          }
        }
      });
    });
    
    if (shouldInit) {
      setTimeout(initMathGraphs, 100);
    }
  });
  
  mathGraphObserver.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

// 等待 JSXGraph 加载
function waitForJSXGraph() {
  return new Promise((resolve) => {
    if (window.JXG) {
      resolve();
    } else {
      const checkInterval = setInterval(() => {
        if (window.JXG) {
          clearInterval(checkInterval);
          resolve();
        }
      }, 100);
      
      setTimeout(() => {
        clearInterval(checkInterval);
        console.error('JSXGraph loading timeout');
      }, 5000);
    }
  });
}

// 创建数学图形
async function createMathGraph(container, config) {
  const boardId = container.id;
  const JXG = window.JXG;
  
  // 获取父容器
  const wrapper = container.parentElement;
  if (!wrapper) return;
  
  // 创建布局容器
  const layoutContainer = document.createElement('div');
  layoutContainer.className = 'math-graph-layout';
  
  const graphContainer = document.createElement('div');
  graphContainer.className = 'math-graph-canvas-wrapper';
  
  const controlsContainer = document.createElement('div');
  controlsContainer.className = 'math-graph-controls';
  
  const controlsTitle = document.createElement('div');
  controlsTitle.className = 'math-graph-controls-title';
  controlsTitle.textContent = '参数调整';
  controlsContainer.appendChild(controlsTitle);
  
  const slidersContainer = document.createElement('div');
  slidersContainer.className = 'math-graph-sliders-vertical';
  controlsContainer.appendChild(slidersContainer);
  
  // 移动容器到新布局
  wrapper.removeChild(container);
  graphContainer.appendChild(container);
  layoutContainer.appendChild(graphContainer);
  layoutContainer.appendChild(controlsContainer);
  wrapper.appendChild(layoutContainer);
  
  // 创建 JSXGraph 画板
  const board = JXG.JSXGraph.initBoard(boardId, {
    boundingbox: [-10, 10, 10, -10],
    axis: config.axis !== false,
    grid: config.grid !== false,
    showCopyright: false,
    showNavigation: false,
    keepAspectRatio: false,
  });
  
  const sliders = {};
  
  // 创建滑动条
  config.sliders.forEach((sliderConfig, index) => {
    const sliderWrapper = document.createElement('div');
    sliderWrapper.className = 'math-slider-wrapper';
    
    const labelRow = document.createElement('div');
    labelRow.className = 'math-slider-label';
    
    const labelText = document.createElement('span');
    labelText.textContent = sliderConfig.name;
    
    const valueDisplay = document.createElement('span');
    valueDisplay.className = 'math-slider-value';
    valueDisplay.textContent = sliderConfig.value.toFixed(2);
    
    labelRow.appendChild(labelText);
    labelRow.appendChild(valueDisplay);
    
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = String(sliderConfig.min);
    slider.max = String(sliderConfig.max);
    slider.step = String(sliderConfig.step);
    slider.value = String(sliderConfig.value);
    slider.className = 'math-slider-input';
    
    slider.addEventListener('input', () => {
      const val = parseFloat(slider.value);
      valueDisplay.textContent = val.toFixed(2);
      sliders[sliderConfig.name].setValue(val);
      board.update();
    });
    
    sliderWrapper.appendChild(labelRow);
    sliderWrapper.appendChild(slider);
    slidersContainer.appendChild(sliderWrapper);
    
    // 创建 JSXGraph 内部滑动条
    sliders[sliderConfig.name] = board.create('slider', [
      [-8, -8 + index * 1.5],
      [-3, -8 + index * 1.5],
      [sliderConfig.min, sliderConfig.value, sliderConfig.max]
    ], {
      name: sliderConfig.name,
      visible: false,
    });
  });
  
  // 创建函数曲线
  config.expressions.forEach((expr, index) => {
    try {
      const func = new Function(
        'x', 
        ...Object.keys(sliders),
        `with(Math) { return ${expr}; }`
      );
      
      board.create('functiongraph', [
        (x) => {
          const sliderValues = Object.keys(sliders).map(key => sliders[key].Value());
          return func(x, ...sliderValues);
        }
      ], {
        strokeColor: getGraphColor(index),
        strokeWidth: 2,
      });
    } catch (e) {
      console.error('Expression parse error:', expr, e);
    }
  });
}

function getGraphColor(index) {
  const colors = [
    '#3b82f6',
    '#e74c3c',
    '#27ae60',
    '#f39c12',
    '#9b59b6',
    '#1abc9c',
  ];
  return colors[index % colors.length];
}

// 初始化
function initOnLoad() {
  waitForJSXGraph().then(() => {
    observeMathGraphs();
  });
}

document.addEventListener('DOMContentLoaded', initOnLoad);

if (document.readyState !== 'loading') {
  initOnLoad();
}

// 支持 Swup 页面切换
document.addEventListener('swup:contentReplaced', () => {
  setTimeout(initMathGraphs, 300);
});

if (window?.swup?.hooks) {
  window.swup.hooks.on('page:view', () => {
    setTimeout(initMathGraphs, 300);
  });
}

关键点说明：

MutationObserver: 监听 DOM 变化，自动初始化新添加的图形
waitForJSXGraph: 等待 JSXGraph 库加载完成
防重复初始化: 使用 data-initialized 标记
Swup 兼容: 监听页面切换事件

使用方法

基本语法

在 Markdown 文件中使用：

```mathgraph
sliders:
  参数名: [最小值, 默认值, 最大值, 步长]
expressions:
  - 数学表达式
axis: true/false
grid: true/false
```

支持的数学函数

基本运算: +, -, *, /, ^
三角函数: sin, cos, tan, asin, acos, atan
指数对数: exp, log, log10, sqrt
其他: abs, floor, ceil, round

进阶定制

自定义颜色

修改 getGraphColor 函数：

function getGraphColor(index) {
  const colors = [
    '#your-color-1',
    '#your-color-2',
    // ...
  ];
  return colors[index % colors.length];
}

调整画板范围

修改 boundingbox 参数：

const board = JXG.JSXGraph.initBoard(boardId, {
  boundingbox: [-5, 5, 5, -5], // [x_min, y_max, x_max, y_min]
  // ...
});

添加更多配置选项

在 parseMathGraphConfig 函数中添加新的配置项：

if (trimmed.startsWith("boundingbox:")) {
  const values = trimmed.split(":")[1].trim().split(",").map(Number);
  config.boundingbox = values;
}

常见问题

Q: 图形不显示？

A: 检查以下几点：

JSXGraph 文件是否正确下载到 public/jsxgraph/
浏览器控制台是否有错误
Markdown 语法是否正确

Q: 需要手动刷新才显示？

A: 这是初始化时机问题，确保：

使用了 MutationObserver
等待 JSXGraph 加载完成
监听了 Swup 页面切换事件

Flags

Sun, 22 Mar 2026 00:00:00 GMT

3D模型展示：支持嵌入和交互式3D模型（Mathematica 支持）
智能搜索：语义搜索，引用溯源
~~匿名留言板 / 说说~~ 参考文章：Fuwari匿名留言板功能 demo：说说
稍后再读
可通过Localstorage存储

自建Fuwari静态站点及功能拓展

Thu, 26 Feb 2026 00:00:00 GMT

花了两三天，怎么说差不多搞了个大概。也把之前wordpress上的内容大多搬运过来了。
其实跟着教程走很快，所以下面是本站参考并借鉴过的项目/文章：
（感谢各位大佬🙏🙏🙏）

一、站点搭建

1.本站使用 Astro & Fuwari 构建：

::github{repo="saicaca/fuwari"}
参考文章：Fuwari静态博客搭建教程

二、写文章

2.MD编辑器+配置

推荐 Obsidian（黑曜石）
::github{repo="obsidianmd/obsidian-releases"}
方便起见，直接把Obsidian仓库目录设在跟你的fuwari项目同目录下，
然后配置图片链接，md文件中不能直接内嵌图片，需要手动设置每个图片的链接。
为了已经习惯了 Ctrl+CV 的我们写文章更加丝滑，需要在Obsidian中更改默认附件存储地址：
设置 -> 文件与链接 修改两条：

附件默认存放路径	->	指定的附件文件夹
附件文件夹路径	->	public/assets/images

关闭使用Wiki链接：

于是你在写文章的时候就可以像word一样丝滑啦~
附示例文件架构如图：

（Obisidian v1.12.0 起原生支持自动删除附件）

于是你又可能发现 RSS 订阅中的图片无法正常显示，于是聪明的你打开了这篇文章：Fuwari RSS 图片路径修复指北 - Wer Blog
（懒得看的话可以像我一样丢给AI）

然后应该就能在你的 RSS 阅读器里看到所有图片了：

三、功能拓展

3.评论系统：Twikoo

参考文章：给你的 Fuwari 接入 Twikoo 评论
demo：翻到页面最下面

4.运行时间

参考文章：如何在Fuwari页脚添加ICP、运行时间等信息
demo：翻到页面最最下面

5.Mermaid 图表

参考文章：为你的 Fuwari 集成 Mermaid 图表支持
demo：Demo

6.密码保护

参考文章 & demo：给Fuwari博客添加密码保护功能（test123）基于 Astro&Fuwari 主题博客的页面加密功能研究 | 时歌的博客

7.友链

参考文章：Fuwari 博客添加友链页面详细教程 - 翊羽不会飞
demo：友链 - Yuer6327

8.文章反应

参考文章：Fuwari文章反应功能
demo：本站就有

9.文章分享

参考文章：Fuwari文章分享功能
demo：本站就有

10.侧边栏天气组件

参考文章：Fuwari侧边栏天气组件
demo：本站就有

11.匿名留言板（说说）

参考文章：Fuwari匿名留言板功能
demo：说说

12.稍后再读

参考文章：Fuwari「稍后再读」功能实现
demo：本站侧栏

first-post

Tue, 24 Feb 2026 00:00:00 GMT

好吧这段时间老有闲人来打动态站（我觉得我的站点毫无攻击价值啊？）

infinity 限制每日hits上限然后就直接强制下线了

emm好吧那我觉得是时候转静态站点了：所以这是一个托管在cloudflare大善人上的静态站点......也许以后会彻底转向静态博客，但是目前还有很长一段路要走（还有很多功能要做），我尽量在寒假结束之前把这个静态站基础搞好吧。

2/28 更新：
开学前最后一天，随着中东燃起的战火，寒假也是接近尾声了 qaq
那只能先搞到这了，具体建站日志转：自建Fuwari静态站点 - Yuer6327

小项目：单PHP在线聊天室 🌱

Fri, 02 Jan 2026 00:00:00 GMT

:::note 项目已搁置，后续开发将由mkliu继续 :::

::github{repo="<michaelliunsky>/<Chatom>"}

2026新年快乐！
翻代码时翻到这个小项目，去年和michaelliunsky随手写的轻量级聊天室系统（为了上信息课的时候不依赖其他聊天平台......）现在高一信息合格考结束后没有信息课了这个项目就荒废了😅 现在想起来又维护了一下，嘿嘿还能用！😋 那就干脆重构一下当个大更新罢✨
（<mark>AI</mark>长文预警🚨🚨🚨）

为什么要做这个？

事情是这样的：~~有次团队临时要讨论需求~~信息课有远程聊天需求，但发现常用工具要么要注册登录、要么要下载安装客户端，甚至还有要付费的...我就想："能不能用最简单的方式搭个临时聊天室？" 于是花了一个周末，撸出了这个单文件PHP解决方案。

它到底有多"轻"？

核心就一个文件：整个系统只有 index.php（加上README总共2个文件）
零依赖：不需要数据库，不需要框架，PHP 7.0+ 直接跑
部署超简单：上传index.php -> 改两行配置（标题/logo）-> 搞定！

作为开发者，我最得意的设计

1. 文件存储的巧思

不用数据库不是偷懒，而是刻意为之。聊天记录直接存在 data/ 目录下：

php*// 每个房间一个 .txt 文件* $room_file = __DIR__ . '/data/' . $room . '.txt';

这样做的好处：

避免数据库单点故障
直接用文本编辑器就能看历史消息（排查问题超方便）
自动清理旧消息的逻辑特别简单：php$del_time = date('Y-m-d H:i:s', time() - 2592000); *// 30天*

2. 加密传输的小把戏

消息不是明文传输的，用了个简单的双重加密：

phpfunction encodeContent($content) { $content = base64_encode(urlencode($content)); *// 再做一层字符替换...* }

虽然比不上TLS，但至少能防住隔壁工位偷看屏幕 😜

3. 长轮询的Nginx适配

最头疼的是Nginx环境下sleep()会卡住整个服务，最后用这个方案解决：

phpif (strpos($_SERVER['SERVER_SOFTWARE'], 'nginx') !== false) { *// 直接获取消息* } else { *// 普通环境用sleep轮询* }

它不完美，但很实用

当然啦，作为个人项目，它也有局限：

❌ 没有用户系统（靠浏览器localStorage记昵称）
❌ 传输会卡（毕竟是文本存储）
❌ 移动端体验一般（CSS没专门优化）

但作为临时沟通场景，它真的够用：

开会时快速建个房间分享链接 ✅
信息课临时偷偷建个群聊 ✅

最后说点心里话

如果你也需要个轻量、可控、不折腾的聊天工具，欢迎试试看： 👉 GitHub地址

**PS：**用得好记得点个star，有问题随时提issue，咱们一起让这个小项目更好用~ 🙌

（悄悄说：最近在考虑加个"消息撤回"功能，有啥建议欢迎留言呀！）

10-20

Mon, 20 Oct 2025 00:00:00 GMT

Backup from old & Corrected a few typos

RSS

Tue, 12 Aug 2025 00:00:00 GMT

Wikipedia：

RSS（英文全称：RDF Site Summary 或 Really Simple Syndication），中文译作简易信息聚合，也称聚合内容，是一种消息来源格式规范，用以聚合多个网站更新的内容并自动通知网站订阅者。使用RSS后，网站订阅者无需手动查看网站是否有新的内容，同时RSS能将多个网站的更新集成并以摘要形式呈现，有助于订阅者快速获取重要信息，并选择性点击查看。

RSS摘要可以借由RSS阅读器、Feed Reader或aggregator等网页或以桌面为架构的软件来阅读。标准的XML档式可允许信息在一次发布后通过不同的程序阅览。用户借由将网摘输入RSS阅读器，或是用鼠标点取浏览器上指向订阅程序的RSS小图标URI（非通常所称的URL）来订阅网摘。RSS阅读器会定期检查网站更新情况，并将更新内容下载到用户界面。

本站RSS：https://blog.yuer6327.top/rss.xml

推荐RSS阅读器：

MrRss
Folo
This message is used to verify that this feed (feedId:249800300973418496) belongs to me (userId:176917412196345856). Join me in enjoying the next generation information browser https://folo.is.

订阅链接示例：

链接：https://blog.yuer6327.top/rss.xml、https://blog.mkliu.top/feed

RSShub：rsshub://twitter/user/sama、rsshub://bilibili/user/video/163637592（详见rsshub官方文档）

研究日志-平台篇

Mon, 14 Jul 2025 00:00:00 GMT

时间	操作	内容	字数
2025-05-27 22:47:52	新增	Initial_Update-20250527<br>Create .gitignore<br>创建主要目录（如 assets、includes、insurer、user 等）<br>完成最基础的代码文件<br>实现基本平台功能	443
2025-06-02 15:31:15	新增	add length restriction<br>also in login page<br>增加对输入框输入长度的限制（主要是车牌号输入部分）<br>根据《中华人民共和国机动车号牌》国家标准：<br>一、车牌号格式规定（燃油车牌）<br>燃油车牌号由七位字符组成，结构如下：<br>第1位：省级行政区简称（如“粤”、“沪”、“京”等）；<br>第2位：发牌机关代号（英文字母，如“A”、“B”等）；<br>第3至7位：序号，由阿拉伯数字和英文字母组合而成，最多可使用两个英文字母。<br>二、燃油车牌中禁止使用的字母<br>在燃油车牌的序号部分（即后五位），禁止使用以下两个字母：<br>字母“O”（易与数字“0”混淆）<br>字母“I”（易与数字“1”混淆）<br>注：该限制适用于所有燃油机动车，包括小型、大型汽车、摩托车等，不区分车辆类型。	445
2025-06-02 22:02:42	新增	add function: check availability<br>add front end support<br>增加对输入框输入车牌号合理性的检查和前端反馈（格式不合规显示红色边框）<br>	446
2025-06-09 10:48:25	新增	add NEV-support<br>增加对新能源车牌的识别（显示绿点）<br>依据中华人民共和国公共安全行业标准《中华人民共和国机动车号牌》（GA36—2018），小型新能源汽车号牌号码为6位数。号牌号码首位字母“D”（优先启用）、“A”、“B”、“C”、“E”代表纯电动汽车。号牌号码首位字母“F”（优先启用）、“G”、“H”、“J”、“K”代表非纯电动汽车。	103
2025-06-09 18:48:20	修订	improve UI design<br>center location<br>Dark Mode Support<br>fix location<br>add icon<br>更新前端交互界面设计<br>优化排版、增加黑色主题、设计图标	156
2025-06-25 15:15:42	新增	add function: charts<br>增加图表获得更好的数据呈现	203
2025-06-25 19:59:16	修订	add Gradient<br>add card scheme<br>更新前端交互界面设计<br>增加标题渐变色、用卡片式布局呈现不同内容	297
2025-06-25 21:12:39	新增	add trends<br>增加未来趋势预测	205
2025-06-25 23:21:39	修订	delete dark mode<br>删除黑色主题支持
2025-06-26 08:35:39	修订	delete useless css<br>rebuild combobox<br>fix combobox logic<br>fix combobox abnormal behaviour<br>rewrite combobox focus<br>DEL BLUEEEEE<br>fix combobox background<br>删除无用代码，修改下拉框样式以符合整体设计
2025-06-27 15:07:39	修订	Refactor custom select hover and highlight effects<br>Simplified and unified the hover effect for custom select options by moving styling to CSS and removing complex JS highlight logic from script.js, script_new.js, and ios26_select.js. Fixed a typo in ios26_select.css, adjusted margin and padding for select components, and removed debug code and redundant theme initialization from login.php.
2025-06-27 15:45:39	修订	Refactor vehicle field logic and plate validation<br>Moved vehicle field show/hide logic from script.js to register.php for better integration with the custom select. Simplified and improved the car plate number validation logic in both PHP and JavaScript. Cleaned up redundant comments and styles for maintainability.
2025-06-27 16:15:39	修订	rewrite input box prompts<br>重写输入框动画逻辑，实现更加简洁明了的输入框设计
2025-06-27 17:07:39	修订	Improve CSS on insurer side.
2025-06-27 17:14:39	修订	adjust spacing between input boxs<br>调整下拉框与输入框间距，获得统一的视觉
2025-06-27 17:14:39	修订	rearrange insurer_dashboard<br>重构保险方管理面板
2025-06-27 19:20:39	修订	Refactor dashboard and vehicle list layout styles<br>Updated the dashboard max-width and removed redundant/duplicate CSS in style.css. Simplified the vehicle list layout in insurer_dashboard.php by removing JavaScript-based dynamic class switching and related CSS, using a responsive grid layout instead.
2025-07-24 19:20:39	修订	fix all icon<br>修复所有页面上图标缺失问题
2025-07-25 15:13:39	修订	fix Chinese character imput problem<br>修复输入框中文字符输入错误问题
2025-07-27 16:20:39	修订	Add CSS<br>Refactor code structure for improved readability and maintainability

科创2025

Mon, 19 May 2025 00:00:00 GMT

目标：确定具体检测什么东西+找司机行为的数据库

车体（轮胎、剐蹭、碰撞、车灯）

太平洋：

包括汽车外观，要目视检查左右后视镜、内后视镜，保证完好无损。

制动系统得检查各故障指示灯的指示状况，确保无故障报警。

转向系统不能有松旷和开裂现象。

照明、信号指示灯要正常工作。轮胎状况得良好。

轮胎压力、磨损评估，刹车系统中刹车片、刹车盘磨损程度和刹车液位检查，车灯及信号灯包括前大灯、转向灯、刹车灯等是否正常，发动机及传动系统如皮带、风扇等的检查，悬挂和排气系统的检查，油箱、油管、油封等的查看，车辆外观内饰有无破损、漏水，还有发动机检测，查看其工作状态，如皮带、风扇等部件。变速器检测其性能和有无异常。转向系统检测包括转向轮侧滑和部件磨损程度。底盘检测结构完整性和部件稳固性。轮胎检测压力、磨损和花纹深度。汽车电子系统检测像车灯及信号灯。汽车玻璃检测有无破损或裂痕。车内环境检测空气质量。安全设施检测像车门应急开关、安全顶窗、安全锤、灭火器等能否正常使用。

一、汽车外观检查

1.目视检查车身外观和内部环境。车体应清洁完好，无开裂、明显腐蚀和变形。车窗玻璃应齐全完好，车内整洁。

2目视检查左右后视镜和车内后视镜，确保完好无损。

3打开挡风玻璃刮水器开关，刮水器各档位应工作正常。当雨刮器关闭时，雨刮片应自动回到初始位置。

4目视检查发动机和水箱，不应有漏油或漏液现象。

二、汽车制动系统的检查

1气压计的工作状态

启动发动机并观察气压计的指示，气压计应能正确显示系统压力。

2制动管路的密封性

对于采用气压制动的车辆，在气缸保持一定压力的情况下，关闭发动机，踩下制动踏板，检查各车轮制动气室、气阀和制动管的密封性，不应有漏气现象。

3制动系统自检

打开发动机起动开关，检查制动系统各故障指示灯的指示状态，无故障报警。

4空气压缩机驱动皮带

目视检查并用手指按压空气压缩机的传动带。不应有裂纹、油渍和异常磨损，松紧适宜。

三、汽车转向系统的检查

左右转动方向盘，检查球销总成和横拉杆。球销总成应无松动和裂纹，横拉杆应无变形和裂纹，所有锁销应完全紧固。同时检查转向机构的连接状况，连接部位应可靠无松动。四个。应目视检查传动系统1的传动机构和连接，看传动轴支架是否损坏和变形。摇动传动轴，检查传动机构的连接状态。万向节和中间轴承应无松动。2自动变速器和液力减速器的密封

对于同时装有自动变速器和液力缓速器的车辆，目视检查自动变速器和液力缓速器的密封情况，不应有漏油现象。

五、汽车照明、信号指示灯检查

1个前照灯

对前照灯进行外观检查，前照灯应完整无损，表面清晰无松动；打开大灯，应该工作正常；操作远近光开关，远近光开关应正常。

2信号指示灯

检查巡逻转向信号(前、后和侧)、刹车灯、示廓灯、危险警告灯和前后雾灯。它们应完整且状况良好，表面清洁；分别进行相应的操作，并目视检查上述信号指示器，所有指示器均应正常工作。

用不及物动词检测汽车轮胎

1轮胎外观

目视检查胎冠、胎壁等。不得有裂纹、切口、凸起、异物渗透等缺陷。长度超过25毫米或深度足以暴露。窗帘布。同时，目视检查并安装轮胎室，不得有异物嵌入。

2轮胎胎面深度

目视检查轮胎磨损情况。如有必要，使用胎面深度计测试轮胎胎冠的胎面深度。营运客车方向盘胎面花纹深度不小于3.2毫米，其他轮胎胎面花纹深度不小于1.6毫米.

3轮胎尺寸和模式

目测轮胎尺寸和花纹，同一轴线两侧的轮胎尺寸和花纹要一致。

4轮胎压力

检查每个轮胎的充气状态，必要时用气压计测量轮胎气压。胎压符合要求。

5.轮胎和车轴螺栓和螺母

检查轮胎的螺栓和螺母以及可见的车轴螺栓。所有轮胎和半轴的螺栓螺母应齐全、完好、紧固。

七、悬挂系统检查

目视检查悬架的弹性元件

目视检查灭火器，灭火器应随车配备。

九、摄像行车记录仪

目测车内摄像头，摄像头拍摄方向应符合规定，无遮挡。

综合性能检测除了安全性能检测的内容，还检测工作可靠性、动力性、燃油消耗、环保等。具体利用专用汽车检测设备对汽车进行规定项目检测，可分为转向轮侧滑、制动性能、车速表误差、前照灯性能、废气排放、喇叭声级和噪声这六项。

汽车安全检测项目：具体包括外观、制动系统、转向系统、传动系统、照明（信号指示灯）、轮胎

车辆外观检查：1、漆面无碰刮；2、灯罩完整，灯光正常；3、保险杠正常；4、车辆表面清洁。

车辆状况检查：1、空调可正常使用；2、坐垫干净整洁；3、喇叭、刮水器、中控锁工作正常；4、仪表盘与操作台正常；5、转向、离合器、变速器、油门踏板灵活可靠，制动器（含手制动）有效； 6、前后轮胎及备胎气压正常；轮胎无严重磨损；7、后备箱无杂物。

安全检查：1、门锁完好无损；2、防盗器正常。

运行检查：1、发动机运转正常，无异响与异味；2、尾气排放无冒黑烟和蓝烟现象。

基于多源数据融合的车体健康数据检测系统设计与实现.docx-原创力文档

基于新型压电传感的汽车结构健康检测技术 - 商业论文

数据库：

https://magichub.com/datasets/driver-behaviors-dataset-for-dms

https://github.com/chaopengzhang/100-DrivingStyle-Dataset

使用 DolphinDB 进行汽车用户驾驶习惯行为画像分析

最全自动驾驶数据集分享系列七 | 驾驶行为数据集 - 知乎

【数据集】驾驶员分心检测数据集（State Farm Distracted Driver Detection）_state farm数据集-CSDN博客

驾驶行为分析-华为云

本田公布104小时驾驶行为数据集：时间不长但胜在全面 | 附相关资源汇总-腾讯云开发者社区-腾讯云

Hello!

Tue, 21 Jan 2025 00:00:00 GMT

Welcome here! This is Yuer6327's personal blog here.

Still under construction

Yuer6327 Blog

记高中三年最后一餐盒饭

记高中三年最后一餐盒饭

Fuwari「稍后再读」功能

一、数据结构

二、i18n 配置

2.1 新增枚举

2.2 各语言翻译

2.3 类型声明

三、ReadLaterButton 组件

3.1 模板

3.2 样式

3.3 ReadLaterStore 全局对象

3.4 自由落体动画

克隆策略

动画与 Fetch 并行

时序图

四、侧栏 Widget

4.1 模板

4.2 侧栏列表渲染

五、接入页面

5.1 文章页

5.2 侧栏

六、踩坑记录

克隆体不可见

侧栏跟随掉落

内容注入闪烁

侧栏点击全量刷新

七、文件清单

Fuwari 匿名留言板功能

一、Supabase 数据库设置

1. 建表

2. 获取凭据

二、创建留言板页面

三、Layout.astro 添加交互逻辑

1. 辅助函数

相对时间

XSS 转义

头像 URL 解析

头像 HTML 生成

2. 消息列表渲染

3. 数据获取

4. 输入区域交互

5. 提交留言

6. 删除留言

四、接入 Swup 生命周期

五、动画

六、导航链接

七、keep-alive

八、LocalStorage 持久化

九、防刷与安全总结

Fuwari侧边栏天气组件实现

一、技术选型

1.1 天气 API：Open-Meteo

1.2 定位：浏览器 Geolocation API

1.3 Swup 兼容性

二、实现步骤

2.1 新建 Weather.astro

模板部分

SVG 天气图标

客户端脚本核心逻辑

2.2 注册到 SideBar.astro

2.3 添加 i18n 翻译

Fuwari文章分享功能实现

一、社交卡片：注入 og:image

1.1 问题

1.2 给 Layout.astro 添加 ogImage prop

1.3 透传到 MainGridLayout.astro

1.4 在文章页传入封面图

二、分享按钮：ShareButton.astro

2.1 新建组件

2.2 设计决策说明

2.3 按钮样式

2.4 点击行为

三、集成到文章页面

四、验证

文件清单

Fuwari 文章反应功能

一、Supabase 数据库设置

1. 创建项目

一、社交卡片：注入 `og:image`

2. 添加 `initReactions()` 函数