紜清的个人笔记

Ciallo～ (∠・ω< )⌒★

Sat, 24 May 2025 00:00:00 GMT

群组

QQ群

Discord

其他

邮箱

告别手动调 API：我写了一个 Cloudflare Tunnel 可视化管理面板

Sat, 11 Jul 2026 00:00:00 GMT

前言

去年折腾 Cloudflare Tunnel 的时候，我自己照着网上的方案给网站搭了一套 Tunnel + SaaS Custom Hostname + 优选 CNAME 的方案。

对于个人站点而言，这是我用过最省心的一套组合。

Tunnel 负责隐藏源站，无需开放公网端口；SaaS 配合优选 CNAME，可以把访问流量引导到更合适的线路上。对只有一台低配 VPS 的个人站长来说，它既省去了配置防火墙和反向代理的麻烦，又能获得不错的访问体验。

真正麻烦的不是搭建，而是后续的维护。

每上线一个新站点，我都要在 Cloudflare 控制台里重复同一套流程：

打开 Tunnel 页面，修改 Public Hostname；
打开 DNS 页面，分别创建主域名和辅助域名的解析记录；
切换到 SSL/TLS，为域名申请 Custom Hostname；
设置 Fallback Origin；
最后等待 Cloudflare 同步配置、签发证书。

第一次配置的时候还挺有意思，但站点一多，这套流程就开始变成重复劳动。

我第一反应其实是去 GitHub 找现成的。找了一圈，可能是我没找到，也可能确实没人做。

既然没有，那就自己写一个。

其实一开始只是打算写给自己用，后来觉得整理一下，也许其他人也能用得上。

于是就有了 Cloudflare Tunnel Manager。

📦 Cloudflare Tunnel Manager

一个用于管理 Cloudflare Tunnel 的可视化面板。

它将 Tunnel、DNS、SaaS Custom Hostname 等原本分散在不同页面的配置整合到一起，只需要填写几个参数，就能完成整套绑定流程。

::github{repo="qiuyuxc/tunnel-manager"}

它解决的不是 Tunnel，而是整套配置流程

如果只是把本地服务暴露到公网，Cloudflare Tunnel 的链路其实非常清晰：

graph LR
    A[本地服务] --> B[cloudflared]
    B --> C[Cloudflare Edge]
    C --> D[访客]

真正让这套方案变得复杂的，是当你把 SaaS 和优选 CNAME 也纳入进来之后。

一个请求从用户发起，到最终抵达本地服务，实际上要经过下面这几层配置：

graph TD
    A[用户访问<br/>blog.example.com]
    -->|优选 CNAME| B[Custom Hostname]

    B --> C[Fallback Origin]

    C --> D[Tunnel]

    D --> E[Ingress]

    E --> F[localhost:3000]

这些配置虽然最终组成了一条完整的访问链路，但却分散在 Cloudflare 控制台的不同页面，由不同的 API 分别负责。这意味着，每新增一个站点，你都需要在不同页面之间来回切换，按照正确的顺序完成这些配置，才能把整条链路连接起来。

Cloudflare Tunnel Manager 做的事情其实很简单，就是把这套分散的配置流程串联起来，并交给程序自动完成。

现在绑定一个站点，只需要几步

以前绑定一个站点，大概要花五六分钟。

现在整个流程被压缩成了几个输入框：

选择 Tunnel
输入主域名
输入辅助域名
输入服务地址
点击绑定

剩下的事情全部交给程序完成。真正需要等待的，只有 Cloudflare 自己同步配置和签发证书的那段时间。

对于经常新增项目或者维护多个 Tunnel 的人来说，便捷性带来的体验还是很明显的。

点击一次绑定，后台到底做了什么？

面板里只有一个「绑定」按钮，但后台其实会依次完成下面几件事：

查询 Zone ID：根据主域名和辅助域名，自动查找对应的 Zone ID，支持子域名到根域名的最长匹配；
更新 Tunnel Ingress：将主域名和辅助域名加入路由，并确保 http_status:404 的兜底规则始终位于末尾；
Upsert DNS 记录：对主域名和辅助域名执行先查后写。辅助域名创建 CNAME 指向 {tunnelID}.cfargotunnel.com 并开启 Cloudflare 代理；主域名创建 CNAME 指向优选地址（如 cf.090227.xyz），不开启代理；
设置 Fallback Origin：在辅助域名所在 Zone 注册回退源；
创建 Custom Hostname：在辅助域名所在 Zone 提交主域名作为 Custom Hostname，等待 Cloudflare 自动完成证书签发。

