北港不夏 - 个人博客

✨K8S 基础操作指南

Thu, 30 Oct 2025 00:00:00 GMT

✨MySQL Linux 通用版离线安装

Sun, 31 Aug 2025 16:00:00 GMT

✨Window11 安装Tailscale 错误0x80072f19

Fri, 25 Jul 2025 08:00:00 GMT

✨基于Redis + WebSocket的批量文件处理系统

Wed, 09 Jul 2025 08:00:00 GMT

✨Jenkins 自动部署

Mon, 09 Jun 2025 08:00:00 GMT

✨Excel 样式复制工具类

Mon, 09 Jun 2025 00:00:00 GMT

✨上移下移，升级降级树形节点操作工具类

Thu, 23 Jan 2025 00:00:00 GMT

✨Shell 脚本请求接口

Wed, 11 Dec 2024 00:00:00 GMT

✨Nacos Docker-Compose 配置

Tue, 22 Oct 2024 06:42:00 GMT

✨IDEA 方法注释配置

Sat, 05 Oct 2024 22:39:00 GMT

✨SpringBoot Apache CXF 配置

Tue, 10 Sep 2024 06:37:00 GMT

✨Nginx Proxy Manager 相关配置

Wed, 24 Jul 2024 22:33:00 GMT

✨Java 获取以太网IP

Tue, 23 Jul 2024 06:32:00 GMT

✨Dockerfile 编译CentOS7基础镜像替换YUM源

Thu, 11 Jul 2024 06:31:00 GMT

✨Excel 导出工具类

Mon, 24 Jun 2024 06:29:00 GMT

✨Tomcat 9.x IDEA控制台乱码

Tue, 18 Jun 2024 06:26:00 GMT

✨使用EasyExcel实现导出Excel写入图片

Mon, 17 Jun 2024 05:36:00 GMT

✨Docker 启动异常 containerd did not exit successfully

Mon, 13 May 2024 05:31:00 GMT

✨Response 响应流遇到的坑

Fri, 26 Apr 2024 05:34:00 GMT

✨Google 同步操作

Thu, 25 Apr 2024 05:33:00 GMT

✨国产达梦数据库安装教程

Mon, 22 Apr 2024 05:24:00 GMT

✨Docker 和 Docker-Compose离线安装教程

Sun, 21 Apr 2024 21:28:00 GMT

✨SpringBoot 网卡获取忽略代理配置

Sun, 21 Apr 2024 13:18:00 GMT

Firefly 布局系统详解

Wed, 03 Jan 2024 00:00:00 GMT

📖 概述

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

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

一、侧边栏布局系统

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

1.1 左侧边栏模式 (position: "left")

特点

侧边栏固定在页面左侧
主内容区域位于右侧
符合从左到右的阅读习惯
适合展示导航和分类等重要信息

布局结构

适用场景

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

:::tip 开启左侧单侧边栏后，位于文章详情页右侧边栏的文章目录导航将失效

会改用浮动目录导航替代，需要手动点击弹出目录导航

但可以通过showRightSidebarOnPostPage配置是否在文章详情页显示右侧边栏

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

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

配置示例

// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "left", // 左侧边栏
  showRightSidebarOnPostPage: 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")

特点

多列横向排列（支持 2 列或 3 列）
紧凑布局，信息密度高
适合快速浏览

2.2.1 双列网格 (Columns: 2)

这是网格模式的默认配置，适合大多数场景。

2.2.2 三列网格 (Columns: 3) ✨ New

在宽屏设备上，您可以开启三列网格模式，进一步提高信息密度。

⚠️ 注意：三列网格模式仅在左侧边栏模式（或无侧边栏）下生效。如果您启用了双侧边栏，系统将自动回退到双列网格，以保证文章卡片有足够的展示宽度。

配置示例

// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
  postListLayout: {
    defaultMode: "grid",
    allowSwitch: true,
    grid: {
      masonry: true,  // 开启瀑布流
      columns: 3,     // 设置为 3 列模式（仅单侧边栏生效）
    },
  },
};

2.3 瀑布流布局 (Masonry)

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

智能排版：采用 Z 字形分布（左右交替），严格保持文章的时间顺序。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上一行的卡片，消除垂直方向的空白间隙。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南

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

3.1 左侧边栏 + 网格模式

这是最灵活的组合。您可以选择 2 列或 3 列网格。

2 列模式：经典的网格布局，卡片宽度适中，阅读舒适。
3 列模式：适合宽屏（≥1024px），单屏展示更多内容，视觉效果震撼。

3.2 双侧边栏 + 网格模式

在旧版本中，此组合被禁用。但在最新版 Firefly 中，我们解除了限制，允许双侧边栏与网格模式共存。

特点与限制：

强制双列：即使您配置了 columns: 3，在此模式下也会强制显示为 2 列。
空间紧凑：由于左右都有侧边栏，中间的主内容区域相对较窄。
信息密度极高：这是信息密度最高的布局方式，适合需要同时展示大量导航信息和文章列表的站点。

3.3 布局选择建议

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

四、响应式布局行为

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

4.1 智能降级规则

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

3 列网格 -> 2 列网格：当屏幕宽度不足以容纳 3 列时（或开启双侧边栏时），自动降级为单列表模式。
网格模式 -> 列表模式：当屏幕宽度小于 1200px（平板和手机）时，网格模式会自动切换为单列列表模式，以保证卡片内容的可读性。
双侧边栏 -> 左侧边栏：当屏幕宽度小于 1200px 时，右侧边栏会自动隐藏，文章目录导航会切换成浮动目录导航。

