Pixiv - KiraraShss
Firefly 特性展示
973 字
5 分钟
Firefly 特性展示
Firefly 特性展示
这篇文章用于集中测试 Firefly 主题的 Markdown 扩展能力。内容本身不追求严肃论证,重点是把常用展示组件放在同一篇文章里,方便后续复制改造。
Note
这是 GitHub 风格提醒块。适合放背景信息、阅读提示和注意事项。
Tip
长文章可以把“正文解释、公式推导、代码模板、流程图、参考链接”拆开呈现。这样读者更容易定位信息,也能让页面显得更有层次。
1. 基础排版
正文支持 加粗、斜体、删除线、inline code,也支持链接,例如 Astro、Firefly 和 Mathison2020。
下面是一组任务列表:
- 迁移旧博客内容
- 修复数学公式渲染
- 启用三栏布局和文章加密
- 继续整理算法模板文章
2. 表格
| 功能 | 用法 | 适合场景 |
|---|---|---|
| 提醒块 | > [!NOTE] 或 directive | 总结、警告、提示 |
| GitHub 卡片 | ::github{repo="owner/repo"} | 推荐项目 |
| Mermaid | ```mermaid | 流程图、状态图 |
| PlantUML | ```plantuml | 类图、时序图 |
| 图片网格 | [grid]...[/grid] | 相册、封面展示 |
3. 数学公式
行内公式示例:当 单调时,可以二分答案 ,再用 check(x) 判断可行性。
行间公式示例:
矩阵也可以正常渲染:
4. 代码块
短代码片段可以强制展开:
int add(int a, int b) { return a + b;}完整程序可以加标题,并交给主题按长度自动折叠:
#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 仓库卡片
Waiting for api.github.com...
Waiting for api.github.com...
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 图表
8. 图片和图片网格
普通图片:

图片网格:




9. 嵌入视频
可以直接写 HTML 嵌入在线视频。下面是一个 YouTube 示例:
也可以嵌入本地视频,只要文件放在 public/ 目录下:
<video controls src="/videos/demo.mp4" poster="/gallery/firefly-2026/cover.avif"></video>10. 折叠详情和引用
点击查看补充说明
这里是原生 HTML 的 details 折叠块。它适合收纳较长的参考资料、题解提示、命令输出或额外说明。
Important
页面丰富不等于组件越多越好。真正长期可维护的博客,应该让装饰服务于内容结构。
11. 小结
这篇文章覆盖了:
- 基础 Markdown 排版
- 表格、任务列表和链接
- KaTeX 数学公式
- Expressive Code 代码块
- GitHub 仓库卡片
- Mermaid 与 PlantUML 图表
- 图片网格和视频嵌入
- 提醒块、折叠块和引用
后续写文章时,可以从这篇里复制相应片段,再替换成真实内容。
文章分享
如果这篇文章对你有帮助,欢迎分享给更多人!
相关文章 智能推荐
1
CCF CCSP2023游记
算法 CCF CCSP2023游记第八届CCSP全国总决赛 2023年10月25-26日 沈阳 序 自从5年前11月11日的NOIP2018原地退役之后,没再打过OI了 上了大学,没有进唐计的机会,转到了计算机之后也已经失去了打ACM的机会 打了三次CSP认证,编程竞赛打了两届蓝桥杯省赛+国赛,一次水赛(以及两次青云杯) 多
2
【古法编程】基础算法模版
算法 AI时代的古法编程遗产
3
数字组成的奥妙——数位dp
算法 【序】 数位dp就是套模板 ——lwz dalao (数位dp确实可以套模板,但笔者建议还是要理解这个过程,这样才能灵活变化) 【引言】数位dp一直以来是dp家族里比较冷门的一种,但一旦考察不会数位dp靠暴力很难骗到 $O(r-l)$ 以外的分 今天我们就来分析一下数位dp的全过程 【引入】首先我们要清楚数位dp解决的
随机文章 随机推荐