所以绑定流程并不是简单地连续调几个接口，而是按照正确的顺序，一步一步完成。只有先设置好 Fallback Origin，Custom Hostname 的回源链路才能正确建立；而 DNS 记录的 Upsert 策略（先查询再更新或创建）则避免了重复提交导致的冲突。

只要 API 返回成功，这条访问链路基本就已经配置完毕。相比手动配置，最大的好处不是节省那几分钟，而是再也不用担心自己漏掉其中某一步，或者把顺序搞错。

实现时需要注意的几个细节

整个项目的开发其实比预想中顺利不少。在这之前，我已经写过基于 Cloudflare API 的 Go CLI 和 Workers，对 Tunnel、DNS、SaaS 这些接口都比较熟悉。因此，这个 Web 面板更多是在将现有的逻辑拼接起来。

真正需要注意的，反而是一些很容易被忽略的小细节。

Catch-all Rule 不能放错位置

Cloudflare Tunnel 的 Ingress 是按照数组顺序匹配的。

每个 Tunnel 都会有一条 Cloudflare 自动生成的兜底规则：

{
    "service": "http_status:404"
}

它始终位于整个 Ingress 的最后。

很多人第一次修改 Ingress 时，会下意识地把新规则追加到数组末尾。但如果直接追加到数组末尾，新规则就会排在 Catch-all Rule 后面，导致无法按预期匹配。

因此，更新 Ingress 时必须先把最后一条兜底规则取出来，插入新的 Hostname 规则后，再把它放回数组末尾。

项目里的处理方式如下：

newRules := []models.IngressRule{
    {
        Hostname: req.MainDomain,
        Service: cfg.ServiceURL,
    },
    {
        Hostname: req.AuxDomain,
        Service: cfg.ServiceURL,
    },
}

ingress := tunnelCfg.Result.Config.Ingress
lastRule := ingress[len(ingress)-1]

ingress = append(
    ingress[:len(ingress)-1],
    newRules...,
)

ingress = append(ingress, lastRule)

虽然只是几行代码，但它保证了每次新增路由时，都不会破坏已有的匹配顺序。否则，请求可能无法匹配到新增的 Hostname，最终无法正常访问对应服务。

Fallback Origin 为什么要先于 Custom Hostname？

除了 Ingress，第一次接触 SaaS 时还容易忽略 Fallback Origin 与 Custom Hostname 之间的依赖关系。

很多人会误以为，只要调用 Custom Hostname 接口把主域名提交给 Cloudflare，就算完成了。但实际上，Cloudflare 必须先知道这个域名最终应该回源到哪里，因此必须先把辅助域名注册为当前 Zone 的 Fallback Origin。

项目内部严格按照这个顺序处理：

Fallback Origin
        │
        ▼
Custom Hostname
        │
        ▼
等待证书签发

先调用 PUT /zones/{zone_id}/custom_hostnames/fallback_origin 设置回退源，随后再调用 POST /zones/{zone_id}/custom_hostnames 创建对外访问的 Custom Hostname。

如果顺序颠倒，Cloudflare 往往无法按预期完成证书申请。所以绑定流程并不是简单地连续调几个接口，而是按照 Cloudflare 的配置依赖关系，一步一步完成。

比绑定域名更常用的，其实是在线管理 Tunnel 路由

如果让我选整个项目最满意的功能，不是自动绑定，而是在线管理 Tunnel 路由。

最开始写这个项目时，我只是想把绑定域名这件事自动化掉。

真正开始使用以后，我才发现，自己最常用的反而不是绑定功能，而是路由管理。

因为一个 Tunnel 往往会承载多个服务。比如：

Hostname	Service
blog.example.com	http://localhost:3000
status.example.com	http://localhost:3001
api.example.com	http://localhost:8080

随着项目增多，经常需要修改端口、删除某个服务，新增一条路由进行测试，以前只能进入 Cloudflare 控制台的 Public Hostname（公共主机名）页面操作，现在可以直接在面板里完成。

页面会读取当前 Tunnel 的 Ingress 配置，以列表形式展示当前 Tunnel 的所有路由，支持查看、新增、编辑和删除。

唯一不允许手动修改的是那条 Cloudflare 自动生成的 Catch-all Rule——因为它始终应该留在最后，处理未匹配到任何规则的请求。

这也是整个项目目前我自己最常使用的功能。很多时候只是改一个端口，或者临时起一个测试服务，不需要再打开 Cloudflare 控制台。

除了 Web 面板，也支持 Telegram Bot

除了浏览器，这个项目还集成了 Telegram Bot，主要是为了方便远程管理。

