🍀Zhuangの小屋

SMS前传

Sat, 11 Apr 2026 00:00:00 GMT

本文已加密保护，请访问网站查看。

SMS大纲

Sun, 05 Apr 2026 00:00:00 GMT

本文已加密保护，请访问网站查看。

怎么在Cloudflare上使用优选

Sat, 07 Feb 2026 00:00:00 GMT

WARNING

Cloudflare在用户协议中不允许用户使用“优选IP”和使用Cloudflare网络来进行代理若要使用，请注意做好账号隔离以应对封号的准备

说白了就是自己小心偷偷的用

前言#

若要明白何为优选那么明白原理是必不可少的

为什么我们要优选？#

Cloudflare有一项技术叫做任拨（Anycast)，能够根据用户的地理位置来选择应该将用户的流量路由到Cloudflare的哪个数据中心，以此来降低延迟

但是

由于中国大陆这个地区的特殊性，国内并没有Cloudflare的CDN节点¹

而Cloudflare对于中国大陆的路由规则又很奇怪，会把流量路由到美国去或是一些网络很拥挤的地方，这也就导致了为什么很多人在Cloudflare上解析了域名并打开了小黄云之后常常在大陆无法打开网址或是体验很差

此时通过优选IP这个方法就可以绕过Cloudflare的路由规则，强制把我们的域名指向延迟最低、质量最好的Cloudflare CDN节点

何为优选IP/域名？#

现在我们知道了为什么要优选，但什么是优选IP/域名？

由于Cloudflare有一个巨大的IP地址池以用于任拨，而且他们把这些IP给公开了，那事情就好办了，直接不断的测试这些IP，从里面挑出那些质量最好的来就好了

已经有大佬为我们做好了这些工作，如知名的CM大佬，他的cf.090227.xyz上有很多优选域名可供使用

这些经过优选后的域名、IP就是优选域名/IP

TIP

通常使用优选域名来进行加速，因为这样就不必不停地测试哪些IP好哪些不好了这些优选域名其实就是指向了那些优选过了的IP

原理是什么？#

当你把你的域名优选过后，实际上是利用Cloudflare在有流量打到其CDN节点上时，若你访问的这个域名IP背后没有提供服务，Cloudflare就会在自己里面寻找是否有关于你访问的这个域名的主机名的相关配置，如果有，那么就把对应的服务返回给你，没有就报错

是不是发现这样就可以让我们主动连接到延迟更低的CDN节点了

怎么做？#

了解完原理之后，那要怎么做才能吃上优选域名/IP呢？对于不同类型的在Cloudflare上的服务，优选的方法是不一样的

Workes、Pages甚至Tunnel都可以优选

Workers优选#

这大概是最简单的了

Workers有个东西叫做路由，是和自定义域放在一起的，就是把经过这个指定URL的流量路由到你的Worker

那么我们设置一个域名，指向优选域名，关闭小黄云，这时流量就会：

客户端 ---> Cloudflare边缘节点 ---> 发现有路由这个规则 ---> Workers服务

1.打开Workers设置来设置路由#

1.在workers的设置中在域和路由点击添加

Screenshot1

2.选择路由点击路由

Screenshot2

3.设置路由

Screenshot3

这步比较关键，在区域中选择你的根域名，然后在路由中填入你最后要访问的主机名

