<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <id>https://sidihuang.com/</id>
  <title type="text">APA全鹅空</title>
  <subtitle type="text">APA全鹅空的个人博客</subtitle>
  <updated>2026-09-16T20:30:00.000Z</updated>
  <author><name>Laopu</name></author>
  <link rel="alternate" href="https://sidihuang.com/"/>
  <link rel="self" href="https://sidihuang.com/atom.xml"/>
  <generator uri="https://github.com/CuteLeaf/Firefly">Firefly v6.16.8</generator>
    <entry>
      <id>https://sidihuang.com/posts/encrypted_test_post/</id>
      <title type="text">这是我测试的第一篇加密文章</title>
      <published>2026-09-16T20:30:00.000Z</published>
      <updated>2026-09-16T20:30:00.000Z</updated>
      <author><name>Laopu</name></author>
      <link rel="alternate" href="https://sidihuang.com/posts/encrypted_test_post/"/>
      <summary type="text">测试加密以及记录建站过程。</summary>
      <content type="html"><![CDATA[本文已加密保护，请访问网站查看。]]></content>
    </entry>
    <entry>
      <id>https://sidihuang.com/posts/code-examples/</id>
      <title type="text">Firefly 代码块示例</title>
      <published>1970-01-03T00:00:00.000Z</published>
      <updated>1970-01-03T00:00:00.000Z</updated>
      <author><name>Laopu</name></author>
      <link rel="alternate" href="https://sidihuang.com/posts/code-examples/"/>
      <summary type="text">在Firefly中使用表达性代码的代码块在 Markdown 中的外观。</summary>
      <content type="html"><![CDATA[<p>在这里，我们将探索如何使用 <a href="https://expressive-code.com/" target="_blank">Expressive Code</a> 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。</p>
<section><h2>表达性代码<a href="#表达性代码"><span>#</span></a></h2><section><h3>语法高亮<a href="#语法高亮"><span>#</span></a></h3><p><a href="https://expressive-code.com/key-features/syntax-highlighting/" target="_blank">语法高亮</a></p><section><h4>常规语法高亮<a href="#常规语法高亮"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'此代码有语法高亮!'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>渲染 ANSI 转义序列<a href="#渲染-ansi-转义序列"><span>#</span></a></h4><div><div><div><figure><figcaption><span></span><span>Terminal window</span><span>展开</span><span>收起</span></figcaption><pre><code><div><div><div>1</div></div><div><span>Standard ANSI colors:</span></div></div><div><div><div>2</div></div><div><span>- Dimmed:     </span><span> Black </span><span> Red </span><span> Green </span><span> Yellow </span><span> Blue </span><span> Magenta </span><span> Cyan </span><span> White </span></div></div><div><div><div>3</div></div><div><span>- Foreground: </span><span> Black </span><span> Red </span><span> Green </span><span> Yellow </span><span> Blue </span><span> Magenta </span><span> Cyan </span><span> White </span></div></div><div><div><div>4</div></div><div><span>- Background: </span><span> Black </span><span> Red </span><span> Green </span><span> Yellow </span><span> Blue </span><span> Magenta </span><span> Cyan </span><span> White </span></div></div><div><div><div>5</div></div><div><span>- Reversed:   </span><span> Black </span><span> Red </span><span> Green </span><span> Yellow </span><span> Blue </span><span> Magenta </span><span> Cyan </span><span> White </span></div></div><div><div><div>6</div></div><div>
</div></div><div><div><div>7</div></div><div><span>8-bit colors (showing colors 160-171 as an example):</span></div></div><div><div><div>8</div></div><div><span>- Dimmed:     </span><span> 160 </span><span> 161 </span><span> 162 </span><span> 163 </span><span> 164 </span><span> 165 </span><span> 166 </span><span> 167 </span><span> 168 </span><span> 169 </span><span> 170 </span><span> 171 </span></div></div><div><div><div>9</div></div><div><span>- Foreground: </span><span> 160 </span><span> 161 </span><span> 162 </span><span> 163 </span><span> 164 </span><span> 165 </span><span> 166 </span><span> 167 </span><span> 168 </span><span> 169 </span><span> 170 </span><span> 171 </span></div></div><div><div><div>10</div></div><div><span>- Background: </span><span> 160 </span><span> 161 </span><span> 162 </span><span> 163 </span><span> 164 </span><span> 165 </span><span> 166 </span><span> 167 </span><span> 168 </span><span> 169 </span><span> 170 </span><span> 171 </span></div></div><div><div><div>11</div></div><div><span>- Reversed:   </span><span> 160 </span><span> 161 </span><span> 162 </span><span> 163 </span><span> 164 </span><span> 165 </span><span> 166 </span><span> 167 </span><span> 168 </span><span> 169 </span><span> 170 </span><span> 171 </span></div></div><div><div><div>12</div></div><div>
</div></div><div><div><div>13</div></div><div><span>24-bit colors (full RGB):</span></div></div><div><div><div>14</div></div><div><span>- Dimmed:     </span><span> ForestGreen - RGB(34,139,34) </span><span> RebeccaPurple - RGB(102,51,153) </span></div></div><div><div><div>15</div></div><div><span>- Foreground: </span><span> ForestGreen - RGB(34,139,34) </span><span> RebeccaPurple - RGB(102,51,153) </span></div></div><div><div><div>16</div></div><div><span>- Background: </span><span> ForestGreen - RGB(34,139,34) </span><span> RebeccaPurple - RGB(102,51,153) </span></div></div><div><div><div>17</div></div><div><span>- Reversed:   </span><span> ForestGreen - RGB(34,139,34) </span><span> RebeccaPurple - RGB(102,51,153) </span></div></div><div><div><div>18</div></div><div>
</div></div><div><div><div>19</div></div><div><span>Font styles:</span></div></div><div><div><div>20</div></div><div><span>- Default</span></div></div><div><div><div>21</div></div><div><span>- </span><span>Bold</span></div></div><div><div><div>22</div></div><div><span>- </span><span>Dimmed</span></div></div><div><div><div>23</div></div><div><span>- </span><span>Italic</span></div></div><div><div><div>24</div></div><div><span>- </span><span>Underline</span></div></div><div><div><div>25</div></div><div><span>- </span><span>Reversed</span></div></div><div><div><div>26</div></div><div><span>- </span><span>Strikethrough</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div></section></section><section><h3>编辑器和终端框架<a href="#编辑器和终端框架"><span>#</span></a></h3><p><a href="https://expressive-code.com/key-features/frames/" target="_blank">编辑器和终端框架</a></p><section><h4>代码编辑器框架<a href="#代码编辑器框架"><span>#</span></a></h4><div><figure><figcaption><span>my-test-file.js</span></figcaption><pre><code><div><div><div>1</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'标题属性示例'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption><span>src/content/index.html</span></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>div</span><span>&gt;文件名注释示例&lt;/</span><span>div</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>终端框架<a href="#终端框架"><span>#</span></a></h4><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>echo</span><span> </span><span>"此终端框架没有标题"</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption><span>PowerShell 终端示例</span></figcaption><pre><code><div><div><div>1</div></div><div><span>Write-Output</span><span> </span><span>"这个有标题!"</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>覆盖框架类型<a href="#覆盖框架类型"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>echo</span><span> </span><span>"看，没有框架!"</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption><span>PowerShell Profile.ps1</span></figcaption><pre><code><div><div><div>1</div></div><div><span># 如果不覆盖，这将是一个终端框架</span></div></div><div><div><div>2</div></div><div><span>function</span><span> </span><span>Watch-Tail</span><span> { </span><span>Get-Content</span><span><span> </span><span>-</span><span>Tail </span></span><span>20</span><span><span> </span><span>-</span><span>Wait $args }</span></span></div></div><div><div><div>3</div></div><div><span>New-Alias</span><span> tail </span><span>Watch-Tail</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section></section><section><h3>文本和行标记<a href="#文本和行标记"><span>#</span></a></h3><p><a href="https://expressive-code.com/key-features/text-markers/" target="_blank">文本和行标记</a></p><section><h4>标记整行和行范围<a href="#标记整行和行范围"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// 第1行 - 通过行号定位</span></div></div><div><div><div>2</div></div><div><span>// 第2行</span></div></div><div><div><div>3</div></div><div><span>// 第3行</span></div></div><div><div><div>4</div></div><div><span>// 第4行 - 通过行号定位</span></div></div><div><div><div>5</div></div><div><span>// 第5行</span></div></div><div><div><div>6</div></div><div><span>// 第6行</span></div></div><div><div><div>7</div></div><div><span>// 第7行 - 通过范围 "7-8" 定位</span></div></div><div><div><div>8</div></div><div><span>// 第8行 - 通过范围 "7-8" 定位</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>选择行标记类型 (mark, ins, del)<a href="#选择行标记类型-mark-ins-del"><span>#</span></a></h4><div><figure><figcaption><span>line-markers.js</span></figcaption><pre><code><div><div><div>1</div></div><div><span>function</span><span> </span><span>demo</span><span>() {</span></div></div><div><div><div>2</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>'此行标记为已删除'</span><span>)</span></div></div><div><div><div>3</div></div><div><span>  </span><span>// 此行和下一行标记为已插入</span></div></div><div><div><div>4</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>'这是第二个插入行'</span><span>)</span></div></div><div><div><div>5</div></div><div>
</div></div><div><div><div>6</div></div><div><span>  </span><span>return</span><span> </span><span>'此行使用中性默认标记类型'</span></div></div><div><div><div>7</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>为行标记添加标签<a href="#为行标记添加标签"><span>#</span></a></h4><div><figure><figcaption><span>labeled-line-markers.jsx</span></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>button</span></div></div><div><div><div>2</div></div><div><span>  </span><span>role</span><span>=</span><span>"button"</span></div></div><div><div><div>3</div></div><div><span><span>  </span></span><span>{</span><span>...</span><span>props</span><span>}</span></div></div><div><div><div>4</div></div><div><span>  </span><span>value</span><span>=</span><span>{</span><span>value</span><span>}</span></div></div><div><div><div>5</div></div><div><span>  </span><span>className</span><span><span>=</span><span>{</span><span>buttonClassName</span><span>}</span></span></div></div><div><div><div>6</div></div><div><span>  </span><span>disabled</span><span>=</span><span>{</span><span>disabled</span><span>}</span></div></div><div><div><div>7</div></div><div><span>  </span><span>active</span><span>=</span><span>{</span><span>active</span><span>}</span></div></div><div><div><div>8</div></div><div><span>&gt;</span></div></div><div><div><div>9</div></div><div><span><span>  </span></span><span>{</span><span>children</span><span> </span><span>&amp;&amp;</span></div></div><div><div><div>10</div></div><div><span><span>    </span></span><span>!</span><span>active</span><span> </span><span>&amp;&amp;</span></div></div><div><div><div>11</div></div><div><span><span><span>    </span></span><span>(</span></span><span>typeof</span><span> </span><span>children</span><span> </span><span>===</span><span> </span><span>'string'</span><span> </span><span>?</span><span> &lt;</span><span>span</span><span>&gt;</span><span>{</span><span>children</span><span>}</span><span>&lt;/</span><span>span</span><span>&gt; </span><span>:</span><span> </span><span>children</span><span>)</span><span>}</span></div></div><div><div><div>12</div></div><div><span>&lt;/</span><span>button</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>在单独行上添加长标签<a href="#在单独行上添加长标签"><span>#</span></a></h4><div><div><div><figure><figcaption><span>labeled-line-markers.jsx</span><span>展开</span><span>收起</span></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>button</span></div></div><div><div><div>2</div></div><div><span>  </span><span>role</span><span>=</span><span>"button"</span></div></div><div><div><div>3</div></div><div><span><span>  </span></span><span>{</span><span>...</span><span>props</span><span>}</span></div></div><div><div><div>4</div></div><div>
</div></div><div><div><div>5</div></div><div><span>  </span><span>value</span><span>=</span><span>{</span><span>value</span><span>}</span></div></div><div><div><div>6</div></div><div><span>  </span><span>className</span><span><span>=</span><span>{</span><span>buttonClassName</span><span>}</span></span></div></div><div><div><div>7</div></div><div>
</div></div><div><div><div>8</div></div><div><span>  </span><span>disabled</span><span>=</span><span>{</span><span>disabled</span><span>}</span></div></div><div><div><div>9</div></div><div><span>  </span><span>active</span><span>=</span><span>{</span><span>active</span><span>}</span></div></div><div><div><div>10</div></div><div><span>&gt;</span></div></div><div><div><div>11</div></div><div>
</div></div><div><div><div>12</div></div><div><span><span>  </span></span><span>{</span><span>children</span><span> </span><span>&amp;&amp;</span></div></div><div><div><div>13</div></div><div><span><span>    </span></span><span>!</span><span>active</span><span> </span><span>&amp;&amp;</span></div></div><div><div><div>14</div></div><div><span><span><span>    </span></span><span>(</span></span><span>typeof</span><span> </span><span>children</span><span> </span><span>===</span><span> </span><span>'string'</span><span> </span><span>?</span><span> &lt;</span><span>span</span><span>&gt;</span><span>{</span><span>children</span><span>}</span><span>&lt;/</span><span>span</span><span>&gt; </span><span>:</span><span> </span><span>children</span><span>)</span><span>}</span></div></div><div><div><div>15</div></div><div><span>&lt;/</span><span>button</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div></section><section><h4>使用类似 diff 的语法<a href="#使用类似-diff-的语法"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>此行将标记为已插入</span></div></div><div><div><div>2</div></div><div><span>此行将标记为已删除</span></div></div><div><div><div>3</div></div><div><span>这是常规行</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>--- a/README.md</span></div></div><div><div><div>2</div></div><div><span>+++ b/README.md</span></div></div><div><div><div>3</div></div><div><span>@@ -1,3 +1,4 @@</span></div></div><div><div><div>4</div></div><div><span>+this is an actual diff file</span></div></div><div><div><div>5</div></div><div><span>-all contents will remain unmodified</span></div></div><div><div><div>6</div></div><div><span><span> </span></span><span>no whitespace will be removed either</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>结合语法高亮和类似 diff 的语法<a href="#结合语法高亮和类似-diff-的语法"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>function</span><span> </span><span>thisIsJavaScript</span><span>() {</span></div></div><div><div><div>2</div></div><div><span>  </span><span>// 整个块都会以 JavaScript 高亮显示，</span></div></div><div><div><div>3</div></div><div><span>  </span><span>// 并且我们仍然可以为其添加 diff 标记！</span></div></div><div><div><div>4</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>'要删除的旧代码'</span><span>)</span></div></div><div><div><div>5</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>'新的闪亮代码！'</span><span>)</span></div></div><div><div><div>6</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>标记行内的单独文本<a href="#标记行内的单独文本"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>function</span><span> </span><span>demo</span><span>() {</span></div></div><div><div><div>2</div></div><div><span>  </span><span>// 标记行内的任何给定文本</span></div></div><div><div><div>3</div></div><div><span>  </span><span>return</span><span> </span><span>'支持给定文本的多个匹配项'</span><span>;</span></div></div><div><div><div>4</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>正则表达式<a href="#正则表达式"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'单词 </span><mark><span>yes</span></mark><span> 和 </span><mark><span>yep</span></mark><span> 将被标记。'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>转义正斜杠<a href="#转义正斜杠"><span>#</span></a></h4><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>echo</span><span> </span><span>"Test"</span><span> &gt; </span><mark><span>/home/</span></mark><span>test.txt</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>选择内联标记类型 (mark, ins, del)<a href="#选择内联标记类型-mark-ins-del"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>function</span><span> </span><span>demo</span><span>() {</span></div></div><div><div><div>2</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>'这些是插入和删除的标记类型'</span><span>);</span></div></div><div><div><div>3</div></div><div><span>  </span><span>// return 语句使用默认标记类型</span></div></div><div><div><div>4</div></div><div><span>  </span><mark><span>return</span><span> </span><span>true</span><span>;</span></mark></div></div><div><div><div>5</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section></section><section><h3>自动换行<a href="#自动换行"><span>#</span></a></h3><p><a href="https://expressive-code.com/key-features/word-wrap/" target="_blank">自动换行</a></p><section><h4>为每个块配置自动换行<a href="#为每个块配置自动换行"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// 启用换行的示例</span></div></div><div><div><div>2</div></div><div><span>function</span><span> </span><span>getLongString</span><span>() {</span></div></div><div><div><div>3</div></div><div><span>  </span><span>return</span><span> </span><span>'这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'</span></div></div><div><div><div>4</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// wrap=false 的示例</span></div></div><div><div><div>2</div></div><div><span>function</span><span> </span><span>getLongString</span><span>() {</span></div></div><div><div><div>3</div></div><div><span>  </span><span>return</span><span> </span><span>'这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'</span></div></div><div><div><div>4</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h4>配置换行的缩进<a href="#配置换行的缩进"><span>#</span></a></h4><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// preserveIndent 示例（默认启用）</span></div></div><div><div><div>2</div></div><div><span>function</span><span> </span><span>getLongString</span><span>() {</span></div></div><div><div><div>3</div></div><div><span>  </span><span>return</span><span> </span><span>'这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'</span></div></div><div><div><div>4</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// preserveIndent=false 的示例</span></div></div><div><div><div>2</div></div><div><span>function</span><span> </span><span>getLongString</span><span>() {</span></div></div><div><div><div>3</div></div><div><span>  </span><span>return</span><span> </span><span>'这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'</span></div></div><div><div><div>4</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section></section></section>
<section><h2>可折叠部分<a href="#可折叠部分"><span>#</span></a></h2><p><a href="https://expressive-code.com/plugins/collapsible-sections/" target="_blank">可折叠部分</a></p><div><div><div><figure><figcaption></figcaption><pre><code><div><div><div></div></div><div><span></span><span></span><span>5 collapsed lines</span></div></div><div><div><div>1</div></div><div><span>// 所有这些样板设置代码将被折叠</span></div></div><div><div><div>2</div></div><div><span>import</span><span> { </span><span>someBoilerplateEngine</span><span> } </span><span>from</span><span> </span><span>'@example/some-boilerplate'</span></div></div><div><div><div>3</div></div><div><span>import</span><span> { </span><span>evenMoreBoilerplate</span><span> } </span><span>from</span><span> </span><span>'@example/even-more-boilerplate'</span></div></div><div><div><div>4</div></div><div>
</div></div><div><div><div>5</div></div><div><span>const</span><span> </span><span>engine</span><span> </span><span>=</span><span> </span><span>someBoilerplateEngine</span><span>(</span><span>evenMoreBoilerplate</span><span>())</span></div></div><div><div><div>6</div></div><div>
</div></div><div><div><div>7</div></div><div><span>// 这部分代码默认可见</span></div></div><div><div><div>8</div></div><div><span><span>engine</span><span>.</span></span><span>doSomething</span><span>(</span><span>1</span><span>, </span><span>2</span><span>, </span><span>3</span><span><span>, </span><span>calcFn</span><span>)</span></span></div></div><div><div><div>9</div></div><div>
</div></div><div><div><div>10</div></div><div><span>function</span><span> </span><span>calcFn</span><span>() {</span></div></div><div><div><div>11</div></div><div><span>  </span><span>// 您可以有多个折叠部分</span></div></div><div><div><div></div></div><div><span></span><span></span><span>3 collapsed lines</span></div></div><div><div><div>12</div></div><div><span>  </span><span>const</span><span> </span><span>a</span><span> </span><span>=</span><span> </span><span>1</span></div></div><div><div><div>13</div></div><div><span>  </span><span>const</span><span> </span><span>b</span><span> </span><span>=</span><span> </span><span>2</span></div></div><div><div><div>14</div></div><div><span>  </span><span>const</span><span> </span><span>c</span><span> </span><span>=</span><span><span> </span><span>a</span><span> </span></span><span>+</span><span><span> </span><span>b</span></span></div></div><div><div><div>15</div></div><div>
</div></div><div><div><div>16</div></div><div><span>  </span><span>// 这将保持可见</span></div></div><div><div><div>17</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>`计算结果: </span><span>${</span><span>a</span><span>}</span><span> + </span><span>${</span><span>b</span><span>}</span><span> = </span><span>${</span><span>c</span><span>}</span><span>`</span><span>)</span></div></div><div><div><div>18</div></div><div><span>  </span><span>return</span><span><span> </span><span>c</span></span></div></div><div><div><div>19</div></div><div><span>}</span></div></div><div><div><div>20</div></div><div>
</div></div><div><div><div></div></div><div><span></span><span></span><span>4 collapsed lines</span></div></div><div><div><div>21</div></div><div><span>// 直到块末尾的所有代码将再次被折叠</span></div></div><div><div><div>22</div></div><div><span><span>engine</span><span>.</span></span><span>closeConnection</span><span>()</span></div></div><div><div><div>23</div></div><div><span><span>engine</span><span>.</span></span><span>freeMemory</span><span>()</span></div></div><div><div><div>24</div></div><div><span><span>engine</span><span>.</span></span><span>shutdown</span><span>({ </span><span>reason</span><span>:</span><span> </span><span>'示例样板代码结束'</span><span> })</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div></section>
<section><h2>行号<a href="#行号"><span>#</span></a></h2><p><a href="https://expressive-code.com/plugins/line-numbers/" target="_blank">行号</a></p><section><h3>为每个块显示行号<a href="#为每个块显示行号"><span>#</span></a></h3><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>// 此代码块将显示行号</span></div></div><div><div><div>2</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'来自第2行的问候!'</span><span>)</span></div></div><div><div><div>3</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'我在第3行'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div><hr /><div><figure><figcaption></figcaption><pre><code><div><div><span>// 此块禁用行号</span></div></div><div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'你好?'</span><span>)</span></div></div><div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'抱歉，你知道我在第几行吗?'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h3>更改起始行号<a href="#更改起始行号"><span>#</span></a></h3><div><figure><figcaption></figcaption><pre><code><div><div><div>5</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'来自第5行的问候!'</span><span>)</span></div></div><div><div><div>6</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>'我在第6行'</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section></section>
<section><h2>Tab 代码块<a href="#tab-代码块"><span>#</span></a></h2><p>由 <a href="https://github.com/ITZSHOAIB/rehype-code-group" target="_blank">rehype-code-group</a> 提供，语法与 <a href="https://vitepress.dev/guide/markdown#code-groups" target="_blank">VitePress 代码组</a> 一致：用 <code>::: code-group labels=[...]</code> 包裹多个代码块，即可合并成一组标签页。</p><div><div><div></div><div>Note</div></div><div><p><code>labels=[...]</code> 中的标签按顺序对应组内的代码块，用英文逗号分隔；<code>:::</code> 与 <code>code-group</code> 之间的空格不能省略。</p></div></div><section><h3>基本用法<a href="#基本用法"><span>#</span></a></h3><div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>::: code-group labels=[code.js, code.py, code.html]</span></div></div><div><div><div>2</div></div><div>
</div></div><div><div><div>3</div></div><div><span>```js</span></div></div><div><div><div>4</div></div><div><span>export</span><span> </span><span>function</span><span> </span><span>greet</span><span><span>(</span><span>name</span><span>) {</span></span></div></div><div><div><div>5</div></div><div><span>  </span><span>return</span><span> </span><span>`Hello, </span><span>${</span><span>name</span><span>}</span><span>!`</span><span>;</span></div></div><div><div><div>6</div></div><div><span>}</span></div></div><div><div><div>7</div></div><div><span>```</span></div></div><div><div><div>8</div></div><div>
</div></div><div><div><div>9</div></div><div><span>```py</span></div></div><div><div><div>10</div></div><div><span>def</span><span> </span><span>greet</span><span><span>(</span><span>name</span><span>):</span></span></div></div><div><div><div>11</div></div><div><span>    </span><span>return</span><span> </span><span>f</span><span>"Hello, </span><span>{</span><span>name</span><span>}</span><span>!"</span></div></div><div><div><div>12</div></div><div><span>```</span></div></div><div><div><div>13</div></div><div>
</div></div><div><div><div>14</div></div><div><span>```html</span></div></div><div><div><div>15</div></div><div><span>&lt;</span><span>p</span><span>&gt;Hello, world!&lt;/</span><span>p</span><span>&gt;</span></div></div><div><div><div>16</div></div><div><span>```</span></div></div><div><div><div>17</div></div><div>
</div></div><div><div><div>18</div></div><div><span>:::</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div><p>渲染效果：</p><div><div>code.jscode.pycode.html</div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>export</span><span> </span><span>function</span><span> </span><span>greet</span><span><span>(</span><span>name</span><span>) {</span></span></div></div><div><div><div>2</div></div><div><span>  </span><span>return</span><span> </span><span>`Hello, </span><span>${</span><span>name</span><span>}</span><span>!`</span><span>;</span></div></div><div><div><div>3</div></div><div><span>}</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>def</span><span> </span><span>greet</span><span>(</span><span>name</span><span>):</span></div></div><div><div><div>2</div></div><div><span>    </span><span>return</span><span> </span><span>f</span><span>"Hello, </span><span>{</span><span>name</span><span>}</span><span>!"</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>p</span><span>&gt;Hello, world!&lt;/</span><span>p</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></section><section><h3>标签中使用 Emoji<a href="#标签中使用-emoji"><span>#</span></a></h3><p>标签支持 <a href="https://github.com/omnidan/node-emoji#readme" target="_blank">emoji 短代码</a>，构建时会自动转换成 emoji：</p><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>::: code-group labels=[:package: npm, :package: pnpm, :yarn: yarn]</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><div>📦 npm📦 pnpm🧶 yarn</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>npm</span><span> </span><span>create</span><span> </span><span>astro@latest</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>create</span><span> </span><span>astro@latest</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>yarn</span><span> </span><span>create</span><span> </span><span>astro</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></section><section><h3>与其他代码块特性组合<a href="#与其他代码块特性组合"><span>#</span></a></h3><p>组内仍是普通的 Expressive Code 代码块，标题、行号、行标记、折叠、终端框架等特性都可以照常使用。</p><div><div>配置文件终端折叠</div><div><div><figure><figcaption><span>astro.config.mjs</span></figcaption><pre><code><div><div><div>1</div></div><div><span>export</span><span> </span><span>default</span><span> {</span></div></div><div><div><div>2</div></div><div><span>  </span><span>theme</span><span>:</span><span> </span><span>"firefly"</span><span>,</span></div></div><div><div><div>3</div></div><div><span>  </span><span>codeGroup</span><span>:</span><span> </span><span>true</span><span>,</span></div></div><div><div><div>4</div></div><div><span>};</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption><span>部署</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>build</span><span> &amp;&amp; </span><span>pnpm</span><span> </span><span>preview</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div><div><div><figure><figcaption></figcaption><pre><code><div><div><div></div></div><div><span></span><span></span><span>3 collapsed lines</span></div></div><div><div><div>1</div></div><div><span>// 这三行默认折叠</span></div></div><div><div><div>2</div></div><div><span>import</span><span> { </span><span>a</span><span> } </span><span>from</span><span> </span><span>"a"</span><span>;</span></div></div><div><div><div>3</div></div><div><span>import</span><span> { </span><span>b</span><span> } </span><span>from</span><span> </span><span>"b"</span><span>;</span></div></div><div><div><div>4</div></div><div>
</div></div><div><div><div>5</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span><span>(</span><span>a</span><span>, </span><span>b</span><span>);</span></span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></section><section><h3>不止是代码块<a href="#不止是代码块"><span>#</span></a></h3><p>标签页内可以放任意内容，例如文字、列表或图片：</p><div><div>说明列表</div><div><p>这是一段普通的段落内容。</p></div><div><ul>
<li>列表项一</li>
<li>列表项二</li>
</ul></div></div><div><div><div></div><div>Tip</div></div><div><p>标签栏在构建期生成，默认展开第一项；支持鼠标点击与键盘 <kbd>←</kbd> / <kbd>→</kbd> / <kbd>Home</kbd> / <kbd>End</kbd> 切换。</p></div></div></section><section><h3>在提醒框内使用（MDX 组件）<a href="#在提醒框内使用mdx-组件"><span>#</span></a></h3><p><code>::: code-group</code> 和 <code>::: tip</code> 等 Docusaurus 风格提醒框都使用 <code>:::</code> 容器语法，而 micromark-directive 规定父子容器的冒号数必须不同，因此 <code>::: code-group</code> <strong>无法嵌套在 <code>::: tip</code> 等提醒框内</strong>（整块会失效）。</p><p>这种情况改用 MDX 组件 <a href="@/components/common/TabGroup.svelte"><code>TabGroup</code></a>：MDX 组件不经过 <code>:::</code> 指令解析，在提醒框内外都能正常使用，也方便日后扩展更多 UI 组件。把文章后缀改为 <code>.mdx</code>，从统一入口 <a href="@/components/firefly-mdx.ts"><code>@/components/firefly-mdx</code></a> 引入（可一次引入多个组件）：</p><div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>import</span><span> { </span><span>TabGroup</span><span> } </span><span>from</span><span> </span><span>"@/components/firefly-mdx"</span><span>;</span></div></div><div><div><div>2</div></div><div>
</div></div><div><div><div>3</div></div><div><span>:::tip</span></div></div><div><div><div>4</div></div><div>
</div></div><div><div><div>5</div></div><div><span>&lt;</span><span>TabGroup</span><span> </span><span>labels</span><span>=</span><span>{</span><span>[</span><span>"test.js"</span><span>, </span><span>"test.py"</span><span>]</span><span>}</span><span> </span><span>client</span><span>:</span><span>load</span><span>&gt;</span></div></div><div><div><div>6</div></div><div><span>  </span><span>```</span><span>js</span></div></div><div><div><div>7</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>1</span><span>)</span></div></div><div><div><div>8</div></div><div><span>  </span><span>```</span></div></div><div><div><div>9</div></div><div>
</div></div><div><div><div>10</div></div><div><span>  </span><span>```</span><span>py</span></div></div><div><div><div>11</div></div><div><span>  </span><span>print</span><span>(</span><span>"hello world"</span><span>)</span></div></div><div><div><div>12</div></div><div><span>  </span><span>```</span></div></div><div><div><div>13</div></div><div><span>&lt;/</span><span>TabGroup</span><span>&gt;</span></div></div><div><div><div>14</div></div><div>
</div></div><div><div><div>15</div></div><div><span>:::</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div><div><div><div></div><div>Tip</div></div><div><ul>
<li><code>labels</code> 数组给每个代码块声明标签，顺序一一对应</li>
<li>组件用 <code>client:load</code> 激活标签切换</li>
</ul></div></div></section></section>]]></content>
    </entry>
    <entry>
      <id>https://sidihuang.com/posts/firefly/</id>
      <title type="text">Firefly 一款清新美观的 Astro 博客主题模板</title>
      <published>1970-01-02T00:00:00.000Z</published>
      <updated>1970-01-02T00:00:00.000Z</updated>
      <author><name>Laopu</name></author>
      <link rel="alternate" href="https://sidihuang.com/posts/firefly/"/>
      <summary type="text">Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。</summary>
      <content type="html"><![CDATA[<section><h2>🌟 项目概述<a href="#-项目概述"><span>#</span></a></h2><p><strong>Firefly</strong> 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。</p><p><strong>🖥️在线预览： <a href="https://firefly.cuteleaf.cn/" target="_blank">Firefly - Demo site</a></strong></p><p><strong>📝Firefly使用文档： <a href="https://docs-firefly.cuteleaf.cn/" target="_blank">https://docs-firefly.cuteleaf.cn</a></strong></p><p><strong>⭐Firefly开源地址：<a href="https://github.com/CuteLeaf/Firefly" target="_blank">https://github.com/CuteLeaf/Firefly</a></strong></p><p><strong>⭐Fuwari开源地址：<a href="https://github.com/saicaca/fuwari" target="_blank">https://github.com/saicaca/fuwari</a></strong></p><a href="https://github.com/CuteLeaf/Firefly" target="_blank"><div><div><div><div></div><div>CuteLeaf</div></div><div>/</div><div>Firefly</div></div><div></div></div><div>🍀Firefly, fresh and aesthetic Astro blog theme template. </div><div><div>—</div><div>—</div><div>MIT</div><span>Astro</span></div></a><a href="https://github.com/saicaca/fuwari" target="_blank"><div><div><div><div></div><div>saicaca</div></div><div>/</div><div>fuwari</div></div><div></div></div><div>✨A static blog template built with Astro. </div><div><div>—</div><div>—</div><div>MIT</div><span>Astro</span></div></a><p></p><figure><img alt="Firefly" loading="lazy" width="2192" height="1233" src="/_astro/1.BQ4-k1kz_Z17x8Xz.webp" /><figcaption>Firefly</figcaption></figure><p></p></section>
<section><h2>🚀 技术架构<a href="#-技术架构"><span>#</span></a></h2><ul>
<li><strong>静态站点生成</strong>: 基于 Astro ，提供极快的加载速度和优秀的 SEO 优化</li>
<li><strong>TypeScript 支持</strong>: 完整的类型安全，提升开发体验和代码质量</li>
<li><strong>响应式设计</strong>: 使用 Tailwind CSS 构建，完美适配桌面端和移动端</li>
<li><strong>组件化开发</strong>: 支持 Astro、Svelte 组件，灵活可扩展</li>
</ul></section>
<section><h2>📖 配置说明<a href="#-配置说明"><span>#</span></a></h2><blockquote><p>📚 <strong>详细配置文档</strong>: 查看 <a href="https://docs-firefly.cuteleaf.cn/" target="_blank">Firefly 使用文档</a> 获取完整的配置指南</p></blockquote></section>]]></content>
    </entry>
    <entry>
      <id>https://sidihuang.com/posts/mdx-example/</id>
      <title type="text">MDX 格式文章示例</title>
      <published>1970-01-02T00:00:00.000Z</published>
      <updated>1970-01-02T00:00:00.000Z</updated>
      <author><name>Laopu</name></author>
      <link rel="alternate" href="https://sidihuang.com/posts/mdx-example/"/>
      <summary type="text">这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。</summary>
      <content type="html"><![CDATA[<div><div><div></div><div>Tip</div></div><div><p><a href="https://github.com/CuteLeaf/Firefly" target="_blank">Firefly</a> 支持 <code>MDX</code> 和 <code>Markdown</code> 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。</p></div></div>
<section><h2>Markdown 和 MDX 的区别<a href="#markdown-和-mdx-的区别"><span>#</span></a></h2><ul>
<li>Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。</li>
<li>MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。</li>
</ul>

<table><thead><tr><th>特性</th><th>Markdown</th><th>MDX</th></tr></thead><tbody><tr><td>基础语法</td><td>支持 (CommonMark)</td><td>支持 (CommonMark)</td></tr><tr><td>HTML 标签</td><td>支持</td><td>支持 (作为 JSX)</td></tr><tr><td>组件导入</td><td>不支持</td><td>支持 (import)</td></tr><tr><td>动态数据</td><td>不支持</td><td>支持 (JS 表达式)</td></tr><tr><td>样式定制</td><td>有限 (class/style)</td><td>灵活 (className/CSS-in-JS)</td></tr></tbody></table><hr /></section>
<section><h2>Firefly 内置的专属 MDX UI 组件<a href="#firefly-内置的专属-mdx-ui-组件"><span>#</span></a></h2><p>这里列出 Firefly 内置的 MDX UI 组件，方便在 MDX 文章中直接使用。</p><section><h3>Tab分组：<code>TabGroup</code><a href="#tab分组tabgroup"><span>#</span></a></h3><p>用于创建可切换的标签页，方便在文章中展示不同语言或不同版本的代码等等。</p><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>TabGroup</span><span> </span><span>labels</span><span>=</span><span>{</span><span>[</span><span>"test.js"</span><span>, </span><span>"test.py"</span><span>]</span><span>}</span><span> </span><span>client</span><span>:</span><span>load</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span>  </span><span>```</span><span>js</span></div></div><div><div><div>3</div></div><div><span><span>  </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>1</span><span>)</span></div></div><div><div><div>4</div></div><div><span>  </span><span>```</span></div></div><div><div><div>5</div></div><div>
</div></div><div><div><div>6</div></div><div><span>  </span><span>```</span><span>py</span></div></div><div><div><div>7</div></div><div><span>  </span><span>print</span><span>(</span><span>"hello world"</span><span>)</span></div></div><div><div><div>8</div></div><div><span>  </span><span>```</span></div></div><div><div><div>9</div></div><div><span>&lt;/</span><span>TabGroup</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><div>test.jstest.py</div> <div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>1</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>print</span><span>(</span><span>"hello world"</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div><hr /></section><section><h3>时间线：<code>Timeline</code> / <code>TimelineItem</code><a href="#时间线timeline--timelineitem"><span>#</span></a></h3>

<table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>date</code></td><td>否</td><td>时间标签，如 “2024-03-10”</td></tr><tr><td><code>title</code></td><td>否</td><td>条目标题</td></tr><tr><td><code>type</code></td><td>否</td><td>节点颜色，default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr><tr><td><code>icon</code></td><td>否</td><td>内置图标名，显示在圆点内：star / rocket / git / flag / book / heart / zap / bug / tag / calendar / code / edit</td></tr><tr><td>正文</td><td>否</td><td><code>&lt;TimelineItem&gt;</code> 标签内的内容，支持 Markdown</td></tr></tbody></table><div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Timeline</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span><span>  </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2026-08-16"</span><span> </span><span>title</span><span>=</span><span>"新版本发布"</span><span> </span><span>icon</span><span>=</span><span>"rocket"</span><span>&gt;</span></div></div><div><div><div>3</div></div><div><span><span>    </span></span><span>发布了全新版本，带来以下更新：</span></div></div><div><div><div>4</div></div><div>
</div></div><div><div><div>5</div></div><div><span><span>    </span></span><span>- 新增时间线组件</span></div></div><div><div><div>6</div></div><div><span><span>    </span></span><span>- 改进暗色主题</span></div></div><div><div><div>7</div></div><div>
</div></div><div><div><div>8</div></div><div><span><span>    </span></span><span>正文里支持 </span><span>**</span><span>Markdown</span><span>**</span><span> 内容。</span></div></div><div><div><div>9</div></div><div><span><span>  </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>10</div></div><div><span><span>  </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2025-11-02"</span><span> </span><span>title</span><span>=</span><span>"站点上线"</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span> </span><span>icon</span><span>=</span><span>"flag"</span><span>&gt;</span></div></div><div><div><div>11</div></div><div><span><span>    </span></span><span>欢迎来到我的博客。</span></div></div><div><div><div>12</div></div><div><span><span>  </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>13</div></div><div><span><span>  </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2025-06-15"</span><span> </span><span>title</span><span>=</span><span>"项目立项"</span><span> </span><span>type</span><span>=</span><span>"note"</span><span>&gt;</span></div></div><div><div><div>14</div></div><div><span><span>    </span></span><span>开始规划 Firefly 主题。</span></div></div><div><div><div>15</div></div><div><span><span>  </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>16</div></div><div><span>&lt;/</span><span>Timeline</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div><ol><li><div><span></span></div><div><div>2026-08-16</div><div>新版本发布</div><div><p>发布了全新版本，带来以下更新：</p><ul>
<li>新增时间线组件</li>
<li>改进暗色主题</li>
</ul><p>正文里支持 <strong>Markdown</strong> 内容。</p></div></div></li><li><div><span></span></div><div><div>2025-11-02</div><div>站点上线</div><div><p>欢迎来到我的博客。</p></div></div></li><li><div></div><div><div>2025-06-15</div><div>项目立项</div><div><p>开始规划 Firefly 主题。</p></div></div></li></ol><hr /></section><section><h3>步骤条：<code>Steps</code> / <code>StepItem</code><a href="#步骤条steps--stepitem"><span>#</span></a></h3><p>编号步骤条，适合教程、部署流程。编号自动生成，无需手动传序号。</p>

<table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>title</code></td><td>否</td><td>步骤标题</td></tr><tr><td><code>type</code></td><td>否</td><td>编号圆颜色，default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr><tr><td><code>icon</code></td><td>否</td><td>内置图标名，有图标时显示图标而非数字（star / rocket / git / flag / book / heart / zap / bug / tag / calendar / code / edit）</td></tr><tr><td>正文</td><td>否</td><td><code>&lt;StepItem&gt;</code> 标签内的内容，支持 Markdown</td></tr></tbody></table><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Steps</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span><span>  </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"安装依赖"</span><span>&gt;</span></div></div><div><div><div>3</div></div><div><span><span>    </span></span><span>运行 </span><span>`</span><span>pnpm install</span><span>`</span><span>。</span></div></div><div><div><div>4</div></div><div><span><span>  </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>5</div></div><div><span><span>  </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"启动开发服务器"</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span> </span><span>icon</span><span>=</span><span>"rocket"</span><span>&gt;</span></div></div><div><div><div>6</div></div><div><span><span>    </span></span><span>运行 </span><span>`</span><span>pnpm dev</span><span>`</span><span>，打开 </span><span>`</span><span>localhost:4321</span><span>`</span><span>。</span></div></div><div><div><div>7</div></div><div><span><span>  </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>8</div></div><div><span><span>  </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"编写文章"</span><span>&gt;</span></div></div><div><div><div>9</div></div><div><span><span>    </span></span><span>在 </span><span>`</span><span>src/content/posts/</span><span>`</span><span> 新建 </span><span>`</span><span>.mdx</span><span>`</span><span> 文章。</span></div></div><div><div><div>10</div></div><div><span><span>  </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>11</div></div><div><span>&lt;/</span><span>Steps</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><ol><li><span></span><div><div>安装依赖</div><div><p>运行 <code>pnpm install</code>。</p></div></div></li><li><span><span></span></span><div><div>启动开发服务器</div><div><p>运行 <code>pnpm dev</code>，打开 <code>localhost:4321</code>。</p></div></div></li><li><span></span><div><div>编写文章</div><div><p>在 <code>src/content/posts/</code> 新建 <code>.mdx</code> 文章。</p></div></div></li></ol><hr /></section><section><h3>徽章：<code>Badge</code><a href="#徽章badge"><span>#</span></a></h3><p>内联彩色小徽章，可嵌在段落或标题里。</p>

<table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>type</code></td><td>否</td><td>default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr></tbody></table><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Badge</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span>&gt;提示&lt;/</span><span>Badge</span><span>&gt; &lt;</span><span>Badge</span><span> </span><span>type</span><span>=</span><span>"warning"</span><span>&gt;注意&lt;/</span><span>Badge</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><span>新功能</span><span>提示</span><span>笔记</span><span>重要</span><span>注意</span><span>危险</span><hr /><p>更多信息，请查看 <a href="https://mdxjs.com/" target="_blank">MDX 文档</a></p></section></section>]]></content>
    </entry>
    <entry>
      <id>https://sidihuang.com/posts/video/</id>
      <title type="text">在文章中嵌入视频</title>
      <published>1970-01-01T00:00:00.000Z</published>
      <updated>1970-01-01T00:00:00.000Z</updated>
      <author><name>Laopu</name></author>
      <link rel="alternate" href="https://sidihuang.com/posts/video/"/>
      <summary type="text">这篇文章演示如何在博客文章中嵌入视频。</summary>
      <content type="html"><![CDATA[<p>只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。</p>
<div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>---</span></div></div><div><div><div>2</div></div><div><span>title</span><span>: </span><span>在文章中嵌入视频</span></div></div><div><div><div>3</div></div><div><span>published</span><span>: </span><span>2023-10-19</span></div></div><div><div><div>4</div></div><div><span>// ...</span></div></div><div><div><div>5</div></div><div><span>---</span></div></div><div><div><div>6</div></div><div>
</div></div><div><div><div>7</div></div><div><span>&lt;iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div>
<section><h2>YouTube<a href="#youtube"><span>#</span></a></h2></section>
<section><h2>Bilibili<a href="#bilibili"><span>#</span></a></h2> </section>]]></content>
    </entry>
</feed>