比如服务器放在家里，或者人在外面时，不用登录面板，直接打开 Telegram 就能完成一些常用操作。

目前支持：

查看 Tunnel 状态
查看当前配置
设置优选 CNAME
设置回退源
域名绑定

如果只是偶尔新增一个站点，通过 Bot 直接操作往往比打开浏览器更快。

项目结构

在技术选型上，我刻意避开了重型方案。

更希望它能跑在各种低配置 VPS 上，所以整体保持简单：

┌──────────────┐
│ Vue 3 Frontend │
└──────┬───────┘
       │ HTTP API
┌──────▼───────┐
│ Go Backend   │
└──────┬───────┘
       │
┌──────▼────────────────┐
│ Cloudflare REST API   │
└───────────────────────┘

前端使用 Vue 3 + TypeScript + Naive UI + Pinia，负责页面展示和交互。

后端使用 Go + chi Router，所有配置直接保存在 JSON 文件中，不依赖 MySQL 或 PostgreSQL。

对于这个场景来说，这种方式已经足够，也降低了部署门槛。

针对国内服务器做了一些优化

很多使用 Tunnel 的用户，本身就是因为服务器线路一般，或者公网环境不太方便。因此部署时，我也顺手做了一些针对国内环境的优化。

镜像源自动切换

安装脚本会先检测 ghcr.io 能否正常访问。如果超时，则自动切换到国内镜像，避免 Docker 拉取镜像速度过慢。

自动生成管理员密码

第一次启动时，如果没有指定管理员密码，程序会自动生成一个随机密码并输出到日志中，避免部署后直接使用默认密码的风险。

一键部署

复制以下命令即可一键安装：

curl -sO https://raw.githubusercontent.com/qiuyuxc/tunnel-manager/main/install.sh && bash install.sh

脚本会自动检查 Docker、创建配置、引导填写 Cloudflare Token、构建镜像并启动容器，整个过程基本不需要手动修改配置文件。

API Token 权限

这个项目只需要几个最小权限的 Cloudflare API Token 即可运行：

范围	权限	用途
Tunnel	Edit	修改 Ingress、查询 Tunnel
DNS	Edit	创建 DNS 记录
Zone	Read	获取 Zone ID
SSL and Certificates	Edit	设置 Fallback Origin、创建 Custom Hostname

不需要使用全局 API Key，也不需要给账号授予更多权限。如果部署在第三方服务器，这样会更安全一些。

写在最后

说到底，这个面板并没有创造什么新的能力，只是把原本需要手动完成的操作，交给程序去调用 Cloudflare API 自动完成。

现在新增一个站点，不需要再反复打开 Tunnel、DNS、SSL/TLS 几个页面来回切换。填写几个参数，点击一次按钮，剩下的事情交给程序完成。

对于偶尔新增一个站点的人来说，可能只是节省了几分钟。但如果长期维护多个 Tunnel、多套服务，或者经常折腾新项目，这种重复操作很快就会变成一种负担。

至少以后再新增一个站点的时候，我不用再打开四五个 Cloudflare 页面，把同样的操作再重复一遍了。

如果你也经常使用 Cloudflare Tunnel，希望这个项目能帮你省下一点时间。如果觉得有用，欢迎到 GitHub 点个 Star，或者一起交流、提出新的想法。

免费领取阿里云 ESA 套餐以及实物周边

Wed, 28 Jan 2026 00:00:00 GMT

最近看到阿里云这边有个安全专享权益活动，能免费领一些小东西，顺手记一下。

活动参与链接

https://yundun.console.aliyun.com/?p=scnew#/overviewNew

这次能领到什么

这次送的东西主要有：

两个额外的免费 ESA 套餐
定制台历
帆布包

对经常折腾阿里云相关服务的人来说，这种活动顺手领一下还是挺香的。
实物周边倒不一定多值钱，但拿来收藏也还不错。

领取条件补充

这里稍微提一下：

帆布包的领取需要有 ECS 实例。

如果你手头没有现成实例，也可以考虑：

先去领免费的三个月试用
或者按量计费开一个实例
等领取完成后再把实例删除

这样成本不会太高。

领取后怎么看记录

领取完成之后，可以点击权益页面右上角的 领取记录 查看当前状态。

如果后续发货了，一般会收到短信提醒。

其他说明

如果过程中遇到问题，也可以去钉钉群问客服：

钉钉群号：81920030922

至于这篇为什么要专门记一下……

大概是因为这波活动看着还行，但 阿里云确实没给广告费。
所以，阿里云打钱，V 我 50。[dog]

Cloudflare Tunnel 的优选实践

Wed, 14 Jan 2026 00:00:00 GMT

