留心博客

3-2-1 备份规则：数据安全的不变真理

Mon, 30 Mar 2026 00:00:00 GMT

自 3-2-1 备份规则在 21 世纪初首次提出以来，发生了很多变化。当时，iPad 还只是苹果公司的一个构想。Facebook 只有区区 5 亿用户。泰勒·斯威夫特只发行了两张专辑。百视达视频还存在，Netflix 还在送 DVD 到你家门口。

与科技领域的大多数事物不同，3-2-1 备份规则多年来一直屹立不倒。尽管备份方法随着现代数据保护和云存储服务的发展而不断演变，但该规则仍然是数据冗余的事实标准。今天，我将解释什么是 3-2-1 备份规则，它发生了哪些变化，以及你如何轻松实现 3-2-1 备份，以保证你的数据安全和受保护。

什么是 3-2-1 备份规则？

3-2-1 备份规则是一种简单、有效的数据备份策略，用于保护你的数据安全。它建议你将数据的三个副本存储在两种不同的介质上，其中一个副本存放在异地。让我们详细分解一下：

三份数据副本：你的三个副本包括原始数据（也称为生产数据），再加上另外两个副本。
两种不同的介质：你应该将数据存储在两种不同的存储介质上，例如本地驱动器和云存储服务。如今，这与 21 世纪初的含义有所不同。我稍后会详细说明这一点。
一份异地副本：你应该将一份数据副本存放在异地，理想情况下，与另外两个副本相距几英里以上，以防范可能影响本地副本的自然和物理灾难。

如果你想保护你的个人信息、照片、工作文件或其他重要数据，3-2-1 备份策略是一个不错的选择。通过使用多种存储类型和位置，它有助于避免出现单点故障，从而防范人为错误、硬盘崩溃、盗窃、自然灾害或勒索软件带来的风险。

3-2-1 备份规则如何运作？

假设多年前你为了给税务会计提供资料，给你的社会安全卡拍了一张照片——这个文件名为“socialsecurity.jpg”，存放在你家的电脑上，作为原始数据。这也是数据的第一个“副本”。

你家里还有一个外部硬盘，用于备份你常用的 Mac 或游戏用的PC。这个外部硬盘会在备份过程中备份 socialsecurity.jpg。这是不同存储介质上的第二个副本。

除了这个外部硬盘，你还有一个在线备份解决方案（我们推荐 Backblaze，你懂的！）。在线备份会持续扫描你的电脑，并将你的数据上传到云端（通俗地说，就是异地数据中心）。Socialsecurity.jpg 也会被包含在这次上传中，成为数据的第三个副本。

哦！另外，你的纸质社会安全卡希望能存放在防火保险箱里（而不是你的钱包里），这算是一个额外的保障。

3-2-1 备份策略发生了哪些变化？

当 3-2-1 规则首次提出时，有更多类型的介质可供选择来存储数据——不起眼的软盘、CD、蓝光光盘、U盘、外部硬盘驱动器（HDD）、固态硬盘（SSD）、网络附加存储（NAS）、磁带库等等。其中一些已经不再受欢迎，并且不再适用于现代数据存储需求（CD 和 DVD，我正看着你们呢）。

别担心，软盘。我们为你找到了用处。

有些介质对于想要备份数据的典型家庭电脑用户来说既不实用也不划算（例如磁带库）。有些技术在当时价格高得令人望而却步，但现在已经便宜多了（如 SSD）。

还有一个重要的方面在当时还不主流：云™（你可能听说过它被称为“别人的电脑”）。

那么，这对 3-2-1 备份策略意味着什么呢？你还需要将数据保存在两种不同的介质上吗？

真的需要两种不同的介质吗？

简单来说：是，但也不是。如今，你不需要将数据保存在两种不同类型的介质上，但你确实需要将数据保存在两种不同的设备上。

详细来说就复杂一些了。最初，使用两种存储介质的想法有两个原因。其一，它可以防止其中一种介质在新存储技术出现时被淘汰（还是在说你呢，CD），导致数据无法用新存储技术读取。其二，将备份副本保存在单独的设备上是明智之举，这样硬件故障就不会同时影响两个本地副本。例如，如果你的电脑突然无法充电，你仍然可以从硬盘中恢复数据。

虽然介质淘汰始终是一个令人担忧的问题，但云存储用于备份的出现几乎消除了这一问题。云服务提供商负责维护物理存储设备，并确保你的数据随时可访问。因此，如果你使用云备份服务，你只需要担心将数据保存在两个设备上，而不是两种不同的介质上。这具体是什么样子呢？

最简单的 3-2-1 备份

如果你将家用电脑备份到外部硬盘，并使用诸如 Backblaze 电脑备份之类的服务将这两个设备都备份到云端，你就实现了 3-2-1 备份。

你拥有三份数据副本：一份在你的电脑上，一份在你的硬盘上，一份在云端。
你的数据存储在两种不同的设备上：你的电脑和你的外部硬盘。（严格来说，是三种设备，因为你的数据也存储在云端）。
其中一份副本是异地的：云端的副本。

3-2-1 策略仍然是标准吗？

如果你根本没有进行备份，那么实施 3-2-1 备份策略仍然是保护你的数据的最佳做法。但是，在当今世界，3-2-1 规则更多地成为了一个起点，而不是一个完整的数据备份解决方案。

勒索软件攻击的兴起要求加强 3-2-1 策略的基本原则——冗余、地理距离和访问——并增加额外的保护措施。针对联网机器并捕获包括备份在内的所有数据的网络犯罪日益增多，这意味着数据安全需要额外的保护层。

已经出现了这种行之有效的备份策略的新版本，例如 3-2-1-1-0 或 4-3-2 备份。听起来有些多余？其实不然。

好消息是，像 Backblaze 这样的公司至少可以让异地备份这部分变得不那么麻烦——我们会为你完成这项工作，并遵循安全最佳实践。

为什么我既需要本地备份又需要异地备份？

无论你是想备份 Mac 还是PC，本地备份都是在电脑出现问题时快速访问数据的简单方法。如果你的笔记本电脑或台式机的硬盘崩溃了，而你有一个最新的外部硬盘，你可以快速找回大部分数据，或者在你的电脑维修或更换期间，将外部硬盘用于另一台电脑。

如果你记得让外部硬盘保持更新，数据丢失的风险就会很小，因为你可能只会丢失笔记本电脑上未复制的文件。大多数外部硬盘甚至都附带了确保其随时更新的软件。

拥有本地备份是一个很好的开始，但拥有异地备份（例如云存储备份）是完整备份策略的关键组成部分。

更新的备份策略利用了云的优势，提供：

便利性：在云端备份大量数据速度很快。
耐用性和可靠性：你的数据受到保护，免受火灾、自然灾害等影响。
协作性：通过权限进行共享直观且轻松。

3-2-1 备份规则是完美的吗？

世上没有完美的备份系统，但 3-2-1 方法对大多数人和企业来说都是一个很好的起点。甚至美国政府也推荐这种方法。在 2012 年为美国计算机应急准备小组（US-CERT）撰写的一篇论文中，卡内基梅隆大学在其出版物《数据备份选项》中推荐了 3-2-1 方法。

然而，随着数据风险的演变，特别是随着勒索软件等网络威胁的增加以及针对备份副本的定向攻击，许多组织正在探索增强型策略，如 3-2-1-1-0 或 4-3-2。这些较新的方法在 3-2-1 规则的基础上，增加了额外的数据完整性和安全性层。

实际上，3-2-1 规则提供了一种平衡的方法：将三份数据副本存储在两种不同的存储类型中，并进行一份异地备份，可防范硬件故障、自然灾害和大多数网络攻击。

但根据你的业务连续性需求和数据敏感性，你可能希望探索提供更快恢复时间和额外数据保护的其他备份解决方案。

备份是最好的保障

3-2-1 计划非常适合备份你的文件。如果你把这个策略看作是一份保险单，你会希望它能在不可想象的事情发生时提供所需的保障。服务也很重要；拥有本地、异地和离线备份会给你更多的备份恢复选择。

Backblaze 备份，3-2-1 就绪……

虽然 Backblaze 无法帮助解决停电、电脑加密或防盗技术问题（尽管我们可以定位电脑），但我们简化了你的数据备份过程。而且（根据我们最近的调查），只有 11% 的拥有电脑的受访者每天进行备份，人们确实需要帮助！

开始使用 Backblaze 电脑备份（适用于你的个人或企业电脑）有助于解决你完整的 3-2-1 备份策略中至关重要的“1”。而且，凭借我们包含的一年版本历史功能（如果你想升级，还可以选择永久版本历史），如果你的物理设备出现任何问题，你对备份数据会有额外的保护层。

Fuwari 博客改造计划：为页面添加“双向滚动”控制（置顶与置底）

Sun, 05 Apr 2026 00:00:00 GMT

为什么需要双向滚动？

Fuwari 原生只提供了一个“返回顶部”按钮。但在实际阅读长文或翻阅评论区时，用户往往也需要快速“直达底部”。为了保持界面的一致性，我们将这两个功能整合在同一个视觉区域，通过智能的算法自动判断该显示哪一个按钮，从而提升导航效率。

设计架构

这是一个典型的“状态驱动”交互，我们需要处理好 UI、逻辑与框架生命周期的协作：

1. UI 表现层 (Component Layer)

我们将原有的单按钮组件重构为 flex-col 垂直排列的按钮组。

容器定位：使用 fixed 定位在屏幕右侧，并利用 transform 处理初始的隐藏偏移。
视觉反馈：通过 transition 实现平滑的缩放和位移过渡。

2. 核心逻辑层 (Logic Layer)

滚动判定：通过 window.onscroll 实时对比 scrollTop（当前滚动距离）、clientHeight（视口高度）与 scrollHeight（页面总高度）。
智能互斥：
- 当页面不在顶部时，显示“返回顶部”。
- 当页面距离底部超过一定阈值（如 100px）时，显示“下滑到底部”。

3. 生命周期适配层 (Integration Layer)

由于 Fuwari 使用了 Swup 路由，页面跳转时 DOM 会被替换。如果只在初次加载时获取按钮引用，跳转后脚本将无法找到新页面的按钮。

重新初始化：必须在 Swup 的 page:view 钩子中重新执行 getElementById，确保逻辑始终绑定在当前的活动元素上。

核心实现步骤

1. 重构基础组件

修改 src/components/control/BackToTop.astro。我们将原来的 ID 移到了内部的按钮容器上，并引入了 Flex 布局。

<div class="scroll-controls-wrapper hidden lg:block">
    <div class="scroll-controls-container flex flex-col gap-2">
        <!-- 返回顶部 -->
        <div id="back-to-top-btn" class="scroll-btn hide" onclick="window.scroll({top: 0, behavior: 'smooth'})">
            <button class="btn-card h-[3.75rem] w-[3.75rem]">
                <Icon name="material-symbols:keyboard-arrow-up-rounded" />
            </button>
        </div>
        <!-- 下滑到底部 -->
        <div id="scroll-to-bottom-btn" class="scroll-btn" onclick="window.scroll({top: document.documentElement.scrollHeight, behavior: 'smooth'})">
            <button class="btn-card h-[3.75rem] w-[3.75rem]">
                <Icon name="material-symbols:keyboard-arrow-down-rounded" />
            </button>
        </div>
    </div>
</div>

2. 注入全局滚动算法

在 src/layouts/Layout.astro 中找到 scrollFunction 并升级它。

关键代码解析：

function scrollFunction() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let scrollHeight = document.documentElement.scrollHeight;
    let clientHeight = document.documentElement.clientHeight;

    // 如果向下滚动超过 Banner，显示返回顶部
    if (scrollTop > bannerHeight) backToTopBtn.classList.remove('hide');
    else backToTopBtn.classList.add('hide');

    // 如果还没滚到底部（预留100px），显示滑到底部
    if (scrollTop + clientHeight < scrollHeight - 100) {
        scrollToBottomBtn.classList.remove('hide');
    } else {
        scrollToBottomBtn.classList.add('hide');
    }
}

3. 解决 Swup 跳转失效问题

这是很多改造者容易忽略的一步。在 Layout.astro 的 setup 函数中，我们需要监听 page:view 事件来重新获取 DOM 引用：

window.swup.hooks.on('page:view', () => {
    // 页面跳转后，旧的按钮对象已不存在于文档中，必须重新获取
    backToTopBtn = document.getElementById('back-to-top-btn');
    scrollToBottomBtn = document.getElementById('scroll-to-bottom-btn');
});

细节优化建议

间距调整：我们在按钮组中使用了 gap-2，确保两个按钮之间有微小的缝隙，防止误触。
阴影与背景：复用了 Fuwari 的 btn-card 类，使其在暗色模式下也能保持完美的视觉一致性。

结语

通过这次改造，您的博客不仅能“快速回头”，也能“一冲到底”。这种对细节的极致追求，能显著降低用户在长文中的操作疲劳感。

Fuwari 博客改造计划：为侧边栏添加 Sticky 文章目录

Sun, 05 Apr 2026 00:00:00 GMT

为什么需要侧边栏目录？

Fuwari 原生的目录索引仅在 2K 屏幕以上可见。对于大多数 1080P 或更小屏幕的用户，阅读长文章时缺乏导航。此外，在阅读文章时，顶部的头像卡片（Profile）信息冗余。通过“动态替代”方案，我们可以在阅读时将头像换成目录，并让它始终固定在侧边栏顶部。

设计架构

为了实现平滑的切换和高效的导航，我们采用了容器替换 + 路由感知的设计模式：

1. 动态路由感知 (Route Awareness)

在侧边栏组件中注入当前路径判断逻辑。只有当路径匹配 /posts/ 且文章包含标题数据（Headings）时，才会激活目录显示。

2. 局部容器替换 (Partial Hydration & Swup)

利用 Swup 的局部容器更新特性，将侧边栏顶部划分为独立容器 #sidebar-top。

首页/归档页：渲染 Profile 组件。
文章页：渲染 SideBarTOC 组件。 Swup 会在页面跳转时精准替换此区域，实现“移花接木”的效果。

3. 粘性布局 (Sticky Strategy)

将目录组件放入侧边栏的 sticky 区域。通过隐藏非 Sticky 的头像卡片，目录卡片会自动上移至侧边栏的最顶端，并在滚动时始终锁定在视口内。

核心实现步骤

1. 创建 SideBarTOC.astro

创建 src/components/widget/SideBarTOC.astro。为保持简洁，我们仅提取一级标题展示。

---
import type { MarkdownHeading } from "astro";
import { siteConfig } from "../../config";
import { url } from "../../utils/url-utils";

interface Props {
	class?: string;
	headings: MarkdownHeading[];
}

