紜清的个人笔记

Ciallo～ (∠・ω< )⌒★

Sat, 24 May 2025 00:00:00 GMT

群组

QQ群

Discord

其他

邮箱

免费领取阿里云 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、自定义主机名以及回退源的域名

例如：

xik.com 为主域名
cf.com 为辅助域名

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

主域名：quiyu.com
辅助域名：saas.quiyu.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