前言

Cloudflare Tunnel 的确很好用，尤其适合个人服务和轻量站点。但它也有一个比较常见的问题：默认线路在国内访问体验并不理想。

尤其是在晚高峰时段，延迟升高、丢包、打开慢，都是比较常见的情况。

这篇文章主要分享一种我自己在用的思路：通过 Cloudflare Tunnel + SaaS 的组合方式，配合社区优选 CNAME，实现对 Tunnel 站点的访问优化。

准备阶段

在开始之前，需要准备以下内容：

两个域名（付费或免费均可）
海外借记卡或 PayPal（用于验证并开通 SaaS）

先理解整体思路

假设你有两个域名：

xik.com
cf.com

如果你最终想访问的是 *.xik.com，那么可以使用 cf.com 作为配置 SaaS 的辅助域名；反过来也一样。

也就是说，这里需要区分两个角色：

主域名：最终给用户访问的域名
辅助域名：用于配置 SaaS、自定义主机名以及回退源的域名

如果你只有一个域名，也可以用子域名来代替辅助域名，例如：

主域名：cf.com
辅助域名：saas.cf.com

理解这两个角色之后，后面的配置就会清楚很多。

配置思路概览

这套方案的核心逻辑可以简单理解为：

在 Tunnel 中同时绑定 主域名 和 辅助域名
辅助域名保持走 Cloudflare，作为实际回源所使用的源站域名
主域名不直接指向 Tunnel 默认目标，而是改为指向 社区优选 CNAME
再通过 Cloudflare SaaS 的自定义主机名功能，把主域名流量正确交给辅助域名处理

这样做的结果是：

主域名负责“优选访问”
辅助域名负责“真实回源”
Tunnel 负责你的内网穿透

开始实操

1. 在 Tunnel 中绑定两个域名

先在你的 Cloudflare Tunnel 中，为同一个站点绑定两个不同的域名：

一个主域名
一个辅助域名

这一步的目的，是让同一个 Tunnel 服务同时拥有“用户访问入口”和“回源入口”两个地址。

2. 给辅助域名添加一条走 Cloudflare 的解析记录

接下来，打开 辅助域名 的 DNS 解析，添加任意一条记录：

A
AAAA
CNAME

记录值本身不重要，重点是：必须开启小黄云。

这条记录的用途，是让辅助域名成为后续 SaaS 配置里的回退源。这一步必须先加，否则后面无法继续添加自定义主机名。

例如，我这里把子域名指向了 8.8.8.8。只要小黄云开启，流量实际仍然会经过 Cloudflare，这样就可以满足后续 SaaS 的回退源要求。

3. 为辅助域名添加社区优选 CNAME

接着，再添加一条指向社区优选的 CNAME 记录。

常见的优选来源可以从下面这些站点获取：

https://cf.090227.xyz/

https://www.byoip.top/

获取到可用优选后，先把它配置在辅助域名下的某个子域名上。

4. 修改主域名解析到优选子域名

然后切换到 主域名 的 DNS 页面，找到你在 Tunnel 中绑定的那个子域名解析记录，把它的记录值修改为刚刚配置好的“优选子域名”，并关闭小黄云。

这里要注意：

主域名 不是直接指向优选站点给出的目标
而是先指向你在辅助域名下配置好的那个优选子域名

例如：

y.cf.com -> cf.090227.xyz
那么主域名应该指向 y.cf.com
而不是直接写 cf.090227.xyz

这样做一方面是为了让 Cloudflare 正确识别访问目标，另一方面也更方便后续维护。

例如当你配置了多个优选时，只要统一通过 y.cf.com 这一个子域名来处理，后续更换优选域名时，只需要修改 y.cf.com 的解析记录，而不必直接改动每个主域名的解析。

5. 在辅助域名中配置 SaaS 自定义主机

完成上面的 DNS 配置后，回到辅助域名对应的 Cloudflare 控制台。

进入侧边栏中的：

SSL/TLS → 自定义主机

先添加一个 回源域名，也就是你刚刚用于 SaaS 回退源的那个辅助域名子域名。

然后继续添加 自定义主机名。

这里有两个关键点：

自定义主机名：填写你最终要给用户访问的主域名
源站：填写你在 Tunnel 中绑定的辅助域名（也就是没有改过 Tunnel 指向的那个地址）

验证方式可以自行选择，这里更推荐使用 HTTP 验证。

这里以TXT为例

添加完成后，Cloudflare 会给出一条 TXT 验证记录，把它添加到对应域名的 DNS 中，等待验证生效即可。

测试是否生效