五、常见问题

Q1: 为什么我配置了 3 列网格，但只显示 2 列？

A: 请检查以下情况：

是否开启了双侧边栏（position: "both"）？双侧边栏模式下强制 2 列。
屏幕宽度是否足够？3 列模式通常需要 ≥1024px 的宽度。

Q2: 为什么在手机上看不到网格效果？

A: 为了保证阅读体验，Firefly 在屏幕宽度小于 1200px 时会自动强制切换为列表模式。手机屏幕太窄，不适合展示多列网格。

Q3: 布局切换按钮在哪里？

A: 布局切换按钮位于导航栏右侧。它仅在屏幕宽度 ≥ 1200px 时显示，因为在小屏幕上系统强制使用列表模式，无需切换。

六、总结

Firefly 的新版布局系统给予了您更大的自由度。无论是追求视觉冲击力的三列网格，还是追求信息密度的双侧边栏网格，您都可以通过简单的配置实现。

我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。

MDX 格式文章示例

Tue, 02 Jan 2024 00:00:00 GMT

import { Icon } from 'astro-icon/components'

:::tip Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。 :::

Markdown 和 MDX 的区别

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件

这是一个图标组件：

import { Icon } from 'astro-icon/components'

<div class="flex items-center gap-2 my-4">
  <Icon name="fa6-solid:rocket" class="text-4xl text-red-500" />
  <span>火箭发射！</span>
</div>

使用 JSX

你也可以直接写 HTML/JSX：

<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
</div>

<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4"> 这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。 </div>

简单的变量导出

export const year = new Date().getFullYear()

今年是 {year} 年。

export const year = new Date().getFullYear()

今年是 {year} 年。

更多信息，请查看 MDX 文档

测试加密

Mon, 01 Jan 2024 13:17:00 GMT

Markdown 教程

Mon, 01 Jan 2024 00:00:00 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>

预览：

Firefly 代码块示例

Sun, 31 Dec 2023 16:00:00 GMT

在Firefly中使用表达性代码的代码块在 Markdown 中的外观。

Firefly 简单使用指南

Sun, 31 Dec 2023 16:00:00 GMT

如何使用 Firefly 博客模板。

Markdown 扩展功能

Sun, 31 Dec 2023 16:00:00 GMT

了解 Firefly 中的 Markdown 功能

在文章中嵌入视频

Sun, 31 Dec 2023 16:00:00 GMT

这篇文章演示如何在博客文章中嵌入视频。

KaTeX 数学公式示例

Sun, 31 Dec 2023 16:00:00 GMT

展示 Firefly 主题对 KaTeX 数学公式的支持，包括行内公式、块级公式和复杂数学符号。

Firefly 布局系统详解

Sun, 31 Dec 2023 16:00:00 GMT

深入了解 Firefly 的布局系统，包括侧边栏布局和文章列表布局。

Firefly 一款清新美观的 Astro 博客主题模板

Sun, 31 Dec 2023 16:00:00 GMT

Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。

Markdown Mermaid 图表

Sun, 31 Dec 2023 16:00:00 GMT

一个包含 Mermaid 的 Markdown 博客文章简单示例。

关于我

Sun, 31 Dec 2023 00:00:00 GMT

关于本站和博主的介绍

北港不夏 - 个人博客

✨K8S 基础操作指南

✨MySQL Linux 通用版离线安装

✨Window11 安装Tailscale 错误0x80072f19

✨基于Redis + WebSocket的批量文件处理系统

✨Jenkins 自动部署

✨Excel 样式复制工具类

✨上移下移，升级降级树形节点操作工具类

✨Shell 脚本请求接口

✨Nacos Docker-Compose 配置

✨IDEA 方法注释配置

✨SpringBoot Apache CXF 配置

✨Nginx Proxy Manager 相关配置

✨Java 获取以太网IP

✨Dockerfile 编译CentOS7基础镜像替换YUM源

✨Excel 导出工具类

✨Tomcat 9.x IDEA控制台乱码

✨使用EasyExcel实现导出Excel写入图片

✨Docker 启动异常 containerd did not exit successfully

✨Response 响应流遇到的坑

✨Google 同步操作

✨国产达梦数据库安装教程

✨Docker 和 Docker-Compose离线安装教程

✨SpringBoot 网卡获取忽略代理配置

Firefly 布局系统详解

📖 概述

一、侧边栏布局系统

1.1 左侧边栏模式 (position: "left")

特点

布局结构

适用场景

配置示例

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

特点

布局结构

适用场景

配置示例

二、文章列表布局系统

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

特点

列表布局结构

优点

配置示例

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

特点

2.2.1 双列网格 (Columns: 2)

2.2.2 三列网格 (Columns: 3) ✨ New

配置示例

2.3 瀑布流布局 (Masonry)

三、布局组合指南

3.1 左侧边栏 + 网格模式

3.2 双侧边栏 + 网格模式

3.3 布局选择建议

四、响应式布局行为

4.1 智能降级规则

五、常见问题

Q1: 为什么我配置了 3 列网格，但只显示 2 列？

Q2: 为什么在手机上看不到网格效果？

Q3: 布局切换按钮在哪里？

六、总结

相关链接

MDX 格式文章示例

Markdown 和 MDX 的区别

使用组件

使用 JSX

简单的变量导出

测试加密

Markdown 教程

块级元素

段落与换行

段落

换行

标题

Setext

This is an H1

This is an H2

atx

This is an H1

This is an H2

This is an H6