我的技术博客

CodePen(1)-边框炫彩和模糊炫彩特效

Sat, 08 May 2027 00:00:08 GMT

边框炫彩和模糊炫彩特效

每日的css特效学习，今天z-index的炫彩边框

设计思路-html

.place用于容器居中
.outer用于提供炫彩变量
.outer::after作为模糊炫彩层其z-index:1
.inner作为输入框其z-index:3
.border作为渲染边框z-index:2

<div class="place">
    <div class="outer">
        <div class="inner">
            <input name="in" type="text" placeholder="询问YI AI" />
        </div>
        <div class="border"></div>
    </div>
</div>

css学习

首先利用houdini定义一个可用于animation的变量

@property --rotation {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

然后外层容器实现居中效果

.place {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px;
}

里面输入框作为index:3把炫彩和模糊炫彩都挡住

.inner {
    background: light-dark(white, #1a1c1e);
    color: light-dark(#222, hsl(210, 8%, 66%));
    display: inline;
    padding: 1rem 0.5rem;
    position: relative;
    z-index: 3; /* 这里最顶层，挡住炫彩 */
    border-radius: inherit;
    display: grid;
    grid-template-columns: 400px; /* 提供高度撑开.outer父容器 */
    align-items: center;
    gap: 1rem;
    font-family: system-ui;
}

input {
    color: light-dark(#222, hsl(210, 8%, 66%));
    background: none;
    border: none;
}

input {
    font-size: 1rem;
    font-family: system-ui;
    font-weight: 300;

    &:focus {
        outline: none;
    }

    &:not(:placeholder-shown) {
        color: light-dark(black, white);
    }
}

使用一个.border div元素作为背景炫彩

.border {
    position: absolute;
    /* 向外扩展4px，刚好将outer的边框覆盖 */
    inset: calc(var(--border-size) * -1);
    border-radius: inherit;
    overflow: hidden;
    background: var(--gradient);
    z-index: 2;
}

模糊炫彩使用.outer::after

.outer {
    /* 声明边框大小，统一变量 */
    --border-size: 4px;
    /* 自定义houdini变量，实现旋转炫彩 */
    --gradient: conic-gradient(
        from var(--rotation) at 52% 49% in oklab,
        oklch(0.63 0.2 251.22) 27%,
        oklch(0.67 0.21 25.81) 33%,
        oklch(0.9 0.19 93.93) 41%,
        oklch(0.79 0.25 150.49) 49%,
        oklch(0.63 0.2 251.22) 65%,
        oklch(0.72 0.21 150.89) 93%,
        oklch(0.63 0.2 251.22)
    );
    animation: rotate 5s infinite linear;
    /* 声明外边框圆角 */
    border-radius: 4rem;
    background: none;
    position: relative;
    padding: 0;

    &::after {
        content: "";
        position: absolute;
        inset: -4px; /* 大幅向外扩张，突破父级限制 */
        background: var(--gradient);
        filter: blur(15px); /* 强力模糊，对抗圆角吞噬 */
        z-index: 1;
        border-radius: inherit;
    }
}

Markdown 扩展功能

Wed, 08 Apr 2026 00:00:08 GMT

GitHub 仓库卡片

您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。

::github{repo="CuteLeaf/Firefly"}

使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。

::github{repo="CuteLeaf/Firefly"}

提醒框(Admonitions)配置

Firefly 采用了 rehype-callouts 插件，支持了三种风格的提醒框主题：GitHub、Obsidian 和 VitePress。您可以在 src/config/siteConfig.ts 中进行配置：

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    // ...
    rehypeCallouts: {
        // 选项: "github" | "obsidian" | "vitepress"
        theme: "github",
    },
    // ...
}

注意：更改配置后需要重启开发服务器才能生效。

以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。

1. GitHub 主题风格

这是 GitHub 官方支持的 5 种基本类型。

基本语法

> [!NOTE] NOTE
> 突出显示用户应该考虑的信息。

> [!TIP] TIP
> 可选信息，帮助用户更成功。

> [!IMPORTANT] IMPORTANT
> 用户成功所必需的关键信息。

> [!WARNING] WARNING
> 关键内容，需要立即注意。

> [!CAUTION] CAUTION
> 行动的负面潜在后果。

> [!NOTE] 自定义标题
> 这是一个带有自定义标题的示例。

2. Obsidian 主题风格

Obsidian 风格支持非常丰富的类型和别名。

<details> <summary>点击展开 Obsidian 语法列表</summary>

> [!NOTE] NOTE
> 通用的笔记块。

> [!ABSTRACT] ABSTRACT
> 文章的摘要。

> [!SUMMARY] SUMMARY
> 文章的总结（同 Abstract）。

> [!TLDR] TLDR
> 太长不看（同 Abstract）。

> [!INFO] INFO
> 提供额外信息。

> [!TODO] TODO
> 需要完成的事项。

> [!TIP] TIP
> 实用技巧或提示。

> [!HINT] HINT
> 暗示（同 Tip）。

> [!IMPORTANT] IMPORTANT
> 重要信息（Obsidian 风格通常使用类似的图标）。

> [!SUCCESS] SUCCESS
> 操作成功。

> [!CHECK] CHECK
> 检查通过（同 Success）。

> [!DONE] DONE
> 已完成（同 Success）。

> [!QUESTION] QUESTION
> 提出问题。

> [!HELP] HELP
> 寻求帮助（同 Question）。

> [!FAQ] FAQ
> 常见问题（同 Question）。

> [!WARNING] WARNING
> 警告信息。

> [!CAUTION] CAUTION
> 注意事项（同 Warning）。

> [!ATTENTION] ATTENTION
> 引起注意（同 Warning）。

> [!FAILURE] FAILURE
> 操作失败。

> [!FAIL] FAIL
> 失败（同 Failure）。

> [!MISSING] MISSING
> 缺失内容（同 Failure）。

> [!DANGER] DANGER
> 危险操作警告。

> [!ERROR] ERROR
> 错误信息（同 Danger）。

> [!BUG] BUG
> 报告软件缺陷。

> [!EXAMPLE] EXAMPLE
> 展示一个例子。

> [!QUOTE] QUOTE
> 引用一段话。

> [!CITE] CITE
> 引证（同 Quote）。

> [!NOTE] 自定义标题
> 这是一个带有自定义标题的示例。

</details>

3. VitePress 主题风格

VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。

<details> <summary>点击展开 VitePress 语法列表</summary>

> [!NOTE] NOTE
> 对应 GitHub 的 Note。

> [!TIP] TIP
> 对应 GitHub 的 Tip。

> [!IMPORTANT] IMPORTANT
> 对应 GitHub 的 Important。

> [!WARNING] WARNING
> 对应 GitHub 的 Warning。

> [!CAUTION] CAUTION
> 对应 GitHub 的 Caution。

> [!TIP] 自定义标题
> VitePress 风格同样支持自定义标题。

</details>

4. Docusaurus 风格语法

仅支持语法，风格保持跟上面三个主题相同。

<details> <summary>点击展开 Docusaurus 语法列表 </summary>

支持以下类型的提醒框：note tip important warning caution

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

:::tip
可选信息，帮助用户更成功。
:::

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

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

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

:::tip[自定义标题]
可选信息，帮助用户更成功。
:::

</details>

剧透

您可以为文本添加剧透。文本也支持 Markdown 语法。

内容 :spoiler[被隐藏了哈哈]！

内容 :spoiler[被隐藏了 **哈哈**]！

图片画廊网格 (Image Grid)

您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。

自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。

图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。

[grid] [/grid]

基本语法

[grid]
![示例图片一](./images/firefly1.avif)
![示例图片二](./images/firefly2.avif)
![示例图片二](./images/firefly3.avif)
[/grid]

Markdown 教程 - 语法查看

Sun, 08 Mar 2026 00:00:08 GMT

这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。

块级元素
- 段落与换行
- 标题
- 引用
- 列表
- 代码块
- 分割线
- 表格
内联元素
- 链接
- 强调
- 行内代码
- 图片
- 删除线
杂项
- 自动链接
- 反斜杠转义
内联 HTML

块级元素

段落与换行

段落

HTML 标签：<p>

使用一个或多个空行分隔段落。（仅包含空格或制表符的行也视为空行。）

代码：

This will be
inline.

This is second paragraph.

预览：

This will be inline.

This is second paragraph.

换行

HTML 标签：<br />

在行末添加两个或更多空格来产生换行。

代码：

This will be not
inline.

预览：

This will be not
inline.

标题

Markdown 支持两种标题样式：Setext 与 atx。

Setext

HTML 标签：<h1>，<h2>

使用等号 (=) 表示 <h1>、使用短横线 (-) 表示 <h2>，数量不限，作为“下划线”。

代码：

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

预览：

This is an H1

This is an H2

atx

HTML 标签：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>

在行首使用 1-6 个井号 (#)，对应 <h1> 至 <h6>。

代码：

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

预览：

This is an H1

This is an H2

This is an H6

可选：你可以在行尾“闭合” atx 标题。末尾的井号数量不必与开头一致。

代码：

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

预览：

This is an H1

This is an H2

This is an H3

引用

HTML 标签：<blockquote>

Markdown 使用邮件风格的 > 作为引用符号。若手动换行并在每行前加 >，显示效果最佳。

代码：

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

预览：

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 允许“偷懒”：在一个硬换行段落中，只在第一行前加 > 即可。

代码：

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

预览：

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.

引用可以嵌套（引用中的引用），通过增加 > 层级实现。

代码：

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

预览：

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

引用内可包含其他 Markdown 元素，包括标题、列表与代码块。

代码：

> ## 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");

预览：

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");

列表

Markdown 支持有序（数字）与无序（圆点）列表。

无序列表

HTML 标签：<ul>

无序列表可使用 星号 (*)、加号 (+) 或 短横线 (-)。

代码：

*   Red
*   Green
*   Blue

预览：

Red
Green
Blue

等价于：

代码：

+   Red
+   Green
+   Blue

或者：

代码：

-   Red
-   Green
-   Blue

有序列表

HTML 标签：<ol>

有序列表使用数字加英文句点：

代码：

1.  Bird
2.  McHale
3.  Parish

预览：

Bird
McHale
Parish

注意：像下面这样可能会“意外触发”有序列表：

代码：

1986. What a great season.

预览：

What a great season.

你可以用反斜杠转义 (\) 句点：

代码：

1986\. What a great season.

预览：

1986. What a great season.

列表中的缩进内容

列表项里的引用

在列表项内放置引用，需要将 > 符号整体缩进：

代码：

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

预览：

A list item with a blockquote:

This is a blockquote inside a list item.

列表项里的代码块

在列表项内放置代码块，需要缩进两层——8 个空格或两个 Tab：

代码：

*   A list item with a code block:

        <code goes here>

预览：

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

嵌套列表

代码：

* A
  * A1
  * A2
* B
* C

预览：

A
- A1
- A2
B
C

代码块

HTML 标签：<pre>

将代码块中的每行缩进至少4 个空格或1 个制表符。

代码：

This is a normal paragraph:

    This is a code block.

预览：

This is a normal paragraph:

This is a code block.

代码块会一直持续，直到遇到未缩进的行（或文末）。

在代码块内，与号 (&) 和尖括号 (< >) 会自动转为 HTML 实体。

代码：

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

预览：

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

下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。

围栏代码块

使用成对的反引号围起来（如下所示），就不需要四空格缩进了。

代码：

Here's an example:

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

预览：

Here's an example:

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

语法高亮

在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。

代码：

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

预览：

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

分割线（水平线）

HTML 标签：<hr /> 一行中放置三个或以上的短横线 (-)、星号 (*) 或下划线 (_)。符号之间允许有空格。

代码：

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

预览：

表格

HTML 标签：<table>

这是扩展语法。

用竖线 (|) 分隔列，用短横线 (-) 分隔表头，使用冒号 (:) 指定对齐方式。

两侧的竖线 (|) 与对齐可选。用于表头分隔时，每列至少需要 3 个短横线。

代码：

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

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


A |B
--|--
12|45

预览：

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

内联元素

链接

HTML 标签：<a>

Markdown 支持两种链接样式：行内链接与引用式链接。

行内链接

行内链接格式：[文本](URL "标题")

标题可选。

代码：

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

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

预览：

This is an example inline link.

This link has no title attribute.

如果引用同一站点的本地资源，可以使用相对路径：

代码：

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

预览：

See my About page for details.

引用式链接

可以预定义链接引用。定义格式：[id]: URL "标题"

标题同样可选。引用时使用：[文本][id]

代码：

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

预览：

This is an example reference-style link.

说明：

方括号中包含链接标识（不区分大小写，可在左侧缩进最多三格空格）；
随后是冒号；
再跟一个或多个空格（或 tab）；
然后是链接 URL；
URL 可选地用尖括号包裹；
可选地跟随标题属性，用引号或圆括号包裹。

以下三种定义等价：

代码：

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

如果使用空的方括号，则链接文本本身会作为名称。

代码：

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

预览：

Google

强调

HTML 标签：<em>，<strong>

Markdown 使用 星号 (*) 或 下划线 (_) 表示强调。一个分隔符对应 <em>；两个分隔符对应 <strong>。

代码：

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

预览：

single asterisks

single underscores

double asterisks

double underscores

但如果两侧有空格，则会被视作普通字符而非强调语法。

你可以使用反斜杠进行转义：

代码：

\*this text is surrounded by literal asterisks\*

预览：

*this text is surrounded by literal asterisks*

行内代码

HTML 标签：<code>

用反引号 (`) 包裹。

代码：

Use the `printf()` function.

预览：

Use the printf() function.

若行内代码中需要包含反引号字符，可使用多重反引号作为定界符：

代码：

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

预览：

There is a literal backtick (`) here.

行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：

代码：

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

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

预览：

A single backtick in a code span: `

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

图片

HTML 标签：<img />

Markdown 的图片语法与链接类似，支持行内与引用两种方式。

行内图片

行内图片语法：![替代文本](URL "标题")

标题可选。

代码：

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

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

预览：

说明：

一个感叹号 !；
后接方括号，放置图片的替代文本；
再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。

引用式图片

引用式图片语法：![替代文本][id]

代码：

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

预览：

删除线

HTML 标签：<del>

这是扩展语法。

GFM 增加了删除线语法。

代码：

~~Mistaken text.~~

预览：

~~Mistaken text.~~

杂项

自动链接

Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。

代码：

<http://example.com/>

<address@example.com>

预览：

http://example.com/

address@example.com

GFM 会自动识别标准 URL 并转换为链接。

代码：

https://github.com/emn178/markdown

预览：

https://github.com/emn178/markdown

反斜杠转义

Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。

代码：

\*literal asterisks\*

预览：

*literal asterisks*

以下字符可通过反斜杠转义以按字面量输出：

Code:

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

内联 HTML

对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。

代码：

This is a regular paragraph.

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

This is another regular paragraph.

预览：

This is a regular paragraph.

This is another regular paragraph.

请注意：在块级 HTML 标签内不会处理 Markdown 语法。

与块级标签不同，在行内级标签内会处理 Markdown 语法。

代码：

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

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

预览：

Markdown Mermaid 图表

Sun, 08 Feb 2026 00:00:08 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 图表 - 它们将使您的内容更加专业且更易理解！

KaTeX 数学公式示例

Thu, 08 Jan 2026 00:00:08 GMT

本文展示了 Firefly 主题对 KaTeX 数学公式的渲染支持。

行内公式 (Inline)

行内公式使用单个 $ 符号包裹。

例如：欧拉公式 $e^{i\pi} + 1 = 0$ 是数学中最优美的公式之一。

质能方程 $E = mc^2$ 也是家喻户晓。

块级公式 (Block)

块级公式使用两个 $$ 符号包裹，会居中显示。

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

复杂示例

矩阵 (Matrices)

$$ \begin{pmatrix} a & b \ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix} $$

极限与求和 (Limits and Sums)

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

$$ \lim_{x \to 0} \frac{\sin x}{x} = 1 $$

麦克斯韦方程组 (Maxwell's Equations)

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

化学方程式 (Chemical Equations)

$$ \ce{CH4 + 2O2 -> CO2 + 2H2O} $$

符号	代码	渲染结果
Alpha	`\alpha`	$\alpha$
Beta	`\beta`	$\beta$
Gamma	`\Gamma`	$\Gamma$
Pi	`\pi`	$\pi$
Infinity	`\infty`	$\infty$
Right Arrow	`\rightarrow`	$\rightarrow$
Partial	`\partial`	$\partial$

测试katex

Mon, 08 Dec 2025 00:00:08 GMT

这篇文章是草稿

这篇文章目前处于草稿状态，尚未发布。因此，它不会对普通读者可见。内容仍在进行中，可能需要进一步编辑和审查。

当文章准备发布时，您可以在 Frontmatter 中将 "draft" 字段更新为 "false"：

---
title: 草稿示例
published: 2024-01-11T04:40:26.381Z
tags: [Markdown, 博客, 演示]
category: 示例
draft: false
---

测试行内公式

勾股定理：$a^2 + b^2 = c^2$

测试块公式

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Firefly 布局系统详解

Sat, 08 Feb 2025 00:00:08 GMT

📖 概述

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

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

一、侧边栏布局系统

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

1.1 单侧边栏模式

左侧边栏 (position: "left")

右侧边栏 (position: "right")

特点

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

适用场景

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

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

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

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
    enable: true,
    position: "left", // 左侧边栏
    showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
}

1.2 双侧边栏模式 (position: "both")

特点

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

布局结构

适用场景

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏
}

二、文章列表布局系统

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

2.1 列表模式 (defaultMode: "list")

特点

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

列表布局结构

优点

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

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "list", // 列表模式
        allowSwitch: true, // 允许用户切换
    },
}

2.2 网格模式 (defaultMode: "grid")

特点

自适应列数，根据浏览器宽度自动调整
紧凑布局，信息密度高
适合快速浏览

自适应网格

网格模式通过 columnWidth 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "grid",
        allowSwitch: true,
        grid: {
            masonry: true, // 开启瀑布流
            columnWidth: 320, // 卡片最小宽度(px)，浏览器自动计算列数
        },
    },
}

2.3 瀑布流布局 (Masonry)

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

智能排版：自动将卡片放置到最短的列，最大化利用垂直空间。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上方卡片，消除垂直方向的空白间隙。
自适应列数：瀑布流同样根据 columnWidth 和容器宽度动态计算列数，无需固定配置。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南

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

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

四、响应式布局行为

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

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

网格列数自动减少：网格模式的列数由 columnWidth 和容器宽度自动决定，屏幕越窄列数越少。
列表模式 -> 网格模式：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题

Q1: 如何调整网格列数？

A: 通过 columnWidth 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。

六、总结

一、侧边栏布局系统

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

1.1 单侧边栏模式

左侧边栏 (position: "left")

右侧边栏 (position: "right")

特点

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

适用场景

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

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

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

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
    enable: true,
    position: "left", // 左侧边栏
    showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
}

1.2 双侧边栏模式 (position: "both")

特点

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

布局结构

适用场景

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏

二、文章列表布局系统

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

2.1 列表模式 (defaultMode: "list")

特点

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

列表布局结构

优点

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

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "list", // 列表模式
        allowSwitch: true, // 允许用户切换
    },
}

2.2 网格模式 (defaultMode: "grid")

特点

自适应列数，根据浏览器宽度自动调整
紧凑布局，信息密度高
适合快速浏览

自适应网格

网格模式通过 columnWidth 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "grid",
        allowSwitch: true,
        grid: {
            masonry: true, // 开启瀑布流
            columnWidth: 320, // 卡片最小宽度(px)，浏览器自动计算列数
        },
    },
}

2.3 瀑布流布局 (Masonry)

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

智能排版：自动将卡片放置到最短的列，最大化利用垂直空间。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上方卡片，消除垂直方向的空白间隙。
自适应列数：瀑布流同样根据 columnWidth 和容器宽度动态计算列数，无需固定配置。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南

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

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

四、响应式布局行为

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

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

网格列数自动减少：网格模式的列数由 columnWidth 和容器宽度自动决定，屏幕越窄列数越少。
列表模式 -> 网格模式：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题

Q1: 如何调整网格列数？

A: 通过 columnWidth 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。

六、总结

一、侧边栏布局系统

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

1.1 单侧边栏模式

左侧边栏 (position: "left")

右侧边栏 (position: "right")

特点

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

适用场景

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

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

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

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
    enable: true,
    position: "left", // 左侧边栏
    showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
}

1.2 双侧边栏模式 (position: "both")

特点

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

布局结构

适用场景

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both", // 双侧边栏

二、文章列表布局系统

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

2.1 列表模式 (defaultMode: "list")

特点

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

列表布局结构

优点

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

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "list", // 列表模式
        allowSwitch: true, // 允许用户切换
    },
}

2.2 网格模式 (defaultMode: "grid")

特点

自适应列数，根据浏览器宽度自动调整
紧凑布局，信息密度高
适合快速浏览

自适应网格

网格模式通过 columnWidth 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
    postListLayout: {
        defaultMode: "grid",
        allowSwitch: true,
        grid: {
            masonry: true, // 开启瀑布流
            columnWidth: 320, // 卡片最小宽度(px)，浏览器自动计算列数
        },
    },
}

2.3 瀑布流布局 (Masonry)

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

智能排版：自动将卡片放置到最短的列，最大化利用垂直空间。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上方卡片，消除垂直方向的空白间隙。
自适应列数：瀑布流同样根据 columnWidth 和容器宽度动态计算列数，无需固定配置。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南

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

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

四、响应式布局行为

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

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

网格列数自动减少：网格模式的列数由 columnWidth 和容器宽度自动决定，屏幕越窄列数越少。
列表模式 -> 网格模式：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题

Q1: 如何调整网格列数？

A: 通过 columnWidth 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。

六、总结

当文章准备发布时，您可以在 Frontmatter 中将 "draft" 字段更新为 "false"：

---
title: 草稿示例
published: 2024-01-11T04:40:26.381Z
tags: [Markdown, 博客, 演示]
category: 示例
draft: false
---

我的技术博客

CodePen(1)-边框炫彩和模糊炫彩特效

边框炫彩和模糊炫彩特效

设计思路-html

css学习

Markdown 扩展功能

GitHub 仓库卡片

提醒框(Admonitions)配置

1. GitHub 主题风格

2. Obsidian 主题风格

3. VitePress 主题风格

4. Docusaurus 风格语法

剧透

图片画廊网格 (Image Grid)

Markdown 教程 - 语法查看

块级元素

段落与换行

段落

换行

标题

Setext

This is an H1

This is an H2

atx

This is an H1

This is an H2

This is an H6

This is an H1

This is an H2

This is an H3

引用

This is a header.

列表

无序列表

有序列表

列表中的缩进内容

列表项里的引用

列表项里的代码块

嵌套列表

代码块

围栏代码块

语法高亮

分割线（水平线）

表格

内联元素

链接

行内链接

引用式链接

强调

行内代码

图片

行内图片

引用式图片

删除线

杂项

自动链接

反斜杠转义

内联 HTML

Markdown Mermaid 图表

Markdown 中 Mermaid 图表完整指南

流程图示例

时序图示例

甘特图示例

类图示例

状态图示例

饼图示例

总结

KaTeX 数学公式示例

行内公式 (Inline)

块级公式 (Block)

复杂示例

矩阵 (Matrices)

极限与求和 (Limits and Sums)

麦克斯韦方程组 (Maxwell's Equations)

化学方程式 (Chemical Equations)

更多符号

测试katex

这篇文章是草稿

测试行内公式

测试块公式