当全部配置完成并生效后，就可以使用 itdog 等站点测试工具进行检查。

重点看两件事：

是否已经正确命中优选线路
晚高峰下延迟与丢包是否有改善

晚高峰效果对比

未优选

优选后

从测试结果来看，优选后的访问体验会明显更稳定一些，尤其是在国内晚高峰场景下，效果会更容易体现出来。

总结

这套方案的关键点，其实就在于把 Tunnel、优选 CNAME 和 SaaS 自定义主机名三个能力串起来：

Tunnel 负责把服务穿透出来
优选 CNAME 负责改善入口访问体验
SaaS 负责承接自定义主机名，并把主域名流量交给辅助域名处理

整套配置看起来步骤不少，但真正理解“主域名负责访问、辅助域名负责回源”这个思路后，整体就不会太难。

如果你本身就在用 Cloudflare Tunnel，又觉得默认线路在国内访问体验一般，那么这套方法还是挺值得折腾一下的。

Vercel / Netlify / Cloudflare 站点的优选与分流

Fri, 19 Dec 2025 00:00:00 GMT

前言

如果你的网站部署在 Vercel、Netlify 或 Cloudflare 等平台上，实际访问体验往往会受到网络环境和运营商线路的影响。

这篇文章主要介绍一种比较实用的方案：借助 华为云 DNS 的线路解析功能，结合第三方优选域名，对不同平台进行优选与分流。这样可以让不同运营商用户访问到更合适的线路，从而改善站点的访问速度。

需要准备的账号

在开始之前，需要先准备以下账号：

第一步：在华为云添加需要优选的子域名

假设你最终要访问的站点是 blog.hwy.com，那么在华为云 DNS 中添加对应的子域名即可。

添加完成后，华为云会提供一组 NS 记录。接下来需要前往 Cloudflare，将这组 NS 记录配置进去，把该子域名的解析权交给华为云。

这样后续针对这个子域名的优选与分流，就可以在华为云里完成。

第二步：配置平台域名并进行优选

这里以 Vercel 为例说明。

首先，在 Vercel 中添加你的子域名，例如：

blog.hwy.com

完成添加后，Vercel 会给出默认的解析记录。先按平台要求正常完成解析与生效。

待域名绑定成功后，就可以把原本平台提供的默认解析目标，替换为社区中常见的第三方优选域名，以进一步改善访问质量。

第三方优选域名获取

常见的第三方优选域名可以从下面这些站点获取：

https://cf.090227.xyz/
https://www.byoip.top/

拿到优选域名之后，将原解析值替换为对应的优选域名或IP即可。

测试优选是否生效

替换完成后，可以通过测试工具或实际访问下，验证当前优选域名是否已经生效。

第三步：按运营商进行分流

如果你只使用单个平台，那么完成前面的优选步骤通常就已经够用了。分流并不是必须项。

但如果你希望进一步优化不同网络环境下的访问体验，比如让电信、联通、移动分别走不同平台，那么就可以继续往下配置线路分流。

配置思路

重复前面在 Vercel 上的做法，再为 Netlify、Cloudflare 或其他平台分别完成：

域名绑定
解析生效
SSL 下发
替换为对应优选域名

等这些都准备好之后，就可以在华为云中基于运营商线路添加不同的解析记录。

注：如果 Netlify 长时间无法完成解析，可以先在华为云中暂停其他优选记录，等待 Netlify 验证成功后再重新启用。

第四步：配置线路解析

假设你已经分别为 Vercel、Netlify、Cloudflare 等平台准备好了对应的优选域名，那么接下来就可以根据不同运营商进行分流。

例如，以电信线路为例：

同样的方法，也可以继续为联通、移动等线路分别配置不同的 CNAME 记录。具体选哪一个平台作为哪条线路的目标，可以根据你自己的测试结果和访问体验来决定。

解析示例

以下只是一个示例，具体请以你自己的实际配置为准：

记录类型：CNAME ｜线路：电信｜记录值：your.cloudflare.app
记录类型：CNAME ｜线路：移动｜记录值：your.vercel.app
记录类型：CNAME ｜线路：联通｜记录值：your.netlify.app
记录类型：CNAME ｜线路：全网默认｜记录值：your.edgeone.app

配置完成后，可以再次进行测试，确认各线路是否已经正确指向正确IP。

一个有趣的延伸玩法

线路分流除了用于优化访问速度，其实还可以拿来做一些更有意思的玩法。

比如：

电信线路访问部署在 Vercel 上的云盘
联通线路访问部署在 Netlify 上的博客
移动线路访问另外一个平台上的站点内容