let { headings = [] } = Astro.props;
let minDepth = Math.min(...headings.map(h => h.depth), 10);
---
<div class:list={["card-base p-4", Astro.props.class]}>
    <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-4 mb-2
        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:left-[-16px] before:top-[5.5px]">
        目录
    </div>
    <div class="max-h-[70vh] overflow-y-auto hide-scrollbar">
        {headings.filter(h => h.depth === minDepth).map((heading, idx) => (
            <a href={`#${heading.slug}`} class="px-2 flex gap-2 relative transition w-full py-2 hover:bg-[var(--toc-btn-hover)] rounded-xl">
                <div class="bg-[var(--toc-badge-bg)] text-[var(--btn-content)] w-5 h-5 shrink-0 rounded-lg text-xs flex items-center justify-center font-bold">
                    {idx + 1}
                </div>
                <div class="text-sm text-50">{heading.text.replace(/#$/, '')}</div>
            </a>
        ))}
    </div>
</div>

2. 集成到 SideBar

修改 src/components/widget/SideBar.astro，实现组件切换。

<div id="sidebar">
    <div id="sidebar-top" class="transition-swup-fade mb-4">
        {!isPostsRoute && <Profile />}
    </div>
    <div id="sidebar-sticky" class="sticky top-4">
        <div id="sidebar-toc" class="transition-swup-fade">
            {isPostsRoute && <SideBarTOC headings={headings} />}
        </div>
        <Categories />
        <!-- ... 其他小组件 -->
    </div>
</div>

3. 配置 Swup 容器

在 astro.config.mjs 中，将新定义的 ID 加入更新列表：

containers: ["main", "#toc", "#sidebar-top", "#sidebar-toc"]

结语

这种方案不仅不占额外的屏幕空间，还极大提升了长文阅读的导航便利性，是针对侧边栏空间的二次利用。

Fuwari 博客改造计划：为侧边栏添加音乐播放器卡片

Sun, 05 Apr 2026 00:00:00 GMT

为什么选择侧边栏？

Fuwari 默认的 Aplayer 通常固定在左下角，虽然功能完整，但在视觉上略显突兀，且容易遮挡页面内容。通过将播放器封装为侧边栏卡片，不仅能让博客界面更加整洁、原生，还能利用 Fuwari 优秀的侧边栏粘性（Sticky）效果，让音乐控制始终触手可及。

设计架构

为了在 Astro 这种静态站点生成器中实现一个稳定、不重叠的音乐播放器，我们采用了以下分层架构：

1. 组件封装层 (Component Layer)

使用 MusicPlayer.astro 作为核心。它负责：

资源注入：按需引入 APlayer 和 MetingJS 的 CDN 脚本与样式。
DOM 占位：提供一个标准的 card-base 容器，确保视觉样式与主题统一。
配置声明：通过 Data Attributes（在脚本中动态设置）定义歌单来源。

2. 生命周期管理层 (Lifecycle Management)

由于 Fuwari 使用了 Swup 进行无刷新跳转，传统的脚本执行逻辑会失效。我们构建了一个闭环的生命周期：

初始化 (Init)：在 DOMContentLoaded 和 astro:page-load 时触发，确保首次进入或刷新页面时播放器可用。
清理 (Cleanup)：在 Swup 的 content:replace 阶段，主动调用 aplayer.destroy()。这是防止多重音轨叠加的核心逻辑。
重建 (Rebuild)：在 Swup 的 page:view 阶段重新实例化，确保在切换页面后播放器依然存在于新的侧边栏 DOM 中。

3. 数据与逻辑通信 (Data & Logic)

全局单例：将 APlayer 实例挂载到 window.musicPlayerInstance，实现跨组件、跨页面的实例追踪。
异步适配：由于 MetingJS 是异步渲染 DOM，架构中包含了一个轮询捕获机制，确保在 DOM 准备就绪后再绑定实例控制权。

核心实现步骤

1. 创建 MusicPlayer 组件

创建文件 src/components/MusicPlayer.astro：

---
---
<!-- 引入 APlayer 和 MetingJS 的 CDN 资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
<script is:inline src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script is:inline src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<div class="pb-4 card-base">
    <!-- 卡片标题样式，契合 Fuwari 主题 -->
    <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
      before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
      before:absolute before:left-[-16px] before:top-[5.5px]">
        音乐
    </div>

    <!-- 播放器容器 -->
    <div class="px-4" id="music-player-container"></div>
</div>

<script is:inline>
// 全局变量存储播放器实例，用于后续销毁
window.musicPlayerInstance = null;

function initMusicPlayer() {
    // 1. 销毁已存在的实例，防止页面切换后出现多个播放器叠加或报错
    if (window.musicPlayerInstance) {
        try {
            window.musicPlayerInstance.destroy();
        } catch (e) {
            console.error('销毁旧播放器实例失败:', e);
        }
        window.musicPlayerInstance = null;
    }

    // 2. 清除并重建容器
    const container = document.getElementById('music-player-container');
    if (!container) return;
    container.innerHTML = '';

    // 3. 动态创建 meting-js 元素
    const metingElement = document.createElement('meting-js');
    metingElement.setAttribute('server', 'netease'); 
    metingElement.setAttribute('type', 'playlist'); 
    metingElement.setAttribute('id', '2501170701'); 
    metingElement.setAttribute('fixed', 'false');  
    metingElement.setAttribute('autoplay', 'false');
    metingElement.setAttribute('theme', 'var(--primary)');
    metingElement.setAttribute('loop', 'all');
    metingElement.setAttribute('order', 'list');
    metingElement.setAttribute('preload', 'auto');
    metingElement.setAttribute('list-folded', 'true');
    metingElement.setAttribute('list-max-height', '300px');

    container.appendChild(metingElement);

    // 4. 手动触发 MetingJS 初始化
    if (typeof window.Meting === 'function') {
        window.Meting(metingElement);
    }

    // 5. 轮询获取生成的 APlayer 实例并存储
    let retryCount = 0;
    const maxRetries = 10;
    const checkAPlayer = () => {
        const aplayerElement = container.querySelector('.aplayer');
        if (aplayerElement && aplayerElement.aplayer) {
            window.musicPlayerInstance = aplayerElement.aplayer;
        } else if (retryCount < maxRetries) {
            retryCount++;
            setTimeout(checkAPlayer, 200);
        }
    };
    checkAPlayer();
}

// 适配多种页面加载场景
document.addEventListener('DOMContentLoaded', initMusicPlayer);
document.addEventListener('astro:page-load', initMusicPlayer);

// 特别适配 Swup 路由切换
if (window.swup) {
    window.swup.hooks.on('content:replace', () => {
        if (window.musicPlayerInstance) {
            try {
                window.musicPlayerInstance.destroy();
            } catch (e) {
                console.log('Swup 切换时销毁播放器:', e);
            }
            window.musicPlayerInstance = null;
        }
    });
    window.swup.hooks.on('page:view', initMusicPlayer);
}
</script>

2. 集成到侧边栏

打开 src/components/widget/SideBar.astro，将刚才创建的组件引入并放置在合适的位置。

---
// ... 其他导入
import MusicPlayer from "../MusicPlayer.astro";
// ...
---
<div id="sidebar" class:list={[className, "w-full"]}>
    <!-- ... Profile 等组件 -->
    <div id="sidebar-sticky" ...>
        <Categories ... />
        <Tag ... />
        <!-- 在这里添加音乐播放器 -->
        <MusicPlayer class="onload-animation" style="animation-delay: 250ms" />
    </div>
</div>

技术细节说明

Swup 路由适配

Fuwari 使用了 Swup 实现无刷新页面切换。如果不做处理，切换页面时旧的 APlayer 实例会残留在 DOM 之外继续工作，导致出现“重音”或者无法控制的情况。我们在脚本中监听了 content:replace 钩子，确保在页面内容更新前彻底销毁旧实例。

实例获取

由于 MetingJS 是异步生成 APlayer 结构的，我们使用了一个简单的 setTimeout 轮询机制来捕获生成的 aplayer 对象，以便我们在全局范围管理它。

如何自定义

你只需要修改 MusicPlayer.astro 中的 meting-js 属性：

server: 平台（netease - 网易云，tencent - QQ音乐）。
id: 歌单、专辑或单曲的 ID。
theme: 播放器主色调，代码中已设为 var(--primary) 以匹配你的主题色。

结语

通过这种方式实现的音乐播放器，不仅外观上与 Fuwari 的卡片式设计完美融合，而且在性能和稳定性上也针对 Astro 的特性进行了优化。快去换上你喜欢的歌单吧！

参考与致谢

原始方案参考：fuwari主题侧边栏音乐播放器解决方案 - xagunelのblog
技术支持：APlayer & MetingJS

Fuwari 博客改造计划：如何使用 Expressive Code

Fri, 03 Apr 2026 00:00:00 GMT

在这篇文章中，我们将探索如何使用 Expressive Code 来增强 Markdown 中的代码块显示。以下示例基于官方文档，您可以查阅文档以获取更多详细信息。

1. 语法高亮 (Syntax Highlighting)

Expressive Code 提供了强大的语法高亮功能。

常规语法高亮

console.log('这段代码具有语法高亮！')

渲染 ANSI 转义序列

ANSI 颜色示例:
- 标准: [31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m洋红[0m [36m青色[0m
- 加粗: [1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m洋红[0m [1;36m青色[0m
- 变暗: [2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m洋红[0m [2;36m青色[0m

256 色 (显示 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

全 RGB 颜色:
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[0m

文本格式: [1m加粗[0m [2m变暗[0m [3m斜体[0m [4m下划线[0m

2. 编辑器与终端外框 (Editor & Terminal Frames)

编辑器与终端外框

代码编辑器外框

```js title="my-test-file.js"
console.log('带有标题属性的示例')```

console.log('带有标题属性的示例')

```html  <!-- src/content/index.html -->
<div>通过注释指定文件名的示例</div>```

<!-- src/content/index.html -->
<div>通过注释指定文件名的示例</div>

终端外框

```bash
echo "这个终端外框没有标题"```

echo "这个终端外框没有标题"

```powershell title="PowerShell 终端示例"
Write-Output "这个带有一个标题！"```

Write-Output "这个带有一个标题！"

覆盖外框类型

```sh frame="none"
echo "看，没有任何外框！"```

echo "看，没有任何外框！"

```ps frame="code" title="PowerShell Profile.ps1"
# 如果不手动覆盖，这通常会被自动识别为终端外框
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail```

# 如果不手动覆盖，这通常会被自动识别为终端外框
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

3. 文本与行标记 (Text & Line Markers)

文本与行标记

标记整行或行范围

```js {1, 4, 7-8}
// 第 1 行 - 通过行号标记
// 第 2 行
// 第 3 行
// 第 4 行 - 通过行号标记
// 第 5 行
// 第 6 行
// 第 7 行 - 通过范围 "7-8" 标记
// 第 8 行 - 通过范围 "7-8" 标记```

// 第 1 行 - 通过行号标记
// 第 2 行
// 第 3 行
// 第 4 行 - 通过行号标记
// 第 5 行
// 第 6 行
// 第 7 行 - 通过范围 "7-8" 标记
// 第 8 行 - 通过范围 "7-8" 标记

选择行标记类型 (mark, ins, del)

```js title="line-markers.js" del={2} ins={3-4} {6}
function demo() {
  console.log('这一行被标记为已删除')
  // 这一行和下一行被标记为已插入
  console.log('这是第二个插入行')

  return '这一行使用中性的默认标记类型'
}```

function demo() {
  console.log('这一行被标记为已删除')
  // 这一行和下一行被标记为已插入
  console.log('这是第二个插入行')

  return '这一行使用中性的默认标记类型'
}

为行标记添加标签

```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>```

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

添加长标签

```jsx {"1. 在这里提供 value 属性:":5-6} del={"2. 移除 disabled 和 active 状态:":8-10} ins={"3. 添加此项以在按钮内渲染子元素:":12-15}
// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>```

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用类似 Diff 的语法

```diff
+这一行将被标记为已插入
-这一行将被标记为已删除
这是一行普通代码```

+这一行将被标记为已插入
-这一行将被标记为已删除
这是一行普通代码

```diff
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个真实的 diff 文件示例
-所有内容都将保持原样
 连空格也不会被移除```

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个真实的 diff 文件示例
-所有内容都将保持原样
 连空格也不会被移除

将语法高亮与 Diff 语法结合

```diff lang="js"
  function thisIsJavaScript() {
    // 整个代码块按 JavaScript 高亮，
    // 同时我们仍然可以添加 diff 标记！
-   console.log('旧的代码将被移除')
+   console.log('全新的闪亮代码！')
  }```

  function thisIsJavaScript() {
    // 整个代码块按 JavaScript 高亮，
    // 同时我们仍然可以添加 diff 标记！
-   console.log('旧的代码将被移除')
+   console.log('全新的闪亮代码！')
  }

标记行内的特定文本

```js "指定文本"
function demo() {
  // 标记行内任何出现的“指定文本”
  return '支持多次匹配指定文本';
}```

function demo() {
  // 标记行内任何出现的“指定文本”
  return '支持多次匹配指定文本';
}

正则表达式

```ts /ye[sp]/
console.log('单词 yes 和 yep 都将被标记。')```

console.log('单词 yes 和 yep 都将被标记。')

标记行内标记类型 (mark, ins, del)

```js "return true;" ins="inserted" del="deleted"
function demo() {
  console.log('这些是 inserted 和 deleted 标记类型');
  // return 语句使用默认标记类型
  return true;
}```

function demo() {
  console.log('这些是 inserted 和 deleted 标记类型');
  // return 语句使用默认标记类型
  return true;
}

4. 自动换行 (Word Wrap)

自动换行

为单个代码块配置换行

```js wrap
// 开启换行的示例
function getLongString() {
  return '这是一段非常长的字符串，如果不开启自动换行，它很可能超出现在容器的显示范围，除非容器极宽。'
}```

// 开启换行的示例
function getLongString() {
  return '这是一段非常长的字符串，如果不开启自动换行，它很可能超出现在容器的显示范围，除非容器极宽。'
}

```js wrap=false
// 关闭换行的示例 (wrap=false)
function getLongString() {
  return '这是一段非常长的字符串，如果不开启自动换行，它很可能超出现在容器的显示范围，除非容器极宽。'
}```

// 关闭换行的示例 (wrap=false)
function getLongString() {
  return '这是一段非常长的字符串，如果不开启自动换行，它很可能超出现在容器的显示范围，除非容器极宽。'
}

配置换行后的缩进

```js wrap preserveIndent
// 保持缩进示例 (默认开启)
function getLongString() {
  return '长字符串换行后会保持与上一行相同的缩进位置。'
}```

// 保持缩进示例 (默认开启)
function getLongString() {
  return '长字符串换行后会保持与上一行相同的缩进位置。'
}

```js wrap preserveIndent=false
// 关闭保持缩进示例 (preserveIndent=false)
function getLongString() {
  return '长字符串换行后将不再保持缩进，而是从行首开始。'
}```

// 关闭保持缩进示例 (preserveIndent=false)
function getLongString() {
  return '长字符串换行后将不再保持缩进，而是从行首开始。'
}

5. 可折叠代码段 (Collapsible Sections)

可折叠代码段插件

```js collapse={1-5, 12-14, 21-24}
// 这里的初始化样板代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 您可以设置多个折叠区域
  const a = 1
  const b = 2
  const c = a + b

  // 这一行保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 结尾的样板代码也会被再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })```

// 这里的初始化样板代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 您可以设置多个折叠区域
  const a = 1
  const b = 2
  const c = a + b

  // 这一行保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 结尾的样板代码也会被再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

6. 行号 (Line Numbers)

行号插件

为代码块显示行号

```js showLineNumbers
// 这个代码块将显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')```

// 这个代码块将显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')

```js showLineNumbers=false
// 这个代码块禁用了行号
console.log('你好？')
console.log('抱歉，你知道我在哪一行吗？')```

// 这个代码块禁用了行号
console.log('你好？')
console.log('抱歉，你知道我在哪一行吗？')

修改起始行号

```js showLineNumbers startLineNumber=5
console.log('来自第 5 行的问候！')
console.log('我在第 6 行')```

console.log('来自第 5 行的问候！')
console.log('我在第 6 行')

Windows 环境下配置 Path 环境变量教程

Wed, 01 Apr 2026 00:00:00 GMT

前言

安装某个命令行软件和编程语言时，配置 Path 是 Windows 特有的流程，这里是详细的教程，以及易错点纠正。

Step1 找到软件的安装路径#

配置 Path 需要具体的软件安装路径，这可能是一个文件或一个文件夹，具体路径可参照软件文档和你安装此软件的位置。

找到后，请复制路径到剪贴板备用。

Step2 打开环境变量设置#

在 Windows 系统中，打开“环境变量”设置的方法有很多，从最直观的图形界面到高效的命令行都有。

1. 最快捷的方法：运行命令（推荐）

这种方法不依赖系统版本（Win10/Win11 通用），且速度最快。

按下键盘上的 Win + R 键，打开“运行”对话框。
输入以下命令并回车：

sysdm.cpl
在弹出的“系统属性”窗口中，点击 高级 (Advanced) 选项卡，下方即可看到 环境变量 (Environment Variables) 按钮。

2. “开始”菜单搜索法

这是最符合直觉的操作方式。

点击任务栏的 搜索图标 或直接按下 Win 键。
输入 “环境变量”（英文系统输入 env）。
选择 “编辑系统环境变量” 或 “编辑账户的环境变量” 即可直接跳转。

3. 设置面板路径（Win10/Win11）

如果你习惯在 UI 界面中点击：

Win11: 设置 -> 系统 -> 关于 -> 高级系统设置。
Win10: 设置 -> 系统 -> 关于 -> 右侧或下方的 高级系统设置。

4. 命令行一键直达（高级用户）

如果你已经打开了终端（CMD 或 PowerShell），可以直接通过命令唤起：

CMD: 输入 rundll32.exe sysdm.cpl,EditEnvironmentVariables
PowerShell: 输入 Start-Process rundll32.exe -ArgumentList "sysdm.cpl,EditEnvironmentVariables"

5. 通过控制面板（传统方式）

虽然控制面板在淡出，但依然可用：

打开 控制面板 -> 系统和安全 -> 系统。
点击 高级系统设置。

💡 小贴士：用户变量 vs 系统变量在打开的窗口中，你会看到上下两个框： 用户变量（上方）： 仅对当前登录的 Windows 账号生效，安全性更高，推荐平时安装软件使用。 系统变量（下方）： 对这台电脑的所有用户生效，修改需谨慎。

Step3 找到 Path 环境变量，并添加路径#

在系统变量里面找到名为Path的数组型变量，点击编辑：

点击新建，粘贴第一步就复制的路径，一路确定，完成。

为 Fuwari 添加 Giscus 评论系统

Tue, 31 Mar 2026 00:00:00 GMT

介绍

Fuwari 作为一款基于 Astro 框架的轻量级静态博客模板，以其简洁的设计和卓越的性能受到开发者青睐。然而，评论功能一直是静态博客的短板，传统评论系统往往需要复杂的后端配置和数据库支持。

本文将详细介绍如何为 Fuwari 静态博客无缝集成 Giscus 评论系统，实现基于 GitHub Discussions 的轻量级、无需数据库的评论解决方案。并实现兼容亮色/暗色主题的自适应效果。

项目架构

1. 组件封装层 (`src/components/misc/Giscus.astro`)

Fuwari 将评论功能封装为一个独立的 Astro 组件。

属性传递：通过 Astro.props 接收 repo、repoId、categoryId 等配置参数。这种做法将配置信息（存储在 src/config.ts 或直接传参）与显示逻辑分离。
动态注入：使用 <script define:vars={{...}}> 将服务器端的配置变量安全地传递给客户端 JavaScript。

2. 执行逻辑层 (Client-side JS)

组件内部的脚本负责评论区的生命周期管理：

按需加载：通过 document.createElement('script') 动态创建 script 标签。这样做可以避免在页面初始加载时阻塞渲染，提升 Fuwari 引以为傲的性能。
容器绑定：评论区被挂载到一个特定的 DOM 元素（如 #giscus-container），这使得评论区在页面布局中位置固定且可控。

3. 主题同步机制 (Theme Bridge)

这是 Fuwari 集成中最关键的部分。Fuwari 允许用户手动切换亮/暗模式，Giscus 必须实时响应：

MutationObserver：脚本注册了一个 MutationObserver，监控 <html> 标签的 class 属性。
postMessage 通信：由于 Giscus 运行在 iframe 中，主页面无法直接修改其样式。当观察到主题 class 变化（如切换到 .dark）时，主页面会通过 postMessage 向 iframe 发送一个 setConfig 消息。
无刷新切换：Giscus 接收到消息后，内部会动态更换 CSS 变量，从而实现无需刷新页面就能完成评论区颜色的无缝切换。

4. 路由适配层 (`src/pages/posts/[...slug].astro`)

在 Astro 的动态路由模板中，Giscus 被放置在内容渲染区域（Markdown 内容和 License 组件）之后。

ID 匹配：通常使用 mapping="pathname"。这意味着 Giscus 会将当前页面的 URL 路径（如 /posts/my-article）作为 GitHub Discussion 的标题或标签，从而确保每篇文章都有独立的评论池。

5. 存储架构 (Backend-less)

无数据库：整个 Fuwari 项目依然保持 100% 静态。所有的评论数据、用户信息、点赞互动全部存储在你的 GitHub Repository Discussions 中。
安全性：通过 giscus.json（如果配置了的话）可以限制哪些域名可以调用该评论插件，防止他人盗用你的评论仓库。

配置

准备 GitHub 仓库

首先，我们需要在 GitHub 上创建一个专门用于存储评论的仓库。这个仓库必须是公开的，因为 Giscus 需要通过访问 GitHub 仓库来加载和提交评论。

创建新仓库
- 登录 GitHub，点击右上角 ”+” 按钮
- 选择 “New repository”
- 填写仓库名称（如 fuwari-comments）和其他必要信息
- 确保仓库可见性设置为 Public
启用 Discussions 功能
- 进入仓库的 Settings → Features
- 找到 “Discussions” 选项并勾选
- 点击 “Save changes” 保存
- Discussions 是 GitHub 为项目讨论提供的平台，Giscus 将利用这一功能存储评论

配置 Giscus

接下来，我们需要配置 Giscus 以将评论与我们的仓库关联起来。

连接仓库
- 前往 https://giscus.app/zh-CN
- 选择语言后在下方填写你的仓库
- 通过检查后 Discussion 将被连接到该仓库
选择映射关系 推荐选择 pathname，假如你的文章路径为 posts/helloworld，那么只要你保证这个路径不变，评论和页面就永远匹配
选择 Discussion 分类 推荐使用 公告（Announcements） 类型的分类，以确保新 discussion 只能由仓库维护者和 giscus 创建
获取配置信息

完成以上步骤后，记录以下配置信息，稍后将在 Fuwari 中使用：
- 仓库名称
- 仓库 ID
- 分类名称
- 分类 ID

添加到 Fuwari

创建 Giscus 组件

为了实现在亮色/暗色下都能使 Giscus 完美显示,我们需要在 src/components 目录下创建 giscus.astro 文件，内容如下：

interface Props {
  repo: string;
  repoId: string;
  category: string;
  categoryId: string;
  mapping?: string;
  reactionsEnabled?: boolean;
  emitMetadata?: boolean;
  inputPosition?: 'top' | 'bottom';
  lang?: string;
}

const {
  repo,
  repoId,
  category,
  categoryId,
  mapping = 'pathname',
  reactionsEnabled = true,
  emitMetadata = false,
  inputPosition = 'bottom',
  lang = 'zh-CN'
} = Astro.props;
---

<div id="giscus-container"></div>

<script define:vars={{ repo, repoId, category, categoryId, mapping, reactionsEnabled, emitMetadata, inputPosition, lang }}>
  function loadGiscus() {
    const container = document.getElementById('giscus-container');
    if (!container) return;

    const isDark = document.documentElement.classList.contains('dark');
    const theme = isDark ? 'dark' : 'light';

    const script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';
    script.setAttribute('data-repo', repo);
    script.setAttribute('data-repo-id', repoId);
    script.setAttribute('data-category', category);
    script.setAttribute('data-category-id', categoryId);
    script.setAttribute('data-mapping', mapping);
    script.setAttribute('data-strict', '0');
    script.setAttribute('data-reactions-enabled', reactionsEnabled ? '1' : '0');
    script.setAttribute('data-emit-metadata', emitMetadata ? '1' : '0');
    script.setAttribute('data-input-position', inputPosition);
    script.setAttribute('data-theme', theme);
    script.setAttribute('data-lang', lang);
    script.setAttribute('data-loading', 'lazy');
    script.crossOrigin = 'anonymous';
    script.async = true;

    container.appendChild(script);
  }

  // 监听主题变化
  function updateGiscusTheme() {
    const giscusFrame = document.querySelector('iframe[src*="giscus"]');
    if (giscusFrame) {
      const isDark = document.documentElement.classList.contains('dark');
      const theme = isDark ? 'dark' : 'light';

      giscusFrame.contentWindow.postMessage({
        giscus: {
          setConfig: {
            theme: theme
          }
        }
      }, 'https://giscus.app');
    }
  }

  // 监听DOM变化来检测主题切换
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        updateGiscusTheme();
      }
    });
  });

  // 页面加载时初始化
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadGiscus);
  } else {
    loadGiscus();
  }

  // 开始观察主题变化
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  });
</script>

添加到文章页面

在 src/pages/posts/[...slug].astro 文件中：
- 首先导入 Giscus 组件：

import path from "node:path";
import License from "@components/misc/License.astro";
import Markdown from "@components/misc/Markdown.astro";
import AISummary from "@components/misc/AISummary.astro";
 import Giscus from "../../components/misc/Giscus.astro";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import { licenseConfig } from "src/config";
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
import PostMetadata from "../../components/PostMeta.astro";
import { profileConfig, siteConfig } from "../../config";
import { formatDateToYYYYMMDD } from "../../utils/date-utils";

然后在许可证组件之后添加 Giscus 组件：

     <!-- always show cover as long as it has one -->

    {entry.data.image &&
        <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
    }

    <Markdown class="mb-6 markdown-content onload-animation">
        <Content />
    </Markdown>

    {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}

   <Giscus
       repo="username/repo"
       repoId=""
       category="Announcements"
       categoryId=""
   />
   <br>
</div>
</div>

添加到友链页面

在 src/pages/friends.astro 文件中：

-   首先导入 Giscus 组件：

import { getEntry, render } from "astro:content";
import Giscus from "@components/misc/Giscus.astro";
import Markdown from "@components/misc/Markdown.astro";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import { siteConfig } from "../config";
import { friends } from "../friends_data";

然后在友链卡片组件之后添加 Giscus 组件：

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {friends.map((friend) => (
                <a href={friend.url} target="_blank" rel="noopener noreferrer" class="friend-card">
                    <div class="flex items-center gap-2">
                        <img src={friend.avatar} loading="lazy" class="w-5 h-5 rounded" alt={friend.name}>
                        <div class="font-bold text-black dark:text-white">{friend.name}</div>
                    </div>
                    <div class="text-sm text-black/50 dark:text-white/50">{friend.description}</div>
                </a>
            ))}
        </div>

        <Giscus
             repo="worhllo2/Blog-fuwari"
             repoId="R_kgDOR4xu1A"
             category="General"
             categoryId="DIC_kwDOR4xu1M4C58lt"
        />

        </div>
</MainGridLayout>

保存文件后重新构建项目即可看到评论区

通过以上步骤，你就成功为 Fuwari 添加了功能完善的评论系统，！🎉

转载说明

为 Fuwari 添加 Giscus 评论系统 - THW's Blog

为 Astro 加上在新标签页打开链接的功能

Tue, 31 Mar 2026 00:00:00 GMT

前言

在原生的 Astro 或 Fuwari 主题中，点击外部链接通常会在当前页面直接打开。这对于需要频繁参考外部文档的教程类文章来说体验并不友好。虽然也能鼠标中键在新标签页打开链接，不过还是挺麻烦的。

何谓点击连接在新标签页打开，最简单的例子：打开必应 | 在新标签页打开必应

两者的区别：

1<a href="https://www.bing.com">打开必应</a>

1<a href="https://www.bing.com" target="_blank">在新标签页打开必应</a>

因此，本文将介绍如何使用 rehype-external-links 插件来完美解决这个问题。

安装插件#

假如你的项目使用的包管理器是 pnpm，那就用 pnpm 的命令安装。npm 同理。

1pnpm i rehype-external-links

1npm i rehype-external-links

安装成功后你的 package.json 中会新增一个类似于 "rehype-external-links": "^3.0.0", 的行：

    "rehype-components": "^0.3.0",
    "rehype-external-links": "^3.0.0",
    "rehype-katex": "^7.0.1",

配置插件#

在根目录的 astro.config.mjs 文件内加入以下5行代码：

新增的代码在132至137行

import sitemap from "@astrojs/sitemap";
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
import swup from "@swup/astro";
import expressiveCode from "astro-expressive-code";
import icon from "astro-icon";
import { defineConfig } from "astro/config";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
import rehypeKatex from "rehype-katex";
import rehypeSlug from "rehype-slug";
import remarkDirective from "remark-directive"; /* Handle directives */
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
import remarkMath from "remark-math";
import remarkSectionize from "remark-sectionize";
import { expressiveCodeConfig } from "./src/config.ts";
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
import rehypeExternalLinks from 'rehype-external-links';

// https://astro.build/config
export default defineConfig({
  site: "https://adclosenn.top",
  base: "/",
  trailingSlash: "always",
  integrations: [
    tailwind({
      nesting: true,
    }),
    swup({
      theme: false,
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
      // the default value `transition-` cause transition delay
      // when the Tailwind class `transition-all` is used
      containers: ["main", "#toc"],
      smoothScrolling: true,
      cache: true,
      preload: true,
      accessibility: true,
      updateHead: true,
      updateBodyClass: false,
      globalInstance: true,
    }),
    icon({
      include: {
        "preprocess: vitePreprocess(),": ["*"],
        "fa6-brands": ["*"],
        "fa6-regular": ["*"],
        "fa6-solid": ["*"],
      },
    }),
    expressiveCode({
      themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
      plugins: [
        pluginCollapsibleSections(),
        pluginLineNumbers(),
        pluginLanguageBadge(),
        pluginCustomCopyButton()
      ],
      defaultProps: {
        wrap: true,
        overridesByLang: {
          'shellsession': {
            showLineNumbers: false,
          },
        },
      },
      styleOverrides: {
        codeBackground: "var(--codeblock-bg)",
        borderRadius: "0.75rem",
        borderColor: "none",
        codeFontSize: "0.875rem",
        codeFontFamily: "'Cascadia Mono', 'JetBrains Mono'",
        codeLineHeight: "1.5rem",
        frames: {
          editorBackground: "var(--codeblock-bg)",
          terminalBackground: "var(--codeblock-bg)",
          terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
          editorTabBarBackground: "var(--codeblock-topbar-bg)",
          editorActiveTabBackground: "none",
          editorActiveTabIndicatorBottomColor: "var(--primary)",
          editorActiveTabIndicatorTopColor: "none",
          editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
          terminalTitlebarBorderBottomColor: "none"
        },
        textMarkers: {
          delHue: 0,
          insHue: 180,
          markHue: 250
        }
      },
      frames: {
        showCopyToClipboardButton: false,
      }
    }),
        svelte(),
    sitemap(),
  ],
  markdown: {
    remarkPlugins: [
      remarkMath,
      remarkReadingTime,
      remarkExcerpt,
      remarkGithubAdmonitionsToDirectives,
      remarkDirective,
      remarkSectionize,
      parseDirectiveNode,
    ],
    rehypePlugins: [
      rehypeKatex,
      rehypeSlug,
      [
        rehypeComponents,
        {
          components: {
            github: GithubCardComponent,
            note: (x, y) => AdmonitionComponent(x, y, "note"),
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
            important: (x, y) => AdmonitionComponent(x, y, "important"),
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
          },
        },
      ],
      [
        rehypeExternalLinks,
        {
        target: '_blank',
        },
      ],
      [
        rehypeAutolinkHeadings,
        {
          behavior: "append",
          properties: {
            className: ["anchor"],
          },
          content: {
            type: "element",
            tagName: "span",
            properties: {
              className: ["anchor-icon"],
              "data-pagefind-ignore": true,
            },
            children: [
              {
                type: "text",
                value: "#",
              },
            ],
          },
        },
      ],
    ],
  },
  vite: {
    build: {
      rollupOptions: {
        onwarn(warning, warn) {
          // temporarily suppress this warning
          if (
            warning.message.includes("is dynamically imported by") &&
            warning.message.includes("but also statically imported by")
          ) {
            return;
          }
          warn(warning);
        },
      },
    },
  },
});

至此，插件的配置就完成了。随便找个文章内链接点击，应该会在新标签页打开，而非原来的在当页打开。

常见电脑架构与软件选择指南

Tue, 31 Mar 2026 00:00:00 GMT

1. 什么是指令集？

指令集（Instruction Set） 是软件与硬件之间的“翻译官”。

核心作用：它定义了 CPU 可以执行的基本操作（如加法、读取内存等）。
兼容性：操作系统和应用软件必须针对特定的指令集进行编写。如果架构不匹配，软件将无法运行。

2. 如何查看自己电脑的架构？

在 GitHub 或官网下载软件时，常会看到 x64、arm64 等后缀。你可以通过以下方法确认自己的设备类型：

Windows 用户

按下 Win + R，输入 msinfo32 并回车。
在“系统摘要”中找到 “系统类型”：
- 显示 x64-based PC 即为 x86_64 架构。
- 显示 ARM64-based PC 即为 ARM 架构（常见于 Surface Pro 9 ARM 版等）。

macOS 用户

点击左上角  图标 > “关于本机”。
查看 “芯片” 或 “处理器” 栏：
- 若显示 Apple M1/M2/M3，则为 arm64 架构。
- 若显示 Intel Core i5/i7，则为 x86_64 架构。

Linux / 服务器用户

在终端输入以下命令：

lscpu
# 或者
uname -m

输出 x86_64 表示 64 位 Intel/AMD 架构。
输出 aarch64 表示 64 位 ARM 架构。

3. 架构名称等价关系清单

下载软件时，请根据下表寻找对应的版本。同一行内的名称通常是兼容或等效的：

类别	常见名称 (等价/兼容)	适用设备
现代 PC 主流	x86_64, x64, amd64	绝大多数 Intel/AMD 处理器的电脑、服务器
现代移动/新型 Mac	arm64, aarch64, ARMv8	iPhone、安卓手机、Apple Silicon (M系列) Mac
老旧/嵌入式 ARM	armv7l, armhf, arm	旧款树莓派、早期安卓设备
淘汰边缘 (32位)	x86, i386, i686	2010年以前的老旧电脑

4. 常见安装包格式补充

除了架构名，后缀名也决定了能否安装：

.exe / .msi：Windows 专用。
.dmg / .pkg：macOS 专用。
.deb / .rpm：Linux 专用（如 Ubuntu/CentOS）。
.AppImage / .sh：Linux 通用便携格式。

参考说明：本文部分内容参考自 x86_64和AMD64和ARM64？傻傻分不清楚？（此处为原博文参考意图）。

Markdown 编辑器如何修改图片大小

Tue, 31 Mar 2026 00:00:00 GMT

方法一、嵌入HTML代码

1.1 使用 img标签

<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

1.2 如果需要居中的话只要在外面包围div标签即可

<div align="center"> ... </div>

方法二、直接在图片后面加上对应的CSS样式即可

![test image size](url){:class="img-responsive"}
![test image size](url){:height="50%" width="50%"}
![test image size](url){:height="100px" width="400px"}

方法三、一劳永逸通用思路

在文章头部添加：

<style>
img{
    width: 60%;
    padding-left: 20%;
}
</style>

这个对文章所有图片都有效，如果图片尺寸标准差异过大，建议还是用单独的<img>标签来定义。

如何在 Fuwari 博客页脚添加 ICP 备案及运行时间

Mon, 30 Mar 2026 00:00:00 GMT

架构

其核心逻辑是：在页脚组件中通过 HTML 结构承载内容，利用 CSS 进行样式美化，并配合 JavaScript 实现动态的时间计算。

1. 结构层 (HTML/Astro Component)

Fuwari 是基于 Astro 框架构建的，页脚逻辑位于 src/components/Footer.astro。

ICP 备案： 通常在页脚的 div 容器内添加一个新的 <span> 或 <a> 标签。
- 架构要点： 必须包含指向工信部官网的超链接（href="https://beian.miit.gov.cn/"），这是合规性的基本要求。
运行时间： 添加一个带有特定 id（如 runtime_span）的占位容器，用于后续脚本动态填充内容。

2. 逻辑层 (JavaScript)

由于“运行时间”需要实时更新（或在页面加载时计算），需要在 .astro 文件的 <script> 标签内编写逻辑：

起始时间设定： 定义一个初始化的 Date 对象作为建站日期。
计算函数：
- 获取当前时间：new Date()。
- 计算差值：$t2 - t1$。
- 单位转换：通过数学运算将毫秒差值转换为 天、时、分、秒。
定时更新： 使用 setInterval(update_function, 1000) 每秒刷新一次 DOM 内容，确保时间是“跳动”的。

3. 表现层 (CSS/Tailwind)

Fuwari 默认使用 Tailwind CSS。

布局控制： 备案号与运行时间通常使用 flex 布局或简单的换行符进行排列，以确保在移动端和桌面端都能居中对齐。
样式细节： 通过类名（如 text-sm, opacity-70）调整字体大小和透明度，使其与原主题的极简风格保持一致。

总结架构流程图

步骤	涉及文件	核心动作
定位	`Footer.astro`	找到页脚的 HTML 渲染区域
注入	`HTML 标签`	写入备案号文本和运行时间占位符
计算	`<script>`	编写 JS 逻辑处理时间戳差值
渲染	`DOM 操作`	`innerText` 将结果填充进占位符
优化	`Tailwind`	调整边距、颜色和响应式显示

实操

找到 src/components/Footer.astro 这个文件
你会发现页脚的rss以及sitemap都在这里
直接复制rss的模板，填写好你想要添加的信息后复制在后面
当然，不需要rss/sitemap，以及powered by的也可以直接在此删除

:::note 注意在添加跳转链接时
记得把href={url(’xxxx’)}
的url等删除，否则跳转链接前会自带你设置的站点网址
当然删除与否根据你的需求来判断 :::

---
import { profileConfig } from '../config'
import { url } from '../utils/url-utils'
---

<div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6 justify-between">

<!--左侧信息 -->
    <div class="transition text-50 text-sm max-md:text-left mt-2">
        © 2024 {profileConfig.name}. All Rights Reserved. /
        <a class="link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a>
    <!--
        <a class="link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
    -->
        <br>
        Powered by
        <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
        <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a> &
        <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">又拍云CDN</a>
    </div>

<!--运行时间 -->
    <script type="text/javascript">function runtime(){const t=new Date("09/01/2024 08:00:00"),n=new Date,s=n-t,e=Math.floor(s/1e3),o=Math.floor(e/86400),i=Math.floor(e%86400/3600),a=Math.floor(e%3600/60),r=e%60;document.getElementById("runningtime").innerHTML=`⭐本站已运行: ${o}天${i}小时${a}分${r}秒 ☁️`}setInterval(runtime,1e3)</script>
    <div class="transition text-50 text-sm text-center hidden md:block"><p id="runningtime"> </p></div>

<!--右侧备案等信息 -->
    <div class="transition text-50 text-sm max-md:text-right mt-2">
        <a class="link text-[var(--primary)] font-medium" target="_blank" href={'https://beian.miit.gov.cn'}>xICP备xxxxxxxxxx号</a>
        <br>
        <a class="link text-[var(--primary)] font-medium" target="_blank" href={'https://icp.gov.moe/?keyword=20245060'}>萌ICP备20245060号</a>
    </div>
</div>

⚠️ 常见问题：构建失败 (expand-animation)

如果在部署到 Cloudflare Pages 或进行 Vite 构建时遇到类似以下的错误： [postcss] /src/styles/markdown.css:23:9: The expand-animation class does not exist.

错误原因

这是因为 Fuwari 主题在 markdown.css 中使用了 Tailwind 的 @apply 指令来引用 expand-animation 类，但该类定义在 main.css 中。在某些构建环境下，PostCSS 无法跨文件识别非原生的 Tailwind 类。

解决方案

在 src/styles/markdown.css 文件的顶部（不要放在任何大括号内），手动添加该类的定义：

.expand-animation {
    @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
    before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
}

注意：不要在外面包裹 @layer components，除非你在该文件顶部也引入了 @tailwind components。

💡 转载说明

本文转载自： AULyPc 的博客
原文作者： AULyPc
原文标题： 《如何在Fuwari页脚添加ICP、运行时间等信息》
原文链接： https://aulypc1.github.io/posts/website/add_icpruntime_in_fuwari-footer/
许可协议： 本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

为Fuwari博客配置SEO

Mon, 30 Mar 2026 00:00:00 GMT

一、SEO 配置前的准备工作

良好的 SEO 不仅有助于搜索引擎收录，也能提升社交平台分享时的预览效果。我们将从三部分入手：布局文件修改、类型定义扩展和站点配置完善。

1. 修改布局文件：`src/layouts/Layout.astro`#

首先，我们需要在全局布局组件中添加关键的元信息（meta tags），确保每一页都能正确输出 SEO 数据。

NOTE

感谢ChuwuYo的宝贵建议。

<!DOCTYPE html>
<html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]"
      data-overlayscrollbars-initialize>
  <head>
   <title>{pageTitle}</title>

    <meta charset="UTF-8" />
    <meta name="description" content={description || siteConfig.description}> <!-- 更改 -->
    <meta name="author" content={profileConfig.name}>

    <meta property="og:site_name" content={siteConfig.title}>
    <meta property="og:url" content={Astro.url}>
    <meta property="og:title" content={pageTitle}>
    <meta property="og:description" content={description || pageTitle}>
    {setOGTypeArticle ? (
        <meta property="og:type" content="article" />
        ) : (
        <meta property="og:type" content="website" />
        )}

    <meta name="description" content={description || pageTitle}>  <!-- 新增 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content={Astro.url}>
    <meta name="twitter:title" content={pageTitle}>
    <meta name="twitter:description" content={description || pageTitle}>

    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>...</body>
</html>

2. 扩展类型定义：`src/types/config.ts`

为了使 TypeScript 正确识别新增字段，我们需要在 SiteConfig 类型中添加 keywords 和 description 字段。

import type { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";

export type Favicon = {
  src: string;
  theme?: "light" | "dark";
  sizes?: string;
};

export type SiteConfig = {
  title: string;
  subtitle: string;

  lang: string;
  keywords: string;        // 新增：SEO 关键词
  description: string;     // 新增：站点描述

  themeColor: {
    hue: number;
    fixed: boolean;
  };

  banner: {
    enable: boolean;
    src: string;
    position?: "top" | "center" | "bottom";
    credit: {
      enable: boolean;
      text: string;
      url?: string;
    };
  };

  toc: {
    enable: boolean;
    depth: 1 | 2 | 3;
  };

  favicon: Favicon[];
};

3. 配置站点信息：`src/config.ts`

最后，在实际配置文件中填入有意义的 SEO 内容，让搜索引擎和用户都能清晰了解你的博客定位。

export const siteConfig: SiteConfig = {
  title: "晓正杨博客",
  subtitle: "分享技术内容",

  lang: "zh_CN", // 支持 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th' 等语言
  keywords: "前端开发, 游戏开发, 技术分享, JavaScript, Astro, 博客搭建",
  description: "晓正杨的技术笔记与思考，专注前端与游戏开发领域，记录学习与实践心得。",

  themeColor: {
    hue: 250, // 色调值（0–360），如蓝色系
    fixed: false, // 是否禁用主题色切换
  },

  banner: {
    enable: false,
    src: "",
    position: "center",
    credit: {
      enable: false,
      text: "",
      url: "",
    },
  },

  toc: {
    enable: true,
    depth: 2,
  },

  favicon: [
    {
      src: 'https://q1.qlogo.cn/g?b=qq&nk=2540797494&s=640',
      theme: 'light',
      sizes: '32x32',
    },
    // 可添加暗色模式专用图标
    // {
    //   src: '/favicons/dark-favicon.png',
    //   theme: 'dark',
    //   sizes: '32x32'
    // }
  ],
};

✅ 建议：

keywords 应包含核心主题词，用英文逗号分隔，避免堆砌。

description 是搜索引擎结果页中显示的摘要，应简洁有力，控制在 80–160 字符以内。

favicon 推荐使用多种尺寸和主题适配，提升品牌识别度。

二、接入必应网站管理员

在搜索引擎中，必应（Bing）是仅次于谷歌（Google）的全球第二大搜索引擎，拥有庞大的用户群体。

为了提升 SEO 效果，我们还需要在必应中注册网站管理员，让搜索引擎能更准确地理解我们的网站。

访问必应站长工具

按照提示操作即可，无需额外配置。

三、接入Google Search Console#

Google Search Console 是 Google 提供的免费网站管理工具，用于帮助网站管理员监控、维护和提升其网站在 Google 搜索中的表现。

访问 Google Search Console

按照提示操作即可，无需额外配置。

特别提醒

千万不要用免费域名,千万不要用免费域名,千万不要用免费域名,别问我是怎么知道(说多了都是泪)

转载说明

文章信息

标题：SEO 基础入门与 Fuwari 主题优化指南

作者：晓正杨

来源：晓正杨博客

原文地址：https://blog.7003410.xyz/posts/seo/

注：本文由本人整理转载，旨在技术交流分享，所有权利归原作者所有。

在 Fuwari 中添加 “随机一篇文章” 功能

Mon, 30 Mar 2026 00:00:00 GMT

话不多说，立马开整

部署前，请先阅读以下事项

因为本博客的历史原因，仅随机带标签的文章，忽略没有标签的文章，如果要去除此特性，需要修改以下代码：
if (isHomePage) {
  const posts = await getCollection('posts');
  postUrls = posts
    .filter(p => !p.data.draft && p.data.tags.length > 0)
    .map(p => getPostUrlBySlug(p.slug));
}
包含此组件的页面在进行过渡动画时可能有轻微的抽搐、卡顿感，原因未知。

第一步：创建组件#

在src/components中，创建文件RandomPostCard.astro，并且写入以下内容：

---
import { getCollection } from 'astro:content';
import { getPostUrlBySlug } from '../utils/url-utils';
import { Icon } from 'astro-icon/components';

// 1. 先判断当前页面是否为首页（仅主页执行后续逻辑）
const isHomePage = Astro.url.pathname === '/';
let postUrls = [];

// 2. 仅主页获取文章 URL（非主页跳过，减少无效计算）
if (isHomePage) {
  const posts = await getCollection('posts');
  postUrls = posts
    .filter(p => !p.data.draft && p.data.tags.length > 0)
    .map(p => getPostUrlBySlug(p.slug));
}
---

{/* 3. 核心条件：仅当是首页时，才渲染整个组件 */}
{isHomePage && (
  <>
    {postUrls.length > 0 ? (
      <!-- 外层容器：添加 ID 对应样式，确保在 Swup 容器内 -->
      <div
        id="random-post-card"
        class="card-base flex flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative onload-animation " 
        style="animation-delay: calc(var(--content-delay) + 0ms);"
        data-post-urls={JSON.stringify(postUrls)}
      >
        <!-- 标题区域链接 -->
        <div class="pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full">
          <a 
            href="#" 
            class="random-post-link transition group w-full block font-bold text-2xl text-90
            hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
            active:text-[var(--title-active)] dark:active:text-[var(--title-active)] md:before:block"
            style="text-align: left;"
            aria-label="随机文章"
          >
            随机一篇文章
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute bottom-7" name="material-symbols:chevron-right-rounded" />
            <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 bottom-7" name="material-symbols:chevron-right-rounded" />
          </a>
        </div>

        <!-- 右上角跳转按钮 -->
        <a 
          href="#" 
          class="random-post-link !hidden md:!flex btn-regular w-[3.25rem] absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95"
          style="--coverWidth: 28%;"
          aria-label="进入随机文章"
        >
          <Icon name="material-symbols:chevron-right-rounded" class="transition text-[var(--primary)] text-4xl mx-auto" />
        </a>
      </div>
      <div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>
    ) : (
      <p class="text-center py-6">没有可用的文章</p>
    )}

    <!-- 4. 脚本逻辑：仅主页加载（随组件一起被条件包裹） -->
    <script is:inline>
      (function() {
        try {
          const container = document.querySelector('[data-post-urls]');
          if (!container) throw new Error('未找到文章 URL 容器');

          // 解析文章 URL 列表
          const postUrls = JSON.parse(container.dataset.postUrls || '[]');
          if (!Array.isArray(postUrls) || postUrls.length === 0) throw new Error('无有效文章 URL');

          // 生成随机 URL（保留原有路径处理逻辑）
          const randomIndex = Math.floor(Math.random() * postUrls.length);
          let randomUrl = postUrls[randomIndex];
          if (randomUrl && typeof randomUrl === 'string') {
            if (!randomUrl.startsWith('/') && !randomUrl.startsWith('http')) {
              randomUrl = '/' + randomUrl;
            }
          } else {
            throw new Error(`无效 URL 格式: ${randomUrl}`);
          }

          // 仅设置 href，不阻止默认行为（Swup 会自动拦截链接）
          const links = document.querySelectorAll('.random-post-link');
          if (links.length === 0) throw new Error('未找到随机文章链接');

          links.forEach(link => {
            link.href = randomUrl; // 确保 href 正确
            link.addEventListener('click', function() {
              console.log('跳转到随机文章:', randomUrl);
            });
          });

          console.log('随机文章链接初始化成功，URL:', randomUrl);
        } catch (error) {
          console.error('随机文章功能异常:', error);
          // 异常时确保链接可正常跳转（降级处理）
          document.querySelectorAll('.random-post-link').forEach(link => {
            link.href = '/'; // 跳转到首页（可自定义降级路径）
          });
        }
      })();
    </script>
  </>
)}

第二步：使组件生效#

打开src/components/PostPage.astro文件，按照注释说明导入并激活组件，重点分别在第4和第13行：

---
import { getPostUrlBySlug } from '@utils/url-utils'
import PostCard from './PostCard.astro'
import RandomPostCard from './RandomPostCard.astro' //导入组件
const { page } = Astro.props

let delay = 0
const interval = 50
---

<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
    <!-- 激活组件 -->
    <RandomPostCard />
    {page.data.map((entry, i) => (
        <PostCard
            entry={entry}
            title={entry.data.title}
            tags={entry.data.tags}
            category={entry.data.category}
            published={entry.data.published}
            updated={entry.data.updated}
            url={getPostUrlBySlug(entry.slug)}
            image={entry.data.image}
            description={entry.data.description}
            draft={entry.data.draft}
            class:list="onload-animation"
            style={`animation-delay: calc(var(--content-delay) + ${(i+1) * interval}ms);`}
        />
    ))}
</div>

如何为 Fuwari 博客添加一个精美的“友情链接”页面

Mon, 30 Mar 2026 00:00:00 GMT

前言

在 Fuwari 这种基于 Astro 架构的现代博客主题中，实现一个既美观又易于维护的“友情链接”页面，需要遵循其“数据与表现分离”的设计哲学。本文将带你拆解其架构，并手把手教你如何完成配置。

架构核心概念

Fuwari 的友链功能由三个层次组成，这种设计确保了极高的加载性能和代码可维护性：

数据层 (src/friends_data.ts)：使用 TypeScript 数组管理具体的友链名单，确保类型安全。
内容层 (src/content/spec/friends.md)：利用 Astro 的 Content Collections 管理页面的静态文字（如申请规则）。
渲染层 (src/pages/friends.astro)：负责将上述两者结合，并应用响应式布局和暗色模式样式。

实施步骤

第一步：定义友链数据

在 src/ 目录下创建或编辑 friends_data.ts。我们将友链信息结构化，以便在页面中循环渲染。

     // src/friends_data.ts
    
     export interface Friend {
         name: string;        // 博客名称
         url: string;         // 博客链接
         avatar: string;      // 头像图片地址
         description: string; // 博客简短描述
     }
    
    export const friends: Friend[] = [
        {
            name: "示例好友",
            url: "https://example.com",
            avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1",
            description: "这是一个非常酷的博客！",
        },
        // 在此处添加更多好友...
    ];

第二步：编写页面说明内容

为了方便随时修改页面的文字介绍（如友链申请要求），我们使用 Markdown 文件。

在 src/content/spec/ 目录下创建 friends.md：

   ---
     title: "友情链接"
     description: "我的朋友们"
     ---
    
     ## 📝 交换说明
    
     - **本站名称**: 你的博客名
     - **本站链接**: `https://yourblog.com`
    - **本站头像**: `https://yourblog.com/avatar.png`
    - **本站描述**: 风过留痕，雁过留声。
   
    > ⚠️ 申请前请先添加本站友链。网站需内容健康，且能够正常访问。

第三步：创建页面渲染模板

这是最核心的部分，我们需要创建一个 Astro 页面来读取数据并生成 HTML。

在 src/pages/ 目录下创建 friends.astro：

    2 import { getEntry, render } from "astro:content";
    3 import Markdown from "@components/misc/Markdown.astro";
    4 import MainGridLayout from "@layouts/MainGridLayout.astro";
    5 import { friends } from "../friends_data"; // 导入友链数据
    6
    7 // 1. 获取 Markdown 说明内容
    8 const friendsPost = await getEntry("spec", "friends");
    9 const { Content } = await render(friendsPost);
   10 ---
   11
   12 <MainGridLayout title="友情链接">
   13     <div class="card-base p-6 md:p-8">
   14         <!-- 页面大标题装饰 -->
   15         <div class="friends-bg-text">FRIENDS</div>
   16
   17         <!-- 渲染顶部的 Markdown 说明 -->
   18         <div class="mb-8">
   19             <Markdown class="mt-2">
   20                 <Content />
   21             </Markdown>
   22         </div>
   23
   24         <!-- 友链卡片网格系统 -->
   25         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
   26             {friends.map((friend) => (
   27                 <a href={friend.url} target="_blank" rel="noopener noreferrer" class="friend-card
      group">
   28                     <div class="flex items-center gap-3">
   29                         <img src={friend.avatar} class="w-10 h-10 rounded-lg transition-transform
      group-hover:rotate-12" alt={friend.name} />
   30                         <div class="font-bold text-black dark:text-white">{friend.name}</div>
   31                     </div>
   32                     <div class="text-sm text-black/50 dark:text-white/50 mt-2 line-clamp-1">
   33                         {friend.description}
   34                     </div>
   35                 </a>
   36             ))}
   37         </div>
   38     </div>
   39 </MainGridLayout>
   40
   41 <style>
   42 /* 标题装饰样式 */
   43 .friends-bg-text {
   44     @apply text-[60px] md:text-[100px] font-black text-center leading-none select-none mb-8;
   45     color: rgba(59, 130, 246, 0.08);
   46 }
   47
   48 /* 友链卡片基础样式 */
   49 .friend-card {
   50     @apply p-4 rounded-xl border border-black/5 dark:border-white/5 transition-all duration-300;
   51     background: linear-gradient(135deg, rgba(156, 163, 175, 0.05) 0%, rgba(209, 213, 219, 0.05) 100%);
   52 }
   53
   54 /* 悬停交互效果 */
   55 .friend-card:hover {
   56     @apply -translate-y-1 shadow-lg border-blue-400/30;
   57     background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
   58 }
   59 </style>

第四步：配置导航栏入口

最后，我们需要在博客顶部的导航栏中加入这个页面的入口。

编辑 src/config.ts：

    1 export const navBarConfig: NavBarConfig = {
    2     links: [
    3         LinkPreset.Home,
    4         LinkPreset.Archive,
    5         {
    6             name: "友链",
    7             url: "/friends/", // 路径需与 pages 目录下的文件名对应
    8         },
    9         LinkPreset.About,
   10     ],
   11 };

架构优势总结

极速加载：友链数据在构建时即被静态化，无需在客户端请求 API，页面秒开。
样式统一：通过 MainGridLayout 自动继承了博客的侧边栏、背景和暗色模式切换逻辑。
维护简单：新增友链只需在 friends_data.ts 数组中增加一个对象，修改申请规则只需编辑 friends.md。

现在，你的 Fuwari 博客已经拥有了一个具备精美悬停动画和响应式布局的友链页面了！🚀

为 Fuwari 博客添加 Umami 访问统计卡片

Mon, 30 Mar 2026 00:00:00 GMT

开始#

搭建好博客网站之后，我们通常都有查看访问数据的需求。作为静态博客，在不自建服务器的情况下通常都是使用类似Umami的外部网站分析工具（Umami确实好用），但是当我们希望向访客展示自己的访问数据时，就只能在网站上挂一个Umami分享的外链，非常的不优雅。

于是我将Umami统计信息做成了小组件放在了页面左侧，效果还是不错的。那么，教程开始。

教程#

准备#

一个已部署好的fuwari博客
启用Umami统计的站点（如果你不知道什么是umami，请先自行搜索教程后继续阅读）

获取数据#

“ 为了获取到图中的这些数据，我们需要先首先我们启用Umami统计的分享URL

你应该会得到一个https://cloud.umami.is/analytics/us/share/EkS4mYbIXLu9vshR这个样子的URL，以我的这个为例，我们需要的是最后这一串EkS4mYbIXLu9vshR

接着我们去浏览器访问https://cloud.umami.is/analytics/us/api/share/EkS4mYbIXLu9vshR（注意这里的EkS4mYbIXLu9vshR要替换为上一步中你自己的），就会得到以下数据：

{
  "websiteId": "42d4c606-856f-4026-906c-65bbcb4c5ac1",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ3ZWJzaXRlSWQiOiI0MmQ0YzYwNi04NTZmLTQwMjYtOTA2Yy02NWJiY2I0YzVhYzEiLCJpYXQiOjE3NjAzNjczOTJ9.JWtW668hYoeiKTZSkxZ8suW7RZnmzn0Pa0CHN2xpJYU"
}

记下来，稍后有用。

添加组件#

创建组件#

在 src/components/widget/ 目录下创建 UmamiStats.astro 文件，代码如下：

---
import WidgetLayout from "./WidgetLayout.astro";

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

<WidgetLayout name="统计" id="umami-stats" class:list={[className]} {style}>
    <div class="text-center py-2">
        <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100" id="total-pageviews">-</div>
        <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
    </div>
    <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center pt-2">
        <div class="px-2">
            <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100" id="total-visits">-</div>
            <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
        </div>
        <div class="px-2">
            <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100" id="total-visitors">-</div>
            <div class="text-sm text-neutral-500 dark:text-neutral-400">游客数</div>
        </div>
    </div>
</WidgetLayout>

<script>
const UMAMI_CONFIG = {
    baseUrl: 'https://cloud.umami.is/analytics/us/api', // 如果你选的区域是欧盟，请改为 https://cloud.umami.is/analytics/eu/api
    websiteId: '上一步获得的websiteId（也就是短的那个）',
    shareToken: '上一步获得的token（也就是长的那个）'
};

function formatNumber(num: number): string {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

async function fetchUmamiStats() {
    try {
        const endAt = Date.now();
        const startAt = 0;

        const url = `${UMAMI_CONFIG.baseUrl}/websites/${UMAMI_CONFIG.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;

        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'accept': 'application/json',
                'x-umami-share-token': UMAMI_CONFIG.shareToken
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const pageviewsElement = document.getElementById('total-pageviews');
        const visitsElement = document.getElementById('total-visits');
        const visitorsElement = document.getElementById('total-visitors');

        if (pageviewsElement) {
            pageviewsElement.textContent = formatNumber(data.pageviews || 0);
        }

        if (visitsElement) {
            visitsElement.textContent = formatNumber(data.visits || 0);
        }

        if (visitorsElement) {
            visitorsElement.textContent = formatNumber(data.visitors || 0);
        }

    } catch (error) {
        console.error('获取Umami统计数据失败:', error);
        const elements = ['total-pageviews', 'total-visits', 'total-visitors'];
        elements.forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.textContent = '获取失败';
                element.classList.add('text-red-500');
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', fetchUmamiStats);

if (window.swup) {
    window.swup.hooks.on('page:view', fetchUmamiStats);
}
</script>

配置参数#

在上面的代码中，记得要替换以下配置：

WARNING

如果你的 Umami 注册时数据存储区域选择的是欧盟，请将 baseUrl 改为 https://cloud.umami.is/analytics/eu/api。

const UMAMI_CONFIG = {
    baseUrl: 'https://cloud.umami.is/analytics/us/api',
    websiteId: '上一步获得的websiteId（也就是短的那个）',
    shareToken: '上一步获得的token（也就是长的那个）'
};

添加到侧边栏组件#

在 src/components/widget/SideBar.astro 中导入此组件：

---
import { Image } from "astro:assets";
import type { MarkdownHeading } from "astro";
import { Icon } from "astro-icon/components";
import Categories from "./Categories.astro";
import Profile from "./Profile.astro";
import Sponsors from "./Sponsors.astro";
import UmamiStats from "./UmamiStats.astro";
import VisitorIP from "./VisitorIP.astro";

interface Props {
  class?: string;
  headings?: MarkdownHeading[];
}

const className = Astro.props.class;
---
<div id="sidebar" class:list={[className, "w-full"]}>
    <div class="flex flex-col w-full gap-4 mb-4">
        <Profile></Profile>
    </div>
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
        <UmamiStats class="onload-animation" style="animation-delay: 200ms"></UmamiStats>
        <VisitorIP class="onload-animation" style="animation-delay: 225ms"></VisitorIP>
        <Sponsors class="onload-animation" style="animation-delay: 250ms"></Sponsors>
    </div>
</div>

自定义#

如果你按照上述的步骤操作，那么你应该就能在页面左侧下方看到你的博客浏览量统计了，下面是自定义的教程：

修改统计周期#

默认为 所有时间 ，如果你想要调整浏览量统计的时间范围，你需要修改UmamiStats.astro 文件的 startAt 参数(默认是所有时间)。例如改为最近30天的数据，也就是30天×24小时×60分钟×60秒×1000毫秒=2592000000：

try {
    const endAt = Date.now();
    const startAt = 0;
    const startAt = Date.now() - 2592000000;

同理，如果你想改为最近90天的数据，只需要减去90天×24小时×60分钟×60秒×1000毫秒即可。

结尾#

通过以上步骤，你就成功为 Fuwari 添加了基于 Umami 的网站访问统计卡片，同时还支持明/暗模式切换。以后只要有访客查看，统计卡片数据都会自动更新。

FUwari 二级导航改造教程

Mon, 30 Mar 2026 00:00:00 GMT

前言

Fuwari 的简约美一直深得我心，但“鱼和熊掌不可兼得”，极简的设计往往意味着功能的取舍。为了在不破坏原主题美感的前提下增加导航深度，我参考了- FUwari 二级导航 - PengXing's Blog的方案。这套二级导航方案动画丝滑，完美契合了原主题的 UI 风格。

设计架构

1. 数据层 (Data Layer)

在 src/config.ts 中，导航栏不再是简单的平级数组，而是引入了嵌套结构。

父级节点：包含 name 和 url（通常设为 #）。
子级节点 (children)：一个可选的数组，存放子菜单的对象。
属性标记：通过 external: true 标记外部链接，以便在渲染时自动添加图标和 _blank 属性。

2. 类型层 (Type Layer)

在 src/types/config.ts 中，通过 TypeScript 定义了递归或嵌套的接口：

扩展了原有的 NavBarLink 类型，增加了一个可选属性 children?: NavBarLink[]。这允许导航项持有与之结构相同的子项。

3. 渲染层 (Rendering Layer)

这一层由两个核心 Astro 组件组成，分别处理不同的终端显示：

桌面端 (Navbar.astro)：
- 逻辑控制：使用 map 循环遍历 links，通过 if (l.children) 判断是否渲染下拉菜单。
- 布局实现：父容器设为 relative group。
- 显示逻辑：利用 Tailwind 的 group-hover 类（如 group-hover:opacity-100），实现鼠标悬停时下方 absolute 定位的菜单面板由隐变现。
移动端 (NavMenuPanel.astro)：
- 垂直布局：子菜单不再是悬浮框，而是嵌套在侧边栏列表中的伸缩项。
- 状态标识：包含一个箭头图标（nav-submenu-arrow），通过 CSS 类控制旋转角度来暗示展开状态。

4. 交互层 (Interaction Layer)

由于 Astro 默认不带客户端 JS，作者在 NavMenuPanel.astro 中注入了 <script> 脚本来处理移动端点击：

高度过渡：通过监听 click 事件，动态计算 scrollHeight 并赋值给 maxHeight。这种方式比简单的 display: block 动画效果更丝滑。
旋转动画：同步修改箭头图标的 transform 属性。

二级菜单配置#

在导航栏配置中支持二级菜单，可以创建下拉菜单结构：

配置说明：

name - 菜单显示名称
url - 链接地址（父级菜单建议使用 #）
children - 子菜单数组
external - 是否为外部链接

功能特性：

桌面端：鼠标悬停展开二级菜单
移动端：点击切换二级菜单显示/隐藏
支持无限层级嵌套
自动适应内容宽度

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    LinkPreset.Series,
    LinkPreset.Friends,
    LinkPreset.Donate,
    {
      name: "其他", // 标题
      url: "#", // 内部链接不应包含基本路径，因为它是自动添加的
      children: [
        {
          name: "访客统计",
          url: "https://cloud.umami.is/share/i6f3UwPY4n0w1LJa/pengxing.dpdns.org", // 内部链接不应包含基本路径，因为它是自动添加的
          external: true, //显示外部链接图标，并将在新选项卡中打开
        },
        {
          name: "网盘资源",
          url: "https://docs.qq.com/aio/DYmZYVGpFVGxOS3NE", // 内部链接不应包含基本路径，因为它是自动添加的
          external: true, //显示外部链接图标，并将在新选项卡中打开
        },
      ],
    },
  ],
};

修改代码#

src/components/Navbar.astro#

---
import { Icon } from "astro-icon/components";
import { navBarConfig, siteConfig } from "../config";
import { LinkPresets } from "../constants/link-presets";
import { LinkPreset, type NavBarLink } from "../types/config";
import { url } from "../utils/url-utils";
import LightDarkSwitch from "./LightDarkSwitch.svelte";
import Search from "./Search.svelte";
import DisplaySettings from "./widget/DisplaySettings.svelte";
import NavMenuPanel from "./widget/NavMenuPanel.astro";

const className = Astro.props.class;

let links: NavBarLink[] = navBarConfig.links.map(
  (item: NavBarLink | LinkPreset): NavBarLink => {
    if (typeof item === "number") {
      return LinkPresets[item];
    }
    return item;
  },
);
---
<div id="navbar" class="z-50 onload-animation">
    <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
    <div class:list={[
        className,
        "card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4"]}>
        <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
            <div class="flex flex-row text-[var(--primary)] items-center text-md">
                <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />
                {siteConfig.title}
            </div>
        </a>
        <div class="hidden md:flex">
            {links.map((l) => {
                // return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
                //           class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
                // >
                //     <div class="flex items-center">
                //         {l.name}
                //         {l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
                //     </div>
                // </a>;
                if (l.children && l.children.length > 0) {
                    // 有子菜单的情况
                    return <div class="relative group">
                        <button class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 flex items-center">
                            {l.name}
                            <Icon name="material-symbols:keyboard-arrow-down-rounded" class="text-[1.25rem] ml-1 transition-transform group-hover:rotate-180"></Icon>
                        </button>
                        <div class="absolute top-full left-0 mt-2 min-w-max bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 whitespace-nowrap">
                            {l.children.map((child) => (
                                 <a href={child.external ? child.url : url(child.url)} target={child.external ? "_blank" : null}
                                    class="btn-plain scale-animation block px-4 py-3 text-sm font-bold hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] first:rounded-t-lg last:rounded-b-lg transition-all duration-200 active:scale-95 mx-1 my-0.5 rounded-lg">
                                     <div class="flex items-center justify-between">
                                         {child.name}
                                         {child.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.75rem] text-black/[0.2] dark:text-white/[0.2]"></Icon>}
                                     </div>
                                 </a>
                             ))}
                        </div>
                    </div>;
                } else {
                    // 没有子菜单的情况
                    return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
                              class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
                    >
                        <div class="flex items-center">
                            {l.name}
                            {l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
                        </div>
                    </a>;
                }

            })}
        </div>
        <div class="flex">
            <!--<SearchPanel client:load>-->
            <Search client:only="svelte"></Search>
            {!siteConfig.themeColor.fixed && (
                    <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
                        <Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
                    </button>
            )}
            <LightDarkSwitch client:only="svelte"></LightDarkSwitch>
            <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch">
                <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
            </button>
        </div>
        <NavMenuPanel links={links}></NavMenuPanel>
        <DisplaySettings client:only="svelte"></DisplaySettings>
    </div>
</div>

<script>
function switchTheme() {
    if (localStorage.theme === 'dark') {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
    } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
    }
}

function loadButtonScript() {
    let switchBtn = document.getElementById("scheme-switch");
    if (switchBtn) {
        switchBtn.onclick = function () {
            switchTheme()
        };
    }

    let settingBtn = document.getElementById("display-settings-switch");
    if (settingBtn) {
        settingBtn.onclick = function () {
            let settingPanel = document.getElementById("display-setting");
            if (settingPanel) {
                settingPanel.classList.toggle("float-panel-closed");
            }
        };
    }

    let menuBtn = document.getElementById("nav-menu-switch");
    if (menuBtn) {
        menuBtn.onclick = function () {
            let menuPanel = document.getElementById("nav-menu-panel");
            if (menuPanel) {
                menuPanel.classList.toggle("float-panel-closed");
            }
        };
    }
}

loadButtonScript();
</script>

{import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url('/pagefind/pagefind.js')}}>
async function loadPagefind() {
    try {
        const response = await fetch(scriptUrl, { method: 'HEAD' });
        if (!response.ok) {
            throw new Error(`Pagefind script not found: ${response.status}`);
        }

        const pagefind = await import(scriptUrl);

        await pagefind.options({
            excerptLength: 20
        });

        window.pagefind = pagefind;

        document.dispatchEvent(new CustomEvent('pagefindready'));
        console.log('Pagefind loaded and initialized successfully, event dispatched.');
    } catch (error) {
        console.error('Failed to load Pagefind:', error);
        window.pagefind = {
            search: () => Promise.resolve({ results: [] }),
            options: () => Promise.resolve(),
        };
        document.dispatchEvent(new CustomEvent('pagefindloaderror'));
        console.log('Pagefind load error, event dispatched.');
    }
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadPagefind);
} else {
    loadPagefind();
}
</script>}

src/components/widget/NavMenuPanel.astro#

---
import { Icon } from "astro-icon/components";
import { type NavBarLink } from "../../types/config";
import { url } from "../../utils/url-utils";

interface Props {
  links: NavBarLink[];
}

const links = Astro.props.links;
---
<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
    <!-- {links.map((link) => (
        <a href={link.external ? link.url : url(link.url)} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
        "
           target={link.external ? "_blank" : null}
        >
            <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
                {link.name}
            </div>
            {!link.external && <Icon name="material-symbols:chevron-right-rounded"
                  class="transition text-[1.25rem] text-[var(--primary)]"
            >
            </Icon>}
            {link.external && <Icon name="fa6-solid:arrow-up-right-from-square"
                  class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
            >
            </Icon>}
        </a>
    ))} -->
    {links.map((link) => {
        if (link.children && link.children.length > 0) {
            // 有子菜单的情况
            return (
                <div class="nav-menu-item-with-children">
                    <button class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 w-full
                        hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
                        nav-submenu-toggle"
                    >
                        <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
                            {link.name}
                        </div>
                        <Icon name="material-symbols:keyboard-arrow-down-rounded"
                              class="transition text-[1.25rem] text-[var(--primary)] nav-submenu-arrow"
                        >
                        </Icon>
                    </button>
                    <div class="nav-submenu pl-4 max-h-0 overflow-hidden transition-all duration-200">
                        {link.children.map((child) => (
                            <a href={child.external ? child.url : url(child.url)} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
                                hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
                            "
                               target={child.external ? "_blank" : null}
                            >
                                <div class="transition text-black/60 dark:text-white/60 text-sm group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
                                    {child.name}
                                </div>
                                {!child.external && <Icon name="material-symbols:chevron-right-rounded"
                                      class="transition text-[1rem] text-[var(--primary)]"
                                >
                                </Icon>}
                                {child.external && <Icon name="fa6-solid:arrow-up-right-from-square"
                                      class="transition text-[0.65rem] text-black/25 dark:text-white/25 -translate-x-1"
                                >
                                </Icon>}
                            </a>
                        ))}
                    </div>
                </div>
            );
        } else {
            // 没有子菜单的情况
            return (
                <a href={link.external ? link.url : url(link.url)} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
                    hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
                "
                   target={link.external ? "_blank" : null}
                >
                    <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
                        {link.name}
                    </div>
                    {!link.external && <Icon name="material-symbols:chevron-right-rounded"
                          class="transition text-[1.25rem] text-[var(--primary)]"
                    >
                    </Icon>}
                    {link.external && <Icon name="fa6-solid:arrow-up-right-from-square"
                          class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
                    >
                    </Icon>}
                </a>
            );
        }
    })}
</div>

<script>
    // 移动端二级菜单展开/收起功能
    document.addEventListener('DOMContentLoaded', function() {
        const submenuToggles = document.querySelectorAll('.nav-submenu-toggle');

        submenuToggles.forEach(toggle => {
            toggle.addEventListener('click', function(this: HTMLElement) {
                const submenu = this.parentElement?.querySelector('.nav-submenu') as HTMLElement;
                const arrow = this.querySelector('.nav-submenu-arrow') as HTMLElement;

                if (submenu && arrow) {
                    const isExpanded = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';

                    if (isExpanded) {
                        submenu.style.maxHeight = '0px';
                        arrow.style.transform = 'rotate(0deg)';
                    } else {
                        submenu.style.maxHeight = submenu.scrollHeight + 'px';
                        arrow.style.transform = 'rotate(180deg)';
                    }
                }
            });
        });
    });
</script>

src/types/config.ts#

// 。。。。只需要修改这一处,其他保存不变

export type NavBarLink = {
  name: string;
  url: string;
  external?: boolean;
  children?: NavBarLink[]; // 支持二级菜单
};


// 。。。。只需要修改这一处,其他保存不变

转载说明

转载说明： 本文转载自鹏星的博客文章《FUwari 二级导航》。内容基于 CC BY-NC-SA 4.0 协议分享，感谢原作者的硬核教程！

Fuwari 博客模板综合食用指南

Mon, 30 Mar 2026 00:00:00 GMT

文章元数据 (Front-matter)#

每篇文章顶部的 YAML 代码块用于定义文章的元数据。

---
title: 我的第一篇博客文章
published: 2023-09-09
description: 这是我 Astro 新博客的第一篇文章。
image: ./cover.jpg
tags: [Foo, Bar]
category: 前端
draft: false
---

属性 (Attribute)	描述 (Description)
title	文章的标题。
published	文章的发布日期。
updated	(可选) 文章的更新日期。
description	文章的简短描述，会显示在首页。
image	文章的封面图片路径。<br>1. 以 `http://` 或 `https://` 开头：使用网络图片<br>2. 以 `/` 开头：使用 `public` 目录下的图片<br>3. 无上述前缀：相对于当前 Markdown 文件的路径
tags	文章的标签。
category	文章的分类。
draft	文章是否为草稿。若为 `true`，则文章不会被公开发布和展示。

草稿示例#

如果一篇文章仍在撰写中，不希望被公开发布，可以将其 draft 字段设置为 true。

---
title: 草稿示例
published: 2022-07-01
tags: [Markdown, Blogging, Demo]
category: Examples
draft: true
---

# 这篇文章是一篇草稿

这篇文章目前处于草稿状态，不会被发布。

文章存放位置#

您的文章文件应放置在 src/content/posts/ 目录下。您也可以创建子目录来更好地组织您的文章和相关资源。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

基础 Markdown 语法#

标题#

# H1 标题
## H2 标题
### H3 标题

文本格式#

段落之间通过一个空行分隔。

这是第二段。斜体, 粗体, 和 等宽字体。

列表#

无序列表

- 列表项一
- 列表项二
- 列表项三

有序列表

1. 第一项
2. 第二项
3. 第三项

嵌套列表

1. 首先，准备这些食材：
    - 胡萝卜
    - 芹菜
    - 扁豆
2. 烧开一些水。
3. 把所有东西倒进锅里，然后遵循
    这个算法：

        找到木勺
        揭开锅盖
        搅拌
        盖上锅盖
        小心地把木勺平衡在锅柄上
        等待10分钟
        返回第一步（或者完成后关火）

定义列表

苹果
: 做苹果酱的好材料。

橘子
: 柑橘类水果！

西红柿
: Tomatoe 这个词里没有 "e"。```

### 引用块

> 引用块是
> 这么写的。
>
> 如果需要，它们可以
> 跨越多个段落。

### 代码块

使用4个空格缩进或使用三个反引号 ``` 来创建代码块。

import time
# 快，数到十！
for i in range(10):
    # (但不要 *太* 快)
    time.sleep(0.5)
    print i

其他#

链接

这是一个指向某个网站的链接。

这是一个指向 [某个网站](http://foo.bar) 的链接。

脚注

这是一个脚注 ^1。

这是一个脚注 [^1]。

[^1]: 脚注文本放在这里。

水平分割线

---

表格

尺寸   材质      颜色
---    ---       ---
9      皮革      棕色
10     麻帆布    自然色
11     玻璃      透明

Table: 鞋子、尺码及其材质

数学公式

行内公式：$\omega = d\phi / dt$

块级公式： $I = \int \rho R^{2} dV$

嵌入视频#

只需从 YouTube 或其他平台复制嵌入代码（embed code），然后将其粘贴到 Markdown 文件中即可。

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

扩展功能#

GitHub 存储库卡片#

::github{repo="worhllo2/Blog-fuwari"}

使用代码创建 GitHub 存储库卡片。 ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

警告#

支持以下类型的警告: note tip important warning caution

:::note 突出显示用户应该考虑的信息，即使在浏览时也是如此。 :::

:::tip 帮助用户取得更大成功的可选信息。 :::

:::important 用户成功所需的关键信息。 :::

:::warning 由于潜在风险，需要立即用户关注的关键内容。 :::

:::caution 行动的负面潜在后果。 :::

Basic Syntax#

:::note
突出显示用户应该考虑的信息，即使在浏览时也是如此。
:::

:::tip
帮助用户取得更大成功的可选信息。
:::

自定义标题#

警告的标题可以自定义。

:::note[我的自定义标题] 这是带有自定义标题的注释。 :::

:::note[我的自定义标题]
这是带有自定义标题的注释。
:::

GitHub 语法#

[!NOTE] GitHub语法也受支持。

> [!NOTE]
> GitHub语法也受支持。

> [!TIP]
> GitHub语法也受支持。

隐藏内容 (Spoiler)#

您可以在文本中添加隐藏内容，点击后才会显示。内容区域也支持 Markdown 语法。

这部分内容 :spoiler[是隐藏的嘿嘿]!

这部分内容 :spoiler[是隐藏的 **嘿嘿**]!

代码块高级功能 (Expressive Code)#

本模板使用 Expressive Code 来增强代码块的显示效果。

语法高亮#

常规语法高亮

1console.log('这段代码被语法高亮了！')

渲染 ANSI 转义序列

ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan

256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177

Full RGB colors:
ForestGreen - RGB(34, 139, 34)

Text formatting: Bold Dimmed Italic Underline

编辑器与终端窗口边框#

代码编辑器边框

console.log('使用 title 属性的例子')

终端窗口边框

echo "这个终端窗口没有标题"

文本与行标记#

标记整行与行范围

// 第 1 行 - 通过行号标记
// 第 2 行
// 第 3 行
// 第 4 行 - 通过行号标记
// 第 5 行
// 第 6 行
// 第 7 行 - 通过范围 "7-8" 标记
// 第 8 行 - 通过范围 "7-8" 标记

选择标记类型 (mark, ins, del)

function demo() {
  console.log('这行被标记为删除')
  // 这行和下一行被标记为插入
  console.log('这是第二行插入的内容')

  return '这行使用默认的中性标记类型'
}

使用类似 diff 的语法

这行将被标记为插入
这行将被标记为删除
这是一行常规文本

标记行内指定文本

function demo() {
  // 标记行内的任何指定文本
  return '支持对指定文本的多个匹配项进行标记';
}

使用正则表达式

console.log('单词 yes 和 yep 会被标记。')

自动换行#

为代码块配置自动换行

// 自动换行的例子
function getLongString() {
  return '这是一个非常非常长的字符串，除非容器特别宽，否则很可能无法在可用空间内完全显示'
}

可折叠区域#

通过 collapse 属性可以折叠指定的代码行。

// 这部分样板代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3)

行号#

显示行号

// 这个代码块会显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')

更改起始行号

console.log('来自第 5 行的问候！')
console.log('我在第 6 行')

为Fuwari博客添加文章置顶与置底功能

Mon, 30 Mar 2026 00:00:00 GMT

前言

在内容密集的博客中，某些文章可能需要更高的曝光度（如公告、指南）或更低的优先级（如归档、旧闻）。为此，我们为 Fuwari 博客 新增了 文章置顶（Top）与置底（Bottom） 功能。本文将逐步说明如何通过修改主题配置实现这一能力。

架构

基于你正在浏览的 Fuwari 博客改造计划：文章置顶与置底，该功能的项目架构可以拆解为元数据定义、逻辑处理、内容应用三个层面。

这种架构的核心思想是：通过在 Markdown 的 Frontmatter 中注入权重因子，改变静态生成的排序算法。

1. 数据结构层 (Data Schema)

位置：src/content.config.ts (或旧版的 src/content/config.ts)

这是架构的“地基”。通过 Zod 模式为文章增加一个可选的优先级字段。

新增字段：order (类型: number)
语义约定：
- 1：置顶 (Top)
- 0：默认 (Normal)
- -1：置底 (Bottom)

2. 逻辑处理层 (Logic Layer)

位置：src/utils/content-utils.ts

这是架构的“大脑”，负责重写 getSortedPosts 函数。排序逻辑由单一的“时间维度”变为**“权重 + 时间”的双重维度**。

排序算法伪代码：

$$Score = (Order \times \infty) + Timestamp$$

第一优先级：比较 order 字段。数值大的（置顶）排在前面。
第二优先级：当 order 相同时，比较 published 日期。最近发布的排在前面。

3. 内容声明层 (Content Layer)

位置：src/content/posts/*.md

这是架构的“输入端”。开发者在编写文章时，通过 YAML 语法声明权重。

---
title: "我的置顶公告"
published: 2024-01-01
order: 1  # 显式声明置顶
---

架构流程图

读取阶段：Astro 调用 getCollection('posts') 获取所有原始 Markdown 数据。
计算阶段：content-utils.ts 执行 sort() 插件。
- 如果 $A.order > B.order$，则 A 排在 B 前。
- 如果 $A.order == B.order$，比较 $Date(A)$ 与 $Date(B)$。
渲染阶段：
- 首页/列表页：按计算后的顺序循环渲染卡片。
- 上下文导航：由于排序已变，文章底部的“上一篇/下一篇”链接也会自动根据新顺序重新绑定，确保阅读体验连贯。

实操

第一步：扩展内容配置字段#

首先，在 src/content/config.ts 中为文章元数据添加 order 字段，用于标识文章的显示优先级：

import { defineCollection, z } from "astro:content";

const postsCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    published: z.date(),
    updated: z.date().optional(),
    draft: z.boolean().optional().default(false),
    description: z.string().optional().default(""),
    image: z.string().optional().default(""),
    tags: z.array(z.string()).optional().default([]),
    category: z.string().optional().nullable().default(""),
    lang: z.string().optional().default(""),
    order: z.number().default(0), // 新增字段：0=默认, 1=置顶, -1=置底
    /* For internal use */
    prevTitle: z.string().default(""),
    prevSlug: z.string().default(""),
    nextTitle: z.string().default(""),
    nextSlug: z.string().default(""),
  }),
});

export const collections = {
  posts: postsCollection,
};

说明：

order: 1 表示该文章将被置顶；

order: -1 表示置底；

默认值 0 保持原有排序行为。

第二步：调整文章排序逻辑#

接下来，修改 src/utils/content-utils.ts 中的排序函数，使文章按 order 优先级排序，再按发布时间降序排列：

async function getRawSortedPosts() {
  const allBlogPosts = await getCollection("posts", ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  });

  // 自定义排序逻辑
  const sorted = allBlogPosts.sort((a, b) => {
    // 第一优先级：按 order 字段排序（1 > 0 > -1）
    if (a.data.order !== b.data.order) {
      return b.data.order - a.data.order; // 降序：置顶(1)在前，置底(-1)在后
    }

    // 第二优先级：order 相同时，按发布日期倒序（新文章在前）
    const dateA = new Date(a.data.published);
    const dateB = new Date(b.data.published);
    return dateA > dateB ? -1 : 1;
  });

  return sorted;
}

export async function getSortedPosts() {
  const sorted = await getRawSortedPosts();

  // 保持原有的前后文章链接逻辑不变
  for (let i = 1; i < sorted.length; i++) {
    sorted[i].data.nextSlug = sorted[i - 1].slug;
    sorted[i].data.nextTitle = sorted[i - 1].data.title;
  }
  for (let i = 0; i < sorted.length - 1; i++) {
    sorted[i].data.prevSlug = sorted[i + 1].slug;
    sorted[i].data.prevTitle = sorted[i + 1].data.title;
  }

  return sorted;
}

第三步：添加置顶图标提示

在 src/components/PostCard.astro 中，插入置顶图标的代码：

{entry.data.order === 1 && <Icon class="inline text-[var(--primary)] mr-2 -translate-y-1" name="material-symbols:keep-outline-rounded" />}

它是如何实现置顶符号提示的？

条件渲染：在渲染文章标题之前，程序会检查 entry.data.order 的值。如果其值恰好等于 1，就会渲染一个图标。
图标选择：使用的是 material-symbols:keep-outline-rounded 图标，这通常是一个类似“图钉”或“书签”的图标（在 Material Symbols 中 keep 对应的是图钉）。

注意事项：

目前代码中的逻辑是 entry.data.order === 1。这意味着：
- 如果 order: 1，会显示图标。
- 如果 order: 2 或更大，虽然文章排在更前面，但不会显示这个图标。
- 如果 order: -1 (置底)，自然也不会显示图标。

如果你希望所有大于 0 的 order 都显示置顶图标，可以将该条件改为 entry.data.order > 0。

使用方式#

在任意 Markdown 文章的 Frontmatter 中添加 order 字段即可：

---
title: 重要公告
order: 1  # 置顶
published: 2025-11-01
---

或

---
title: 旧版使用说明
order: -1  # 置底
published: 2023-05-20
---

本文转载说明

原文标题： 文章置顶与置底：Fuwari博客的功能增强（一）

原文作者： 晓正杨

发布日期： 2025-11-01

许可协议： CC BY-NC-SA 4.0

转载备注： 本文出于技术交流目的进行转载，转载请遵循原作者指定的授权协议。

如何实现 Word 添加页码且首页不显示

Mon, 30 Mar 2026 00:00:00 GMT

首先，打开文档，点击顶部菜单栏的【插入】选项卡，在 “页眉和页脚” 功能区找到【页码】按钮（图标是一个小书本加数字）。
点击【页码】下拉菜单，根据需求选择页码的位置，比如 “页面底端”“页面顶端” 或 “页边距”。这里以 “页面底端” 为例，选择一个你喜欢的页码样式（比如普通数字居中、外侧等）。

此时，所有页面（包括首页）都会显示页码，但我们需要让首页不显示，接着看下一步！
在【设计】选项卡的 “选项” 功能区，找到【首页不同】复选框，勾选它！
如果希望从第二页开始页码为 “1”（即首页无页码，第二页是第 1 页）。则在【页眉和页脚工具 - 设计】选项卡中，点击【页码】下拉菜单，选择【设置页码格式】。在弹出的对话框中，勾选【起始页码】，并确保数值为 “0”
点击【确定】，此时第二页会显示 “1”，后续页面依次递增。
设置完成后，点击【页眉和页脚工具 - 设计】选项卡中的【关闭页眉和页脚】按钮，或直接双击文档正文区域，回到正常编辑状态。

DevSidecar 开发者边车工具：GitHub 加速与网络优化指南

Mon, 30 Mar 2026 00:00:00 GMT

DevSidecar 是一款为开发者设计的辅助工具，通过本地代理将 HTTPS 请求重定向到国内加速通道，核心目标是解决 GitHub 等开发相关网站访问难的问题。

1. 核心特性

GitHub 全方位加速：
- 支持 Release 包、源码、Zip 文件下载加速。
- 支持 git clone、git push 加速及头像显示。
- 解决 README 中图片无法加载的问题。
DNS 优选：智能解析最佳 IP 地址，绕过 DNS 污染，提升访问速度。
请求拦截：自动将打不开的网站代理到镜像站点，具备失败自动切换机制。
Stack Overflow 加速：代理 Google CDN 资源，解决验证码（recaptcha）加载慢的问题。
npm 加速：支持一键切换淘宝镜像或开启 npm 代理，解决插件安装失败问题。

2. 快速开始

第一步：下载与安装

根据您的操作系统选择对应的安装包：

Windows: 下载 DevSidecar-x.x.x-windows-universal.exe。
macOS: 下载 DevSidecar-x.x.x-macos-universal.dmg（需在安全隐私设置中允许安装）。
Linux: 提供 .deb 和 .AppImage 格式。

第二步：安装根证书（关键）

首次启动时，程序会提示安装根证书。

注意：由于 DS 需要拦截 HTTPS 请求进行重定向，必须信任其本地生成的证书。证书为本地随机生成，不经过云端，安全性较高。

第三步：开始加速

直接在浏览器中访问 GitHub、HuggingFace 或 Docker Hub 即可感受速度提升。

3. 运行模式对比

模式	特点	适用场景
安全模式	仅开启 DNS 优选，无需安装证书。	仅需基础防污染，对安全性要求极高。
默认模式	开启拦截与 SNI 直连，需安装证书。	推荐模式，可流畅访问 GitHub 大部分资源。
增强模式	修改配置文件开启隐藏功能。	进阶开发者，需访问更多受限资源。

4. 避坑指南与注意事项 ⚠️

异常断网处理：如果 DS 在开启状态下随电脑强制关机/重启，可能会导致系统代理未重置而无法上网。解决方法：手动重新打开一次 DS 即可恢复。
软件冲突：
- Watt Toolkit (Steam++)：若共用，请将 Watt Toolkit 设为 Hosts 模式。
- VPN/梯子：DS 旨在为没有代理工具的用户提供“自行车”。如果你已有成熟的代理环境，建议关闭 DS 以免冲突。
浏览器兼容性：FireFox（火狐）浏览器通常不走系统证书库，可能需要手动导入 DS 的根证书。

DevSidecar 增强模式（彩蛋）开启指南

“增强模式”是 DevSidecar 隐藏的进阶功能，本质上是一个简单的网络加速辅助工具。由于敏感原因，官方在界面上默认隐藏了开关，需要通过修改本地配置文件来手动激活。

核心步骤：解谜与配置修改

1. 查找配置文件路径

提示在软件首页左下角，即去dev-sidecar项目源码里面搜索“//TODO”，最终分会到达packages/core/index.js这个文件中，看到以下提示

module.exports = require('./src') // TODO 这是一个解谜游戏 ↓ ↓ ↓ ↓ ↓ ↓ ，如果你破解了它，请不要公开，好好用它来学习和查资料吧（特别注意：为了你的人身安全，请不要用它来查看和发表不当言论，你懂得）。 /** \u0061\u0048\u0052\u0030\u0063\u0044\u006f\u0076\u004c\u0032\u0052\u006c\u0064\u0069\u0031\u007a\u0061\u0057\u0052\u006c\u0059\u0032\u0046\u0079\u004c\u006d\u0052\u0076\u0059\u0032\u0031\u0070\u0063\u006e\u004a\u0076\u0063\u0069\u0035\u006a\u0062\u0069\u0039\u0035\u0062\u0033\u0056\u006d\u0061\u0057\u0035\u006b\u0061\u0058\u0051\u0076\u0061\u0057\u0035\u006b\u005a\u0058\u0067\u0075\u0061\u0048\u0052\u0074\u0062\u0041\u003d\u003d */ // 这个项目里有一点点解谜提示： https://github.com/fast-crud/fast-crud （DevSidecar解谜提示谜题共三层，前两层是两种不同的编码方式，第三层这里就不剧透了，留一点小乐趣。）

复制文中的编码，进行Unicode与中文编码/解码，会得到aHR0cDovL2Rldi1zaWRlY2FyLmRvY21pcnJvci5jbi95b3VmaW5kaXQvaW5kZXguaHRtbA==
再对得到的字符进行Base64 编码/解码，会得到http://dev-sidecar.docmirror.cn/youfindit/index.html
在搜索框输入得到的链接，下拉点击左下角，会发现有一张透明图片，将该图片保存!
在图片浏览器打开就会出现二维码，手机扫描后就会得到最终答案

2. 修改配置参数（核心操作）

确保 DevSidecar 软件已完全退出（建议在任务栏托盘处右键退出）。
使用文本编辑器（如记事本、VS Code 或 TextEdit）打开上述的 setting.json5 文件。
在代码中找到以下字段：
```
"overwall": false
```
将该值由 false 修改为 true：
```
"overwall": true
```
保存文件并关闭编辑器。

3. 重启并验证

重新启动 DevSidecar 桌面客户端。
观察软件界面左侧菜单栏，此时会出现一个新的选项：“增强功能”。
在该菜单内，您可以根据提示进一步配置加速节点或使用相关增强服务。

Markdown 语法全解析：从基础到高级进阶

Mon, 30 Mar 2026 00:00:00 GMT

一、标题

三号

四号

五号标题

六号标题【最低】

二、分割线

*号分割线

-分割线

三、粗体斜体

斜体

粗体

~~删除线~~

四、超链接和图片

超链接,方法1

超链接,方法2

五、无序列表

a
- b
- b
  - C
    - V
B

六、有序列表

a
b
1. c
2. c

七、文字引用

使用 > 表示，可以有多个 > 表示层级更深

第一层

第二层这样跳不下去

还可更深

这样就跳出去了

八、行内代码

其实上边已经用过很多次，即使用 ` 表示

这是行内代码中间可以换行

九、代码块

```代码段```
import os

十、表格

商品name	price	num
靠左	靠右	3
3	4	2

十一、流程图

解释一下这个例子：

mermaid是Mermaid语言的标记。

graph TD;指定了图的类型和方向，这里是从上到下（Top Down）的有向图（Directed Graph）。

A-->B;和A-->C;表示两个箭头从A出发分别指向B和C。

B-->D;和C-->D;表示两个箭头从B和C出发分别指向D。

mermaid graph TD A(工业用地效率)-->B1(土地利用强度) A-->B2(土地经济效益) B1-->C1(容积率) B1-->C2(建筑系数) B1-->C3(亩均固定资本投入) B2-->D1(亩均工业产值) B2-->D2(亩均税收)

高级语法

数学公式

$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$

$H(D_2) = -\left(\frac{2}{4}\log_2 \frac{2}{4} + \frac{2}{4}\log_2 \frac{2}{4}\right) = 1$

  \begin{pmatrix}
  1 & a_1 & a_1^2 & \cdots & a_1^n \\
  1 & a_2 & a_2^2 & \cdots & a_2^n \\
  \vdots & \vdots & \vdots & \ddots & \vdots \\
  1 & a_m & a_m^2 & \cdots & a_m^n \\
  \end{pmatrix}

HTML原生语句

<font face="黑体">我是黑体字</font> <font face="微软雅黑">我是微软雅黑</font> <font face="STCAIYUN">我是华文彩云</font> <font color="#0099ff" size="7" face="黑体">color=#0099ff size=72 face="黑体"</font> <font color="#00ffff" size="72">color=#00ffff</font> <font color="gray" size="72">color=gray</font>

颜色的英文单词：

red（赤） orange（橙） yellow（黄） green（绿） cyan（青） blue（蓝） purple（紫）字体的英文单词：

rm（罗马字体） it （意大利字体） bf（黑体） sl （斜体） sf （等线体） sc （小体大写字母） tt （打字机字体） mit （数学斜体）

转义

在 Markdown 编辑器里面使用了很多特殊符号来表示特定的意义，该特殊符号将不再显示，这个时候就需要转义字符——反斜杠，如下：

**转义特殊符号正常显示**

无转义特殊符号无法正常显示

为项目添加一键部署按钮

Mon, 30 Mar 2026 00:00:00 GMT

你一定在 GitHub 上见过不少项目都带有这样的一键部署按钮：

这些按钮不仅视觉炫酷美观，更重要的是——只需点击一下，就能直接跳转到对应云平台的部署页面，省去了手动 fork、clone、配置等繁琐步骤，极大降低了项目的使用门槛。

这类功能最常用于静态网站、前端应用类项目，但也不限于此。例如雨云也提供了类似的一键部署按钮不过需要先上架至其应用商店。相比之下，Vercel、Netlify、EdgeOne Pages这几大平台则更加开放：你只需将部署链接中的仓库参数替换为自己的 GitHub 地址，即可立即启用一键部署能力，让你的项目在几分钟内部署到云端。

原理#

这些一键部署按钮本质上是一种通过Markdown语法实现的链接，当用户点击该按钮时，会跳转到目标云服务提供商的部署界面。这种按钮的通用语法格式为：

[![ Deploy Button Text ](SVG Image URL)](Deployment URL)

其中，SVG图片由云服务提供商提供，就是我们外观上看到的按钮样式。部署链接则指向云服务提供商的部署页面，并可能包含一些查询参数，用于指定要部署的GitHub仓库地址，甚至还能包含构建命令、输出目录等信息。

添加#

EdgeOne Pages#

基础用法#

只需将以下 Markdown 代码添加到你 GitHub 仓库的 README.md 文件中，把YOUR_REPO_URL替换为你的项目地址即可为项目启用 EdgeOne Pages 一键部署 功能：

[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=YOUR_REPO_URL)

以 EdgeOne-Random-Picture 项目为例：

[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https://github.com/H2O-ME/EdgeOne-Random-Picture)

高级用法：带构建参数#

EdgeOne Pages 支持通过 URL 参数精细控制部署行为：

Search 参数名称	描述
`template`	通过 Pages 官方模板来部署的模板名称
`repository-name`	Github 仓库名称
`repository-url`	通过其他 GitHub 仓库来部署的仓库地址
`project-name`	项目名称
`build-command`	构建命令
`install-command`	安装命令
`output-directory`	构建后产物的输出目录
`root-directory`	构建根目录
`env`	仓库必要的环境变量，如需多个可用英文逗号连接，如：KEY1,KEY2,KEY3
`env-description`	跟环境变量相关的描述
`env-link`	跟环境变量相关的链接

以 saicaca/fuwari（基于 Astro 的静态博客模板）为例：

我在该链接指定了以下参数：

安装命令：pnpm install
构建命令：pnpm run build
输出目录：dist

[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2Fsaicaca%2Ffuwari&install-command=pnpm%20install&build-command=pnpm%20run%20build&output-directory=dist)

注意：URL 中的特殊字符（如 /、空格）需进行 URL 编码（例如 %2F 代表 /）

Vercel#

基础用法#

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/username/repository)

Vercel 的一键部署按钮也可以直接通过其官方部署链接生成器生成，因此如果你需要添加更多的部署参数可以前往使用部署按钮自行生成，无需考虑markdown语法等问题，这里不重新造轮子了。

Netlify#

Netlify 的部署按钮不支持提供 URL 参数控制构建参数，需通过项目的 netlify.toml 文件配置构建行为。 Netlify的一键部署按钮链接格式为：

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/your-username/your-repo)

具体示例：

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/H2O-ME/IPFS-img-host)

转载说明

为项目添加一键部署按钮 - THW's Blog

给fuwari博客添加AI摘要

Mon, 30 Mar 2026 00:00:00 GMT

现在教程开始！

修改文件前请注意备份，防止修改失败无法回退

新建src/components/misc/AISummary.astro文件

---
export interface Props {
  content: string;
}

const { content } = Astro.props;

// 如果没有内容，不渲染组件
if (!content || content.trim() === '') {
  return null;
}
---

{content && (
  <div class="ai-summary">
    <div class="ai-title">
      <div class="ai-title-left">
        <i>🤖</i>
        <span class="ai-title-text">AI 摘要</span>
      </div>
      <div class="ai-tag">fishcpy AI</div>
    </div>
    <div class="ai-explanation" data-content={content}></div>
  </div>
)}

<script>
  // 检查当前页面路径是否包含 "posts"
  function isPostsPage() {
    return window.location.pathname.includes('/posts/');
  }

  // 全局函数，用于初始化AI打字效果
  function initAITyping() {
    // 只在包含 "posts" 的页面才执行AI总结功能
    if (!isPostsPage()) {
      return;
    }

    // 查找所有AI摘要容器
    const aiSummaryContainers = document.querySelectorAll('.ai-summary');
    
    aiSummaryContainers.forEach(container => {
      const textElement = container.querySelector('.ai-explanation');
      
      if (!textElement) {
        return;
      }

      // 检查是否已经初始化过
      if (textElement.hasAttribute('data-initialized')) {
        return;
      }

      const content = textElement.getAttribute('data-content');
      if (!content) {
        return;
      }

      // 标记为已初始化
      textElement.setAttribute('data-initialized', 'true');
      
      // 清空文本内容，准备打字效果
      textElement.textContent = '';
      textElement.classList.remove('typing-complete');
      
      let index = 0;
      const typeSpeed = 30; // 打字速度（毫秒）
      
      function typeWriter() {
        if (index < content.length) {
          textElement.textContent += content.charAt(index);
          index++;
          setTimeout(typeWriter, typeSpeed);
        } else {
          // 打字完成后隐藏光标（通过CSS控制）
          textElement.classList.add('typing-complete');
        }
      }
      
      // 延迟开始打字效果
      setTimeout(typeWriter, 800);
    });
  }

  // 页面加载完成时初始化
  function handlePageLoad() {
    setTimeout(initAITyping, 100);
  }

  // 监听页面导航事件（适用于Astro的客户端路由）
  function setupNavigationListeners() {
    // DOMContentLoaded事件
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', handlePageLoad);
    } else {
      handlePageLoad();
    }

    // 监听Astro的页面导航事件
    document.addEventListener('astro:page-load', handlePageLoad);
    
    // 监听浏览器的popstate事件（后退/前进按钮）
    window.addEventListener('popstate', handlePageLoad);
    
    // 监听pushstate和replacestate事件
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;
    
    history.pushState = function() {
      originalPushState.apply(history, arguments);
      setTimeout(handlePageLoad, 100);
    };
    
    history.replaceState = function() {
      originalReplaceState.apply(history, arguments);
      setTimeout(handlePageLoad, 100);
    };
  }

  // 立即设置监听器
  setupNavigationListeners();
</script>

在src/content/config.ts插入下方代码，13行下左右，注意+号要删除

tags: z.array(z.string()).optional().default([]),
category: z.string().optional().nullable().default(""),
lang: z.string().optional().default(""),
+       ai: z.string().optional().default(""),

/* For internal use */
prevTitle: z.string().default(""),

在src/pages/posts/...slug.astro插入下方代码，注意+号要删除

import { profileConfig, siteConfig } from "../../config";
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
import Comment from "@components/comment/index.astro";
+ import AISummary from "@components/misc/AISummary.astro";

export async function getStaticPaths() {
    const blogEntries = await getSortedPosts();
@@ -84,6 +85,9 @@ const jsonLd = {
</div>
</div>

+            <!-- AI Summary -->
+            {entry.data.description && <AISummary content={entry.data.description} class="onload-animation" />}

<!-- metadata -->
<div class="onload-animation">
<PostMetadata

在src/styles/main.css底部添加下方代码

/* =================== */
/* 📘 AI 摘要模块样式 */
/* =================== */

.ai-summary {
    background: var(--card-bg);
    border: 1px solid var(--line-divider);
    border-radius: 12px;
    padding: 8px 8px 12px 8px;
    line-height: 1.3;
    flex-direction: column;
    margin-bottom: 16px;
    display: flex;
    gap: 5px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.ai-summary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.ai-summary .ai-explanation {
    z-index: 10;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    @apply text-90;
    text-align: justify;
}

/* ✅ 打字机光标动画 */
.ai-summary .ai-explanation::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 2px;
    margin-left: 2px;
    @apply bg-black/90 dark:bg-white/90;
    vertical-align: bottom;
    animation: blink-underline 1s ease-in-out infinite;
    transition: all 0.3s;
    position: relative;
    bottom: 3px;
}

/* 打字完成后隐藏光标 */
.ai-summary .ai-explanation.typing-complete::after {
    display: none;
}

.ai-summary .ai-title {
    z-index: 10;
    font-size: 14px;
    display: flex;
    border-radius: 8px;
    align-items: center;
    position: relative;
    padding: 0 12px;
    cursor: default;
    user-select: none;
}

.ai-summary .ai-title .ai-title-left {
    display: flex;
    align-items: center;
    color: var(--primary);
}

.ai-summary .ai-title .ai-title-left i {
    margin-right: 3px;
    display: flex;
    color: var(--primary);
    border-radius: 20px;
    justify-content: center;
    align-items: center;
}

.ai-summary .ai-title .ai-title-left .ai-title-text {
    font-weight: 500;
}

.ai-summary .ai-title .ai-tag {
    color: var(--btn-content);
    font-weight: 300;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* ✅ 打字机光标闪烁动画 */
@keyframes blink-underline {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

最后在src/styles/variables.styl 大约19行后面添加下方代码

  --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
  --card-bg: white oklch(0.23 0.015 var(--hue))

+  // AI Summary 相关变量
+  --ai-title-font-color: #0883b7 #0883b7
+  --ai-maskbg: rgba(255, 255, 255, 0.85) rgba(0, 0, 0, 0.85)
+  --ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%) conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)
+  --ai-card-secondbg: #f1f3f8 #3e3f41
+  --ai-text: #4c4948 #ffffffb3
+  --ai-secondtext: #3c3c43cc #a1a2b8

  --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))

使用 CF Workers 搭建 Vless/Trojan 节点并优化

Mon, 30 Mar 2026 00:00:00 GMT

前言

:::warning

本教程仅供学习交流，请在当地法律允许的情况下使用。
Cloudflare 已在其 Self-Serve Subscription Agreement | Cloudflare 中规定：

(j) use the Services to provide a virtual private network or other similar proxy services.
--- Google Translate:
(j) 使用服务提供虚拟专用网络或其他类似的代理服务。

:::

前提准备

一个域名（免费/付费）
一个 Cloudflare 账号

搭建节点

:::important 这里介绍 Vless 版节点搭建。 Vless 版的节点和 Trojan 版的节点部署方法类似，只是换了一个 _worker.js 文件。需要使用 Trojan 版的可以去勇哥仓库 https://github.com/yonggekkk/Cloudflare-vless-trojan/tree/main/Trojan_workers_pages 找到 Trojan 版 Worker 代码。 :::

创建 Worker

打开 Cloudflare Dashboard，点击右下角的 计算 (Workers)，在新的页面点击 创建应用程序。

选择 从 Hello World! 开始 右边的 开始使用 按钮：

随便取一个 Worker 名字，但是最好不要包括下面的关键词，否则可能会报错 1101。一般以默认分配的名称作为 Worker 名称即可：

vpn
vless
trojan
edgetunnel
bpb
proxy

点击部署按钮。

编辑 Worker

访问 https://raw.githubusercontent.com/yonggekkk/Cloudflare-vless-trojan/refs/heads/main/Vless_workers_pages/_worker%E6%B7%B7%E6%B7%86.js 并复制整个内容。

返回 Cloudflare Dashboard，点击刚刚创建的 Worker，在控制面板中点击 编辑代码：

把从上面链接复制来的内容粘贴到 Worker 代码编辑器中。

访问 Online UUID Generator Tool，点击 Copy 按钮，把你的 UUID v4 复制下来。

原本部分 worker.js

let userID = "86c50e3a-5b87-49dd-bd20-03c7f2735e40"; //可以把86c50e3a-5b87-49dd-bd20-03c7f2735e40改为你自定义的uuid
const proxyIPs = [""]; //""之间填写proxyip，留空将无法访问CF网站

把这个代码中的 86c50e3a-5b87-49dd-bd20-03c7f2735e40 替换为你的 UUID
proxyIPs 可从 https://t.me/CMLiussss_channel/84 中随便选一个使用。推荐使用 ProxyIP.US.CMLiussss.net。

配置完成后大概类似于这样

worker.js

let userID = "20a4537b-8da9-4bd4-b666-6e29a62345f7";
const proxyIPs = ["ProxyIP.US.CMLiussss.net"];

确认无误后就点击右上角部署按钮部署你的 Worker 代码。
显示 版本已保存 说明部署成功。

关于 域和路由-自定义域 绑定自定义域名，这里不赘述了。

访问 Worker

如果是自定义域名，使用 https://自定义域名/你的UUID 访问你的 Worker。
如果未绑定域名，点击 Worker Dashboard 的访问按钮后在地址栏加入 /你的UUID 回车进入后台。
在后台可以查看节点地址。

如果你使用 V2rayN，可点击 点击复制链接，然后 Ctrl+V 粘贴到 V2rayN 中。
为了追求速度、延迟、IP地区，可以使用优选后的 Cloudflare Anycast IP 地址。具体方法就是将 地址 (address) 一行从 www.visa.sg 改为 cf.090227.xyz。这样IP的地区就会为新加坡或日本，而且真连接延迟会降低：

编写 Clash 规则

:::tip 编写 Clash YAML 配置文件，应用分流规则。**使用 V2rayN 代理工具的可以跳过了。 :::

如果你要使用优选IP，如 cf.090227.xyz，需要先编辑一下 vless 链接：

原版

vless://20a4537b-8da9-4bd4-b666-6e29a62345f7@www.visa.com.sg:8443?encryption=none&security=tls&type=ws&host=xxx.dpdns.org&sni=xxx.dpdns.org&fp=random&path=%2F%3Fed%3D2560#xxx.dpdns.org

改为

优选

vless://20a4537b-8da9-4bd4-b666-6e29a62345f7@cf.090227.xyz:8443?encryption=none&security=tls&type=ws&host=xxx.dpdns.org&sni=xxx.dpdns.org&fp=random&path=%2F%3Fed%3D2560#xxx.dpdns.org

然后访问 https://sub.cmliussss.com 填上你的 Vless 单链接（如果优选请填改后的 Vless 单链接），然后点击 生成订阅链接。之后导入生成好的链接进 Clash Verge 等客户端使用即可。

如果你需要防止 DNS 泄露，这里有一些资料，但不保证一定能用：

通过自己更改的防泄漏 DNS 配置，如果不是部署在直链环境下，就不要通过链接更新了，防止你的订阅链接将你更改的配置文件覆盖。推荐把更改后的配置文件上传到 Cloudflare R2 存储桶，然后获得一个公开的直链给 Clash 用。

根据您提供的页面内容，这篇博客文章采用了 CC BY-NC-SA 4.0（署名-非商业性使用-相同方式共享）许可协议。为了符合原作者 Ad_closeNN 的要求，建议您在转载文末使用以下格式：

转载说明

本文转载自： Ad_closeNN 的小站
文章标题： 《使用 CF Workers 搭建 Vless/Trojan 节点并优化》
文章作者： Ad_closeNN
原始链接： https://blog.adclosenn.top/posts/cloudflare-workers-proxy/
许可协议： 本文采用 CC BY-NC-SA 4.0 许可协议，转载请保留此说明。

告别手动传图：利用 Bing 官方 API 打造“零维护”随机图接口

Mon, 30 Mar 2026 00:00:00 GMT

原方案

转载说明：使用Cloudflare Workers+Pages制作永久免费的随机图API! - Wudarensheng blog

准备工作#

1.你的图片

2.一个Cloudflare账号

3.一个域名（必须托管在Cloudflare上）

正式开始#

1.将你的图片**（格式必须统一）**放在单独的一个文件夹中，并创建一个用于批量重命名的bat脚本（不要以管理员权限运行！！！），代码如下：

@echo off
setlocal enabledelayedexpansion

:: Check if running as administrator
net session >nul 2>&1
if !errorlevel! equ 0 (
    echo Error: This script should not be run as administrator.
    echo Please run without administrator privileges.
    pause
    exit /b 1
)

set "script_name=%~nx0"
set /a counter=1

echo Renaming files...
echo.

:: First, create a temporary directory to avoid naming conflicts
set "temp_dir=temp_rename_%random%"
mkdir "%temp_dir%"

:: Move all files (except script) to temp directory first
for %%f in (*) do (
    if /i not "%%f"=="%script_name%" (
        if not "%%f"=="%temp_dir%" (
            move "%%f" "%temp_dir%\%%f" >nul
        )
    )
)

:: Rename files from temp directory back with new names
for %%f in ("%temp_dir%\*") do (
    set "filename=%%~nxf"
    set "ext=%%~xf"
    if "!ext!"=="" set "ext="
    set "new_name=!counter!!ext!"

    move "%%f" "!new_name!" >nul
    if !errorlevel! equ 0 (
        echo Renamed: "!filename!" --^> "!new_name!"
        set /a counter+=1
    ) else (
        echo Error: Cannot rename "!filename!"
    )
)

:: Remove temporary directory
rmdir "%temp_dir%" /s /q >nul 2>&1

echo.
echo Operation completed. Total files processed: %counter%
pause

保存脚本并运行，就完成了图片的重命名。接着将你的图片添加到压缩包。

2.登录Cloudflare账号，找到侧边栏的Worker，创建一个pages，选择“上传资产”。将压缩包上传，点击部署，复制类似 {你的pages名称}.pages.dev的域名，备用。

3.再创建一个worker，选择从helloworld开始，名称随意。部署完成后选择右上角编辑代码，将里面的内容删完，接着粘贴以下代码：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const randomNumber = Math.floor(Math.random() * 9) + 1;  //9改为实际的图片数量
  const imageUrl = `https://wdrs-page.pages.dev/${randomNumber}.png`;  //png改为实际的图片格式

  try {
    const response = await fetch(imageUrl);
    if (response.ok) {
      return new Response(response.body, {
        headers: { 'Content-Type': 'image/png' }  //这里一样的，改为实际的图片格式
      });
    }
    return new Response('Image not found', { status: 404 });
  } catch (error) {
    return new Response('Service unavailable', { status: 503 });
  }
}

按照代码右边的注释改完后，点击部署

4.给worker绑定一个自定义域名，地址栏输入分配的域名就可以访问了！

简单方案（使用 Bing 官方 API）

这种方法你不需要上传图片，不需要 GitHub 仓库，甚至不需要每天更新，因为 Bing 会帮你更新。

获取当日图片

在你的 Workers 编辑器中，直接替换为以下代码：

async function handleRequest(request) {
  const BING_API = "https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1";

  try {
    // 1. 请求 Bing 官方接口获取图片数据
    const response = await fetch(BING_API);
    const data = await response.json();

    // 2. 提取图片路径并拼接完整 URL
    // data.images[0].url 通常是 /th?id=OHR.XXX.jpg
    const imgRelativePath = data.images[0].url;
    const fullImgUrl = `https://www.bing.com${imgRelativePath}`;

    // 3. 策略选择：
    // 方案 A: 直接 302 重定向到 Bing 图片（速度快，节省 Workers 资源）
    return Response.redirect(fullImgUrl, 302);

    /* // 方案 B: 代理读取图片并输出（隐藏真实地址，看起来更像本地 API）
    const imageResponse = await fetch(fullImgUrl);
    return new Response(imageResponse.body, {
      headers: { 'Content-Type': 'image/jpeg' }
    });
    */

  } catch (e) {
    return new Response("抓取 Bing 图片失败", { status: 500 });
  }
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

随机获取最近的 8 张图片

在你的 Workers 编辑器中，直接替换为以下代码：

async function handleRequest(request) {
  // 1. 生成随机索引：0 代表今天，1-7 代表过去 7 天
  const randomIndex = Math.floor(Math.random() * 8);
  
  // 2. 构造 Bing 官方接口 URL (n=8 表示获取最近 8 张的数据)
  const BING_API = `https://www.bing.com/HPImageArchive.aspx?format=js&idx=${randomIndex}&n=1`;

  try {
    // 3. 抓取 Bing 接口数据
    const response = await fetch(BING_API);
    const data = await response.json();
    
    // 4. 提取图片路径
    if (data.images && data.images.length > 0) {
      const imgRelativePath = data.images[0].url;
      const fullImgUrl = `https://www.bing.com${imgRelativePath}`;

      // 5. 302 重定向到真实的图片地址
      return Response.redirect(fullImgUrl, 302);
    } else {
      throw new Error("Invalid Bing API response");
    }

  } catch (error) {
    return new Response("抓取随机 Bing 图片失败: " + error.message, { status: 500 });
  }
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

方案对比

维度	旧方案 (手动 Pages 存储)	新方案 (Bing 官方 API)
图片来源	需自行搜集、重命名、打包	官方源：自动获取 Bing 每日壁纸
维护成本	高：增加新图需重新上传部署	零维护：自动同步，永久更新
存储压力	占用 Cloudflare Pages 配额	不占空间：仅做请求中转与重定向
加载速度	取决于 Pages 节点的全球分发	极速：利用微软官方 CDN 节点加速
图片质量	取决于本地素材质量	高清原图：固定提供 1080P/4K 图像
实现难度	涉及脚本运行、压缩、多步部署	极简：一行 Workers 代码即可搞定

如何彻底修改 Windows 用户文件夹名（中文改英文）

Mon, 30 Mar 2026 00:00:00 GMT

1.首先你需要打开你的命令提示符（管理员权限），然后输入以下命令来开启超级用户去修改你的用户名：#

Terminal window

1net user administrator /active:yes

2.然后按下Alt+F4，选择切换用户，切换到管理员账户（Administrator）#

3.在任务管理器（Ctrl+Shift+Esc）关闭之前的用户所有进程#

4.先重命名用户文件夹（C:\Users\原中文用户名）为（C:\Users\新英文用户名）#

如果存在仍有进程在运行问题，则开启你的资源监视器（Ctrl+Shift+Esc下的性能页面右上角的“打开资源监视器”）

然后在资源监视器的CPU页面的关联句柄搜索框中输入你的用户名，找到相关进程并结束它们（需要重启则重启，后续仍选择超级管理员，误进入原来的用户导致错乱后果自负！！！）

5.然后打开注册表编辑器（Win+R，输入regedit回车），定位到以下路径：#

1HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList\S-1-5-21-1144158939-3632170427-3967875196-1001（一般是第三个，选中有你用户名的即可）

修改<ins><strong>ProfileImagePath</strong></ins>

6.更改完成注册表后，按下Alt+F4，选择切换用户，切换到你的新英文用户名即可#

然后打开任务管理器（Ctrl+Shift+Esc）关闭管理员账户所有进程；再打开命令提示符（管理员权限），然后输入以下命令来关闭超级用户：

Terminal window

1net user administrator /active:no

7.配置文件看的是你C盘根目录下的Users文件夹下的用户名文件夹，并非是设置里的用户名#

拒绝庸碌：如何通过隔离无关事物重获生活掌控权

Mon, 30 Mar 2026 00:00:00 GMT

随着科技越来越发达，很多事情AI就帮你很快完成，短视频、抖音、新闻等占据了很多业余的时间，导致没有办法静下心来思考问题，每天如同提线木偶般浑浑噩噩,时间一长感觉对任何事情都提不起兴趣。
创建这个blog初衷是让自己改变目前的状态，让自己有更多的时间思考、学习、记录、复盘每日在学习和工作中遇到的各种问题，顺便隔离与自己生活无关的事情

帮人会过度占用你时间#

小时候，父母总是说要与人和善，别人的事情能帮就帮一下，就以为帮别是头等大事；出来工作后别人的事情能帮就会帮，但是时间长了之后发现帮别人，自己想要做的事情没时间做了，有人提醒‘我不要别人让你帮忙就立即帮，庶判断哪些是真的需要帮的，不要总处理别人抛过来的急事’。所以后来就给自己定了三个不帮原则：

和自己职责无关的事情不帮: 避免过度跨职责引起不必要的麻烦
需求不明确的事情不帮: 需求不明确说明他自己也不知道想要什么，不要介入过多
解决需要话很长时间的不帮: 说到底是别人的事情，你花了时间自己的事情可能没有办法按期完成。
他自己花时间可搞定事不帮: “授人以鱼”不如”授人以渔”，避免他人长期懒惰依赖性
违背公序良俗的事情不帮: 保持专业距离，不介入复杂人际关系纠纷或情感纠葛

不必要的应酬#

在生活中人避免不了与其他人接触，也少不了相关的应酬，如聚会、吃饭等；这些会大量占用你的时间，人到中年会发现这些很多都是无关紧要的，真正能带给你帮助的少之又少。

卸载你的抖音短视频平台#

短视频精准的抓住了我们当代人碎片时间的注意力，让人越看越想看。很多时间自己明明已经很累了，但是打开了抖音之后自己的注意力全部都被抖音吸引了，然后刷了一条又一条，让人不断成瘾看下去，一晃就到了凌晨了。然后一天又一天的重复。
当想要改变晚睡的习惯，想要在这个状态下脱离出来，每次只要一打开短时频又会被内容所吸引，又在这个事情上不段的重复。
短视频大部分都是无效且片面的，根本就没有办法让你系统化掌握一门知识与应用; 你感觉看了一个比较好的视频，当时你觉得说的挺有道理的，又刷了另外一个视频也觉得挺有道理的，然后不断的刷到新的视频佐证你的想法，实际上已经陷入了短视频算法的精心陷阱中，他让你看到你只想看到的内容，让你的思考层面越来越偏激化，你以为视频的想法就是你的想法了。
小时候听到洗脑这个词时，我以为是把人的脑子打开，然后灌水进去洗，当时我都害怕了很久，生怕别人把我带去洗脑。后来步入社会后洗脑这个词就听到多了，慢慢这就是别人的思想强加到你的思想里，你误以为别人就是对的。现在的短视频何尝不是一个洗脑中心呢，不管你是看短视频还是听短视频都是一样
所以我们要保持足够的警惕，不让要短视频干涉到你的生活，从而影响了你，戒掉短视频，给自己多一些时间去思考和观察世界的变化。

戒掉短视频有几种方法#

直接卸载掉抖音和其他的视频平台
培养自己一项兴趣爱好
减少看手机时间，
多运动、出门散步
坚持学习、复盘、做笔记，系统性学习你想要学习的内容
把这些事情变成你的习惯。

走出迷茫#

建立这个博客之前我每天都感觉很迷茫，像是有一团迷雾看不清未来的方向，每天上班感觉都浑浑噩噩的，不知道做什么，未来应该做什么。
我觉得应该让自己多一些时间思考，而不是将时间浪费在短视频、游戏、朋友圈等地方，然后把相关的状态记录下来，让自己了解自己的状态，脱离迷茫。
所以创建了现在的博客，不去考虑流量，只记录自己学习与生活，锻炼自己的写作复盘能力。
2024年1月到4月时，每天早起去炼目跟着太阳的时间起床，那时每天都是清醒的，后来太阳升起来太早没有办法起来，早起的习惯就搁置了。今天又早起，感觉一天都是有精神的。
生活本该属于你自己，除去生死其他都无关紧要，或许未来某天能像庄子一样悟透生死，生死也无关紧要了。

驴得水：一场关于人性的悲剧

Mon, 30 Mar 2026 00:00:00 GMT

有感

“给你讲个笑话，你可别哭啊！”

民国时期，在一个远离喧嚣和战乱的偏远山区，伫立着一所简陋平凡的学校。校长孙恒海带着女儿孙佳以及裴魁山、张一曼、周铁男这几个教师栖身于此。在校长的建议下，把院子里的一头驴起了名字“吕得水”当作教员报了上去，以吃空饷。可就在某天，教育部要派专员来访，偶然来到学校的铜匠如同救命稻草出现在众人面前，他们央求铜匠伪装成吕老师，可是一切真能顺利蒙混过关吗？一段荒诞，观完令人无言的故事就此上演。

前30分钟，哈哈哈喜剧啊，这些人真逗。
又30分钟，嗯，有关于取舍、关于底线的哲学思考。
后60分钟，忍不住暗骂所有人都有病，所有人！骂着骂着，眼睛泛起酸来。

人物塑造

校长
近乎偏执地，近乎不择手段地，想要实现自己教育理想！为了达到目的，依靠威信和自以为的大格局，戴着所谓的大局为重的冠冕堂皇的面具，让自己虚伪的面目越来越严重。
亲自给张一曼剪发；
亲自劝说女儿扮演吕得水的未婚妻；
在魁山对一曼实施暴行的时候出来制止；
在周铁男被枪指住的时候挡在铁男身前阻挡对方开枪；
在嘴边总挂着口头禅“干大事不拘小节” ；
就为了所谓的“教育建设”，一次次让张一曼走在被侮辱的第一线。使得这句口头禅越往后就越成了一个笑话。
裴魁山
一身中山装也掩饰不住内心的肮脏龌龊，后半段的貂绒才是他脱掉面具之后的真正嘴脸；
曾经与铁男交谈自己对教育的看法，但那是建立在对铜匠获得教育家称号之后的嫉妒与不满之上的；
对张一曼拒绝了自己而与铜匠翻云覆雨怒不可遏。从此对一曼恶语相向，屡屡把一曼推向绝境；
杀驴之后几个人之中只有他吃了驴肉，与特派员推杯换盏，完全是一条任人使唤的走狗；
不管是片头的建立奖学金，还是片末的建新教室，都不愿用自己的工资与奖金出一份力，在婚礼大乱时先拿钱跑路。
周铁男
同样也是一个带着面具的人，正是佳佳闯入教室后发生的一切，才使他慢慢地揭下了面具；
在转变之前，他充满了正义感，充满血性，保护弱者，捍卫自己的尊严。转变之后，却是向黑恶势力磕头，直至头破血流。天壤之别的转变，往往就是一瞬间；
在转变之前，挺身而出，为一曼打抱不平。转变之后，在有人要强奸一曼的时，他放下了举在手里的武器，畏缩在角落；
在转变之前，他是唯一个敢道出真相的人，他无法忍受大家一个接一个的谎言，对包括自己在内的所有人破口大骂。转变之后，却自欺欺人，说自己只有卧薪尝胆，变强大了之后才能打败他们；
转变之前对特派员的行为嗤之以鼻，甚至有几次直接冲撞特派员，转变之后成了特派员的走狗，督促大家完成特派员的计划，甚至可以去劝说自己喜欢的姑娘扮演别人的未婚妻。
铜匠
在别人给他戴上虚假的身份面具之后，在欲望脱离压制后无知而又自私的人。这世上最恶毒的事也许就是本性朴实善良之人变得阴鸷恐怖之后的背后一刀；
他从不接受知识到向往知识，连相都不敢照的人却有模有样的泡起茶来；
从躲避性欲到向往爱情，看着一曼离去的背影唱起歌。但当他发现自己只不过是被人玩弄的牲口，开始变得暴戾。被母夜叉一般的妻子压抑的欲望，在释放之后令人不寒而栗；
他自私又胆小，有权在手时残暴，被人揭穿时猥琐。最后差点用“吕得水”的身份在众目睽睽之下得到一切，还是还是逃不过妻子的魔爪。

张一曼
一个从大城市来到小乡村，美其名曰这里没人管着我，喜欢自由，但其实大概率是在城里因放荡自由而出名的；
一个对待生活充满乐观的人，在剥蒜的时候唱起歌，在点上灯放着音乐的夜晚翩翩起舞的人；
一个机敏伶俐，善于观察的人，看出特派员只是一个不会英语、用品茶来附庸风雅的文盲，带领大家度过危机的人；
一个一方面享受自由的美好和不羁，一方面又真的在乎别人的评价的高自尊的人。外面的人骂她骚浪贱，但那些是外人，她不在乎。可是，家里人在她毫不设防的时候，突然对她进行荡妇羞辱，于是她病发了，她彻底崩溃了。除了孙佳，所有人都背叛了她。

场景片段

开始的开始
睡服铁匠的主意就是出自一曼本人，尽管此时，她没意识到她将吃下那颗由自己信仰所结出来的苦果，而从铜匠媳妇找来开始，她就像陷进沼泽里，一点一点的往下沉，直到泥浆没过头顶。尽管此时，她也没意识周围的大多数人，都在推波助澜地将其推进黑暗；
驴得水老婆出场后
虽然一直嚷嚷着让她站出来承认的是裴魁山，但她也看的出校长默许了这层意思，直到裴魁山说出那句“当初要不是校长帮你，你TM现在在哪儿呢！”她决定站出来，虽然看得出她有点失望，但应该算是报校长收留之恩吧；
教室内
她再次震惊于裴魁山对自己的侮辱，在她眼里，就算不再跟裴魁山发生关系，他们仍然是好朋友，好同事，甚至是一家人。她没想到，自己竟然是以这种形象烙印在自己的同事，自己的朋友心中；
还是在教室内
面对铜匠极尽手段地羞辱，她同样是心碎的，但她伤害人家在先，所以她也始终选择默默忍受。但是，校长竟忍心剪下她的头发，被剪发之后的一曼从梦境中醒来，脸上还挂着微笑。但是这种满足马上就被恐惧和羞辱取代了。
窑屋内
在特派员的保镖要欲行不轨之时，铁男却见死不救，缩在一旁没敢吱声。
在一切都即将尘埃落定后
没有一个人提供哪怕一句嘘寒问暖的关心。人往往不是突然崩溃的，而是一件件事把她击垮。从教室事件发生的一刻起，现实的罪恶嘴脸最终显露无疑，因此，为了维持内心最后的纯净，只得“疯了”。只有疯了，她才不会被关注，不会被在乎，也没有理由再牵扯其中；万念俱灰之下，她只好走了绝路。片尾的一声枪响，枪口对着的，不仅仅是一曼本人，更是观后无言的所有人。

后话

整剧完结，一曼用教堂拾来的枪告别世间，佳佳坐着驴车离开黄土高坡。余下的男人们，他们离开或者留下，愧疚或者麻木，已无需深究。他们尚且真实粗鄙地活着，为梦想为生存为利益；也已在尘封着热血的昨日死去，无可怀缅不值一提。在我看来，《驴得水》已经从不同角度阐释了人性的阴暗。

在这里，人性是什么？

人性，是孙校长的偏执和不择手段，为了完成自己的宏图远景，不惜把他人推向无底深渊；

人性，是铜匠在欲望和权力被不断放大之后，由本性朴实善良变得阴鸷恐怖；

人性是物极必反，是裴魁山的因爱生恨——把爱说得再冠冕堂皇，也不过是“占有”的借口，当占有不遂，爱就成了恨，化作毁灭对方的匕首；

人性，是周铁男面对枪口时的恐惧与妥协；

人性，是孙佳越来越孱弱无力的坚持；

这就是人性，我们永远不可能站在上帝的视角，只是嘘唏感叹，回归现实社会，在经历人性的至昏至暗之后，我们就要明白，张一曼想要告诉我们的真谛，她告诉我们，对一个人而言，当某一样事物成为其唯一的认定，变作独一无二的执着甚至是贪著，其实是一种不幸。

这种事物就像是一个定时炸弹，随时会把你炸得粉身碎骨——就看什么时候引线会在不经意间被点燃而已。当然不只是张一曼的“性与美好”，还有现实生活中的所有人事物：如事业、财富、爱情；如你明知不可能还贪恋纠缠的谁谁谁。

花无百日红。如果你只贪恋它的盛放，却不肯接受它的凋零，这已经是一场悲剧。正如张一曼，不过是一头长发，即使剪了，还会长回来是不是？而且，短发也可以很美。而她，却把一头长发变成自己无法割舍的美，又把美当作了生命的全部。

不要把任何外物，作为你与世界的唯一的链接，否则，你就会成为两脚悬空，挂在悬崖上的可怜的傀儡。而这唯一的链接会成为那命悬的一线，它将随着时光的流转而变得越来越纤细，越来越无力，待有朝一日崩断时，你便粉身碎骨。

这样，你就永远见不到尘埃落定的那一天了……

如果活着真的需要理由，请给自己N+1个。那个1，会在关键时刻，阻止你步张一曼的后尘。

GitHub 个人主页自定义与美化教程

Mon, 30 Mar 2026 00:00:00 GMT

Guthub 个人主页（官方称呼是 profile）可以展示很多有用的信息，例如添加一个首页被访问次数的计数器，一个被 Star 与 Commit 的概览信息，以及各种技能标签，设备标签等，还可以利用 wakatime 显示你最近编码各类语言的使用时长，以及你最近 Steam 游戏游玩排行榜。

默认主页

默认情况下，GitHub 个人主页会显示其仓库信息、提交信息，例如 Linux 之父 Linus 的 GitHub 主页长这样：

但是，这个主页是可以定制的。GitHub 支持这个功能，并且有相关的文档说明：Setting up and managing your GitHub profile - GitHub Docs。

例如有的长这样：Luo Lei

这就远比默认主页好看不少，令人印象深刻。

原理

自定义主页很简单。我们首先在 GitHub 上新建一个仓库，仓库名和自己 Github 用户名相同，然后添加一个 README.md 自述文件，在该文件里添加信息即可。

例如，我创建的仓库：github.com/Peter-JXL/Peter-JXL

可以看到右上角有个提示：

Peter-JXL/Peter-JXL is a special repository.

Its README.md will appear on your public profile.

翻译：

这是一个特殊的仓库。

它的 README.md 会出现在你的首页中。

侧边栏

在讲解如何定制之前，我们先关注下左侧也有个人信息展示：

这个可以直接在个人首页上，点击左侧的 Edit profile 进行编辑：

可以修改名字、签名（Bio）、公司、地点、邮箱、网站.......... 按需修改即可。

接下来讲讲如何定制右侧。

新建仓库

新建一个同名仓库，并添加一个自述文件（README.md），确认：

GitHub 默认为此文件添加了一行字：

此时我们的首页也会跟着变：

如何定制

接下来，你就可以通过修改 README.md 来定制主页了。由于是 Markdown 文件，扩展性很高，并且全面支持 emoji。

此外，人的创造力有限，如何短时间内拥有一个酷炫的个人主页呢？

答案是 ctrl+c，ctrl+v。看到好看的模板，可以直接 fork，修改下相关变量即可。

此外 GitHub 上也有不少人收集优秀案例：

接下来讲讲一些常见的信息展示。

GitHub 统计卡片

官网：github.com/anuraghazra/github-readme-stats

效果：

使用方法很简单，将如下代码复制到你的 markdown 文件中，更改 ?username= 的值为你的 GitHub 用户名：

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)

这个是默认样式，很简陋，可以配置显示图标、主题样式等，具体请看官网文档。

GitHub 使用语言统计

官网：github.com/anuraghazra/github-readme-stats

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)

同理，这个也可以配置主题和布局（参考文档）。

Metrics 统计信息

会展示 GitHub 上的一些统计信息，效果：

我们可以去官网演示下：输入你的 GitHub 用户名，然后点击按钮：

PS：这个项目也是开源在 GitHub 上的：github.com/lowlighter/metrics，并且还有其他的功能（后续会讲到）。

就能看到效果如下：

这个配置起来稍微复杂一点点。根据官网文档，使用该功能的方式之一是使用 GitHub Action。

首先我们得创建一个 GitHub personal token，位置：右上角个人头像 → settings → Developer settings → Personal access tokens：

接下来就是勾选 scopes（可以理解为权限，这个就根据不同插件的要求来勾选了，具体得看文档）：

然后会生成 token，只展示一次，注意好好保管：

然后去到个人项目里的 settings 页面，将刚刚生成的 token 作为一个密钥（先创建一个环境，名字为 production；然后再创建一个名字为 METRICS_TOKEN 的 secret，值为刚刚生成的 token）：

第三步，生成一个 Action，其实 metrics 已经帮我们生成了一个 Action：

内容如下（建议自行核对下，例如我这边在第 9 行加了个 environment 变量）：

name: Metrics
on:
  # Schedule updates (each hour)
  schedule: [{cron: "0 * * * *"}]
  # Lines below let you run workflow manually and on each commit
  workflow_dispatch:
  push: {branches: ["master", "main"]}
jobs:
  github-metrics:
    runs-on: ubuntu-latest
    environment: 
      name: production
    permissions:
      contents: write
    steps:
      - uses: lowlighter/metrics@latest
        with:
          # Your GitHub token
          # The following scopes are required:
          #  - public_access (default scope)
          # The following additional scopes may be required:
          #  - read:org      (for organization related metrics)
          #  - read:user     (for user related data)
          #  - read:packages (for some packages related data)
          #  - repo          (optional, if you want to include private repositories)
          token: ${{ secrets.METRICS_TOKEN }}

          # Options
          user: Peter-JXL
          template: classic
          base: header, activity, community, repositories, metadata
          config_timezone: Asia/Shanghai

等我们提交后，就会自动生成一个 svg 文件：

然后我们在自述文件里添加这个图片，例如 Markdown 格式如下（其实也可以用 HTML 格式，更灵活）：

![Metrics](/github-metrics.svg)

此时的首页效果：

GitHub 资料奖杯

官网：github.com/ryo-ma/github-profile-trophy

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)

同理，这个也可以配置主题。

GitHub 徽章

为你的开源项目生成高质量小徽章图标，直接复制链接使用。

官网：Shields.io

效果：

示例代码：

<img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" /> 
<img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" /> 
<img src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" />

GitHub 访客徽章

这个徽章会实时改变，记录此页面被访问的次数。

官网：visitor-badge.glitch.me

效果：

使用方法：复制如下代码到 Markdown 并替换 page_id 的值为用户名

![visitors](https://visitor-badge.glitch.me/badge?page_id=page.id&left_color=green&right_color=red)

可以配置颜色，参数为：left_color，right_color

GitHub 活动统计图

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动。

官网：github.com/Ashutosh00710/github-readme-activity-graph

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710)

可以配置主题。

修仙系列统计卡片

一个以凡人修仙传境界为基础的 Github 统计卡片。等级分为：['道祖', '大罗', '太乙', '金仙', '真仙', '大乘', '合体', '炼虚', '化神', '元婴', '金丹', '筑基', '练气']，对应区间：[1, 5, 10, 15, 20, 30,40,50,60, 70, 80, 90, 100]。

官网：IceEnd/github-immortality

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![IceEnd's GitHub stats](https://github-immortality.vercel.app/api?username=iceend)

GitHub 连续打卡

在 README 中展示您连续提交代码的次数。

官网：github.com/DenverCoder1/github-readme-streak-stats

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![GitHub Streak](https://streak-stats.demolab.com/?user=DenverCoder1)

同理，支持主题、样式等配置。

社交统计

在 README 中展示你在一些流行的网站的数据，例如知乎，GitHub，B 站，LeetCode，掘金，CSDN，牛客。

官网：github.com/songquanpeng/stats-cards

效果：

使用方法：复制代码到 Markdown 并替换 username 的值为那个网站的用户名

![](https://stats.justsong.cn/api/leetcode?username=quanpeng&cn=true)

star 趋势

如果想要统计和展示自己某个项目的 star 趋势，可以使用下面这两个工具。

Star History

官网：https://star-history.t9t.io

输入仓库名，就能自动生成 star 增长曲线。还能输入多个仓库查看项目对比：

GitHub Star History

官网：https://codetabs.com/github-stars/github-star-history.html

用法和上一个工具完全一样，就是样式有点不同：

GitHub Corners：分享角标

如果你的 GitHub 项目有一个对应的网站，并且想要用户通过网站跳转到 GitHub 项目页从而得到 star，不防试试这个。

官网：https://tholman.com/github-corners

它可以帮你生成给网站添加 GitHub 角标的代码，只需要选择一个风格，复制代码到自己的项目主页文件中，将超链接替换为自己的仓库地址即可。

打字特效

让内容通过打字的特效来展示，炫酷。

官网：github.com/DenverCoder1/readme-typing-svg

效果：

使用方法：复制代码到 Markdown 并替换 ?lines= 的值为你想要的内容，字与字之间用分号隔开

![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)

更多配置参考官网文档。还可以去 demo 站里自行调试：

贪吃蛇

默认的提交信息是这样子的：

而我们可以将其变成一个动画：一只贪吃蛇挨个吃掉图里的绿点：

使用起来也不难，先新建一个 workflow 文件（名字随意），不需要任何改动，然后提交：

name: generate animation

on:
  # run automatically every 2 hours
  schedule:
    - cron: "0 */2 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - master
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
  
    steps:
      # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
      - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
  
  
      # push the content of <build_dir> to a branch
      # the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
      - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

将下列代码复制到 Markdown 内，将用户名部分替换成你自己的，并提交。

这段代码的目的是：加载贪吃蛇动画，且贪吃蛇的暗亮风格与你的 Github 的暗亮风格进行自动适配。

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Peter-JXL/Peter-JXL/output/github-contribution-grid-snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Peter-JXL/Peter-JXL/output/github-contribution-grid-snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/Peter-JXL/Peter-JXL/output/github-contribution-grid-snake.svg">
</picture>

之前我们设置的是每隔 2 小时更新一次，我们可以先手动跑一次。点击 generate animation，点击 Run workflow：

稍等片刻，显示运行成功，再次回到仓库主页就会看到贪吃蛇动画已被加载：

博客文章同步

如果你有博客网站，且网站带有 RSS 功能，就可以配置此功能，它能在你的 GitHub 首页上显示最近更新的博客

原理：利用 blog-post-workflow 在自述文件上展示最近几篇博客文章。

效果：

使用起来也很简单。首先创建一个 workflow（例如 blog-post-workflow.yml ），需要改动最后一行的 feed_list 的内容为你自己网站的 RSS 链接。

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 */2 * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
  contents: write # To write the generated contents to the readme

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Pull in blog's posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://www.peterjxl.com/rss.xml"

更多构建参数请参考 🔗 github.com/gautamkrishnar/blog-post-workflow，包括显示文章数量、显示主题等等。

然后在自述文件输入这些内容，程序会自动抓取文章标题、链接等并替换这两个注释：

📕 &nbsp;**Latest Blog Posts**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

同理，此时是看不到文章列表的，我们得先手工运行一次 action：

你的 GitHub 故事

GitHub 已经内置了年度提交数统计，方便我们回顾：

但我们可以更炫酷地用 3D 模型来展示：

官网：https://skyline.github.com

用法：输入自己的 GitHub 用户名，和想要查看的年份，i就可以自动生成炫酷的 3D 模型。

PS：

这个功能是 GitHub 官方在 2021 年推出的，但是后续又下线了，暂时不知道什么时候回归。
该网站可以生成 STL 文件，这是用于 3D 立体光刻的文件格式。
GitHub 本身也是支持查看 3D 文件的，也就是可以托管和渲染 .stl 的 3D 文件
如果你有 3D 打印机的话，可以通过该文件自己打印出来。或者用线上打印服务 shapeways.com：

也有不少开发者拿到了打印后的纪念品：

GitHub 3D 统计

使用 3D 图来展示信息。

官网：github.com/yoshi389111/github-profile-3d-contrib

效果：

使用方法是用 GitHub Action。首先创建文件 .github/workflows/profile-3d.yml，内容如下：

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

然后手动执行一次 action：Actions -> GitHub-Profile-3D-Contrib -> Run workflow

然后会生成这些文件（带路径，各种主题的都有）：

profile-3d-contrib/profile-green-animate.svg
profile-3d-contrib/profile-green.svg
profile-3d-contrib/profile-season-animate.svg
profile-3d-contrib/profile-season.svg
profile-3d-contrib/profile-south-season-animate.svg
profile-3d-contrib/profile-south-season.svg
profile-3d-contrib/profile-night-view.svg
profile-3d-contrib/profile-night-green.svg
profile-3d-contrib/profile-night-rainbow.svg
profile-3d-contrib/profile-gitblock.svg

最后在 Markdown 里添加即可。

PS，如果遇到了这样的报错：

remote: Permission to mthsBelloni/mthsBelloni.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/Peter-JXL/Peter-JXL/': The requested URL returned error: 403
Error: Process completed with exit code 128.

大概率是因为没有配置 actions 的写权限，导致无法写入 svg 文件。解决办法：加上权限

感谢参与者

每位开源项目的参与者都值得记录和感谢，传统方式是手工编辑，项目负责人一个一个地把参与者的名字记录到 README.md，非常低效。

可以使用一种更高效、自动化的方式来添加项目贡献者：

项目名：All Contributors

官网：https://allcontributors.org

可以用命令行或者机器人的方式自动将项目的贡献者补充到项目文档中，并且生成排版精美的表格，效果如下：

Profile 编辑器

这个项目是一个是一个可视化 profile 生成工具，使用者无需学习 Markdown 语法，仅需要在对应窗口中输入或者选择相应的内容，工具会自动生成 Markdown 脚本。脚本编辑完成以后，直接复制粘贴到自己的 Github 即可。

官网：profilinator.rishav.dev

效果：

关于 Gitee

很遗憾，Gitee，号称国内版的 GitHub，并没有提供类似的功能。但我们可以完善下个人信息部分：

方法：在个人主页里打开个人设置

打开个人资料，可以修改公司，职务，微信，QQ，领英，微博，博客，所在地，自我介绍等信息，多多少少能优化下个人主页：

例如鱼皮的长这样：

最后

本文仅仅列出一些常见的功能，感兴趣的同学可以自行搜索更多功能，甚至自定义。

这是我的 GitHub 主页，大家可以抄抄作业（如果能点个 star 就更好了😏）：https://github.com/Peter-JXL

特别注意：由于 GFW 的原因，可能需要魔法上网后才能看到一些内容。

最后，祝你玩得开心！

参考

Github 首页美化教程（一）：打造个性化的 GitHub 首页 - 知乎

美化自己的 GitHub 个人主页 - 0x5E

Github 自定义个人首页_github 主页搭建-CSDN 博客

提高效率的四大好方法：启动、发呆、散步、节律

Mon, 30 Mar 2026 00:00:00 GMT

前言

它们都非常简单，毫不费力，只需要你对生活做出一些小小的调整，就能立竿见影地提高你工作、学习和思考的效率。

希望今天的文章，能够为你注入动力。

一、用「有效的事情」来启动任务

你一定有过这样的经历：想要开始一项任务，但坐到电脑前，却总是随手打开了其他网页，或者刷起了手机、看起社交媒体。一边刷，一边在心里告诉自己：先随便溜达一下，一会再做吧。

而这「一会」是多久呢？也许就在你毫不留意的时候，就过去了20分钟、30分钟……

其实，如果观察一下自己，你也许会发现：很多时候，真正影响我们工作效率的，其实就是「如何启动」。一旦我们启动了，进入工作状态了，往往就能持续地做下去。

这背后，其实就是大脑追求稳定的原理在作祟：我们总是不愿意改变现在的状态。当我们休息时，我们经常不愿意启动。而当我们工作时，我们往往又忘了停下来休息。

所以，如果我们能尽可能减少启动的心理障碍和阻力，就能为每天省下大量被不知不觉消耗掉的时间。

怎么减少阻力呢？我给自己定的规则是：一旦我坐下来了，打开了电脑，我就一定要先开始做一点「有效的事情」。做完之后，再去干别的，比如刷网页、看消息、上网闲逛……

什么叫「有效的事情」呢？它可以是工作的一部分，可以是我手头上正在做的项目，也可以是一些细小而琐碎、但是能一劳永逸提高效率的事情——比如：整理自己近几天的日志、把文件资料分门别类整理好……诸如此类。

总而言之，就是能够对成果有所助益的事情。

不妨找一个时间，把这些事情罗列出来，形成一个清单，这就是你的「启动清单」。

当你准备开始工作时，不要下意识去漫无目的地闲逛，而是先打开这张清单，从里面随便找一件事情（按照心情来就好），开始去做。

做完之后，把它划掉，然后，想休息一下，想上网闲逛，或是继续工作下去，都可以。

你可能会发现，许多时候，经过这么一件事情的启动，你很快就能进入工作状态，可以开始着手去做其他重要的任务了。

这就是它的作用：让你快速热身，保持手感，同时，又能为你提供立等可用的成就感和反馈，让你能够有动力立刻开始行动。

二、用「发呆时间」来巩固学习

许多人对「效率」的理解可能就是：我要在尽量短的时间内尽可能做更多的事情。因此，许多人每天都恨不得把每一秒掰成两半来用，仿佛把时间利用得越多，就占了越大的便宜。

但实际上，我想告诉你的是：有时候，「什么都不做」，比起你不断地去做事情，效率反而要更高。

什么意思呢？不妨考虑下面这个问题：

1）在2小时的时间里，你可以看书，上网，聊天，自由地做任何你想做的事情，学习任何东西。

2）在2小时的时间里，前1个小时你可以看书、上网、学习，后1个小时，切断你所有的信息输入，你只能安静地坐着发呆，什么都做不了。

在上面两种情境中，哪一种情境下，你的学习效果会更好？

可能很多人会选择第一种。但实际上，专门研究记忆的心理学家 Nelson Cowan 发现：后者的效果比前者要好得多。

2004 年和 2012 年，Cowan 做了两个实验，结果发现：学习之后有一段时间进行休息、什么也不做的参与者，对学到的知识记得更牢，甚至在经过7天之后，遗忘率也更低。

为什么呢？原因在于：当我们学习之后安静待着什么也不做时，大脑后台其实在忙碌地做一件事：对我们学到的知识进行「回放」。

这种回放是无意识的、快速的，因此你觉察不到它。但是，通过对大脑的扫描，能够发现参与者的海马体有节奏地产生高频脑波，这就是大脑在努力巩固刚刚学到的知识。

研究人员发现：大脑每天都会清理掉一部分当天获取的新信息。而被回放得越多的信息，就越不容易被清理。反之，回放得越少的信息，就越容易被清理掉。

所以，如果你想最大化学习成果，那么请不要把自己的时间排得太紧，而是容许自己发呆和放空。这能够极大提升学习和思考的效率。

三、用「散步思考」来激发大脑的创造力

如果你是从事创意工作的，比如设计、文案、策划、新媒体……那么你一定会经历过这样的需求：怎样才能提升自己的创造力？

又或者，你面临工作上的瓶颈，需要想到别出心裁的方式，那么，你也一定会有这样的需求。

其实，有一个非常简单且非常有效的办法：从办公桌前站起来，走出去，去散步。

2014 年一个研究发现：散步可以在短时间内快速提升创造力，并且这种效应在结束散步之后，还能维持15分钟以上。

原因在于：散步是一种高效的放松和休憩。它能够让我们从注意力的牢笼中挣脱出来，让我们疲惫不堪的注意力得到放松和喘息，从而重新恢复精力。

当你的思维彻底放松下来时，你会暂时关闭外界的信息输入，而任由思绪在后台随机地、踊跃地激活各种不同的节点。这时，就有几率产生「远距联系」，把原本无关的节点联系起来。反映在外，就是产生创意或灵感。

并且，当我们步行时，脚步对身体的反作用力会在血管中形成细微的湍流。它可以让更多的血液和氧气进入大脑，从而提高大脑的工作能力。

再比如，散步这种高度有节奏感、韵律感的活动，能够让大脑处于一种平衡的、舒适的状态里，对脑波活动进行调谐，让各个脑区之间的协作更紧密高效。

同时：散步可以促进BNDF（脑源形神经营养因子）的释放，提高突触的可塑性，从而让我们对知识记得更牢、思维更清晰。

所以，如果你感到思维和工作遇到了瓶颈，那么不妨试一试，走出门，离开办公桌，到外面走一走。

很有可能：走着走着，问题可能就突然迎刃而解了。又或者，脑海里会涌现出一些奇思妙想的点子，想到一些全新的思路和可能性……

四、用「场景线索」来帮助自己改变行为

我们的选择和行动是受什么影响的呢？答案可能让你意外：绝大多数时候，其实都是受环境影响的。

举个例子：两家咖啡店，前者大家都在玩游戏、刷视频，后者大家都在认真工作、看书、学习，那么，你在前者里面一定更容易开小差，而在后者里面一定会更专注。

我们的大脑无时无刻不在关注周围环境中的信息，这些信息加总起来，会形成一种非常强的势能，推动我们去做出选择、决策和行动。

所以，很多时候我们以为自己的选择是自主做出的，其实都是被环境推动和影响的。

应用到这里，一个非常有用的方法就是：想办法设计一个有助于行动的环境。

你想更多地去做什么事情，就设计更多的环境线索来强调它、突出它、方便它；你想减少什么事情，就把它藏起来，让自己看不到它，需要花精力去找它。

工作的时候，你把手机放在抽屉里，就能有效减少玩手机的行为。哪怕只是「打开抽屉，拿出手机」这么一个简单的行为，也足以减少你许多次下意识想玩手机的冲动。

你想经常浏览某个网站，就把它放在浏览器的首页，一打开浏览器就能看到。或者设置成固定标签页，置顶在标签栏里，不需要从书签收藏里面去找。

你想记住一个事情，最好的方法是什么？不是在脑海中不断回忆它，这很难做到，而是把它写到便签上，贴在一转眼就能看见的地方，让它更容易进入你的注意力范围。

你想多在书桌上看看书、干点活，就平时多清洁书桌，不要在上面摆东西，让它随时随地处于一个「随时都能坐下来开工」的状态。

你想养成运动的习惯，那就把运动的装备准备好，放在触手可及的地方，让自己毫不费力就能开始运动。

你想让自己有空时多读点书，那就把书放在沙发旁边，而不是放在书架上。这样，当你处理好一天的事情，坐在沙发上时，就更容易随手拿起书、翻上几页……

通过有意识的设计，让你处在一个良好的环境之中，让周围的一切成为你的助力，引导你去做出行动。这就是改变行为的秘诀。

五、用「精力节律」来安排自己一天的工作

什么叫节律？简单来说，就是你一天里面，精力和状态的波动情况。有些人白天精力十足，有些人下午状态最好，有些人晚上大脑特别活跃……这些，都是专属于自己的节律。

在波峰期去做最重要、最需要聚精会神的工作，会事半功倍。反之，如果在波谷期强迫自己全神贯注去工作，那就很容易疲惫、分心、走神。

所以，一个非常重要的事情是：找到自己的节律。

不妨试着每天做一做日记，写一下今天在什么时间段处理了什么事情，以及自己处理事情时感受到的状态。如果长期来看，某个时间段你的思维特别活跃，精力似乎很旺盛，总是能把事情很快做完，那么它很可能就是你的「波峰时间」。

像有些人，最佳的工作时间可能是下午到傍晚，那么更适合他们的工作习惯就是：早上起来之后先处理一些简单、琐碎的工作，减轻大脑负担；等到了一天里面状态最好的时间段，再集中精力去做最重要的任务。

而有些人最佳的时间可能在晚上，那么就需要尽量留出晚上的时间，减少不必要的娱乐和消遣，用来学习、思考和处理一些自己感兴趣的项目。

一旦你找到自己的「波峰时间」，那么对应的，你也可以找到自己的「波谷时间」和「正常时间」。那么不妨按照这个节奏，来安排自己的任务：

最琐碎的、最不重要的、不需要耗脑子的（一般是整理和操作性事务），以及可以快速得到反馈的，安排在「波谷时间」；
日常的事务，沟通，协作，信息回复，安排在「正常时间」；
最重要的工作，包括跟自己业绩目标紧密挂钩，需要做出亮点和成果的，又或者需要投入精力去学习的，安排在「波峰时间」。

这样，才能做到真正的事半功倍。

转载说明

原文出处：[微信公众号/L先生生说] 原文链接：[能帮你提高50%学习和工作效率的好方法]

快速部署指南：搭建一个 Fuwari 博客

Mon, 30 Mar 2026 00:00:00 GMT

一、准备工作

在开始之前，请确保你的开发环境已安装以下工具：

Node.js（建议使用最新 LTS 版本，如 v18 或 v20）
包管理工具（推荐使用 pnpm，本文将基于它进行操作）
代码编辑器（推荐使用 VS Code）
Git（可选）

你可以通过以下命令检查是否已安装 Node.js 和 npm：

node -v
npm -v

如果尚未安装，请前往 Node.js 官网下载并安装。

二、创建你的 Fuwari 博客

打开终端（命令行工具），选择一个工作目录，执行以下命令来全局安装 pnpm 和 Netlify CLI：

npm install -g pnpm
npm install -g netlify-cli

💡 提示：-g 表示全局安装，确保命令可在任意目录下使用。

接下来，使用 Astro 的官方创建工具初始化一个 Fuwari 博客项目：

pnpm create fuwari@latest

系统会提示你输入项目名称，然后自动拉取模板并安装依赖。

进入项目目录：

cd my-fuwari-blog

启动本地开发服务器：

pnpm dev

浏览器会自动打开 http://localhost:4321，你将看到一个简洁优雅的博客首页，说明项目已成功运行。

三、自定义你的博客

Fuwari 的配置文件位于根目录下的 src/config.ts，你可以在这里修改：

博客标题（title）
博客副标题（subtitle）
语言(lang)
博客横幅（banner）
站点 URL 等

例如：

export const siteConfig: SiteConfig = {
	title: "晓正杨博客",
	subtitle: "",
	lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
	themeColor: {
		hue: 250, // 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: false,
		src: "https://cn.cravatar.com/avatar/422d385af346ddd0b23f81d704ecf1c6", // 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
		},
	},
	toc: {
		enable: true, // Display the table of contents on the right side of the post
		depth: 2, // Maximum heading depth to show in the table, from 1 to 3
	},
	favicon: [
		// Leave this array empty to use the default favicon
		// {
		//   src: '/favicon/icon.png',    // 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: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
		// }
	],
};

文章内容位于 src/content/posts/ 目录中，使用 Markdown 编写。你可以复制示例文章并新建自己的 .md 文件。

✅ 命名规范：建议使用小写字母、连字符命名，如 how-to-build-a-blog.md。

四、构建静态文件

当你完成内容编辑后，使用以下命令生成静态页面：

pnpm build

构建完成后，会在项目根目录生成 dist/ 文件夹，其中包含所有可供部署的 HTML、CSS 和 JavaScript 文件。

五、将本地项目上传至Github

如果你是通过 HTTPS 克隆的可以通过 git set-url origin git@github.com:[你的仓库名称] 改成 SSH

然后，正常的提交推送就好啦~（依次运行下面的代码）

git add .
git commit -m "[对提交的描述]"
git push

这样你的文章就推送到远程仓库啦~

六、部署到CloudFlare

在 Cloudflare - Workers - Workers 和 Pages - 创建，创建一个 Page
关联你之前 Fork 来的 Github 仓库。
设置 构建指令 为 pnpm build，构建输出目录 为 `dist
绑定自定义域名(可选)，这样访问你绑定的域名就可以访问你的博客啦！

你只需要重复之前的写文章和提交操作，你的文章就会被自动部署到 Cloudflare！

七、后续文章撰写与维护

如果嫌麻烦的话还可以试试我写的一个简单的脚本，只要在根目录创建一个 bat 后缀的文件写入以下内容，以后每次要写文章只需要运行此脚本跟着提示做就可以实现半自动创建文章并提交(～￣▽￣)～（仅Windows）

@echo off
git pull

:: Create
set /p mark="Press article keywords("-^" to link): "
echo Run it by yourself: pnpm new-post %mark%
echo Then press enter to open the blog with default method.

pause > nul

explorer ".\src\content\posts\%mark%.md"

echo Press enter to submit the blog.
pause > nul

:: Commit
git add .
git commit -m "Update %mark%"
git push

echo Press enter to end.
pause > nul

八、文章的 Front-matter（前置参数）

---
title: 我的第一篇博客文章
published: 2023-09-09
description: 这是我的新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [ Foo, Bar ]
category: 前端
draft: false
---

属性	描述
title	文章的标题。
published	文章的发布日期。
description	文章的简短描述，显示在首页。
image	文章封面图路径。<br>1. 以 `http://` 或 `https://` 开头：使用网络图片。<br>2. 以 `/` 开头：使用 `public` 目录下的图片。<br>3. 无前缀：相对于 Markdown 文件的相对路径。
tags	文章的标签。
category	文章的分类。
draft	如果设为 `true`，则该文章为草稿，不会被显示。

九、文章文件存放位置

您的文章文件应放置在 src/content/posts/ 目录下。您还可以创建子目录来更好地组织文章和资源文件。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

十、结语

通过本文，你已经成功搭建并部署了一个基于 Fuwari + Astro 的极简静态博客。整个过程无需服务器、不涉及后端，安全、快速、免费。

Fuwari 的设计理念是“少即是多”，让写作者专注于内容本身。现在，是时候开始写下你的第一篇文章了！

常用 CMD 命令提示符大全

Mon, 30 Mar 2026 00:00:00 GMT

CMD 命令提示符是 Windows 操作系统中一个重要的工具，通过 CMD 命令可以执行各种系统管理和配置操作。本文将介绍常用的 CMD 命令，帮助读者更好地了解和使用 CMD 命令提示符。

常用系统管理命令表

序号	命令名称	功能描述
1	`calc`	启动计算器
2	`appwiz.cpl`	程序和功能（卸载或修改程序）
3	`certmgr.msc`	证书管理实用程序
4	`charmap`	启动字符映射表
5	`chkdsk.exe`	Chkdsk 磁盘检查（需管理员权限）
6	`cleanmgr`	打开磁盘清理工具
7	`cliconfg`	SQL SERVER 客户端网络实用工具
8	`cmstp`	连接管理器配置文件安装程序
9	`cmd.exe`	打开新的 CMD 命令提示符窗口
10	`colorcpl`	颜色管理（配置显示器和打印机色彩）
11	`compmgmt.msc`	计算机管理
12	`credwiz`	备份或还原储存的用户名和密码
13	`comexp.msc`	打开系统组件服务
14	`control`	打开控制面板
15	`dcomcnfg`	打开系统组件服务
16	`Dccw`	显示颜色校准
17	`devmgmt.msc`	设备管理器
18	`desk.cpl`	屏幕分辨率设置
19	`dfrgui`	优化驱动器（Win7 为 `dfrg.msc` 磁盘碎片整理）
20	`dialer`	电话拨号程序
21	`diskmgmt.msc`	磁盘管理
22	`dvdplay`	DVD 播放器
23	`dxdiag`	检查 DirectX 信息
24	`eudcedit`	造字程序

电源管理快捷命令

针对自动关机与锁定操作，可以使用以下快速指令：

自动关机：Shutdown -s -t 30 （表示 30 秒后自动关机）
取消关机：shutdown -a
自动重启：Shutdown -r -t 30 （表示 30 秒后自动重启）
锁定计算机：rundll32 user32.dll,LockWorkStation

Edge 浏览器中的键盘快捷方式全指南

Mon, 30 Mar 2026 00:00:00 GMT

https://support.microsoft.com/zh-cn/microsoft-edge/microsoft-edge-中的键盘快捷方式-50d3edab-30d9-c7e4-21ce-37fe2713cfad

应用对象 Edge for Windows Edge for Mac

键盘快捷方式是指按键或按键组合，可提供另一种方式来执行通常使用鼠标执行的操作。下面是适用于新版 Microsoft Edge 和 Microsoft Edge for Mac 的列表。

Microsoft Edge 中的键盘快捷方式#

按此键	执行此操作
按此键	执行此操作
Ctrl +Shift +B	显示或隐藏收藏夹栏
Alt+Shift +B	将焦点放在收藏夹栏中的第一项上
Ctrl +D	将当前选项卡另存为收藏夹
Ctrl +Shift +D	在新文件夹中将所有打开的标签页另存为收藏夹
Ctrl +Shift +E	在边栏中打开搜索
Alt +D	选择地址栏中的 URL 以进行编辑
Ctrl +E	在地址栏中打开搜索查询
Alt + E	打开“设置及更多 ”菜单
Ctrl + F	在页面上打开查找
Alt +F	打开“设置及更多 ”菜单
Ctrl +G	跳转到下一个结果以在页面上查找
Ctrl +Shift +G	跳转到上一个结果以在页面上查找
Ctrl +H	打开历史记录
Ctrl +Shift +I	打开开发人员工具
Alt +Shift +I	打开“发送反馈”对话框
Ctrl +J	打开“下载”文件夹
Ctrl +K	在地址栏中打开搜索查询
Ctrl +Shift +K	复制当前标签页
Ctrl +L	选择地址栏中的 URL 以进行编辑
Ctrl +Shift +L	粘贴并搜索或粘贴并访问（如果它是 URL）
Ctrl +M	将当前标签页设为静音（切换）
Ctrl +Shift +M	以其他用户身份登录或以来宾身份浏览
Ctrl +N	打开新窗口
Ctrl +Shift +N	打开新的 InPrivate 窗口
Ctrl +O	在 Microsoft Edge 中打开计算机中的文件
Ctrl +Shift +O	打开收藏夹
Ctrl +P	打印当前页
Ctrl +Shift +P	使用系统对话框打印
Ctrl + R	重新加载当前页
Ctrl + Shift + R	重新加载当前页，忽略缓存内容
Ctrl + S	保存当前页
Ctrl +T	打开新标签页并切换到该标签页
Ctrl +Shift +T	重新打开上一个关闭的标签页并切换到该标签页
Alt + Shift + T	将焦点放在应用栏工具栏中的第一项上
Ctrl + U	查看源
Ctrl +Shift +U	开始或停止“大声朗读”
Ctrl +Shift +V	不带格式粘贴
Ctrl +W	关闭当前标签页
Ctrl +Shift +W	关闭当前窗口
Ctrl +Shift +Y	打开集合
Ctrl +0 （零）	重置页面缩放级别
Ctrl +1,2, … 8	切换到特定标签页
Ctrl +9	切换到最后一个标签页
Ctrl +Enter	将 www. 和 .com 分别添加到在地址栏中键入的文本的开头和末尾
Ctrl + Tab	切换到下一个标签页
Ctrl + Shift+ Tab	切换到上一个标签页
Ctrl+ 加号(+)	放大
Ctrl + 减号 (-)	缩小
Ctrl + \（在 PDF 中）	在“根据页面调整”与“根据宽度调整”之间切换 PDF
Ctrl+ [ （在 PDF 中）	将 PDF 逆时针旋转 90 度*
Ctrl + ]（在 PDF 中）	将 PDF 顺时针旋转 90 度*
Ctrl + Shift + Delete	打开清除浏览数据选项
Alt	将焦点放在“设置及更多 ”按钮上
Alt + 向左键	返回
Alt + 向右键	前进
Alt + Home	在当前标签页中打开主页
Alt + F4	关闭当前窗口
F1	打开帮助
F3	查找当前标签页
F4	选择地址栏中的 URL
Ctrl + F4	关闭当前标签页
F5	重新加载当前标签页
Shift + F5	重新加载当前标签页，忽略缓存内容
F6	将焦点移动到下一个窗格
Shift +F6	将焦点移动到上一个窗格
Ctrl +F6	将焦点移动到 Web 内容窗格
F7	打开或关闭插入光标浏览
F9	进入或退出沉浸式阅读器
F10	将焦点放在“设置及更多 ”按钮上
F10+ Enter	打开“设置及更多 ”菜单
Shift + F10	打开上下文菜单
F11	进入全屏（切换）
F12	打开开发人员工具
Esc	停止加载页面；关闭对话框或弹出窗口
空格键	向下滚动网页，一次滚动一个屏幕
Shift + 空格键	向上滚动网页，一次滚动一个屏幕
PgDn	向下滚动网页，一次滚动一个屏幕
Ctrl + PgDn	切换到下一个标签页
PgUp	向上滚动网页，一次滚动一个屏幕
Ctrl + PgUp	切换到上一个标签页
Home 键	转到页面顶部，将键盘焦点移动到窗格的第一项
End	转到页面底部，将键盘焦点移动到窗格的最后一项
Tab	转到下一个制表位
Shift + Tab	转到上一个制表位