Firefly 特性展示

973 字
5 分钟
Firefly 特性展示

Firefly 特性展示#

这篇文章用于集中测试 Firefly 主题的 Markdown 扩展能力。内容本身不追求严肃论证,重点是把常用展示组件放在同一篇文章里,方便后续复制改造。

Note

这是 GitHub 风格提醒块。适合放背景信息、阅读提示和注意事项。

Tip

长文章可以把“正文解释、公式推导、代码模板、流程图、参考链接”拆开呈现。这样读者更容易定位信息,也能让页面显得更有层次。

1. 基础排版#

正文支持 加粗斜体删除线inline code,也支持链接,例如 AstroFireflyMathison2020

下面是一组任务列表:

  • 迁移旧博客内容
  • 修复数学公式渲染
  • 启用三栏布局和文章加密
  • 继续整理算法模板文章

2. 表格#

功能用法适合场景
提醒块> [!NOTE] 或 directive总结、警告、提示
GitHub 卡片::github{repo="owner/repo"}推荐项目
Mermaid```mermaid流程图、状态图
PlantUML```plantuml类图、时序图
图片网格[grid]...[/grid]相册、封面展示

3. 数学公式#

行内公式示例:当 f(x)f(x) 单调时,可以二分答案 xx,再用 check(x) 判断可行性。

行间公式示例:

ans=minS{1,,n},Sk(max1lrni=lrai)\operatorname{ans}=\min_{S\subseteq \{1,\dots,n\}, |S|\le k} \left(\max_{1\le l\le r\le n}\sum_{i=l}^{r} a_i'\right)

矩阵也可以正常渲染:

A=[1110],An=[Fn+1FnFnFn1]A= \begin{bmatrix} 1 & 1\\ 1 & 0 \end{bmatrix}, \quad A^n= \begin{bmatrix} F_{n+1} & F_n\\ F_n & F_{n-1} \end{bmatrix}

4. 代码块#

短代码片段可以强制展开:

int add(int a, int b) {
return a + b;
}

完整程序可以加标题,并交给主题按长度自动折叠:

binary-search-demo.cpp
#include <bits/stdc++.h>
using namespace std;
bool check(long long x) {
return x * x >= 100;
}
int main() {
long long l = 0, r = 100, ans = -1;
while (l <= r) {
long long mid = (l + r) >> 1;
if (check(mid)) {
ans = mid;
r = mid - 1;
} else {
l = mid + 1;
}
}
cout << ans << '\n';
return 0;
}

也可以展示配置片段:

export const featureFlags = {
comments: false,
randomCover: true,
sakura: true,
encryptedPosts: true,
};

5. GitHub 仓库卡片#

CuteLeaf
/
Firefly
Waiting for api.github.com...
00K
0K
0K
Waiting...
withastro
/
astro
Waiting for api.github.com...
00K
0K
0K
Waiting...

6. Mermaid 图表#

flowchart TD A[访问首页] --> B{选择内容} B --> C[算法模板] B --> D[微机实验] B --> E[游记与随笔] D --> F{是否加密} F -->|是| G[输入密码] F -->|否| H[直接阅读] G --> I[解锁正文]
sequenceDiagram participant User as 访问者 participant Page as 文章页面 participant Crypto as 解密模块 User->>Page: 打开加密文章 Page-->>User: 显示密码输入框 User->>Crypto: 提交密码 Crypto-->>Page: 解密 HTML 内容 Page-->>User: 展示正文

7. PlantUML 图表#

@startuml
title 博客内容结构

class Blog {
  +title: string
  +description: string
  +posts: Post[]
}

class Post {
  +title: string
  +published: Date
  +tags: string[]
  +password?: string
}

class Sideba

8. 图片和图片网格#

普通图片:

Firefly 示例封面
Firefly 示例封面

图片网格:

示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 4
示例图片 4

9. 嵌入视频#

可以直接写 HTML 嵌入在线视频。下面是一个 YouTube 示例:

也可以嵌入本地视频,只要文件放在 public/ 目录下:

<video controls src="/videos/demo.mp4" poster="/gallery/firefly-2026/cover.avif"></video>

10. 折叠详情和引用#

点击查看补充说明

这里是原生 HTML 的 details 折叠块。它适合收纳较长的参考资料、题解提示、命令输出或额外说明。

Important

页面丰富不等于组件越多越好。真正长期可维护的博客,应该让装饰服务于内容结构。

11. 小结#

这篇文章覆盖了:

  1. 基础 Markdown 排版
  2. 表格、任务列表和链接
  3. KaTeX 数学公式
  4. Expressive Code 代码块
  5. GitHub 仓库卡片
  6. Mermaid 与 PlantUML 图表
  7. 图片网格和视频嵌入
  8. 提醒块、折叠块和引用

后续写文章时,可以从这篇里复制相应片段,再替换成真实内容。

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

Firefly 特性展示
https://mathison2020.github.io/posts/2023-07-29-test/
作者
Mathison2020
发布于
2023-07-29
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
Mathison2020
Never really desperate, only the lost of the soul.
公告
欢迎来到 Mathison's Blog。这里记录算法模板、微机实验、学习笔记和博客重构过程。
分类
标签
站点统计
文章
12
分类
3
标签
8
总字数
13,646
运行时长
0
最后活动
0 天前

目录