也就是说，不同网络环境下访问同一个域名，看到的内容甚至可以不完全相同。

当然，这种玩法更偏个性化和实验性质，是否这样使用就看你自己的需求了。

总结

这套方案的核心思路并不复杂：

把子域名交给华为云解析
在不同平台上完成域名绑定
将默认解析替换为第三方优选域名
利用华为云的线路解析能力，为不同运营商配置不同的访问目标

如果你只是想做基础优选，那么做到第三步通常就已经够用了。如果你还想进一步折腾，或者希望兼顾不同网络环境下的访问体验，那么再继续做分流会更合适。

整体来说，这是一套比较适合多平台部署场景的方案。

Markdown Tutorial

Mon, 20 Jan 2025 00:00:00 GMT

Markdown Tutorial

A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).

Block Elements
Span Elements
- Links
- Emphasis
- Code
- Images
- Strikethrough
Miscellaneous
- Automatic Links
- Backslash Escapes
Inline HTML

Block Elements

Paragraphs and Line Breaks

Paragraphs

HTML Tag: <p>

One or more blank lines. (A blank line is a line containing nothing but spaces or tabs is considered blank.)

Code:

This will be
inline.

This is second paragraph.

Preview:

This will be inline.

This is second paragraph.

Line Breaks

HTML Tag: <br />

End a line with two or more spaces.

Code:

This will be not
inline.

Preview:

This will be not
inline.

Headers

Markdown supports two styles of headers, Setext and atx.

Setext

HTML Tags: <h1>, <h2>

"Underlined" using equal signs (=) as <h1> and dashes (-) as <h2> in any number.

Code:

This is an H1
=============
This is an H2
-------------

Preview:

This is an H1

This is an H2

atx

HTML Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Uses 1-6 hash characters (#) at the start of the line, corresponding to <h1> - <h6>.

Code:

# This is an H1
## This is an H2
###### This is an H6

Preview:

This is an H1

This is an H2

This is an H6

Optionally, you may "close" atx-style headers. The closing hashes don't need to match the number of hashes used to open the header.

Code:

# This is an H1 #
## This is an H2 ##
### This is an H3 ######

Preview:

This is an H1

This is an H2

This is an H3

Blockquotes

HTML Tag: <blockquote>

Markdown uses email-style > characters for blockquoting. It looks best if you hard wrap the text and put a > before every line.

Code:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph.

Code:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >.

Code:

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

Preview:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks.

Code:

> ## This is a header.
>
> 1.   This is the first list item.
> 2.   This is the second list item.
>
> Here's some example code:
>
>     return shell_exec("echo $input | $markdown_script");

Preview:

This is a header.

This is the first list item.

This is the second list item.

Here's some example code:
return shell_exec("echo $input | $markdown_script");

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists.

Unordered

HTML Tag: <ul>

Unordered lists use asterisks (*), pluses (+), and hyphens (-).

Code:

*   Red
*   Green
*   Blue

Preview:

Red
Green
Blue

is equivalent to:

Code:

+   Red
+   Green
+   Blue

and:

Code:

-   Red
-   Green
-   Blue

Ordered

HTML Tag: <ol>

Ordered lists use numbers followed by periods:

Code:

1.  Bird
2.  McHale
3.  Parish

Preview:

Bird
McHale
Parish

It's possible to trigger an ordered list by accident, by writing something like this:

Code:

1986. What a great season.

Preview:

What a great season.

You can backslash-escape (\) the period:

Code:

1986\. What a great season.

Preview:

1986. What a great season.

Indented

Blockquote

To put a blockquote within a list item, the blockquote's > delimiters need to be indented:

Code:

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

Preview:

A list item with a blockquote:

This is a blockquote inside a list item.

Code Block

To put a code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs:

Code:

*   A list item with a code block:

        <code goes here>

Preview:

A list item with a code block:
```
<code goes here>
```

Nested List

Code:

* A
  * A1
  * A2
* B
* C

Preview:

A
- A1
- A2
B
C

Code Blocks

HTML Tag: <pre>

Indent every line of the block by at least 4 spaces or 1 tab.

Code:

This is a normal paragraph:

    This is a code block.

Preview:

This is a normal paragraph:

This is a code block.

A code block continues until it reaches a line that is not indented (or the end of the article).

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.

Code:

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

Preview:

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Following sections Fenced Code Blocks and Syntax Highlighting are extensions, you can use the other way to write the code block.

Fenced Code Blocks

Just wrap your code in ``` (as shown below) and you won't need to indent it by four spaces.

Code:

Here's an example:

```
function test() {
  console.log("notice the blank line before this function?");
}
```

Preview:

Here's an example:

function test() {
  console.log("notice the blank line before this function?");
}

Syntax Highlighting

In your fenced block, add an optional language identifier and we'll run it through syntax highlighting (Support Languages).

Code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Preview:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Horizontal Rules

HTML Tag: <hr /> Places three or more hyphens (-), asterisks (*), or underscores (_) on a line by themselves. You may use spaces between the hyphens or asterisks.

Code:

* * *
***
*****
- - -
---------------------------------------
___

Preview:

Table

HTML Tag: <table>

It's an extension.

Separates column by pipe (|) and header by dashes (-), and uses colon (:) for alignment.

The outer pipes (|) and alignment are optional. There are 3 delimiters each cell at least for separating header.

Code:

| Left | Center | Right |
|:-----|:------:|------:|
|aaa   |bbb     |ccc    |
|ddd   |eee     |fff    |

 A | B
---|---
123|456


A |B
--|--
12|45

Preview:

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

Span Elements

Links

HTML Tag: <a>

Markdown supports two style of links: inline and reference.

Inline

Inline link format like this: [Link Text](URL "Title")

Title is optional.

Code:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Preview:

This is an example inline link.

This link has no title attribute.

If you're referring to a local resource on the same server, you can use relative paths:

Code:

See my [About](/about/) page for details.

Preview:

See my About page for details.

Reference

You could predefine link references. Format like this: [id]: URL "Title"

Title is also optional. And the you refer the link, format like this: [Link Text][id]

Code:

[id]: http://example.com/  "Optional Title Here"
This is [an example][id] reference-style link.

Preview:

This is an example reference-style link.

That is:

Square brackets containing the link identifier (not case sensitive, optionally indented from the left margin using up to three spaces);
followed by a colon;
followed by one or more spaces (or tabs);
followed by the URL for the link;
The link URL may, optionally, be surrounded by angle brackets.
optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.

The following three link definitions are equivalent:

Code:

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)
[foo]: <http://example.com/>  "Optional Title Here"

Uses an empty set of square brackets, the link text itself is used as the name.

Code:

[Google]: http://google.com/
[Google][]

Preview:

Google

Emphasis

HTML Tags: <em>, <strong>

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. One delimiter will be <em>; *double delimiters will be <strong>.

Code:

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

Preview:

single asterisks

single underscores

double asterisks

double underscores

But if you surround an * or _ with spaces, it'll be treated as a literal asterisk or underscore.

You can backslash escape it:

Code:

\*this text is surrounded by literal asterisks\*

Preview:

*this text is surrounded by literal asterisks*

Code

HTML Tag: <code>

Wraps it with backtick quotes (`).