如，你要访问worker.example.com，那么这里就填入：worker.example.com/*这里的/*绝对不能忘记，用来匹配改路径下的所有流量，其它默认

点击添加路由

4.设置DNS记录打开你刚刚在区域中选择的域名的DNS记录仪表盘

点击添加记录

填入你的记录

Screenshot4

在类型中选择CNAME，名称填入你刚刚在路由中设置的域名的前缀，如worker.example.com就是worker，然后在目标下填入优选域名，如cf.090227.xyz²

IMPORTANT

这里很关键要把图中圈起来的代理状态也就是小黄云关闭，这样才能起到优选

确保图中的①和你在路由中的设置一致（不带/*）如worker.example.com ②就是优选域名

最后保存，等待一会儿DNS传播即可

TIP

如果你想要使用优选IP而不是优选域名的话，类型应当选择A，然后目标填入优选IP³

一个名称可以同时有多个A类型（你可以添加多个IP地址），而一个名称有且仅能有一个CNAME类型，且其它类型均不可与CNAME同时存在

这样，你的Workers的优选就完成了

Footnotes#

但是Cloudflare的企业版套餐有于阿里等合作的国内CDN节点 ↩
如要使用其他的优选域名就去cf.090227.xyz中查看 ↩
只能是IPv4地址 ↩

Markdown Mermaid 图表

Thu, 01 Jan 2026 00:00:00 GMT

Markdown 中 Mermaid 图表完整指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子过程] D --> E subgraph E [子过程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

时序图显示对象之间随时间的交互。

sequenceDiagram participant User as 用户 participant WebApp as 网页应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送认证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 认证失败 WebApp->>User: 显示错误消息 WebApp->>User: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间线。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI设计 :a2, after a1, 10d 原型创建 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署生产环境部署 :d1, after c3, 3d 发布 :milestone, after d1, 0d

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 写作 User "1" -- "*" Comment : 发表 Article "1" -- "*" Comment : 拥有 Article "1" -- "*" Category : 属于

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

Firefly 布局系统详解

Sat, 03 Jan 1970 00:00:00 GMT

📖 概述#

Firefly 提供了灵活的布局系统，允许您根据内容需求和个人喜好自定义博客的视觉呈现方式。布局系统主要包括侧边栏布局和文章列表布局两个维度，它们相互配合，共同决定了页面的整体结构。

本文将详细介绍 Firefly 的各种布局模式、它们的特点、使用场景，以及不同布局组合的效果。

一、侧边栏布局系统#

侧边栏是博客页面的重要组成部分，用于展示导航、分类、标签、统计信息等辅助内容。Firefly 支持两种侧边栏布局模式。

1.1 单侧边栏模式#

1.1.1 左侧边栏 (position: “left”)#

左侧边栏布局

1.1.2 右侧边栏 (position: “right”)#

右侧边栏布局

特点#

侧边栏固定在页面其中一侧
文章阅读区域体验更佳，更宽敞
更加简约，没有那么紧凑

适用场景#

传统博客风格
强调导航和分类的博客
需要突出用户资料的个人博客
内容为主，辅助信息次之的场景

Tip

可以通过showBothSidebarsOnPostPage配置是否在文章详情页显示双侧边栏

当position为left或right时开启此项后，文章详情页将显示双侧边栏，主页等其他页面保持单侧边栏

适用在只想用单侧栏，但在文章详情页想用对侧栏的目录等组件的场景

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
5
};

1.2 双侧边栏模式 (position: “both”)#

特点#

左右两侧同时存在侧边栏
主内容区域位于中间
最大化利用屏幕空间
可以展示更多辅助信息
适合宽屏显示器

布局结构#

双侧边栏布局

适用场景#

宽屏桌面端浏览
信息密集型博客
需要展示大量辅助内容
专业性强的技术博客

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏

二、文章列表布局系统#

文章列表是博客首页和归档页的核心内容，Firefly 提供两种展示方式，并支持多种网格配置。

2.1 列表模式 (defaultMode: “list”)#

特点#

单列纵向排列
显示文章封面图
展示更多文章摘要
适合深度阅读

列表布局结构#

列表模式布局

优点#

✅ 视觉冲击力强，封面图吸引眼球
✅ 可以展示更多文章信息（摘要、标签等）
✅ 适合图片内容丰富的博客
✅ 移动端友好，单列更易阅读
✅ 兼容所有侧边栏配置（单侧、双侧）

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // 列表模式
4
    allowSwitch: true,   // 允许用户切换
5
  },
6
};

2.2 网格模式 (defaultMode: “grid”)#

特点#

多列横向排列（支持 2 列或 3 列）
紧凑布局，信息密度高
适合快速浏览

2.2.1 双列网格 (Columns: 2)#

这是网格模式的默认配置，适合大多数场景。

双列网格布局

2.2.2 三列网格 (Columns: 3) ✨ New#

在宽屏设备上，您可以开启三列网格模式，进一步提高信息密度。

三列网格布局

⚠️ 注意：三列网格模式仅在左侧边栏模式（或无侧边栏）下生效。如果您启用了双侧边栏，系统将自动回退到双列网格，以保证文章卡片有足够的展示宽度。

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    allowSwitch: true,
5
    grid: {
6
      masonry: true,  // 开启瀑布流
7
      columns: 3,     // 设置为 3 列模式（仅单侧边栏生效）
8
    },
9
  },
10
};

2.3 瀑布流布局 (Masonry)#

Firefly 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。

瀑布流布局

智能排版：采用 Z 字形分布（左右交替），严格保持文章的时间顺序。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上一行的卡片，消除垂直方向的空白间隙。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南#

Firefly 允许您自由组合侧边栏和文章列表布局。以下是各种组合的效果说明。

3.1 布局选择建议#

侧边栏模式	文章列表模式	推荐度	适用场景
单侧边栏	列表模式	⭐⭐⭐⭐⭐	摄影、设计、生活类博客，强调图片和沉浸感
单侧边栏	2列网格	⭐⭐⭐⭐⭐	技术、笔记类博客，平衡阅读与检索效率
单侧边栏	3列网格	⭐⭐⭐⭐⭐	内容量大的站点，宽屏体验极佳
双侧边栏	列表模式	⭐⭐⭐⭐⭐	需要展示大量侧边栏信息的站点
双侧边栏	2列网格	⭐⭐⭐⭐⭐	极客风格，追求最高信息密度

四、响应式布局行为#

Firefly 的布局系统具有智能的响应式设计，会根据屏幕尺寸自动调整。

4.1 智能降级规则#

为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：

3 列网格 -> 2 列网格：当屏幕宽度不足以容纳 3 列时（或开启双侧边栏时），自动降级为单列表模式。
网格模式 -> 列表模式：当屏幕宽度小于 1200px（平板和手机）时，网格模式会自动切换为单列列表模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题#

Q1: 为什么我配置了 3 列网格，但只显示 2 列？#

A: 请检查以下情况：

是否开启了双侧边栏（position: "both"）？双侧边栏模式下强制 2 列。
屏幕宽度是否足够？3 列模式通常需要 ≥1024px 的宽度。

Q2: 为什么在手机上看不到网格效果？#

A: 为了保证阅读体验，Firefly 在屏幕宽度小于 1200px 时会自动强制切换为列表模式。手机屏幕太窄，不适合展示多列网格。

Q3: 布局切换按钮在哪里？#

A: 布局切换按钮位于导航栏右侧。它仅在屏幕宽度 ≥ 1200px 时显示，因为在小屏幕上系统强制使用列表模式，无需切换。

六、总结#

Firefly 的新版布局系统给予了您更大的自由度，您都可以通过简单的配置实现。

我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。

Firefly 简单使用指南

Fri, 02 Jan 1970 00:00:00 GMT

这个博客模板是基于 Astro 构建的。对于本指南中未提及的内容，您可以在 Astro 文档中找到答案。

文章的 Front-matter#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [前端, 开发]
7
category: 前端开发
8
draft: false
9
---

属性	描述
`title`	文章标题。
`published`	文章发布日期。
`updated`	文章更新日期。如果未设置，将默认使用发布日期。
`pinned`	是否将此文章置顶在文章列表顶部。
`description`	文章的简短描述。显示在首页上。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：`public` 目录中的图片 3. 不带任何前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`lang`	文章语言代码（如 `zh-CN`）。仅当文章语言与站点默认语言不同时设置。
`licenseName`	文章内容的许可证名称。
`licenseUrl`	文章内容的许可证链接。
`author`	文章作者。
`sourceLink`	文章内容的来源链接或参考。
`draft`	如果这篇文章仍是草稿，则不会显示。
`comment`	是否启用此文章的评论功能。默认为 `true`。
`slug`	自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。

文章文件的放置位置#

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

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

自定义文章 URL (Slug)#

什么是 Slug？#

Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。

Slug 使用示例#

示例 1：使用文件名作为 URL#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/my-first-blog-post

示例 2：自定义 Slug#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
slug: hello-world
5
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/hello-world

示例 3：其他语言文件名使用Slug#

1
---
2
title: 如何使用 Firefly 博客主题
3
published: 2023-09-09
4
slug: how-to-use-firefly-blog-theme
5
---

文件：src/content/posts/如何使用Firefly博客主题.md

URL：/posts/how-to-use-firefly-blog-theme

Slug 使用建议#

使用英文和连字符：my-awesome-post 而不是 my awesome post
保持简洁：避免过长的 slug
具有描述性：让 URL 能够反映文章内容
避免特殊字符：只使用字母、数字和连字符
保持一致性：在整个博客中使用相似的命名模式

注意事项#

Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
如果多个文章使用相同的 slug，后面的文章会覆盖前面的
Slug 会自动转换为小写

🍀Zhuangの小屋

SMS前传

SMS大纲

怎么在Cloudflare上使用优选

前言#

为什么我们要优选？#

何为优选IP/域名？#

原理是什么？#

怎么做？#

Workers优选#

1.打开Workers设置来设置路由#

Footnotes#

Markdown Mermaid 图表

Markdown 中 Mermaid 图表完整指南#

流程图示例#

时序图示例#

甘特图示例#

类图示例#

状态图示例#

饼图示例#

总结#

Firefly 布局系统详解

📖 概述#

一、侧边栏布局系统#

1.1 单侧边栏模式#

1.1.1 左侧边栏 (position: “left”)#

1.1.2 右侧边栏 (position: “right”)#

特点#

适用场景#

配置示例#

1.2 双侧边栏模式 (position: “both”)#

特点#

布局结构#

适用场景#

配置示例#

二、文章列表布局系统#

2.1 列表模式 (defaultMode: “list”)#

特点#

列表布局结构#

优点#

配置示例#

2.2 网格模式 (defaultMode: “grid”)#

特点#

2.2.1 双列网格 (Columns: 2)#

2.2.2 三列网格 (Columns: 3) ✨ New#

配置示例#

2.3 瀑布流布局 (Masonry)#

三、布局组合指南#

3.1 布局选择建议#

四、响应式布局行为#

4.1 智能降级规则#

五、常见问题#

Q1: 为什么我配置了 3 列网格，但只显示 2 列？#

Q2: 为什么在手机上看不到网格效果？#

Q3: 布局切换按钮在哪里？#

六、总结#

相关链接#

Firefly 简单使用指南

文章的 Front-matter#

文章文件的放置位置#

自定义文章 URL (Slug)#

什么是 Slug？#

Slug 使用示例#

示例 1：使用文件名作为 URL#

示例 2：自定义 Slug#

示例 3：其他语言文件名使用Slug#

Slug 使用建议#

注意事项#