Code:

Use the `printf()` function.

Preview:

Use the printf() function.

To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:

Code:

``There is a literal backtick (`) here.``

Preview:

There is a literal backtick (`) here.

The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:

Code:

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

Preview:

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

Images

HTML Tag: <img />

Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference.

Inline

Inline image syntax looks like this: ![Alt text](URL "Title")

Title is optional.

Code:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

Preview:

That is:

An exclamation mark: !;
followed by a set of square brackets, containing the alt attribute text for the image;
followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.

Reference

Reference-style image syntax looks like this: ![Alt text][id]

Code:

[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
![Alt text][img id]

Preview:

Strikethrough

HTML Tag: <del>

It's an extension.

GFM adds syntax to strikethrough text.

Code:

~~Mistaken text.~~

Preview:

~~Mistaken text.~~

Miscellaneous

Automatic Links

Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets.

Code:

<http://example.com/>

<address@example.com>

Preview:

http://example.com/

address@example.com

GFM will autolink standard URLs.

Code:

https://github.com/emn178/markdown

Preview:

https://github.com/emn178/markdown

Backslash Escapes

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown's formatting syntax.

Code:

\*literal asterisks\*

Preview:

*literal asterisks*

Markdown provides backslash escapes for the following characters:

Code:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

Inline HTML

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

Code:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

Preview:

This is a regular paragraph.

This is another regular paragraph.

Note that Markdown formatting syntax is not processed within block-level HTML tags.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

Code:

<span>**Work**</span>

<div>
    **No Work**
</div>

Preview:

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="matsuzaka-yuki/Mizuki"}

Create a GitHub repository card with the code ::github{repo="matsuzaka-yuki/Mizuki"}.

::github{repo="matsuzaka-yuki/Mizuki"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Encrypted Post

Mon, 15 Jan 2024 00:00:00 GMT

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`pinned`	Whether this post is pinned to the top of the post list.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`alias`	alias for the post. The post will be accessible at `/posts/{alias}/`. Example: `my-special-article` (will be available at `/posts/my-special-article/`)
`licenseName`	The license name for the post content.
`author`	The author of the post.
`sourceLink`	The source link or reference for the post content.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

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

Posts alias

You can set a alias for any post by adding the alias field to the front-matter:

---
title: My Special Article
published: 2024-01-15
alias: "my-special-article"
tags: ["Example"]
category: "Technology"
---

When a alias is set:

The post will be accessible at the custom URL (e.g., /posts/my-special-article/)
The default /posts/{slug}/ URL will still work
RSS/Atom feeds will use the custom alias
All internal links will automatically use the custom alias

Important Notes:

Alias should NOT include /posts/ prefix (it will be added automatically)
Avoid special characters and spaces in alias
Use lowercase letters and hyphens for best SEO practices
Make sure alias are unique across all posts
Don't include leading or trailing slashes

How It Works

graph LR
    A[User Password] --> B[bcrypt Hash]
    B --> C[Password Hash]
    C --> D[Extract First 32 Characters]
    D --> E[Encryption Key]
    E --> F[AES Encryption]
    F --> G[Encrypted Content]

Markdown Mermaid

Sun, 01 Oct 2023 00:00:00 GMT

Complete Guide to Markdown with Mermaid Diagrams

This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.

Flowchart Example

Flowcharts are excellent for representing processes or algorithm steps.

graph TD
    A[Start] --> B{Condition Check}
    B -->|Yes| C[Process Step 1]
    B -->|No| D[Process Step 2]
    C --> E[Subprocess]
    D --> E
    subgraph E [Subprocess Details]
        E1[Substep 1] --> E2[Substep 2]
        E2 --> E3[Substep 3]
    end
    E --> F{Another Decision}
    F -->|Option 1| G[Result 1]
    F -->|Option 2| H[Result 2]
    F -->|Option 3| I[Result 3]
    G --> J[End]
    H --> J
    I --> J

Sequence Diagram Example

Sequence diagrams show interactions between objects over time.

sequenceDiagram
    participant User
    participant WebApp
    participant Server
    participant Database

    User->>WebApp: Submit Login Request
    WebApp->>Server: Send Auth Request
    Server->>Database: Query User Credentials
    Database-->>Server: Return User Data
    Server-->>WebApp: Return Auth Result
    
    alt Auth Successful
        WebApp->>User: Show Welcome Page
        WebApp->>Server: Request User Data
        Server->>Database: Get User Preferences
        Database-->>Server: Return Preferences
        Server-->>WebApp: Return User Data
        WebApp->>User: Load Personalized Interface
    else Auth Failed
        WebApp->>User: Show Error Message
        WebApp->>User: Prompt Re-entry
    end

Gantt Chart Example

Gantt charts are perfect for displaying project schedules and timelines.

gantt
    title Website Development Project Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Design Phase
    Requirements Analysis      :a1, 2023-10-01, 7d
    UI Design                 :a2, after a1, 10d
    Prototype Creation        :a3, after a2, 5d
    
    section Development Phase
    Frontend Development      :b1, 2023-10-20, 15d
    Backend Development       :b2, after a2, 18d
    Database Design           :b3, after a1, 12d
    
    section Testing Phase
    Unit Testing              :c1, after b1, 8d
    Integration Testing       :c2, after b2, 10d
    User Acceptance Testing   :c3, after c2, 7d
    
    section Deployment
    Production Deployment     :d1, after c3, 3d
    Launch                    :milestone, after d1, 0d

Class Diagram Example

Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.

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 : writes
    User "1" -- "*" Comment : posts
    Article "1" -- "*" Comment : has
    Article "1" -- "*" Category : belongs to

State Diagram Example

State diagrams show the sequence of states an object goes through during its life cycle.

stateDiagram-v2
    [*] --> Draft
    
    Draft --> UnderReview : submit
    UnderReview --> Draft : reject
    UnderReview --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Published --> Draft : retract
    
    state Published {
        [*] --> Active
        Active --> Hidden : temporarily hide
        Hidden --> Active : restore
        Active --> [*]
        Hidden --> [*]
    }
    
    Archived --> [*]

Pie Chart Example

Pie charts are ideal for displaying proportions and percentage data.

pie title Website Traffic Sources Analysis
    "Search Engines" : 45.6
    "Direct Access" : 30.1
    "Social Media" : 15.3
    "Referral Links" : 6.4
    "Other Sources" : 2.6

Conclusion

Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.

To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.

Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!

Include Video in the Posts

Mon, 01 Aug 2022 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
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