index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>毕少侠</title><link>https://geekswg.js.cool/</link><description>博客：探索、发现、分享 By geekswg-[毕少侠]</description><generator>Hugo 0.160.1 &amp; FixIt v0.4.4-20260308100717-fe7105a3</generator><language>zh-CN</language><managingEditor>geekswg@qq.com (geekswg)</managingEditor><webMaster>geekswg@qq.com (geekswg)</webMaster><copyright>geekswg &amp; 毕少侠</copyright><lastBuildDate>Sat, 07 Mar 2026 15:45:17 +0800</lastBuildDate><atom:link href="https://geekswg.js.cool/index.xml" rel="self" type="application/rss+xml"/><item><title>Notes/常用笔记</title><link>https://geekswg.js.cool/posts/2026/comm-note/</link><pubDate>Sat, 07 Mar 2026 15:01:09 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/comm-note/</guid><category domain="https://geekswg.js.cool/categories/notes/">Notes</category><description>&lt;h2 class="heading-element" id="git"&gt;&lt;span&gt;git&lt;/span&gt;
 &lt;a href="#git" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;git clone --recursive https://github.com/geekswg/blog-fixit.git
# 如果已经克隆了仓库但没有初始化子模块，可以使用以下命令：
git submodule update --init&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="hugo"&gt;&lt;span&gt;hugo&lt;/span&gt;
 &lt;a href="#hugo" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;新建文章&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;hugo new posts/notes/comm-note.md&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;启动&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;hugo server -e production&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="windows"&gt;&lt;span&gt;windows&lt;/span&gt;
 &lt;a href="#windows" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="激活"&gt;&lt;span&gt;激活&lt;/span&gt;
 &lt;a href="#%e6%bf%80%e6%b4%bb" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;激活 Windows&lt;/p&gt;
&lt;p&gt;以管理员模式启动 PowerShell 点击“开始”，搜索“PowerShell”，右键选择“以管理员身份运行”。
输入以下命令并回车&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;irm https://get.activated.win | iex&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;系统会提示选择激活方式，输入 1（数字许可证激活，HWID方式），永久激活 Windows。
完成激活 当看到“Successful”提示时，关闭窗口即可完成激活。&lt;/p&gt;</description></item><item><title>Hugo博客添加作者声明</title><link>https://geekswg.js.cool/posts/2026/hugo-add-author-statement/</link><pubDate>Tue, 03 Mar 2026 18:14:12 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/hugo-add-author-statement/</guid><category domain="https://geekswg.js.cool/categories/dev/">开发</category><description>&lt;p&gt;给你的博客添加一个作者声明，类似抖音上，发布作品时添加的一声明类似的功能，告诉读者这是原创作品，转载时需要注明出处，或者声明是AI共创，或者声明内容来源网络。&lt;/p&gt;
&lt;h2 class="heading-element" id="使用方法"&gt;&lt;span&gt;使用方法&lt;/span&gt;
 &lt;a href="#%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;在front-matter中添加author-statement字段，值为你想要展示的声明内容。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;---
author-statement:
 type: CUSTOM # 声明类型，
 content: &amp;#34;AI共创，Github Copilot实现代码生成&amp;#34;
---&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;作者声明类型有以下几种：&lt;/p&gt;
&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;声明类型&lt;/th&gt;
 &lt;th&gt;英文翻译&lt;/th&gt;
 &lt;th&gt;建议缩写&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;原创内容&lt;/td&gt;
 &lt;td&gt;Original Content / Creation&lt;/td&gt;
 &lt;td&gt;ORIG 或 ORIGINAL&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;虚构演绎&lt;/td&gt;
 &lt;td&gt;Fictional Content / Dramatization&lt;/td&gt;
 &lt;td&gt;FIC 或 DRM&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;内容由AI生成&lt;/td&gt;
 &lt;td&gt;AI-Generated Content&lt;/td&gt;
 &lt;td&gt;AIGC (行业通用标准缩写)&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;取材网络&lt;/td&gt;
 &lt;td&gt;Content Sourced from the Internet&lt;/td&gt;
 &lt;td&gt;SFI 或 WEB&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;个人观点&lt;/td&gt;
 &lt;td&gt;Personal Opinions&lt;/td&gt;
 &lt;td&gt;PO 或 OPN&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;危险提示&lt;/td&gt;
 &lt;td&gt;Danger Warning&lt;/td&gt;
 &lt;td&gt;DANGER 或 RISK&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;自定义声明&lt;/td&gt;
 &lt;td&gt;Custom Statement&lt;/td&gt;
 &lt;td&gt;CUSTOM&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 class="heading-element" id="实现方法"&gt;&lt;span&gt;实现方法&lt;/span&gt;
 &lt;a href="#%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%b3%95" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;创建作者声明html模板，路径为layouts/partials/custom/author-statement.html，内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/hugo-add-author-statement.md:46:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;在你自己的博客模板中，引入模板文件即可。&lt;/p&gt;</description></item><item><title>代码块功能增强</title><link>https://geekswg.js.cool/posts/2026/codeblock-demo/</link><pubDate>Sun, 25 Jan 2026 16:18:21 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/codeblock-demo/</guid><category domain="https://geekswg.js.cool/categories/theme/">theme</category><description>&lt;p&gt;测试 codeblock 代码块增强功能。参考主题的 render-codeblock-timeline，编写一个 render-codeblock-fromfile 功能，支持从文件中加载代码片段并高亮显示，自动检测语言类型。&lt;/p&gt;
&lt;h2 class="heading-element" id="基本语法"&gt;&lt;span&gt;基本语法&lt;/span&gt;
 &lt;a href="#%e5%9f%ba%e6%9c%ac%e8%af%ad%e6%b3%95" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;在 Markdown 中插入 fromfile 代码块（推荐格式）：&lt;/p&gt;
&lt;p&gt;用法 1（属性列表写法yml格式）：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```fromfile
file: &amp;#34;/js/flyfish.js&amp;#34;
lines: &amp;#34;1-12&amp;#34;
lang: &amp;#34;javascript&amp;#34;
```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;用法 2（短代码参数写法）：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```fromfile{file=&amp;#34;/js/flyfish.js&amp;#34; lines=&amp;#34;2-6&amp;#34; lang=&amp;#34;javascript&amp;#34;}
xxx
```&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;file&lt;/code&gt; 为必填，指向要展示的文件路径。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;lines&lt;/code&gt; 为可选，格式为 &lt;code&gt;起始-结束&lt;/code&gt;（含首尾行）。未提供时默认展示整个文件。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;lang&lt;/code&gt; 为可选，指定代码块的语言类型。未提供时自动检测。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="参数说明"&gt;&lt;span&gt;参数说明&lt;/span&gt;
 &lt;a href="#%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;参数&lt;/th&gt;
 &lt;th&gt;是否必填&lt;/th&gt;
 &lt;th&gt;说明&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;file&lt;/td&gt;
 &lt;td&gt;是&lt;/td&gt;
 &lt;td&gt;文件路径支持站点目录下所有文件 /xxx/xxx.xx&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;lines&lt;/td&gt;
 &lt;td&gt;否&lt;/td&gt;
 &lt;td&gt;要展示的行区间，格式 &lt;code&gt;start-end&lt;/code&gt;，包含起止行。留空则展示全部。&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;lang&lt;/td&gt;
 &lt;td&gt;否&lt;/td&gt;
 &lt;td&gt;代码语言类型，未提供则自动检测。&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;fromfile 路径支持说明：
理论上支持站点目录下的所有文件路径，包括但不限于：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;/static/&lt;/li&gt;
&lt;li&gt;/layouts/&lt;/li&gt;
&lt;li&gt;/content/&lt;/li&gt;
&lt;li&gt;/assets/&lt;/li&gt;
&lt;li&gt;/config/&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="示例"&gt;&lt;span&gt;示例&lt;/span&gt;
 &lt;a href="#%e7%a4%ba%e4%be%8b" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;读取 static 目录下的 JS 文件并截取 1-20 行：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-javascript"&gt;/**
 * 源码来自互联网，作者不详
 * @modified by Lruihao 2024-05-21 移除依赖 jQuery
 * @description 一个鱼游动的动画效果
 */
const RENDERER = {
 POINT_INTERVAL: 5,
 FISH_COUNT: 3,
 MAX_INTERVAL_COUNT: 50,
 INIT_HEIGHT_RATE: 0.5,
 THRESHOLD: 50,
 FISH_COLOR: &amp;amp;#39;#ff0000&amp;amp;#39;, // 鱼的颜色，可以修改为其他颜色
 FISH_BACKGROUND_LIGHT: &amp;amp;#39;rgb(0 119 190 / 8%)&amp;amp;#39;,
 FISH_BACKGROUND_DARK: &amp;amp;#39;rgb(255 255 255 / 8%)&amp;amp;#39;,
 THEME_IS_DARK: false, // 这里假设 fixit.isDark 是一个布尔值，表示当前是否为暗色主题
 FISH_STYLE: `
 .footer {
 position: relative;
 }
 #flyfish {&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;读取站点/layouts/下的模板文件：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-html"&gt;{{- define &amp;amp;#34;title&amp;amp;#34; -}}
 {{- .Title }} {{ .Site.Params.titleDelimiter }} {{ .Site.Title -}}
{{- end -}}

{{- define &amp;amp;#34;content&amp;amp;#34; -}}
&amp;amp;lt;!-- 引入 stats 样式 --&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;#34;stylesheet&amp;amp;#34; href=&amp;amp;#34;{{ &amp;amp;#34;/stats/stats.css&amp;amp;#34; | relURL }}&amp;amp;#34;&amp;amp;gt;

{{- /* Calculate statistics for rendering */ -}}
{{- /* Article count */ -}}
{{ $articleCount := len .Site.RegularPages }}
{{ if eq $articleCount 0 }}
 {{ $articleCount = 1 }}
{{ end }}

{{- /* Page count */ -}}
{{ $pageCount := len (where .Site.Pages &amp;amp;#34;Type&amp;amp;#34; &amp;amp;#34;=&amp;amp;#34; &amp;amp;#34;page&amp;amp;#34;) }}

{{- /* DLogs count from content/dlogs/dlogs.yml */ -}}
{{ $dlogsCount := 0 }}
{{ $dlogsFilePath := &amp;amp;#34;content/dlogs/dlogs.yml&amp;amp;#34; }}
{{ with os.ReadFile $dlogsFilePath | transform.Unmarshal }}
 {{ $dlogsData := .dlogs | default . }}
 {{ with $dlogsData.list }}
 {{ $dlogsCount = len . }}
 {{ end }}
{{ end }}
{{ $dlogsUrl := default &amp;amp;#34;/dlogs/&amp;amp;#34; }}
{{ $tagsUrl := default &amp;amp;#34;/tags/&amp;amp;#34; }}
{{ $categoriesUrl := default &amp;amp;#34;/categories/&amp;amp;#34; }}
{{ $postsUrl := default &amp;amp;#34;/posts/&amp;amp;#34; }}
{{ $friendsUrl := default &amp;amp;#34;/friends/&amp;amp;#34; }}

{{- /* Category and tag counts */ -}}
{{ $categories := slice }}
{{ $tags := slice }}
{{ range .Site.RegularPages }}
 {{ if .Params.categories }}
 {{ $categories = union $categories .Params.categories }}
 {{ end }}
 {{ if .Params.tags }}
 {{ $tags = union $tags .Params.tags }}
 {{ end }}
{{ end }}
{{ $categoryCount := len $categories }}
{{ $tagCount := len $tags }}

{{- /* Total word count */ -}}
{{ $scratch := newScratch }}
{{ range (where .Site.Pages &amp;amp;#34;Kind&amp;amp;#34; &amp;amp;#34;page&amp;amp;#34;) }}
 {{ $scratch.Add &amp;amp;#34;total&amp;amp;#34; .WordCount }}
{{ end }}
{{ $totalWords := $scratch.Get &amp;amp;#34;total&amp;amp;#34; }}

{{- /* Stats for year/category charts */ -}}
{{ $stats := slice }}
{{ range .Site.RegularPages }}
 {{ $stats = $stats | append (dict &amp;amp;#34;date&amp;amp;#34; .Date &amp;amp;#34;categories&amp;amp;#34; .Params.categories &amp;amp;#34;year&amp;amp;#34; (.Date.Format &amp;amp;#34;2006&amp;amp;#34;) &amp;amp;#34;month&amp;amp;#34; (.Date.Format &amp;amp;#34;2006-01&amp;amp;#34;) &amp;amp;#34;hour&amp;amp;#34; (.Date.Format &amp;amp;#34;15&amp;amp;#34;) &amp;amp;#34;week&amp;amp;#34; (.Date.Format &amp;amp;#34;Monday&amp;amp;#34;) &amp;amp;#34;count&amp;amp;#34; .WordCount &amp;amp;#34;slug&amp;amp;#34; .Slug &amp;amp;#34;title&amp;amp;#34; .Title) }}
{{ end }}

{{- /* Friends links count */ -}}
{{ $linkCount := 0 }}
{{ $friendsFile := site.Data.friends }}
{{ if $friendsFile }}
 {{ $linkCount = len $friendsFile }}
{{ end }}

{{- /* Stats data from stats.json */ -}}
{{ $steamGameCount := &amp;amp;#34;7&amp;amp;#34; }}
{{ $steamUrl := &amp;amp;#34;https://steamcommunity.com/id/geekswg&amp;amp;#34; }}
{{ $githubUrl := &amp;amp;#34;https://github.com/geekswg/blog-fixit&amp;amp;#34; }}
{{ $totalCommits := 1024 }}
{{ $lastCommitDate := time.Now.Format &amp;amp;#34;2006-01-02&amp;amp;#34; }}
{{ $commitHashLong := &amp;amp;#34;master&amp;amp;#34; }}
{{ $commitHashShort := &amp;amp;#34;master&amp;amp;#34; }}
{{ $repoSize := 1024000 }} 

{{ with resources.Get &amp;amp;#34;data/stats/stats.json&amp;amp;#34; }}
 {{ with . | transform.Unmarshal }}
 {{ $steamGameCount = .steam_game_owner_count | default $steamGameCount }}
 {{ $steamUrl = .steam_url | default $steamUrl }}
 {{ $githubUrl = .github_url | default $githubUrl }}
 {{ $totalCommits = .github_commits | default $totalCommits }}
 {{ $lastCommitDate = .github_last_commit | default $lastCommitDate }}
 {{ $commitHashLong = .github_hash_long | default $commitHashLong }}
 {{ $commitHashShort = .github_hash_short | default $commitHashShort }}
 {{ $repoSize = .github_repo_size | default $repoSize }}
 {{ end }}
{{ end }}

{{- /* Convert repo size from KB to MB/GB */ -}}
{{ $sizeInMB := div (float $repoSize) 1024 }}
{{ if ge $sizeInMB 1000 }}
 {{ $repoSize = printf &amp;amp;#34;%.2f GB&amp;amp;#34; (div $sizeInMB 1024) }}
{{ else }}
 {{ $repoSize = printf &amp;amp;#34;%.2f MB&amp;amp;#34; $sizeInMB }}
{{ end }}

&amp;amp;lt;article class=&amp;amp;#34;page single special&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;header text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h1 class=&amp;amp;#34;text-center single-title animate__animated animate__pulse animate__faster&amp;amp;#34;&amp;amp;gt;{{ .Title }}&amp;amp;lt;/h1&amp;amp;gt;
 
 {{ partial &amp;amp;#34;custom/busuanzi.html&amp;amp;#34; . }}
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;noscript&amp;amp;gt;
 Please enable JavaScript to view the Stat page.
 &amp;amp;lt;/noscript&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;content&amp;amp;#34; id=&amp;amp;#34;content&amp;amp;#34;&amp;amp;gt;
 {{ .Content }}
 &amp;amp;lt;div class=&amp;amp;#34;gap-6 mb-14&amp;amp;#34; data-pagefind-ignore=&amp;amp;#34;all&amp;amp;#34;&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;article-content max-w-full mb-20&amp;amp;#34;&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;grid grid-cols-2 md:grid-cols-4 gap-3 my-6&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium text-zinc-900 dark:text-zinc-100&amp;amp;#34;&amp;amp;gt;文章&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 20 20&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M13 0a2 2 0 0 1 2 2H6a2 2 0 0 0-2 2v12a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M18 5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2zm-7 5H7V5h4zm5-4h-4V5h4zm0 2h-4V7h4zm0 2h-4V9h4zm0 2H7v-1h9zm0 2H7v-1h9zm0 2H7v-1h9z&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex flex-col items-start&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $postsUrl }}&amp;amp;#34; class=&amp;amp;#34;text-3xl font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors duration-200 no-underline&amp;amp;#34;&amp;amp;gt;{{- lang.FormatNumber 0 (default 0 $articleCount) -}}&amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium&amp;amp;#34;&amp;amp;gt;页面&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 48 48&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;g fill=&amp;amp;#34;none&amp;amp;#34; stroke=&amp;amp;#34;currentColor&amp;amp;#34; stroke-linecap=&amp;amp;#34;round&amp;amp;#34; stroke-linejoin=&amp;amp;#34;round&amp;amp;#34; stroke-width=&amp;amp;#34;3&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path d=&amp;amp;#34;M36.91 3.486c2.546.223 4.45 2.212 4.627 4.762c.225 3.227.463 8.38.463 15.752s-.238 12.525-.463 15.752c-.177 2.55-2.081 4.539-4.627 4.762C34.12 44.76 29.885 45 24 45s-10.121-.24-12.91-.486c-2.546-.223-4.45-2.212-4.627-4.762C6.238 36.525 6 31.372 6 24s.238-12.525.463-15.752c.177-2.55 2.081-4.539 4.627-4.762C13.88 3.24 18.115 3 24 3s10.121.24 12.91.486M42 24H6&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;path d=&amp;amp;#34;M41.45 40.418c-4.077-4.07-6.887-6.31-8.644-7.521c-1.42-.98-3.172-.82-4.495.29c-1.543 1.293-4.03 3.531-7.811 7.313a183 183 0 0 0-4.217 4.345M18 33a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-5-16h22m-22-6.5h12&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/g&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex items-end justify-between&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-3xl font-bold&amp;amp;#34;&amp;amp;gt;{{- $pageCount | default 0 -}}&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium text-zinc-900 dark:text-zinc-100&amp;amp;#34;&amp;amp;gt;日常&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 24 24&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5M4 8a4 4 0 1 1 8 0a4 4 0 0 1-8 0m13-.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M14 9a3 3 0 1 1 6 0a3 3 0 0 1-6 0M2 16.25A2.25 2.25 0 0 1 4.25 14h7.5A2.25 2.25 0 0 1 14 16.25v.106l-1.509 1.509a3.7 3.7 0 0 0-.97 1.712l-.194.779C10.485 20.75 9.397 21 8 21c-2.828 0-4.39-1.025-5.208-2.195a4.5 4.5 0 0 1-.778-2.07A3 3 0 0 1 2 16.529v-.278m1.5.245v.012l.007.08c.007.074.023.188.055.329c.066.281.198.656.459 1.029C4.514 18.65 5.578 19.5 8 19.5s3.486-.85 3.98-1.555a3 3 0 0 0 .513-1.358l.006-.08l.001-.012v-.245a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75zm15.6-3.826l-5.903 5.903a2.7 2.7 0 0 0-.706 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.902-5.902A2.286 2.286 0 0 0 19.1 12.67&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex flex-col items-start&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $dlogsUrl }}&amp;amp;#34; class=&amp;amp;#34;text-3xl font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors duration-200 no-underline&amp;amp;#34;&amp;amp;gt;{{- $dlogsCount | default 0 -}}&amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium text-zinc-900 dark:text-zinc-100&amp;amp;#34;&amp;amp;gt;分类列表&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 24 24&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m10 0h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1M10 13H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1m7 0a4 4 0 1 1-3.995 4.2L13 17l.005-.2A4 4 0 0 1 17 13&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex flex-col items-start&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $categoriesUrl }}&amp;amp;#34; class=&amp;amp;#34;text-3xl font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors duration-200 no-underline&amp;amp;#34;&amp;amp;gt;{{- $categoryCount | default 0 -}}&amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium&amp;amp;#34;&amp;amp;gt;系列文章&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 20 20&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M13.981 2H6.018s-.996 0-.996 1h9.955c0-1-.996-1-.996-1m2.987 3c0-1-.995-1-.995-1H4.027s-.995 0-.995 1v1h13.936zm1.99 1l-.588-.592V7H1.63V5.408L1.041 6C.452 6.592.03 6.75.267 8c.236 1.246 1.379 8.076 1.549 9c.186 1.014 1.217 1 1.217 1h13.936s1.03.014 1.217-1c.17-.924 1.312-7.754 1.549-9c.235-1.25-.187-1.408-.777-2M14 11.997c0 .554-.449 1.003-1.003 1.003H7.003A1.003 1.003 0 0 1 6 11.997V10h1v2h6v-2h1z&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex items-end justify-between&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-3xl font-bold&amp;amp;#34;&amp;amp;gt;3&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium text-zinc-900 dark:text-zinc-100&amp;amp;#34;&amp;amp;gt;标签&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 24 24&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;g fill=&amp;amp;#34;none&amp;amp;#34; stroke=&amp;amp;#34;currentColor&amp;amp;#34; stroke-linecap=&amp;amp;#34;round&amp;amp;#34; stroke-linejoin=&amp;amp;#34;round&amp;amp;#34; stroke-width=&amp;amp;#34;2&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path d=&amp;amp;#34;M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1zM2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;circle cx=&amp;amp;#34;10.5&amp;amp;#34; cy=&amp;amp;#34;6.5&amp;amp;#34; r=&amp;amp;#34;.5&amp;amp;#34; fill=&amp;amp;#34;currentColor&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/g&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex flex-col items-start&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $tagsUrl }}&amp;amp;#34; class=&amp;amp;#34;text-3xl font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors duration-200 no-underline&amp;amp;#34;&amp;amp;gt;{{- lang.FormatNumber 0 (default 0 $tagCount) -}}&amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium text-zinc-900 dark:text-zinc-100&amp;amp;#34;&amp;amp;gt;友情链接&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.3rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 1792 1536&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M1792 1120v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832q0-52 38-90t90-38h512V512h-96q-40 0-68-28t-28-68V96q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex flex-col items-start&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $friendsUrl }}&amp;amp;#34; class=&amp;amp;#34;text-3xl font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors duration-200 no-underline&amp;amp;#34;&amp;amp;gt;{{- $linkCount | default 36 -}}&amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc rounded-xl shadow-md p-3 border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-[#1c2128] transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex justify-between mb-0 items-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-lg font-medium&amp;amp;#34;&amp;amp;gt;博客字数&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;h-8 w-8 rounded-lg stats-icon-bg flex items-center justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;stats-icon-color&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;1.5rem&amp;amp;#34; height=&amp;amp;#34;1.5rem&amp;amp;#34; viewBox=&amp;amp;#34;0 0 256 256&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M200 24H72a16 16 0 0 0-16 16v24H40a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h16v24a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m-40 80h40v48h-40ZM72 40h128v48h-40v-8a16 16 0 0 0-16-16H72ZM40 80h104v96H40Zm32 136v-24h72a16 16 0 0 0 16-16v-8h40v48Zm-3.76-62.06l-12-48a8 8 0 1 1 15.52-3.88l6.76 27l6.32-12.66a8 8 0 0 1 14.32 0l6.32 12.66l6.76-27a8 8 0 0 1 15.52 3.88l-12 48a8 8 0 0 1-6.89 6a9 9 0 0 1-.87.05a8 8 0 0 1-7.16-4.42L92 137.89l-8.84 17.69a8 8 0 0 1-14.92-1.64&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex items-end justify-between&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-3xl font-bold&amp;amp;#34;&amp;amp;gt;{{- lang.FormatNumber 0 (default 0 $totalWords) -}}&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;stats-cards grid grid-cols-1 md:grid-cols-3 gap-4 my-20&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc-100 dark:bg-zinc-800 rounded-xl shadow-md overflow-hidden transition-colors duration-200 hover:shadow-lg mb-4 flex flex-col h-full&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;h-32 relative flex-shrink-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 bg-gradient-to-b from-zinc-900 to-zinc-600&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 flex items-center justify-center&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;64&amp;amp;#34; height=&amp;amp;#34;64&amp;amp;#34; viewBox=&amp;amp;#34;0 0 128 128&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;#ff4088&amp;amp;#34; d=&amp;amp;#34;m71.2 8.5l36.7 21.3c4.3 2.5 7 7.2 7 12.2v43.7c0 5.6-3 10.7-7.8 13.4l-36.4 20.5c-4.8 2.7-10.7 2.7-15.5-.1l-33.5-19.3c-5.3-3-8.5-8.6-8.5-14.7V44.1c0-6.1 3.2-11.8 8.4-15L54.4 8.8c5.1-3.2 11.6-3.3 16.8-.3&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;#c9177e&amp;amp;#34; d=&amp;amp;#34;M63 126c-3.5 0-6.9-.9-10-2.7L19.5 104c-6.6-3.8-10.7-10.9-10.7-18.5V44.1c0-7.7 3.9-14.6 10.4-18.7L52.1 5.1c6.5-4 14.6-4.1 21.2-.3L110 26.1c5.7 3.3 9.2 9.4 9.2 15.9v43.7c0 7.1-3.8 13.7-10 17.2l-36.4 20.5c-3 1.7-6.4 2.6-9.8 2.6m0-115.3c-2.2 0-4.4.6-6.3 1.8l-33 20.3c-4 2.4-6.3 6.7-6.3 11.3v41.5c0 4.5 2.4 8.7 6.3 11l33.5 19.3c3.5 2 7.8 2 11.3.1l36.4-20.5c3.5-2 5.6-5.6 5.6-9.6V42.1c0-3.5-1.9-6.7-4.9-8.5L69 12.3c-1.8-1.1-3.9-1.6-6-1.6&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;#fff&amp;amp;#34; d=&amp;amp;#34;M38.6 96.9V30.5h13.9v24.2h23V30.5h13.9v66.4H75.5v-29h-23v29z&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-10&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-3 left-4&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-xl font-bold text-zinc-50&amp;amp;#34;&amp;amp;gt;Analytics&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;text-sm text-zinc-200&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;p-4 bg-zinc-50 dark:bg-zinc-900 flex-grow flex flex-col min-h-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-2 overflow-x-hidden flex-shrink-0&amp;amp;#34;&amp;amp;gt;已停止使用网站统计工具。&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex w-full justify-between items-center gap-2&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;浏览量&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;#34;line-through decoration-2 cursor-not-allowed text-zinc-400 dark:text-zinc-600&amp;amp;#34;&amp;amp;gt;&amp;amp;amp;nbsp;999&amp;amp;amp;nbsp;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;sup class=&amp;amp;#34;text-zinc-400 dark:text-zinc-600&amp;amp;#34;&amp;amp;gt;&amp;#43;&amp;amp;lt;/sup&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;评论数&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;#34;line-through decoration-2 cursor-not-allowed text-zinc-400 dark:text-zinc-600&amp;amp;#34;&amp;amp;gt;&amp;amp;amp;nbsp;999&amp;amp;amp;nbsp;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;sup class=&amp;amp;#34;text-zinc-400 dark:text-zinc-600&amp;amp;#34;&amp;amp;gt;&amp;#43;&amp;amp;lt;/sup&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;博客年龄&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold inline whitespace-nowrap group relative text-zinc-700 dark:text-zinc-300&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;truncate max-w-[120px] inline-block align-bottom&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;span id=&amp;amp;#34;stats_blog_online_year&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;w-max max-w-sm hidden group-hover:block absolute right-0 bottom-full bg-zinc-900 dark:bg-zinc-700 text-zinc-50 dark:text-zinc-100 text-sm rounded-sm py-2 px-3 shadow-lg z-50 hover:z-50 whitespace-nowrap -translate-y-1.5&amp;amp;#34;&amp;amp;gt;
 Creation: 2006-01-02 15:04:05 Monday
 &amp;amp;lt;div class=&amp;amp;#34;absolute top-full right-1/4 transform translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-zinc-900 dark:border-t-zinc-700&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/span&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc-100 dark:bg-zinc-800 rounded-xl shadow-md overflow-hidden transition-colors duration-200 hover:shadow-lg mb-4 flex flex-col h-full&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;h-32 relative flex-shrink-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 bg-gradient-to-b from-zinc-900 to-zinc-600&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 flex items-center justify-center&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; width=&amp;amp;#34;64&amp;amp;#34; height=&amp;amp;#34;64&amp;amp;#34; viewBox=&amp;amp;#34;0 0 24 24&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;#fff&amp;amp;#34; d=&amp;amp;#34;M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-10&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-3 left-4&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-xl font-bold text-zinc-50&amp;amp;#34;&amp;amp;gt;GitHub&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;text-sm text-zinc-200&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;p-4 bg-zinc-50 dark:bg-zinc-900 flex-grow flex flex-col min-h-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;flex items-center text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-2 overflow-x-hidden flex-shrink-0&amp;amp;#34;&amp;amp;gt;Let&amp;amp;#39;s build from here. &amp;amp;lt;svg class=&amp;amp;#34;ml-2 mr-1 inline-block&amp;amp;#34; width=&amp;amp;#34;1em&amp;amp;#34; height=&amp;amp;#34;1em&amp;amp;#34; viewBox=&amp;amp;#34;0 0 512 512&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;path fill=&amp;amp;#34;currentColor&amp;amp;#34; d=&amp;amp;#34;M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6.0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/path&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt; &amp;amp;lt;a href=&amp;amp;#34;{{ $githubUrl }}/tree/{{- $commitHashLong -}}&amp;amp;#34; target=&amp;amp;#34;_blank&amp;amp;#34; rel=&amp;amp;#34;noopener noreferrer&amp;amp;#34; class=&amp;amp;#34;bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 text-[#0969da] dark:text-blue-400 text-xs! m-0 py-0.5 px-1 whitespace-break-spaces font-normal! rounded-md transition-colors duration-200&amp;amp;#34;&amp;amp;gt;{{- $commitHashShort -}}&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex w-full justify-between items-center gap-2&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;Commits&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold text-zinc-700 dark:text-zinc-300&amp;amp;#34;&amp;amp;gt;{{- lang.FormatNumber 0 (default 0 $totalCommits) -}}&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;Last Commit&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold text-zinc-700 dark:text-zinc-300&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;span id=&amp;amp;#34;last-commit-date&amp;amp;#34; data-date=&amp;amp;#34;{{ $lastCommitDate }}&amp;amp;#34;&amp;amp;gt;-&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;Repo Size&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold text-zinc-700 dark:text-zinc-300&amp;amp;#34;&amp;amp;gt;{{ $repoSize }}&amp;amp;lt;span class=&amp;amp;#34;text-xs text-zinc-400 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div
 class=&amp;amp;#34;bg-zinc-100 dark:bg-zinc-800 rounded-xl shadow-md overflow-hidden transition-colors duration-200 hover:shadow-lg mb-4 flex flex-col h-full&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;h-32 relative flex-shrink-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 bg-gradient-to-b from-zinc-900 to-zinc-600&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute inset-0 flex items-center justify-center&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;svg width=&amp;amp;#34;64&amp;amp;#34; height=&amp;amp;#34;64&amp;amp;#34; xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; xmlns:xlink=&amp;amp;#34;http://www.w3.org/1999/xlink&amp;amp;#34; xml:space=&amp;amp;#34;preserve&amp;amp;#34; viewBox=&amp;amp;#34;0 0 512 512&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;symbol id=&amp;amp;#34;b&amp;amp;#34; viewBox=&amp;amp;#34;-32 -32 64 64&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;linearGradient id=&amp;amp;#34;a&amp;amp;#34; x1=&amp;amp;#34;7762.648&amp;amp;#34; x2=&amp;amp;#34;7762.648&amp;amp;#34; y1=&amp;amp;#34;-8454.313&amp;amp;#34; y2=&amp;amp;#34;-8453.313&amp;amp;#34; gradientTransform=&amp;amp;#34;matrix(63.931 0 0 64 -496273.844 541044)&amp;amp;#34; gradientUnits=&amp;amp;#34;userSpaceOnUse&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;0&amp;amp;#34; style=&amp;amp;#34;stop-color:#111d2e&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;.212&amp;amp;#34; style=&amp;amp;#34;stop-color:#051839&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;.407&amp;amp;#34; style=&amp;amp;#34;stop-color:#0a1b48&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;.581&amp;amp;#34; style=&amp;amp;#34;stop-color:#132e62&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;.738&amp;amp;#34; style=&amp;amp;#34;stop-color:#144b7e&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;.873&amp;amp;#34; style=&amp;amp;#34;stop-color:#136497&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;stop offset=&amp;amp;#34;1&amp;amp;#34; style=&amp;amp;#34;stop-color:#1387b8&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/linearGradient&amp;amp;gt;&amp;amp;lt;path d=&amp;amp;#34;M-30.7 9.2C-26.7 22.4-14.5 32 0 32c17.7 0 32-14.3 32-32S17.7-32 0-32c-17 0-30.9 13.2-32 29.9 2.1 3.5 2.9 5.6 1.3 11.3&amp;amp;#34; style=&amp;amp;#34;fill:url(#a)&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;path d=&amp;amp;#34;M-1.7-8v.2L-9.5 3.5c-1.3-.1-2.5.2-3.7.7-.5.2-1 .5-1.5.8l-17.2-7.1s-.4 6.5 1.3 11.4l12.2 5c.6 2.7 2.5 5.1 5.2 6.3 4.5 1.9 9.7-.3 11.6-4.8.5-1.2.7-2.4.7-3.7l11.2-8h.3c6.7 0 12.2-5.5 12.2-12.2s-5.4-12.2-12.2-12.2C3.8-20.2-1.7-14.7-1.7-8m-1.8 23c-1.5 3.5-5.5 5.1-9 3.7-1.5-.7-2.8-1.8-3.5-3.4l4 1.6c2.6 1.1 5.5-.1 6.6-2.7s-.1-5.5-2.7-6.6L-12.3 6c1.6-.6 3.4-.6 5 .1 1.7.7 3 2 3.7 3.7s.7 3.5.1 5.2M10.5.1C6 .1 2.4-3.5 2.4-8s3.6-8.1 8.1-8.1 8.1 3.6 8.1 8.1S15 .1 10.5.1M4.4-8c0-3.4 2.7-6.1 6.1-6.1s6.1 2.7 6.1 6.1-2.7 6.1-6.1 6.1S4.4-4.7 4.4-8&amp;amp;#34; style=&amp;amp;#34;fill:#fff&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/symbol&amp;amp;gt;&amp;amp;lt;use xlink:href=&amp;amp;#34;#b&amp;amp;#34; width=&amp;amp;#34;64&amp;amp;#34; height=&amp;amp;#34;64&amp;amp;#34; x=&amp;amp;#34;-32&amp;amp;#34; y=&amp;amp;#34;-32&amp;amp;#34; style=&amp;amp;#34;overflow:visible&amp;amp;#34; transform=&amp;amp;#34;matrix(8 0 0 8 256 256)&amp;amp;#34;/&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-10&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;absolute bottom-3 left-4&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;text-xl font-bold text-zinc-50&amp;amp;#34;&amp;amp;gt;Steam&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;text-sm text-zinc-200&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;p-4 bg-zinc-50 dark:bg-zinc-900 flex-grow flex flex-col min-h-0&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;p class=&amp;amp;#34;text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-2 overflow-x-hidden flex-shrink-0&amp;amp;#34;&amp;amp;gt;&amp;amp;#34;Pay. Don&amp;amp;#39;t play.&amp;amp;#34; Steam 是畅玩游戏、讨论游戏、创造游戏的快乐所在。&amp;amp;lt;/p&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex w-full justify-between items-center gap-2&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-1 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;text-xs text-zinc-500 dark:text-zinc-500&amp;amp;#34;&amp;amp;gt;游戏库&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;font-semibold text-zinc-700 dark:text-zinc-300&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;span&amp;amp;gt;{{ $steamGameCount }}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;flex-2 text-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;a href=&amp;amp;#34;{{ $steamUrl }}&amp;amp;#34; target=&amp;amp;#34;_blank&amp;amp;#34; rel=&amp;amp;#34;noopener noreferrer&amp;amp;#34; class=&amp;amp;#34;text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 focus:ring-4 focus:outline-hidden focus:ring-zinc-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center cursor-pointer no-underline transition-colors duration-200&amp;amp;#34;&amp;amp;gt;
 View Details
 &amp;amp;lt;svg class=&amp;amp;#34;rtl:rotate-180 w-3.5 h-3.5 ms-2&amp;amp;#34; aria-hidden=&amp;amp;#34;true&amp;amp;#34; xmlns=&amp;amp;#34;http://www.w3.org/2000/svg&amp;amp;#34; fill=&amp;amp;#34;currentColor&amp;amp;#34; viewBox=&amp;amp;#34;0 0 14 10&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;path stroke=&amp;amp;#34;currentColor&amp;amp;#34; stroke-linecap=&amp;amp;#34;round&amp;amp;#34; stroke-linejoin=&amp;amp;#34;round&amp;amp;#34; stroke-width=&amp;amp;#34;2&amp;amp;#34; d=&amp;amp;#34;M1 5h12m0 0L9 1m4 4L9 9&amp;amp;#34;/&amp;amp;gt;
 &amp;amp;lt;/svg&amp;amp;gt;
 &amp;amp;lt;/a&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;h3 id=&amp;amp;#34;按年份统计 - 文章数&amp;amp;#34; class=&amp;amp;#34;headerLink mt-0&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;#34;#按年份统计 - 文章数&amp;amp;#34; class=&amp;amp;#34;header-mark&amp;amp;#34; title=&amp;amp;#34;header-mark&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;按年份统计 - 文章数&amp;amp;lt;/h3&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;bar-chart mb-24&amp;amp;#34;&amp;amp;gt;
 {{ $currentYear := now.Year }}
 {{ $maxCount := 0 }}
 {{ range $year := (seq 2006 $currentYear) }}
 {{ $yearData := where $stats &amp;amp;#34;year&amp;amp;#34; (string $year) }}
 {{ $count := len $yearData }}
 {{ if gt $count $maxCount }}
 {{ $maxCount = $count }}
 {{ end }}
 {{ end }}

 {{ range $year := (seq 2006 $currentYear) }}
 {{ $yearData := where $stats &amp;amp;#34;year&amp;amp;#34; (string $year) }}
 {{ $count := len $yearData }}
 {{ $countPercentage := 0 }}
 {{ if ne $count 0 }}
 {{/* 懒得修复 CSS 在这里保证最大值为 100% */}}
 {{ $countPercentage = div (mul (float $count) 100) $maxCount }}
 {{ end }}
 &amp;amp;lt;div class=&amp;amp;#34;item&amp;amp;#34; style=&amp;amp;#34;--val: {{ $countPercentage}}&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;label text-xs w-[2ch] md:w-8 text-clip overflow-hidden whitespace-nowrap -indent-4 md:indent-0&amp;amp;#34;&amp;amp;gt;{{ $year }}&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;value&amp;amp;#34;&amp;amp;gt;{{ $count }}&amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 {{ end }}
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;h3 id=&amp;amp;#34;按分类统计 - 文章数&amp;amp;#34; class=&amp;amp;#34;headerLink mt-0&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;#34;#按分类统计 - 文章数&amp;amp;#34; class=&amp;amp;#34;header-mark&amp;amp;#34; title=&amp;amp;#34;header-mark&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;按分类统计 - 文章数&amp;amp;lt;/h3&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;category flex items-center flex-col lg:flex-row gap-8 mx-auto max-w-full mb-24&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;w-full lg:w-[70%] flex justify-center&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;svg id=&amp;amp;#34;cate-pie-chart&amp;amp;#34; class=&amp;amp;#34;w-full max-w-xl&amp;amp;#34; viewBox=&amp;amp;#34;0 0 400 400&amp;amp;#34; style=&amp;amp;#34;height: auto; aspect-ratio: 1;&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/svg&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;div class=&amp;amp;#34;w-full lg:w-[30%] labels&amp;amp;#34;&amp;amp;gt;
 &amp;amp;lt;h3 class=&amp;amp;#34;mb-6&amp;amp;#34;&amp;amp;gt;分类统计&amp;amp;lt;/h3&amp;amp;gt;
 &amp;amp;lt;ul class=&amp;amp;#34;space-y-2&amp;amp;#34;&amp;amp;gt;
 {{ $colors := slice &amp;amp;#34;#f97316&amp;amp;#34; &amp;amp;#34;#06b6d4&amp;amp;#34; &amp;amp;#34;#f43f5e&amp;amp;#34; &amp;amp;#34;#2563eb&amp;amp;#34; &amp;amp;#34;#8b5cf6&amp;amp;#34; &amp;amp;#34;#10b981&amp;amp;#34; &amp;amp;#34;#f59e0b&amp;amp;#34; &amp;amp;#34;#ec4899&amp;amp;#34; &amp;amp;#34;#3b82f6&amp;amp;#34; &amp;amp;#34;#ef4444&amp;amp;#34; &amp;amp;#34;#14b8a6&amp;amp;#34; &amp;amp;#34;#a855f7&amp;amp;#34; &amp;amp;#34;#f97316&amp;amp;#34; &amp;amp;#34;#06b6d4&amp;amp;#34; &amp;amp;#34;#f43f5e&amp;amp;#34; &amp;amp;#34;#2563eb&amp;amp;#34; &amp;amp;#34;#8b5cf6&amp;amp;#34; &amp;amp;#34;#10b981&amp;amp;#34; &amp;amp;#34;#f59e0b&amp;amp;#34; &amp;amp;#34;#ec4899&amp;amp;#34; }}
 {{ $cateCounter := 0 }}
 {{ range $category, $pages := .Site.Taxonomies.categories }}
 {{ $cateCounter = add $cateCounter 1 }}
 {{ $cateCount := len $pages }}
 {{ $catePercentage := div (mul (float $cateCount) 100) $articleCount }}
 {{ $color := index $colors (sub $cateCounter 1) }}
 &amp;amp;lt;li id=&amp;amp;#34;legend-{{ sub $cateCounter 1 }}&amp;amp;#34; class=&amp;amp;#34;flex items-center gap-2 py-1 px-2 rounded transition-all duration-200 cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700&amp;amp;#34; data-percentage=&amp;amp;#39;{{ printf &amp;amp;#34;%.2f&amp;amp;#34; $catePercentage }}&amp;amp;#39;&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;w-4 h-4 rounded-full flex-shrink-0&amp;amp;#34; style=&amp;amp;#34;background-color: {{ $color }}&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;flex-1&amp;amp;#34;&amp;amp;gt;{{ $category }}: {{ $cateCount }} 篇&amp;amp;lt;/span&amp;amp;gt;
 &amp;amp;lt;span class=&amp;amp;#34;text-sm text-zinc-500 dark:text-zinc-400&amp;amp;#34;&amp;amp;gt;({{ printf &amp;amp;#34;%.1f&amp;amp;#34; $catePercentage }}%)&amp;amp;lt;/span&amp;amp;gt;
 &amp;amp;lt;/li&amp;amp;gt;
 {{ end }}
 &amp;amp;lt;/ul&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;h3 id=&amp;amp;#34;标签云&amp;amp;#34; class=&amp;amp;#34;headerLink mt-0&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;#34;#标签云&amp;amp;#34; class=&amp;amp;#34;header-mark no-underline&amp;amp;#34; title=&amp;amp;#34;header-mark&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;#34;/tags/&amp;amp;#34; class=&amp;amp;#34;no-underline hover:underline&amp;amp;#34;&amp;amp;gt;标签云&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/h3&amp;amp;gt;

 &amp;amp;lt;div class=&amp;amp;#34;tag-cloud-tags&amp;amp;#34;&amp;amp;gt;
 {{- range $.Site.Taxonomies.tags.ByCount -}}
 &amp;amp;lt;a href=&amp;amp;#34;{{ .Page.RelPermalink }}&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;div class=&amp;amp;#34;tags-shields&amp;amp;#34;&amp;amp;gt;&amp;amp;lt;div class=&amp;amp;#34;tags-shields-before&amp;amp;#34;&amp;amp;gt;{{ .Page.Title }}&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;div class=&amp;amp;#34;tags-shields-after tags-count-{{ .Count }}&amp;amp;#34;&amp;amp;gt;{{ .Count }}&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;
 {{- end -}}
 &amp;amp;lt;/div&amp;amp;gt;

 
 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;/div&amp;amp;gt;

 &amp;amp;lt;script type=&amp;amp;#34;text/javascript&amp;amp;#34;&amp;amp;gt;
 // Whois Creation Date: 2006-01-02 15:04:05 Monday
 now = new Date();
 onlineStartDate = new Date(&amp;amp;#34;2006-01-02 15:04:05&amp;amp;#34;); // 2010-03-26T14:41:14Z
 diffTime = Math.abs(now - onlineStartDate);
 diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
 years = Math.floor(diffDays / 365);

 diffDaysLocale = diffDays.toLocaleString();

 document.getElementById(&amp;amp;#39;stats_blog_online_year&amp;amp;#39;).innerHTML = `${diffDaysLocale}天 &amp;amp;lt;span class=&amp;amp;#34;text-xs&amp;amp;#34;&amp;amp;gt;(${years}yrs)&amp;amp;lt;/span&amp;amp;gt;`;
 &amp;amp;lt;/script&amp;amp;gt;

 &amp;amp;lt;script type=&amp;amp;#34;text/javascript&amp;amp;#34;&amp;amp;gt;
 // 计算相对时间的函数
 function getRelativeTime(dateString) {
 const rtf = new Intl.RelativeTimeFormat(&amp;amp;#39;zh-CN&amp;amp;#39;, { numeric: &amp;amp;#34;auto&amp;amp;#34;, style: &amp;amp;#39;short&amp;amp;#39; });
 now = new Date();
 const date = new Date(dateString);

 // 检查日期是否有效
 if (isNaN(date.getTime())) {
 return dateString;
 }

 const diff = now - date;

 const seconds = Math.floor(diff / 1000);
 const minutes = Math.floor(seconds / 60);
 const hours = Math.floor(minutes / 60);
 const days = Math.floor(hours / 24);
 const months = Math.floor(days / 30);
 const years2 = Math.floor(days / 365);

 // 获取原始格式化的相对时间（如 &amp;amp;#34;3 天前&amp;amp;#34;）
 let formattedTime;
 if (years2 &amp;amp;gt; 0) {
 formattedTime = rtf.format(-years2, &amp;amp;#39;year&amp;amp;#39;);
 } else if (months &amp;amp;gt; 0) {
 formattedTime = rtf.format(-months, &amp;amp;#39;month&amp;amp;#39;);
 } else if (days &amp;amp;gt; 0) {
 formattedTime = rtf.format(-days, &amp;amp;#39;day&amp;amp;#39;);
 } else if (hours &amp;amp;gt; 0) {
 formattedTime = rtf.format(-hours, &amp;amp;#39;hour&amp;amp;#39;);
 } else if (minutes &amp;amp;gt; 0) {
 formattedTime = rtf.format(-minutes, &amp;amp;#39;minute&amp;amp;#39;);
 } else {
 formattedTime = rtf.format(-seconds, &amp;amp;#39;second&amp;amp;#39;);
 }

 return formattedTime.replace(/(\d&amp;#43;)([^\d]&amp;#43;)/, &amp;amp;#39;$1 $2&amp;amp;#39;);
 };
 &amp;amp;lt;/script&amp;amp;gt;

 &amp;amp;lt;script type=&amp;amp;#34;text/javascript&amp;amp;#34;&amp;amp;gt;
 // Donut Chart
 cateData = [
 {{ range $category, $pages := .Site.Taxonomies.categories }}
 {name: &amp;amp;#34;{{ $category }}&amp;amp;#34;, value: {{ len $pages }}},
 {{ end }}
 ];

 total = 0;
 cateData.forEach(item =&amp;amp;gt; {
 total &amp;#43;= item.value;
 });

 data = {
 total: total,
 category: cateData
 };

 colors = [
 &amp;amp;#39;#f97316&amp;amp;#39;,
 &amp;amp;#39;#06b6d4&amp;amp;#39;,
 &amp;amp;#39;#f43f5e&amp;amp;#39;,
 &amp;amp;#39;#2563eb&amp;amp;#39;,
 &amp;amp;#39;#8b5cf6&amp;amp;#39;,
 &amp;amp;#39;#10b981&amp;amp;#39;,
 &amp;amp;#39;#f59e0b&amp;amp;#39;,
 &amp;amp;#39;#ec4899&amp;amp;#39;,
 &amp;amp;#39;#3b82f6&amp;amp;#39;,
 &amp;amp;#39;#ef4444&amp;amp;#39;,
 &amp;amp;#39;#14b8a6&amp;amp;#39;,
 &amp;amp;#39;#a855f7&amp;amp;#39;,
 &amp;amp;#39;#f97316&amp;amp;#39;,
 &amp;amp;#39;#06b6d4&amp;amp;#39;,
 &amp;amp;#39;#f43f5e&amp;amp;#39;,
 &amp;amp;#39;#2563eb&amp;amp;#39;,
 &amp;amp;#39;#8b5cf6&amp;amp;#39;,
 &amp;amp;#39;#10b981&amp;amp;#39;,
 &amp;amp;#39;#f59e0b&amp;amp;#39;,
 &amp;amp;#39;#ec4899&amp;amp;#39;,
 ];

 svg = document.getElementById(&amp;amp;#39;cate-pie-chart&amp;amp;#39;);
 if (svg) {
 const centerX = 200;
 const centerY = 200;
 const radius = 160;
 const innerRadius = 80;

 let totalValue = 0;
 let currentAngle = -Math.PI / 2;

 data.category.forEach(item =&amp;amp;gt; {
 totalValue &amp;#43;= item.value;
 });

 data.category.forEach((item, index) =&amp;amp;gt; {
 sliceAngle = (item.value / totalValue) * 2 * Math.PI;
 percentage = (item.value / totalValue) * 100;
 largeArcFlag = sliceAngle &amp;amp;gt; Math.PI ? 1 : 0;

 startX = centerX &amp;#43; Math.cos(currentAngle) * radius;
 startY = centerY &amp;#43; Math.sin(currentAngle) * radius;
 endX = centerX &amp;#43; Math.cos(currentAngle &amp;#43; sliceAngle) * radius;
 endY = centerY &amp;#43; Math.sin(currentAngle &amp;#43; sliceAngle) * radius;

 innerStartX = centerX &amp;#43; Math.cos(currentAngle) * innerRadius;
 innerStartY = centerY &amp;#43; Math.sin(currentAngle) * innerRadius;
 innerEndX = centerX &amp;#43; Math.cos(currentAngle &amp;#43; sliceAngle) * innerRadius;
 innerEndY = centerY &amp;#43; Math.sin(currentAngle &amp;#43; sliceAngle) * innerRadius;

 pathData = `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${innerEndX} ${innerEndY} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStartX} ${innerStartY} Z`;

 path = document.createElementNS(&amp;amp;#39;http://www.w3.org/2000/svg&amp;amp;#39;, &amp;amp;#39;path&amp;amp;#39;);
 sliceColor = colors[index % colors.length];
 path.setAttribute(&amp;amp;#39;d&amp;amp;#39;, pathData);
 path.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, sliceColor);
 path.setAttribute(&amp;amp;#39;stroke&amp;amp;#39;, &amp;amp;#39;white&amp;amp;#39;);
 path.setAttribute(&amp;amp;#39;stroke-width&amp;amp;#39;, &amp;amp;#39;2&amp;amp;#39;);
 path.setAttribute(&amp;amp;#39;class&amp;amp;#39;, &amp;amp;#39;donut-slice&amp;amp;#39;);
 path.setAttribute(&amp;amp;#39;data-name&amp;amp;#39;, item.name);
 path.setAttribute(&amp;amp;#39;data-value&amp;amp;#39;, item.value);
 path.setAttribute(&amp;amp;#39;data-color&amp;amp;#39;, sliceColor);
 path.style.transition = &amp;amp;#39;opacity 0.3s ease&amp;amp;#39;;
 path.style.cursor = &amp;amp;#39;pointer&amp;amp;#39;;
 svg.appendChild(path);

 // 占比大于3%的分类，在环形图上显示名称
 if (percentage &amp;amp;gt; 3) {
 textAngle = currentAngle &amp;#43; sliceAngle / 2;
 textRadius = (radius &amp;#43; innerRadius) / 2;
 textX = centerX &amp;#43; Math.cos(textAngle) * textRadius;
 textY = centerY &amp;#43; Math.sin(textAngle) * textRadius;

 const text = document.createElementNS(&amp;amp;#39;http://www.w3.org/2000/svg&amp;amp;#39;, &amp;amp;#39;text&amp;amp;#39;);
 text.setAttribute(&amp;amp;#39;x&amp;amp;#39;, textX);
 text.setAttribute(&amp;amp;#39;y&amp;amp;#39;, textY);
 text.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, &amp;amp;#39;white&amp;amp;#39;);
 text.setAttribute(&amp;amp;#39;font-size&amp;amp;#39;, &amp;amp;#39;13&amp;amp;#39;);
 text.setAttribute(&amp;amp;#39;text-anchor&amp;amp;#39;, &amp;amp;#39;middle&amp;amp;#39;);
 text.setAttribute(&amp;amp;#39;dominant-baseline&amp;amp;#39;, &amp;amp;#39;middle&amp;amp;#39;);
 text.style.fontWeight = &amp;amp;#39;600&amp;amp;#39;;
 text.style.textShadow = &amp;amp;#39;1px 1px 2px rgba(0,0,0,0.3)&amp;amp;#39;;
 text.style.pointerEvents = &amp;amp;#39;none&amp;amp;#39;;
 text.classList.add(&amp;amp;#39;donut-label&amp;amp;#39;);
 text.textContent = item.name;
 svg.appendChild(text);
 }

 path.addEventListener(&amp;amp;#39;mouseenter&amp;amp;#39;, function() {
 document.querySelectorAll(&amp;amp;#39;.donut-slice&amp;amp;#39;).forEach(p =&amp;amp;gt; {
 if (p !== this) {
 p.style.opacity = &amp;amp;#39;0.3&amp;amp;#39;;
 }
 });
 legendItem = document.getElementById(`legend-${index}`);
 if (legendItem) {
 legendItem.style.backgroundColor = sliceColor;
 legendItem.style.color = &amp;amp;#39;white&amp;amp;#39;;
 legendItem.style.fontWeight = &amp;amp;#39;bold&amp;amp;#39;;
 }
 });

 path.addEventListener(&amp;amp;#39;mouseleave&amp;amp;#39;, function() {
 document.querySelectorAll(&amp;amp;#39;.donut-slice&amp;amp;#39;).forEach(p =&amp;amp;gt; {
 p.style.opacity = &amp;amp;#39;1&amp;amp;#39;;
 });
 legendItem = document.getElementById(`legend-${index}`);
 if (legendItem) {
 legendItem.style.backgroundColor = &amp;amp;#39;transparent&amp;amp;#39;;
 legendItem.style.color = &amp;amp;#39;&amp;amp;#39;;
 legendItem.style.fontWeight = &amp;amp;#39;normal&amp;amp;#39;;
 }
 });

 currentAngle &amp;#43;= sliceAngle;
 });

 totalText = document.createElementNS(&amp;amp;#39;http://www.w3.org/2000/svg&amp;amp;#39;, &amp;amp;#39;text&amp;amp;#39;);
 totalText.setAttribute(&amp;amp;#39;x&amp;amp;#39;, centerX);
 totalText.setAttribute(&amp;amp;#39;y&amp;amp;#39;, centerY - 10);
 totalText.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, &amp;amp;#39;#1f2937&amp;amp;#39;);
 totalText.setAttribute(&amp;amp;#39;font-size&amp;amp;#39;, &amp;amp;#39;28&amp;amp;#39;);
 totalText.setAttribute(&amp;amp;#39;text-anchor&amp;amp;#39;, &amp;amp;#39;middle&amp;amp;#39;);
 totalText.setAttribute(&amp;amp;#39;font-weight&amp;amp;#39;, &amp;amp;#39;bold&amp;amp;#39;);
 totalText.textContent = totalValue;
 totalText.classList.add(&amp;amp;#39;dark-mode-text&amp;amp;#39;);

 labelText = document.createElementNS(&amp;amp;#39;http://www.w3.org/2000/svg&amp;amp;#39;, &amp;amp;#39;text&amp;amp;#39;);
 labelText.setAttribute(&amp;amp;#39;x&amp;amp;#39;, centerX);
 labelText.setAttribute(&amp;amp;#39;y&amp;amp;#39;, centerY &amp;#43; 20);
 labelText.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, &amp;amp;#39;#6b7280&amp;amp;#39;);
 labelText.setAttribute(&amp;amp;#39;font-size&amp;amp;#39;, &amp;amp;#39;14&amp;amp;#39;);
 labelText.setAttribute(&amp;amp;#39;text-anchor&amp;amp;#39;, &amp;amp;#39;middle&amp;amp;#39;);
 labelText.textContent = &amp;amp;#39;篇&amp;amp;#39;;
 labelText.classList.add(&amp;amp;#39;dark-mode-text-secondary&amp;amp;#39;);

 svg.appendChild(totalText);
 svg.appendChild(labelText);

 updateDarkModeText = () =&amp;amp;gt; {
 const isDark = document.documentElement.getAttribute(&amp;amp;#39;data-theme&amp;amp;#39;) === &amp;amp;#39;dark&amp;amp;#39;;
 totalText.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, isDark ? &amp;amp;#39;#f9fafb&amp;amp;#39; : &amp;amp;#39;#1f2937&amp;amp;#39;);
 labelText.setAttribute(&amp;amp;#39;fill&amp;amp;#39;, isDark ? &amp;amp;#39;#9ca3af&amp;amp;#39; : &amp;amp;#39;#6b7280&amp;amp;#39;);
 };

 const observer = new MutationObserver(updateDarkModeText);
 observer.observe(document.documentElement, { attributes: true, attributeFilter: [&amp;amp;#39;data-theme&amp;amp;#39;] });
 updateDarkModeText();
 }
 &amp;amp;lt;/script&amp;amp;gt;

 &amp;amp;lt;script&amp;amp;gt;
 // 页面加载完成后执行
 document.addEventListener(&amp;amp;#39;DOMContentLoaded&amp;amp;#39;, function() {
 // Github Card Last Commit
 const lastCommitDateElement = document.getElementById(&amp;amp;#34;last-commit-date&amp;amp;#34;);
 // const totalPlayedTimeElement = document.getElementById(&amp;amp;#34;total-played-time&amp;amp;#34;);
 if (lastCommitDateElement) {
 const commitDate = lastCommitDateElement.getAttribute(&amp;amp;#34;data-date&amp;amp;#34;);
 lastCommitDateElement.textContent = getRelativeTime(commitDate);
 }
 // totalPlayedTimeElement.textContent = getRelativeTime(commitDate);

 // createHeatmap 函数如果存在则调用
 if (typeof createHeatmap === &amp;amp;#39;function&amp;amp;#39;) {
 createHeatmap();
 }

 });
 &amp;amp;lt;/script&amp;amp;gt;
 &amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/article&amp;amp;gt;
{{- end -}}
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;读取站点/content/下的文件：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-css"&gt;@charset &amp;amp;#34;UTF-8&amp;amp;#34;;

@media(max-width: 730px) {
 :root {
 --ypb-bodyMargin:20px
 }
}

.headerLink a {
 color: unset!important
}

.article-content div ul {
 margin-top: -.5rem
}

.tag-cloud-tags {
 margin: 10px 0
}

.tag-cloud-tags a {
 display: inline-block;
 position: relative;
 margin: 5px 10px;
 word-wrap: break-word;
 overflow-wrap: break-word;
 -webkit-transition: all ease-out .3s;
 -moz-transition: all ease-out .3s;
 -o-transition: all ease-out .3s;
 transition: all ease-out .3s;
 text-decoration: none
}

.tags-shields {
 display: flex;
 height: 20px;
 line-height: 20px;
 overflow: hidden;
 align-items: center;
 border-radius: 4px
}

.tags-shields-before {
 font-size: 12px;
 padding: 0 4px 0 6px;
 background-color: #595959;
 color: #fff;
 display: inline-block;
 vertical-align: middle
}

.tags-shields-after {
 font-size: 10px;
 padding: 0 6px 0 4px;
 background-color: #0274b5;
 color: #fff;
 display: inline-block;
 vertical-align: middle
}

.tags-count-1 {
 background-color: #0274b5
}

.tags-count-2 {
 background-color: #3b8dbf
}

.tags-count-3 {
 background-color: #8ab802
}

.tags-count-4 {
 background-color: green
}

.tags-count-5 {
 background-color: #dab226
}

.tags-count-6 {
 background-color: #e77334
}

.tags-count-7 {
 background-color: #cc5640
}

.tags-count-8 {
 background-color: #e6adb7
}

.tags-count-9 {
 background-color: #740174
}

.tags-count-10,.tags-count-11,.tags-count-12,.tags-count-13,.tags-count-14,.tags-count-15,.tags-count-16,.tags-count-17,.tags-count-18,.tags-count-19 {
 background-color: orange
}

.tags-count-20,.tags-count-21,.tags-count-22,.tags-count-23,.tags-count-24,.tags-count-25,.tags-count-26,.tags-count-27,.tags-count-28,.tags-count-29 {
 background-color: #ff4500
}

.tags-count-30,.tags-count-31,.tags-count-32,.tags-count-33,.tags-count-34,.tags-count-35,.tags-count-36,.tags-count-37,.tags-count-38,.tags-count-39,.tags-count-40,.tags-count-41,.tags-count-42,.tags-count-43,.tags-count-44,.tags-count-45,.tags-count-46,.tags-count-47,.tags-count-48,.tags-count-49,.tags-count-50 {
 background-color: red
}

.bar-chart {
 height: 20rem;
 display: grid;
 grid-auto-flow: column;
 gap: 2%;
 align-items: end;
 padding-inline:2%;padding-block:1.5rem;position: relative;
 isolation: isolate
}

.bar-chart::after {
 content: &amp;amp;#34;&amp;amp;#34;;
 position: absolute;
 inset: 1.5rem 0;
 z-index: -1;
 background-image: repeating-linear-gradient(to top,transparent 0 calc(calc(100%/10) - 1px),currentcolor 0 calc(100%/10));
 box-shadow: 0 1px currentcolor;
 opacity: .125
}

.bar-chart&amp;amp;gt;.item {
 height: calc(1% * var(--val));
 width: 100%;
 background-color: #2563eb;
 position: relative;
 animation: item-height 1s ease forwards
}

@keyframes item-height {
 from {
 height: 0
 }
}

.bar-chart&amp;amp;gt;.item&amp;amp;gt;* {
 position: absolute;
 text-align: center
}

.bar-chart&amp;amp;gt;.item&amp;amp;gt;.label {
 inset: 100% 0 auto 0
}

.bar-chart&amp;amp;gt;.item&amp;amp;gt;.value {
 inset: auto 0 100% 0
}

.stats-cards a {
 font-weight: 600
}

/* Dark Theme Adaptation */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .bar-chart::after {
 opacity: .25;
 color: #71717a
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .bar-chart&amp;amp;gt;.item {
 background-color: #3b82f6
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .tag-cloud-tags a:hover {
 filter: brightness(1.2)
}

/* Stat cards icon styles */
.stats-icon-bg {
 background: linear-gradient(to bottom right, #dbeafe, #dbeafe)
}

.stats-icon-color {
 color: #2563eb
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .stats-icon-bg {
 background: linear-gradient(to bottom right, #1e3a8a, #1e40af) !important
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .stats-icon-color {
 color: #60a5fa !important
}

/* Override Tailwind bg-zinc-50 and bg-zinc-100 */
.grid.grid-cols-2 &amp;amp;gt; div {
 background-color: #fafafa !important
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .grid.grid-cols-2 &amp;amp;gt; div {
 background-color: #1c2128 !important
}

/* Dark theme border optimization - reduce border width for better dark mode appearance */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .border {
 border-width: 0.5px !important;
 border-color: #374151 !important;
}

/* Specific optimization for stat cards in dark theme */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .grid.grid-cols-2 &amp;amp;gt; div,
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .grid.md\:grid-cols-4 &amp;amp;gt; div {
 border-color: #374151 !important;
 border-width: 0.5px !important;
}

/* Fix for GitHub/Steam/Analytics cards in dark theme */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .stats-cards .bg-zinc-50 {
 background-color: #111827 !important;
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .stats-cards .bg-zinc-100 {
 background-color: #1f2937 !important;
}

/* Ensure text colors are properly adjusted for dark theme */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .text-zinc-600 {
 color: #d1d5db !important;
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .text-zinc-700 {
 color: #e5e7eb !important;
}

[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .text-zinc-900 {
 color: #f9fafb !important;
}

/* Fix for specific text elements in cards */
[data-theme=&amp;amp;#39;dark&amp;amp;#39;] .stats-cards .text-zinc-500 {
 color: #9ca3af !important;
}

/* Donut chart legend styles */
.category .labels ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.category .labels li {
 transition: all 0.2s ease;
}

.category .labels li:hover {
 transform: translateX(4px);
}

/* Responsive layout for category section */
@media (max-width: 1024px) {
 .category {
 flex-direction: column;
 }
 .category .labels {
 width: 100% !important;
 order: 2;
 }
 .category &amp;amp;gt; div:first-child {
 width: 100% !important;
 order: 1;
 }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;读取站点/assets/目录下的文件：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-yml"&gt;# 001: Github
dlog:
 Weight: 0
 # Template: https://geekswg.blogspot.com/ %v
 Template: &amp;amp;#39;%v&amp;amp;#39;
 Title: 我的日常
 Icon:
 Class: fa-solid fa-book-open-reader
github:
 Weight: 1
 Prefix: https://github.com/
 Title: GitHub
 Icon:
 Class: fa-brands fa-github fa-fw

# 002: LinkedIn
linkedin:
 Weight: 2
 Prefix: https://linkedin.com/in/
 Title: LinkedIn
 Icon:
 Class: fa-brands fa-linkedin fa-fw

# 003: Twitter
twitter:
 Weight: 3
 Prefix: https://twitter.com/
 Title: Twitter
 Icon:
 Class: fa-brands fa-twitter fa-fw

# 004: Instagram
instagram:
 Weight: 4
 Prefix: https://www.instagram.com/
 Title: Instagram
 Icon:
 Class: fa-brands fa-instagram fa-fw

# 005: facebook
facebook:
 Weight: 5
 Prefix: https://facebook.com/
 Title: facebook
 Icon:
 Class: fa-brands fa-facebook fa-fw

# 006: Telegram
telegram:
 Weight: 6
 Prefix: https://t.me/
 Title: Telegram
 Icon:
 Class: fa-brands fa-telegram-plane fa-fw

# 007: Medium
medium:
 Weight: 7
 Prefix: https://medium.com/
 Title: Medium
 Icon:
 Class: fa-brands fa-medium fa-fw

# 008: GitLab
gitlab:
 Weight: 8
 Prefix: https://gitlab.com/
 Title: GitLab
 Icon:
 Class: fa-brands fa-gitlab fa-fw

# 009: YouTube Legacy
youtubelegacy:
 Weight: 9
 Prefix: https://www.youtube.com/user/
 Title: YouTube
 Icon:
 Class: fa-brands fa-youtube fa-fw

# 010: YouTube Custom
youtubecustom:
 Weight: 10
 Prefix: https://www.youtube.com/c/
 Title: YouTube
 Icon:
 Class: fa-brands fa-youtube fa-fw

# 011: YouTube Channel
youtubechannel:
 Weight: 11
 Prefix: https://www.youtube.com/channel/
 Title: YouTube
 Icon:
 Class: fa-brands fa-youtube fa-fw

# 012: Tumblr
tumblr:
 Weight: 12
 Template: https://%v.tumblr.com/
 Title: Tumblr
 Icon:
 Class: fa-brands fa-tumblr fa-fw

# 013: Quora
quora:
 Weight: 13
 Prefix: https://www.quora.com/profile/
 Title: Quora
 Icon:
 Class: fa-brands fa-quora fa-fw

# 014: Keybase
keybase:
 Weight: 14
 Prefix: https://keybase.io/
 Title: Keybase
 Icon:
 Class: fa-brands fa-keybase fa-fw

# 015: Pinterest
pinterest:
 Weight: 15
 Prefix: https://www.pinterest.com/
 Title: Pinterest
 Icon:
 Class: fa-brands fa-pinterest fa-fw

# 016: Reddit
reddit:
 Weight: 16
 Prefix: https://www.reddit.com/user/
 Title: Reddit
 Icon:
 Class: fa-brands fa-reddit fa-fw

# 017: CodePen
codepen:
 Weight: 17
 Prefix: https://codepen.io/
 Title: CodePen
 Icon:
 Class: fa-brands fa-codepen fa-fw

# 018: freeCodeCamp
freecodecamp:
 Weight: 18
 Prefix: https://freecodecamp.org/
 Title: freeCodeCamp
 Icon:
 Class: fa-brands fa-free-code-camp fa-fw

# 019: Bitbucket
bitbucket:
 Weight: 19
 Prefix: https://bitbucket.org/
 Title: Bitbucket
 Icon:
 Class: fa-brands fa-bitbucket fa-fw

# 020: Stack Overflow
stackoverflow:
 Weight: 20
 Prefix: https://stackoverflow.com/users/
 Title: Stack Overflow
 Icon:
 Class: fa-brands fa-stack-overflow fa-fw

# 021: 微博
weibo:
 Weight: 21
 Prefix: https://weibo.com/
 Title: 微博
 Icon:
 Class: fa-brands fa-weibo fa-fw

# 022: OK.RU
odnoklassniki:
 Weight: 22
 Prefix: https://ok.ru/
 Title: OK.RU
 Icon:
 Class: fa-brands fa-odnoklassniki fa-fw

# 023: VK
vk:
 Weight: 23
 Prefix: https://vk.com/
 Title: VK
 Icon:
 Class: fa-brands fa-vk fa-fw

# 024: Flickr
flickr:
 Weight: 24
 Prefix: https://www.flickr.com/photos/
 Title: Flickr
 Icon:
 Class: fa-brands fa-flickr fa-fw

# 025: Xing
xing:
 Weight: 25
 Prefix: https://www.xing.com/profile/
 Title: Xing
 Icon:
 Class: fa-brands fa-xing fa-fw

# 026: Snapchat
snapchat:
 Weight: 26
 Prefix: https://www.snapchat.com/add/
 Title: Snapchat
 Icon:
 Class: fa-brands fa-snapchat fa-fw

# 027: SoundCloud
soundcloud:
 Weight: 27
 Prefix: https://soundcloud.com/
 Title: SoundCloud
 Icon:
 Class: fa-brands fa-soundcloud fa-fw

# 028: Spotify
spotify:
 Weight: 28
 Prefix: https://open.spotify.com/user/
 Title: Spotify
 Icon:
 Class: fa-brands fa-spotify fa-fw

# 029: Bandcamp
bandcamp:
 Weight: 29
 Template: https://%v.bandcamp.com/
 Title: Bandcamp
 Icon:
 Class: fa-brands fa-bandcamp fa-fw

# 030: PayPal
paypal:
 Weight: 30
 Prefix: https://paypal.me/
 Title: PayPal
 Icon:
 Class: fa-brands fa-paypal fa-fw

# 031: 500px
fivehundredpx:
 Weight: 31
 Prefix: https://500px.com/
 Title: 500px
 Icon:
 Class: fa-brands fa-500px fa-fw

# 032: Mix
mix:
 Weight: 32
 Prefix: https://mix.com/
 Title: Mix
 Icon:
 Class: fa-brands fa-mix fa-fw

# 033: Goodreads
goodreads:
 Weight: 33
 Prefix: https://www.goodreads.com/user/show/
 Title: Goodreads
 Icon:
 Class: fa-brands fa-goodreads fa-fw

# 034: Last.fm
lastfm:
 Weight: 34
 Prefix: https://www.last.fm/user/
 Title: Last.fm
 Icon:
 Class: fa-brands fa-lastfm fa-fw

# 035: Foursquare
foursquare:
 Weight: 35
 Prefix: https://foursquare.com/
 Title: Foursquare
 Icon:
 Class: fa-brands fa-foursquare fa-fw

# 036: Hacker News
hackernews:
 Weight: 36
 Template: https://news.ycombinator.com/user?id=%v
 Title: Hacker News
 Icon:
 Class: fa-brands fa-hacker-news fa-fw

# 037: Kickstarter
kickstarter:
 Weight: 37
 Prefix: https://kickstarter.com/profile/
 Title: Kickstarter
 Icon:
 Class: fa-brands fa-kickstarter fa-fw

# 038: Patreon
patreon:
 Weight: 38
 Prefix: https://patreon.com/
 Title: Patreon
 Icon:
 Class: fa-brands fa-patreon fa-fw

# 039: Steam
steam:
 Weight: 39
 Prefix: https://steamcommunity.com/id/
 Title: Steam
 Icon:
 Class: fa-brands fa-steam fa-fw

# 040: Twitch
twitch:
 Weight: 40
 Prefix: https://www.twitch.tv/
 Title: Twitch
 Icon:
 Class: fa-brands fa-twitch fa-fw

# 041: Strava
strava:
 Weight: 41
 Prefix: https://www.strava.com/athletes/
 Title: Strava
 Icon:
 Class: fa-brands fa-strava fa-fw

# 042: Skype
skype:
 Weight: 42
 Template: &amp;amp;#34;skype:&amp;amp;#34;
 Title: Skype
 Icon:
 Class: fa-brands fa-skype fa-fw

# 043: WhatsApp
whatsapp:
 Weight: 43
 Prefix: https://wa.me/
 Title: WhatsApp
 Icon:
 Class: fa-brands fa-whatsapp fa-fw

# 044: 知乎
zhihu:
 Weight: 44
 Prefix: https://www.zhihu.com/people/
 Title: 知乎
 Icon:
 Class: fa-brands fa-zhihu fa-fw

# 045: 豆瓣
douban:
 Weight: 45
 Prefix: https://www.douban.com/people/
 Title: 豆瓣
 Icon:
 Simpleicons: douban

# 046: Angellist
angellist:
 Weight: 46
 Prefix: https://angel.co/
 Title: Angellist
 Icon:
 Class: fa-brands fa-angellist fa-fw

# 047: SlideShare
slideshare:
 Weight: 47
 Prefix: https://slideshare.com/
 Title: SlideShare
 Icon:
 Class: fa-brands fa-slideshare fa-fw

# 048: JSFiddle
jsfiddle:
 Weight: 48
 Prefix: https://jsfiddle.com/
 Title: JSFiddle
 Icon:
 Class: fa-brands fa-jsfiddle fa-fw

# 049: DeviantArt
deviantart:
 Weight: 49
 Template: https://%v.deviantart.com/
 Title: DeviantArt
 Icon:
 Class: fa-brands fa-deviantart fa-fw

# 050: Behance
behance:
 Weight: 50
 Prefix: https://behance.net/
 Title: Behance
 Icon:
 Class: fa-brands fa-behance fa-fw

# 051: Dribbble
dribbble:
 Weight: 51
 Prefix: https://dribbble.com/
 Title: Dribbble
 Icon:
 Class: fa-brands fa-dribbble fa-fw

# 052: WordPress
wordpress:
 Weight: 52
 Template: https://%v.wordpress.com/
 Title: WordPress
 Icon:
 Class: fa-brands fa-wordpress fa-fw

# 053: Vine
vine:
 Weight: 53
 Prefix: https://vine.co/
 Title: Vine
 Icon:
 Class: fa-brands fa-vine fa-fw

# 054: Google Scholar
googlescholar:
 Weight: 54
 Template: https://scholar.google.com/citations?%v
 Title: Google Scholar
 Icon:
 Simpleicons: googlescholar

# 055: ResearchGate
researchgate:
 Weight: 55
 Prefix: https://www.researchgate.net/profile/
 Title: ResearchGate
 Icon:
 Class: fa-brands fa-researchgate fa-fw

# 056: Mastodon
mastodon:
 Weight: 56
 Prefix: https://mastodon.social/
 Title: Mastodon
 Icon:
 Class: fa-brands fa-mastodon fa-fw

# 057: Thingiverse
thingiverse:
 Weight: 57
 Prefix: https://www.thingiverse.com/
 Title: Thingiverse
 Icon:
 Simpleicons: thingiverse

# 058: Dev.To
devto:
 Weight: 58
 Prefix: https://dev.to/
 Title: Dev.To
 Icon:
 Class: fa-brands fa-dev fa-fw

# 059: Gitea
gitea:
 Weight: 59
 Title: Gitea
 Icon:
 Simpleicons: gitea

# 060: XMPP
xmpp:
 Weight: 60
 Template: xmpp:%v
 Title: XMPP
 Icon:
 Simpleicons: xmpp

# 061: Matrix
matrix:
 Weight: 61
 Prefix: https://matrix.to/#/
 Title: Matrix
 Icon:
 Simpleicons: matrix

# 062: bilibili
bilibili:
 Weight: 62
 Prefix: https://space.bilibili.com/
 Title: bilibili
 Icon:
 Class: fa-brands fa-bilibili

# 063: ORCID
orcid:
 Weight: 63
 Prefix: https://orcid.org/
 Title: ORCID
 Icon:
 Class: fa-brands fa-orcid fa-fw

# 064 Liberapay
liberapay:
 Weight: 64
 Prefix: https://liberapay.com/
 Title: Liberapay
 Icon:
 Simpleicons: liberapay

# 065 Ko-Fi
ko-fi:
 Weight: 65
 Prefix: https://ko-fi.com/
 Title: Ko-Fi
 Icon:
 Simpleicons: kofi

# 066: BuyMeaCoffee
buymeacoffee:
 Weight: 66
 Prefix: https://www.buymeacoffee.com/
 Title: BuyMeaCoffee
 Icon:
 Simpleicons: buymeacoffee

# 067: Linktree
linktree:
 Weight: 67
 Prefix: https://linktr.ee/
 Title: Linktree
 Icon:
 Simpleicons: linktree

# 068: QQ
qq:
 Weight: 68
 # Template: https://wpa.qq.com/msgrd?v=3&amp;amp;amp;uin=%v&amp;amp;amp;site=qq&amp;amp;amp;menu=yes
 Template: tencent://message/?uin=%v
 Title: QQ
 Icon:
 Simpleicons: tencentqq

blogger:
 Weight: 68
 # Template: https://geekswg.blogspot.com/ %v
 Template: &amp;amp;#39;%v&amp;amp;#39;
 Title: Blogger
 Icon:
 Class: fa-solid fa-bold

# 069: QQ Group
qqgroup:
 Weight: 69
 Template: https://qm.qq.com/cgi-bin/qm/qr?k=%v&amp;amp;amp;jump_from=webapi
 Title: QQ Group
 Icon:
 Class: fa-solid fa-users

# 070: Diaspora
diaspora:
 Weight: 70
 Title: diaspora*
 Icon:
 Simpleicons: diaspora

# 071: CSDN
# 071: CSDN
csdn:
 Weight: 71
 Prefix: https://blog.csdn.net/
 Title: CSDN
 Icon:
 Src: images/icons/csdn.svg
cnblog:
 Weight: 71
 Prefix: https://www.cnblogs.com/
 Title: CNBlog-博客园
 Icon:
 Src: images/icons/cnblog.svg
blog:
 Weight: 71
 #Prefix: https://www.cnblogs.com/
 Template: &amp;amp;#39;%v&amp;amp;#39;
 Title: 博客
 Icon:
 Src: images/icons/blog.svg

# 072: Discord User Profile
discord:
 Weight: 72
 Prefix: https://discordapp.com/users/
 Title: Discord
 Icon:
 Class: fa-brands fa-discord fa-fw

# 073: Discord Server Invite Link
discordInvite:
 Weight: 73
 Prefix: https://discord.gg/
 Title: Discord
 Icon:
 Class: fa-brands fa-discord fa-fw

# 074: Lichess user profile
lichess:
 Weight: 74
 Prefix: https://lichess.org/@/
 Title: Lichess
 Icon:
 Simpleicons: lichess

# 075: Pleroma
pleroma:
 Weight: 75
 Title: Pleroma
 Icon:
 Simpleicons: pleroma

# 076: Kaggle
kaggle:
 Weight: 76
 Prefix: https://kaggle.com/
 Title: Kaggle
 Icon:
 Class: fa-brands fa-kaggle fa-fw

# 077: MediaWiki
mediawiki:
 Weight: 77
 Title: MediaWiki
 Icon:
 Class: fa-brands fa-wikipedia-w fa-fw

# 078: Plume
plume:
 Weight: 78
 Title: Plume
 Icon:
 Src: svg/icons/plume.svg

# 079: Hack The Box
hackthebox:
 Weight: 79
 Title: Hack The Box
 Prefix: https://app.hackthebox.com/profile/
 Icon:
 Simpleicons: hackthebox

# 080: Root-Me
rootme:
 Weight: 80
 Title: Root-Me
 Prefix: https://www.root-me.org/
 Icon:
 Src: svg/icons/rootme.svg

# 081: Feishu
feishu:
 Weight: 81
 Title: Feishu
 Template: https://www.feishu.cn/invitation/page/add_contact/?token=%v
 Icon:
 Class: fa-solid fa-dove

# 082: TryHackMe
tryhackme:
 Weight: 82
 Title: TryHackMe
 Prefix: https://tryhackme.com/p/
 Icon:
 Simpleicons: tryhackme

# 083 douyin
douyin:
 Weight: 83
 Title: 抖音
 Prefix: https://www.douyin.com/user/
 Icon:
 Class: fa-brands fa-tiktok

# 084 TikTok
tiktok:
 Weight: 84
 Title: TikTok
 Prefix: https://www.tiktok.com/
 Icon:
 Class: fa-brands fa-tiktok

# Phone
phone:
 Weight: 997
 Template: tel:%v
 Title: Phone
 Icon:
 Class: fa-solid fa-phone fa-fw

# Email
email:
 Weight: 998
 Template: mailto:%v
 Title: Email
 Icon:
 Class: fa-regular fa-envelope fa-fw

# RSS
rss:
 Weight: 999
 Url: /index.xml
 Title: RSS
 Newtab: true
 Icon:
 Class: fa-solid fa-rss fa-fw
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;读取站点/config/目录下的配置文件：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-yml"&gt;#
title: 毕少侠-hugo-yml
baseURL: http://127.0.0.1:1313/
theme:
 - FixIt
themesDir: themes
defaultContentLanguage: zh-cn
languageCode: zh-CN
languageName: 简体中文
hasCJKLanguage: true
summaryLength: 70
# 修复 Hugo 0.123.0 版本自动大写标签首字母
capitalizeListTitles: false
titleCaseStyle: ap
pagination: 
 pagerSize: 12
googleAnalytics: &amp;amp;#34;&amp;amp;#34;
copyright: &amp;amp;#39;geekswg &amp;amp;amp; 毕少侠&amp;amp;#39;
enableRobotsTXT: true
enableGitInfo: true
enableEmoji: true
ignoreErrors:
 #- warning-dev-version
 - error-remote-getjson
 - error-missing-instagram-accesstoken
 - warning-remote-image
buildDrafts: false
# url格式 ： true /about.html | /about/
uglyurls: false
timeout: 20s
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="实现方法"&gt;&lt;span&gt;实现方法&lt;/span&gt;
 &lt;a href="#%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%b3%95" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;使用自定义的 render-codeblock-fromfile.html 模板文件，结合 &lt;a href="https://hugo.opendocs.io/zh-cn" target="_blank" rel="external nofollow noopener noreferrer"&gt;Hugo&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 的 partial 和 &lt;a href="https://hugo.opendocs.io/zh-cn/templates/render-hooks/" target="_blank" rel="external nofollow noopener noreferrer"&gt;render-hooks&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 功能实现。&lt;/p&gt;
&lt;p&gt;layouts/_markup/render-codeblock-fromfile.html 内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/codeblock-demo.md:81:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;layouts/_markup/render-codeblock.xml 内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/codeblock-demo.md:86:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;layouts/partials/plugin/code-fromfile.html 内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/codeblock-demo.md:91:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;/layouts/partials/plugin/code-block-wrapper-fromfile.html 内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/codeblock-demo.md:96:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;</description></item><item><title>hugo博客添加数据统计页面</title><link>https://geekswg.js.cool/posts/2026/blog-stats/</link><pubDate>Sat, 24 Jan 2026 15:22:51 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/blog-stats/</guid><category domain="https://geekswg.js.cool/categories/theme/">theme</category><description>&lt;p&gt;给你的博客添加统计页面，展示你的博客数据统计信息。&lt;a href="https://geekswg.js.cool/stats/" target="_blank" rel="external nofollow noopener noreferrer"&gt;点击这里&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;预览效果。&lt;/p&gt;
&lt;div class="alert alert-important"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M0 1.75C0 .784.784.0 1.75.0h12.5C15.216.0 16 .784 16 1.75v9.5A1.75 1.75.0 0114.25 13H8.06l-2.573 2.573A1.458 1.458.0 013 14.543V13H1.75A1.75 1.75.0 010 11.25zm1.75-.25a.25.25.0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75.0 01.75.75v2.19l2.72-2.72a.749.749.0 01.53-.22h6.5a.25.25.0 00.25-.25v-9.5a.25.25.0 00-.25-.25zm7 2.25v2.5a.75.75.0 01-1.5.0v-2.5a.75.75.0 011.5.0zM9 9A1 1 0 117 9a1 1 0 012 0z"/&gt;&lt;/svg&gt;重要&lt;/p&gt;&lt;p&gt;理论上该方法适用于所有hugo博客，但由于每个博客的配置和主题结构不同，可能会存在兼容性问题，请自己适配！已在&lt;a href="https://fixit.lruihao.cn/zh-cn/" target="_blank" rel="external nofollow noopener noreferrer"&gt;Fixit主题&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;下测试通过。&lt;/p&gt;&lt;/div&gt;&lt;h2 class="heading-element" id="思路"&gt;&lt;span&gt;思路&lt;/span&gt;
 &lt;a href="#%e6%80%9d%e8%b7%af" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;利用&lt;a href="https://gohugo.io/functions/" target="_blank" rel="external nofollow noopener noreferrer"&gt;hugo&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;内置的功能函数，结合一些js代码实现博客数据的统计展示，包括：文章，页面、分类，标签，友情链接，字数等数据。文章条形图，分类饼图等图表使用svg+js绘制而成。&lt;/p&gt;
&lt;h2 class="heading-element" id="代码"&gt;&lt;span&gt;代码&lt;/span&gt;
 &lt;a href="#%e4%bb%a3%e7%a0%81" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="创建统计页面layout文件"&gt;&lt;span&gt;创建统计页面layout文件&lt;/span&gt;
 &lt;a href="#%e5%88%9b%e5%bb%ba%e7%bb%9f%e8%ae%a1%e9%a1%b5%e9%9d%a2layout%e6%96%87%e4%bb%b6" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;在博客根目录下创建&lt;code&gt;layouts/stats.html&lt;/code&gt;文件，内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/blog-stats.md:25:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="创建css文件"&gt;&lt;span&gt;创建css文件&lt;/span&gt;
 &lt;a href="#%e5%88%9b%e5%bb%bacss%e6%96%87%e4%bb%b6" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;在博客根目录下创建&lt;code&gt;content/stats/stats.css&lt;/code&gt;文件，内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;FromFile error: invalid path %!q(&amp;amp;lt;nil&amp;amp;gt;) at &amp;amp;#34;/home/runner/work/blog-fixit/blog-fixit/content/posts/_dev/theme/blog-stats.md:32:1&amp;amp;#34;
file: &amp;amp;lt;nil&amp;amp;gt;
lines: &amp;amp;lt;all&amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="创建md文件"&gt;&lt;span&gt;创建md文件&lt;/span&gt;
 &lt;a href="#%e5%88%9b%e5%bb%bamd%e6%96%87%e4%bb%b6" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;在博客根目录下创建&lt;code&gt;content/stats/index.md&lt;/code&gt;文件，内容如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;---
title: &amp;#34;博客统计&amp;#34;
date: 2026-01-24T15:22:51&amp;#43;08:00
layout: stats
---
your content goes here.&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="参考"&gt;&lt;span&gt;参考&lt;/span&gt;
 &lt;a href="#%e5%8f%82%e8%80%83" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;[1] 主要参考 &lt;a href="https://www.eallion.com/blog-heatmap/" target="_blank" rel="external nofollow noopener noreferrer"&gt;https://www.eallion.com/blog-heatmap/&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;，感谢 eallion 的无私分享！&lt;/p&gt;</description></item><item><title>js的魔法特效</title><link>https://geekswg.js.cool/posts/2026/js-magic/</link><pubDate>Mon, 19 Jan 2026 18:51:00 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/js-magic/</guid><category domain="https://geekswg.js.cool/categories/dev/">开发</category><description>&lt;p&gt;记录一些神奇且实用的JavaScript特效，源码来自互联网，部分经过修改和优化。可以直接在博客中使用，无需引入其他库。主要使用javascript和canvas特性实现。&lt;/p&gt;
&lt;h2 class="heading-element" id="游动的小鱼"&gt;&lt;span&gt;游动的小鱼&lt;/span&gt;
 &lt;a href="#%e6%b8%b8%e5%8a%a8%e7%9a%84%e5%b0%8f%e9%b1%bc" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;&lt;a href="javascript:window.scrollTo(0, document.body.scrollHeight);" &gt;查看效果 &lt;/a&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;/**
 * 源码来自互联网，作者不详
 * @modified by Lruihao 2024-05-21 移除依赖 jQuery
 * @description 一个鱼游动的动画效果
 */
const RENDERER = {
 POINT_INTERVAL: 5,
 FISH_COUNT: 3,
 MAX_INTERVAL_COUNT: 50,
 INIT_HEIGHT_RATE: 0.5,
 THRESHOLD: 50,
 FISH_COLOR: &amp;#39;#ff0000&amp;#39;, // 鱼的颜色，可以修改为其他颜色，默认置空
 FISH_BACKGROUND_LIGHT: &amp;#39;rgb(0 119 190 / 8%)&amp;#39;,
 FISH_BACKGROUND_DARK: &amp;#39;rgb(255 255 255 / 8%)&amp;#39;,
 THEME_STATE: fixit.isDark, // 这里利用 FixIt 主题的 isDark 属性来判断是否是暗色主题
 FISH_STYLE: `
 .footer {
 position: relative;
 }
 #flyfish {
 position: absolute;
 width: 100%;
 height: 230px;
 overflow: hidden;
 left: 0;
 bottom: 0;
 z-index: -1;
 pointer-events: none;
 }`,

 init: function () {
 this.setParameters();
 this.setStyle();
 this.reconstructMethods();
 this.setup();
 this.bindEvent();
 this.render();
 },
 setParameters: function () {
 this.window = window;
 this.container = document.createElement(&amp;#34;div&amp;#34;);
 this.container.id = &amp;#34;flyfish&amp;#34;;
 this.canvas = document.createElement(&amp;#34;canvas&amp;#34;);
 this.context = this.canvas.getContext(&amp;#34;2d&amp;#34;);
 this.points = [];
 this.fishes = [];
 this.watchIds = [];
 document.querySelector(&amp;#39;.footer&amp;#39;).appendChild(this.container);
 //document.body.appendChild(this.container);
 },
 setStyle: function () {
 const style = document.createElement(&amp;#34;style&amp;#34;);
 style.innerHTML = this.FISH_STYLE;
 document.querySelector(&amp;#34;head&amp;#34;).appendChild(style);
 },
 createSurfacePoints: function () {
 const count = Math.round(this.width / this.POINT_INTERVAL);
 this.pointInterval = this.width / (count - 1);
 this.points.push(new SURFACE_POINT(this, 0));

 for (let i = 1; i &amp;lt; count; i&amp;#43;&amp;#43;) {
 const point = new SURFACE_POINT(this, i * this.pointInterval),
 previous = this.points[i - 1];

 point.setPreviousPoint(previous);
 previous.setNextPoint(point);
 this.points.push(point);
 }
 },
 reconstructMethods: function () {
 this.watchWindowSize = this.watchWindowSize.bind(this);
 this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
 this.startEpicenter = this.startEpicenter.bind(this);
 this.moveEpicenter = this.moveEpicenter.bind(this);
 this.render = this.render.bind(this);
 },
 setup: function () {
 this.points.length = 0;
 this.fishes.length = 0;
 this.watchIds.length = 0;
 this.intervalCount = this.MAX_INTERVAL_COUNT;

 this.containerWidth = this.container.offsetWidth;
 this.containerHeight = this.container.offsetHeight;
 this.width = this.containerWidth;
 this.height = this.containerHeight;
 this.fishCount =
 (((this.FISH_COUNT * this.width) / 500) * this.height) / 500;
 this.canvas.width = this.width;
 this.canvas.height = this.height;
 this.reverse = false;

 this.container.appendChild(this.canvas);
 this.fishes.push(new FISH(this));
 this.createSurfacePoints();
 },
 watchWindowSize: function () {
 this.clearTimer();
 this.tmpWidth = this.window.innerWidth;
 this.tmpHeight = this.window.innerHeight;
 this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL));
 },
 clearTimer: function () {
 while (this.watchIds.length &amp;gt; 0) {
 clearTimeout(this.watchIds.pop());
 }
 },
 jdugeToStopResize: function () {
 const width = this.window.innerWidth,
 height = this.window.innerHeight,
 stopped = width == this.tmpWidth &amp;amp;&amp;amp; height == this.tmpHeight;

 this.tmpWidth = width;
 this.tmpHeight = height;

 if (stopped) {
 this.setup();
 }
 },
 bindEvent: function () {
 const self = this;
 this.window.addEventListener(&amp;#34;resize&amp;#34;, function () {
 self.watchWindowSize();
 });
 this.container.addEventListener(&amp;#34;mouseenter&amp;#34;, function (event) {
 self.startEpicenter(event);
 });
 this.container.addEventListener(&amp;#34;mousemove&amp;#34;, function (event) {
 self.moveEpicenter(event);
 });
 },
 getAxis: function (event) {
 const offset = this.container.getBoundingClientRect();

 return {
 x: event.clientX - offset.left &amp;#43; this.window.scrollX,
 y: event.clientY - offset.top &amp;#43; this.window.scrollY,
 };
 },
 startEpicenter: function (event) {
 this.axis = this.getAxis(event);
 },
 moveEpicenter: function (event) {
 const axis = this.getAxis(event);

 if (!this.axis) {
 this.axis = axis;
 }
 this.generateEpicenter(axis.x, axis.y, axis.y - this.axis.y);
 this.axis = axis;
 },
 generateEpicenter: function (x, y, velocity) {
 if (
 y &amp;lt; this.height / 2 - this.THRESHOLD ||
 y &amp;gt; this.height / 2 &amp;#43; this.THRESHOLD
 ) {
 return;
 }
 const index = Math.round(x / this.pointInterval);

 if (index &amp;lt; 0 || index &amp;gt;= this.points.length) {
 return;
 }
 this.points[index].interfere(y, velocity);
 },
 controlStatus: function () {
 for (let i = 0, count = this.points.length; i &amp;lt; count; i&amp;#43;&amp;#43;) {
 this.points[i].updateSelf();
 }
 for (let i = 0, count = this.points.length; i &amp;lt; count; i&amp;#43;&amp;#43;) {
 this.points[i].updateNeighbors();
 }
 if (this.fishes.length &amp;lt; this.fishCount) {
 if (--this.intervalCount == 0) {
 this.intervalCount = this.MAX_INTERVAL_COUNT;
 this.fishes.push(new FISH(this));
 }
 }
 },
 render: function () {
 const self = this;
 function renderFrame() {
 self.controlStatus();
 self.context.clearRect(0, 0, self.width, self.height);
 if (self.THEME_STATE) {
 self.context.fillStyle = self.FISH_BACKGROUND_DARK;
 } else {
 self.context.fillStyle = self.FISH_BACKGROUND_LIGHT;
 }
 for (let i = 0, count = self.fishes.length; i &amp;lt; count; i&amp;#43;&amp;#43;) {
 self.fishes[i].render(self.context);
 }
 self.context.save();
 self.context.globalCompositeOperation = &amp;#34;xor&amp;#34;;
 self.context.beginPath();
 self.context.moveTo(0, self.reverse ? 0 : self.height);

 for (let i = 0, count = self.points.length; i &amp;lt; count; i&amp;#43;&amp;#43;) {
 self.points[i].render(self.context);
 }
 self.context.lineTo(self.width, self.reverse ? 0 : self.height);
 self.context.closePath();
 self.context.fill();
 self.context.restore();

 requestAnimationFrame(renderFrame);
 }
 renderFrame();
 },
 randomColor: function () {
 var letters = &amp;#39;0123456789ABCDEF&amp;#39;;
 var color = &amp;#39;#&amp;#39;;
 for (var i = 0; i &amp;lt; 6; i&amp;#43;&amp;#43;) {
 color &amp;#43;= letters[Math.floor(Math.random() * 16)];
 }
 return color;
 }
};

// SURFACE_POINT class
function SURFACE_POINT(renderer, x) {
 this.renderer = renderer;
 this.x = x;
 this.init();
}
SURFACE_POINT.prototype = {
 SPRING_CONSTANT: 0.03,
 SPRING_FRICTION: 0.9,
 WAVE_SPREAD: 0.3,
 ACCELARATION_RATE: 0.01,

 init: function () {
 this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE;
 this.height = this.initHeight;
 this.fy = 0;
 this.force = { previous: 0, next: 0 };
 },
 setPreviousPoint: function (previous) {
 this.previous = previous;
 },
 setNextPoint: function (next) {
 this.next = next;
 },
 interfere: function (y, velocity) {
 this.fy =
 this.renderer.height *
 this.ACCELARATION_RATE *
 (this.renderer.height - this.height - y &amp;gt;= 0 ? -1 : 1) *
 Math.abs(velocity);
 },
 updateSelf: function () {
 this.fy &amp;#43;= this.SPRING_CONSTANT * (this.initHeight - this.height);
 this.fy *= this.SPRING_FRICTION;
 this.height &amp;#43;= this.fy;
 },
 updateNeighbors: function () {
 if (this.previous) {
 this.force.previous =
 this.WAVE_SPREAD * (this.height - this.previous.height);
 }
 if (this.next) {
 this.force.next = this.WAVE_SPREAD * (this.height - this.next.height);
 }
 },
 render: function (context) {
 if (this.previous) {
 this.previous.height &amp;#43;= this.force.previous;
 this.previous.fy &amp;#43;= this.force.previous;
 }
 if (this.next) {
 this.next.height &amp;#43;= this.force.next;
 this.next.fy &amp;#43;= this.force.next;
 }
 context.lineTo(this.x, this.renderer.height - this.height);
 },
};

// FISH class
function FISH(renderer) {
 this.renderer = renderer;
 this.init();
}
FISH.prototype = {
 GRAVITY: 0.5,
 init: function () {
 this.direction = Math.random() &amp;lt; 0.5;
 this.x = this.direction
 ? this.renderer.width &amp;#43; this.renderer.THRESHOLD
 : -this.renderer.THRESHOLD;
 this.previousY = this.y;
 this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1);

 if (this.renderer.reverse) {
 this.y = this.getRandomValue(
 (this.renderer.height * 1) / 10,
 (this.renderer.height * 4) / 10
 );
 this.vy = this.getRandomValue(2, 5);
 this.ay = this.getRandomValue(0.05, 0.2);
 } else {
 this.y = this.getRandomValue(
 (this.renderer.height * 6) / 10,
 (this.renderer.height * 9) / 10
 );
 this.vy = this.getRandomValue(-5, -2);
 this.ay = this.getRandomValue(-0.2, -0.05);
 }
 this.isOut = false;
 this.theta = 0;
 this.phi = 0;
 },
 getRandomValue: function (min, max) {
 return min &amp;#43; (max - min) * Math.random();
 },
 controlStatus: function (context) {
 this.previousY = this.y;
 this.x &amp;#43;= this.vx;
 this.y &amp;#43;= this.vy;
 this.vy &amp;#43;= this.ay;

 if (this.renderer.reverse) {
 if (this.y &amp;gt; this.renderer.height * this.renderer.INIT_HEIGHT_RATE) {
 this.vy -= this.GRAVITY;
 this.isOut = true;
 } else {
 if (this.isOut) {
 this.ay = this.getRandomValue(0.05, 0.2);
 }
 this.isOut = false;
 }
 } else {
 if (this.y &amp;lt; this.renderer.height * this.renderer.INIT_HEIGHT_RATE) {
 this.vy &amp;#43;= this.GRAVITY;
 this.isOut = true;
 } else {
 if (this.isOut) {
 this.ay = this.getRandomValue(-0.2, -0.05);
 }
 this.isOut = false;
 }
 }
 if (!this.isOut) {
 this.theta &amp;#43;= Math.PI / 20;
 this.theta %= Math.PI * 2;
 this.phi &amp;#43;= Math.PI / 30;
 this.phi %= Math.PI * 2;
 }
 this.renderer.generateEpicenter(
 this.x &amp;#43; (this.direction ? -1 : 1) * this.renderer.THRESHOLD,
 this.y,
 this.y - this.previousY
 );

 if (
 (this.vx &amp;gt; 0 &amp;amp;&amp;amp; this.x &amp;gt; this.renderer.width &amp;#43; this.renderer.THRESHOLD) ||
 (this.vx &amp;lt; 0 &amp;amp;&amp;amp; this.x &amp;lt; -this.renderer.THRESHOLD)
 ) {
 this.init();
 }
 },
 render: function (context) {
 
 context.save();
 context.translate(this.x, this.y);
 context.rotate(Math.PI &amp;#43; Math.atan2(this.vy, this.vx));
 context.scale(1, this.direction ? 1 : -1);
 context.fillStyle = this.renderer.FISH_COLOR;
 context.beginPath();
 context.moveTo(-30, 0);
 context.bezierCurveTo(-20, 15, 15, 10, 40, 0);
 context.bezierCurveTo(15, -10, -20, -15, -30, 0);
 context.fill();

 context.save();
 context.translate(40, 0);
 context.scale(0.9 &amp;#43; 0.2 * Math.sin(this.theta), 1);
 context.beginPath();
 context.moveTo(0, 0);
 context.quadraticCurveTo(5, 10, 20, 8);
 context.quadraticCurveTo(12, 5, 10, 0);
 context.quadraticCurveTo(12, -5, 20, -8);
 context.quadraticCurveTo(5, -10, 0, 0);
 context.fill();
 context.restore();

 context.save();
 context.translate(-3, 0);
 context.rotate(
 (Math.PI / 3 &amp;#43; (Math.PI / 10) * Math.sin(this.phi)) *
 (this.renderer.reverse ? -1 : 1)
 );

 context.beginPath();

 if (this.renderer.reverse) {
 context.moveTo(5, 0);
 context.bezierCurveTo(10, 10, 10, 30, 0, 40);
 context.bezierCurveTo(-12, 25, -8, 10, 0, 0);
 } else {
 context.moveTo(-5, 0);
 context.bezierCurveTo(-10, -10, -10, -30, 0, -40);
 context.bezierCurveTo(12, -25, 8, -10, 0, 0);
 }
 context.closePath();
 context.fill();
 context.restore();
 context.restore();
 this.controlStatus(context);
 
 },
};

// window.onload = function () {
// RENDERER.init();
// };

window.addEventListener(&amp;#34;load&amp;#34;, function () {
 RENDERER.init();
});&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="动态彩虹带背景"&gt;&lt;span&gt;动态彩虹带背景&lt;/span&gt;
 &lt;a href="#%e5%8a%a8%e6%80%81%e5%bd%a9%e8%99%b9%e5%b8%a6%e8%83%8c%e6%99%af" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;使用方法：直接在html中引入下面的js代码即可。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;(function (name, factory) {
 if (typeof window === &amp;#34;object&amp;#34;) {
 window[name] = factory();
 }
})
 (&amp;#34;Ribbons&amp;#34;, function () {
 var _w = window, _b = document.body, _d = document.documentElement;

 //随机函数
 var random = function () {
 if (arguments.length === 1) {
 if (Array.isArray(arguments[0])) {
 var index = Math.round(random(0, arguments[0].length - 1));
 return arguments[0][index];
 }
 return random(0, arguments[0]);
 } else
 if (arguments.length === 2) {
 return Math.random() * (arguments[1] - arguments[0]) &amp;#43; arguments[0];
 }
 return 0;
 };

 //屏幕信息
 var screenInfo = function (e) {
 var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
 height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
 scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
 scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
 return {
 width: width,
 height: height,
 ratio: width / height,
 centerx: width / 2,
 centery: height / 2,
 scrollx: scrollx,
 scrolly: scrolly
 };
 };

 var mouseInfo = function (e) {
 var screen = screenInfo(e),
 mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
 mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;

 return {
 mousex: mousex,
 mousey: mousey,
 centerx: mousex - screen.width / 2,
 centery: mousey - screen.height / 2
 };
 };

 //点
 var Point = function (x, y) {
 this.x = 0;
 this.y = 0;
 this.set(x, y);
 };
 //点运算
 Point.prototype = {
 constructor: Point,
 set: function (x, y) {
 this.x = x || 0; this.y = y || 0;
 },
 copy: function (point) {
 this.x = point.x || 0; this.y = point.y || 0; return this;
 },
 multiply: function (x, y) {
 this.x *= x || 1; this.y *= y || 1; return this;
 },
 divide: function (x, y) {
 this.x /= x || 1; this.y /= y || 1; return this;
 },
 add: function (x, y) {
 this.x &amp;#43;= x || 0; this.y &amp;#43;= y || 0; return this;
 },
 subtract: function (x, y) {
 this.x -= x || 0; this.y -= y || 0; return this;
 },
 clampX: function (min, max) {
 this.x = Math.max(min, Math.min(this.x, max)); return this;
 },
 clampY: function (min, max) {
 this.y = Math.max(min, Math.min(this.y, max)); return this;
 },
 flipX: function () {
 this.x *= -1; return this;
 },
 flipY: function () {
 this.y *= -1; return this;
 }
 };

 //丝带画板
 var Factory = function (options) {
 this._canvas = null;
 this._context = null;
 this._sto = null;
 this._width = 0;
 this._height = 0;
 this._scroll = 0;
 this._ribbons = [];
 this._options = {
 id: &amp;#34;bgCanvas&amp;#34;,//画板Id
 backgroundColor: &amp;#34;transparent&amp;#34;,//画板背景
 colorSaturation: &amp;#34;80%&amp;#34;,//纯度
 colorBrightness: &amp;#34;60%&amp;#34;,//亮度
 colorAlpha: 0.2,//透明度
 colorCycleSpeed: 6,//丝带不同块之间的色彩变化量
 verticalPosition: &amp;#34;center&amp;#34;,//丝带相对于屏幕的初始位置：top/min 屏幕最上方，middle|center 中间，bottom|max 屏幕最下面
 horizontalSpeed: 200,//丝带水平方向移动速度参数（会乘以一个随机值）
 ribbonCount: 3,//同一时间丝带总条数
 strokeSize: 0,//公共边路径样式
 parallaxAmount: -0.5,//滚动偏移参数，-1表示不偏移，0表示基于丝带只出现在页面最上面
 animateSections: true//丝带块是否偏移，显得有动感
 };
 this._onDraw = this._onDraw.bind(this);
 this._onResize = this._onResize.bind(this);
 this._onScroll = this._onScroll.bind(this);
 this.setOptions(options);
 this.init();
 };
 Factory.prototype = {
 constructor: Factory,
 setOptions: function (options) {
 if (typeof options === &amp;#34;object&amp;#34;) {
 for (var key in options) {
 if (options.hasOwnProperty(key)) {
 this._options[key] = options[key];
 }
 }
 }
 },
 //初始化
 init: function () {
 //初始化画板
 try {
 this._canvas = document.createElement(&amp;#34;canvas&amp;#34;);
 this._canvas.style[&amp;#34;display&amp;#34;] = &amp;#34;block&amp;#34;;
 this._canvas.style[&amp;#34;position&amp;#34;] = &amp;#34;fixed&amp;#34;;
 this._canvas.style[&amp;#34;margin&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;padding&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;border&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;outline&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;left&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;top&amp;#34;] = &amp;#34;0&amp;#34;;
 this._canvas.style[&amp;#34;width&amp;#34;] = &amp;#34;100%&amp;#34;;
 this._canvas.style[&amp;#34;height&amp;#34;] = &amp;#34;100%&amp;#34;;
 this._canvas.style[&amp;#34;z-index&amp;#34;] = &amp;#34;-10&amp;#34;;
 this._canvas.style[&amp;#34;background-color&amp;#34;] = this._options.backgroundColor;
 this._canvas.id = this._options.id;
 this._onResize();
 this._context = this._canvas.getContext(&amp;#34;2d&amp;#34;);
 this._context.clearRect(0, 0, this._width, this._height);
 this._context.globalAlpha = this._options.colorAlpha;
 window.addEventListener(&amp;#34;resize&amp;#34;, this._onResize);
 window.addEventListener(&amp;#34;scroll&amp;#34;, this._onScroll);
 document.body.appendChild(this._canvas);
 }
 catch (e) {
 console.warn(&amp;#34;Canvas Context Error: &amp;#34; &amp;#43; e.toString());
 return;
 }
 //开始绘画
 this._onDraw();
 },
 //生成一条丝带
 addRibbon: function () {
 var dir = Math.round(random(1, 9)) &amp;gt; 5 ? &amp;#34;right&amp;#34; : &amp;#34;left&amp;#34;,//丝带延伸方向
 stop = 1000,
 hide = 200,
 min = 0 - hide,
 max = this._width &amp;#43; hide,
 movex = 0,
 movey = 0,
 startx = dir === &amp;#34;right&amp;#34; ? min : max,//起始点x左边
 starty = Math.round(random(0, this._height));//起始点y左边

 //丝带生成的位置
 if (/^(top|min)$/i.test(this._options.verticalPosition)) {//最上方
 starty = 0 &amp;#43; hide;
 } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {//中间
 starty = this._height / 2;
 } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {//最下方
 starty = this._height - hide;
 }

 if (this._options.parallaxAmount !== 0) {
 starty &amp;#43;= this._scroll;//加上滚动
 }

 var ribbon = [],
 point1 = new Point(startx, starty),
 point2 = new Point(startx, starty),
 point3 = null,
 color = Math.round(random(0, 360)),
 delay = 0;

 //从起始位置开始生成一条丝带
 //丝带每个分部都是一个三角形，三点确定一个三角形，相邻三角形有一条公共边
 while (true) {
 if (stop &amp;lt;= 0) break;
 stop--;
 movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
 movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
 point3 = new Point();
 point3.copy(point2);
 if (dir === &amp;#34;right&amp;#34;) {
 point3.add(movex, movey);
 if (point2.x &amp;gt;= max) break;
 } else if (dir === &amp;#34;left&amp;#34;) {
 point3.subtract(movex, movey);
 if (point2.x &amp;lt;= min) break;
 }
 ribbon.push({
 //三点
 point1: new Point(point1.x, point1.y),
 point2: new Point(point2.x, point2.y),
 point3: point3,
 color: color,//丝带颜色
 delay: delay,//延迟消失
 dir: dir,//方向
 alpha: 0,//透明度
 phase: 0 //随机位移有关参数
 });
 //公共边
 point1.copy(point2);
 point2.copy(point3);
 delay &amp;#43;= 4;
 color &amp;#43;= this._options.colorCycleSpeed;
 }
 this._ribbons.push(ribbon);
 },
 //绘制一个三角形方块
 _drawRibbonSection: function (section) {
 if (section) {
 if (section.phase &amp;gt;= 1 &amp;amp;&amp;amp; section.alpha &amp;lt;= 0) {
 return true;
 }
 if (section.delay &amp;lt;= 0) {
 section.phase &amp;#43;= 0.02;
 section.alpha = Math.sin(section.phase) * 1;
 section.alpha = section.alpha &amp;lt;= 0 ? 0 : section.alpha;
 section.alpha = section.alpha &amp;gt;= 1 ? 1 : section.alpha;
 if (this._options.animateSections) {
 var mod = Math.sin(1 &amp;#43; section.phase * Math.PI / 2) * 0.1;
 if (section.dir === &amp;#34;right&amp;#34;) {
 section.point1.add(mod, 0);
 section.point2.add(mod, 0);
 section.point3.add(mod, 0);
 } else {
 section.point1.subtract(mod, 0);
 section.point2.subtract(mod, 0);
 section.point3.subtract(mod, 0);
 }
 section.point1.add(0, mod);
 section.point2.add(0, mod);
 section.point3.add(0, mod);
 }
 } else {
 section.delay -= 0.5;
 }
 var s = this._options.colorSaturation,
 l = this._options.colorBrightness,
 c = &amp;#34;hsla(&amp;#34; &amp;#43; section.color &amp;#43; &amp;#34;, &amp;#34; &amp;#43; s &amp;#43; &amp;#34;, &amp;#34; &amp;#43; l &amp;#43; &amp;#34;, &amp;#34; &amp;#43; section.alpha &amp;#43; &amp;#34; )&amp;#34;;

 //绘制一个方块
 this._context.save();
 if (this._options.parallaxAmount !== 0) {
 this._context.translate(0, this._scroll * this._options.parallaxAmount);
 }
 this._context.beginPath();
 this._context.moveTo(section.point1.x, section.point1.y);
 this._context.lineTo(section.point2.x, section.point2.y);
 this._context.lineTo(section.point3.x, section.point3.y);
 this._context.fillStyle = c;
 this._context.fill();
 if (this._options.strokeSize &amp;gt; 0) {
 this._context.lineWidth = this._options.strokeSize;
 this._context.strokeStyle = c;
 this._context.lineCap = &amp;#34;round&amp;#34;;
 this._context.stroke();
 }
 this._context.restore();
 }
 return false;
 },
 //绘制丝带
 _onDraw: function () {
 //清空已经绘制过的丝带
 for (var i = 0, t = this._ribbons.length; i &amp;lt; t; &amp;#43;&amp;#43;i) {
 if (!this._ribbons[i]) {
 this._ribbons.splice(i, 1);
 }
 }
 this._context.clearRect(0, 0, this._width, this._height);//清空画板
 for (var a = 0; a &amp;lt; this._ribbons.length; &amp;#43;&amp;#43;a) {
 var ribbon = this._ribbons[a],
 numSections = ribbon ? ribbon.length : 0,
 numDone = 0;

 //绘制整条丝带
 for (var b = 0; b &amp;lt; numSections; &amp;#43;&amp;#43;b) {
 if (this._drawRibbonSection(ribbon[b])) {
 numDone&amp;#43;&amp;#43;;
 }
 }
 //丝带已经全部飘过屏幕，设置为null,函数前面会自动清理
 if (numDone &amp;gt;= numSections) {
 this._ribbons[a] = null;
 }
 }
 //随机生成一条丝带
 if (this._ribbons.length &amp;lt; this._options.ribbonCount &amp;amp;&amp;amp; Math.random() &amp;gt; 0.99) {
 this.addRibbon();
 }

 //调度交给系统，当需要刷新画板时调用指定的回调函数，用于提高性能
 requestAnimationFrame(this._onDraw);
 },
 //重新设置窗体大小时需要获取窗体大小
 _onResize: function (e) {
 var screen = screenInfo(e);
 this._width = screen.width;
 this._height = screen.height;
 if (this._canvas) {
 this._canvas.width = this._width;
 this._canvas.height = this._height;
 if (this._context) {
 this._context.globalAlpha = this._options.colorAlpha;
 }
 }
 },
 //滚动时获取滚动距离
 _onScroll: function (e) {
 var screen = screenInfo(e);
 this._scroll = screen.scrolly;
 }
 }; return Factory;
 });

//初始化并绘制
new Ribbons({
 ribbonCount: 5,
 parallaxAmount: -0.99
});
options = {
 id: &amp;#34;bgCanvas&amp;#34;,//画板Id
 backgroundColor: &amp;#34;#1f1f1f&amp;#34;,//画板背景
 colorSaturation: &amp;#34;80%&amp;#34;,//纯度
 colorBrightness: &amp;#34;60%&amp;#34;,//亮度
 colorAlpha: 0.65,//透明度
 colorCycleSpeed: 6,//丝带不同块之间的色彩变化量
 verticalPosition: &amp;#34;center&amp;#34;,//丝带相对于屏幕的初始位置：top/min 屏幕最上方，middle|center 中间，bottom|max 屏幕最下面
 horizontalSpeed: 200,//丝带水平方向移动速度参数（会乘以一个随机值）
 ribbonCount: 3,//同一时间丝带总条数
 strokeSize: 0,//公共边路径样式
 parallaxAmount: -0.5,//滚动偏移参数，-1表示不偏移，0表示基于丝带只出现在页面最上面
 animateSections: true//丝带块是否偏移，显得有动感
};&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="canvas数字时钟"&gt;&lt;span&gt;canvas数字时钟&lt;/span&gt;
 &lt;a href="#canvas%e6%95%b0%e5%ad%97%e6%97%b6%e9%92%9f" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;效果见主页或者侧边栏的数字时钟。&lt;/p&gt;
&lt;p&gt;使用方法：将下面的html代码放到你想显示数字时钟的位置，并引入canvasTime.js脚本即可,可以通过colckColor参数指定时钟的颜色，如果没有指定，则七种颜色随机生成。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!-- 数字时钟 --&amp;gt;
&amp;lt;div class=&amp;#34;aside-custom&amp;#34; &amp;gt;
 &amp;lt;canvas style=&amp;#34;width:100%;&amp;#34; id=&amp;#34;canvasTime&amp;#34; &amp;gt;当前浏览器不支持canvas，请更换浏览器后再试&amp;lt;/canvas&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;#34;/js/canvasTime.js?colckColor=red&amp;#34; &amp;gt;&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;a href="https://geekswg.js.cool/js/canvasTime.js"&gt;canvasTime.js脚本源码&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="heading-element" id="飞舞雪花"&gt;&lt;span&gt;飞舞雪花&lt;/span&gt;
 &lt;a href="#%e9%a3%9e%e8%88%9e%e9%9b%aa%e8%8a%b1" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;&lt;a href="javascript:startSnow()"&gt;开始下雪&lt;/a&gt;
&lt;a href="javascript:stopSnow()"&gt;停止下雪&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查看源码 &lt;a href="https://geekswg.js.cool/js/flysnow.js"&gt;js/flysnow.js&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;script&gt;
 function startSnow(){
 if (!window.snowfall) {
 loadJS('/js/flysnow.js?snowColor=f00');
 } else if (!window.snowfall.isRunning) {
 window.snowfall.toggle();
 }
 }
 function stopSnow(){
 if (window.snowfall) {
 window.snowfall.destroy();
 window.snowfall = null;
 }
 }
 function loadJS(src){
 var script = document.createElement('script');
 script.src = src;
 document.head.appendChild(script);
 }
&lt;/script&gt;
&lt;h2 class="heading-element" id="放烟花"&gt;&lt;span&gt;放烟花&lt;/span&gt;
 &lt;a href="#%e6%94%be%e7%83%9f%e8%8a%b1" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;预览效果：&lt;a href="javascript:triggerFireworks()"&gt;放烟花&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查看源码 &lt;a href="https://geekswg.js.cool/js/fireworks.js"&gt;js/fireworks.js&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;script&gt;
 let fireworksLoaded = false;
 function triggerFireworks(){
 // 检查烟花脚本是否已加载
 if (!fireworksLoaded) {
 // 如果脚本未加载，则加载脚本
 const script = document.createElement('script');
 script.src = '/js/fireworks.js';
 script.onload = function() {
 fireworksLoaded = true;
 // 脚本加载完成后调用烟花效果
 window.startFireworks();
 };
 document.head.appendChild(script);
 } else {
 // 脚本已加载，直接调用脚本中的函数
 window.startFireworks();
 }
 }
&lt;/script&gt;
&lt;!--
&gt; [!NOTE]
&gt; 突出显示用户应考虑的信息，即使只是浏览也应考虑。

&gt; [!TIP]
&gt; 可选信息，可帮助用户取得更大的成功。

&gt; [!IMPORTANT]
&gt; 用户成功所需的关键信息。

&gt; [!WARNING]
&gt; 由于存在潜在风险，需要用户立即关注的关键内容。

&gt; [!CAUTION]
&gt; 操作的潜在负面后果。
这里使用MD语法编写你的文章
 --&gt;</description></item><item><title>Cloudflare部署CFnew终端</title><link>https://geekswg.js.cool/posts/2026/cf-new/</link><pubDate>Sun, 11 Jan 2026 16:40:02 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/cf-new/</guid><category domain="https://geekswg.js.cool/categories/tutorial/">tutorial</category><description>&lt;p&gt;&lt;a href="https://github.com/byJoey/cfnew" target="_blank" rel="external nofollow noopener noreferrer"&gt;CFnew&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; - 终端 v2.9&lt;/p&gt;
&lt;h2 class="heading-element" id="介绍"&gt;&lt;span&gt;介绍&lt;/span&gt;
 &lt;a href="#%e4%bb%8b%e7%bb%8d" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;🎭 多协议支持 - VLESS + Trojan + xhttp，自由切换&lt;/li&gt;
&lt;li&gt;🛤️ 自定义路径 - 告别UUID路径，自定义访问地址，支持多级路径&lt;/li&gt;
&lt;li&gt;⚡ 延迟测试 - 内置IP延迟测试，自动获取机场码，多线程并发测试&lt;/li&gt;
&lt;li&gt;🔄 订阅转换 - 自定义转换服务，优选类型细粒度控制&lt;/li&gt;
&lt;li&gt;🎯 图形化管理 - KV存储，实时配置，无需重新部署&lt;/li&gt;
&lt;li&gt;🚀 API管理 - RESTful API，批量操作，动态更新&lt;/li&gt;
&lt;li&gt;📱 多客户端支持 - CLASH、SURGE、SING-BOX、LOON、QUANTUMULT X、- V2RAY、Shadowrocket、STASH、NEKORAY、V2RAYNG&lt;/li&gt;
&lt;li&gt;🚀 应用唤醒 - 点击按钮自动唤醒对应客户端应用&lt;/li&gt;
&lt;li&gt;🔍 自动识别 - 根据User-Agent自动识别并返回对应格式&lt;/li&gt;
&lt;li&gt;🌐 多语言支持 - 支持中文和波斯语（伊朗语），根据浏览器语言自动切换&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="部署"&gt;&lt;span&gt;部署&lt;/span&gt;
 &lt;a href="#%e9%83%a8%e7%bd%b2" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;利用Cloudflare Pages部署CFnew终端，无需服务器，无需域名，无需配置，即可在Cloudflare Pages上部署CFnew终端。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;下载CFnew终端部署zip包- 从&lt;a href="https://github.com/byJoey/cfnew/releases" target="_blank" rel="external nofollow noopener noreferrer"&gt;CFnew GitHub仓库&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;下载最新版本Pages.zip。&lt;/li&gt;
&lt;li&gt;登录&lt;a href="https://dash.cloudflare.com/" target="_blank" rel="external nofollow noopener noreferrer"&gt;Cloudflare账户&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;，点击右上角加号选择&lt;code&gt;页面&lt;/code&gt;，创建一个新的Pages项目,选择&lt;code&gt;拖放文件&lt;/code&gt;开始使用，输入项目名称&lt;code&gt;cf-new&lt;/code&gt;、创建项目,把刚刚下载的Pages.zip拖放到页面上，点击&lt;code&gt;部署&lt;/code&gt;。&lt;/li&gt;
&lt;li&gt;点击刚刚创建的Pages项目，进入&lt;code&gt;设置&lt;/code&gt;，在&lt;code&gt;变量和机密&lt;/code&gt;添加文本变量，&lt;code&gt;u&lt;/code&gt;,值为你随机生成一个uuid，可以在&lt;a href="https://www.lddgo.net/string/uuid" target="_blank" rel="external nofollow noopener noreferrer"&gt;UUID在线生成器&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;生成，复制生成的uuid，粘贴到&lt;code&gt;u&lt;/code&gt;的值中。&lt;/li&gt;
&lt;li&gt;在&lt;code&gt;存储和数据&lt;/code&gt;菜单中，点击&lt;code&gt;Workers KV&lt;/code&gt;，右上角创建一个KV实列，&lt;code&gt;Create Instance&lt;/code&gt;，实例名称&lt;code&gt;CFNEW_KV&lt;/code&gt;，回到刚刚创建的Pages项目点击&lt;code&gt;设置&lt;/code&gt;,&lt;code&gt;绑定&lt;/code&gt;，添加绑定，类型选择&lt;code&gt;Workers KV命名空间&lt;/code&gt;，名称&lt;code&gt;C&lt;/code&gt;，命名空间选择刚刚创建的实例，保存。&lt;/li&gt;
&lt;li&gt;点击&lt;code&gt;部署&lt;/code&gt;,右上角&lt;code&gt;创建部署&lt;/code&gt;,创建一个新的部署，等待部署完成，点击&lt;code&gt;查看部署&lt;/code&gt;，访问你的CFnew终端页面了。需要注意的是，cf自己提供的域名国内访问不稳定，经常打不开，建议绑定自己的域名使用。&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="alert alert-note"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5.0 100 13 6.5 6.5.0 000-13zM6.5 7.75A.75.75.0 017.25 7h1a.75.75.0 01.75.75v2.75h.25a.75.75.0 010 1.5h-2a.75.75.0 010-1.5h.25v-2h-.25a.75.75.0 01-.75-.75zM8 6a1 1 0 110-2 1 1 0 010 2z"/&gt;&lt;/svg&gt;注意&lt;/p&gt;&lt;p&gt;刚刚生成的UUID请妥善保管，用于后续访问时输入，如果忘记可以去Cloudflare Pages项目设置中查看，或者重新新生成一个配置，重新修改配置后需要重新部署才能生效。&lt;/p&gt;&lt;/div&gt;</description></item><item><title>Cloudflare隧道加速</title><link>https://geekswg.js.cool/posts/2026/cf-tunnel-speedup/</link><pubDate>Fri, 09 Jan 2026 00:26:47 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2026/cf-tunnel-speedup/</guid><category domain="https://geekswg.js.cool/categories/nas/">NAS</category><description>&lt;p&gt;记录Cloudflare隧道加速配置过程中的一些细节和注意事项。我们都知道赛博活佛Cloudflare隧道是一个非常好用且操作简单的内外穿透工具，但是由于隧道线路在国内访问速度极慢，Cloudflare隧道加速（国内优选IP）可以帮助我们提高网站的访问速度和稳定性。&lt;/p&gt;
&lt;h2 class="heading-element" id="先决条件"&gt;&lt;span&gt;先决条件&lt;/span&gt;
 &lt;a href="#%e5%85%88%e5%86%b3%e6%9d%a1%e4%bb%b6" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;已注册Cloudflare账号，已安装Cloudflare Tunnel客户端&lt;/li&gt;
&lt;li&gt;要求有两个域名并且已托管在Cloudflare，一个用于加速，一个用于正常访问&lt;/li&gt;
&lt;li&gt;Cloudflare账号开通了自定义&lt;code&gt;SSL/TLS-自定义主机名&lt;/code&gt;功能，推荐使用&lt;a href="https://www.paypal.com/" target="_blank" rel="external nofollow noopener noreferrer"&gt;paypal&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;账户激活，实名后绑卡后即可开通，无需付费。&lt;/li&gt;
&lt;li&gt;一个Cloudflare 国内IP优选服务解析,推荐使用 &lt;a href="https://saas.sin.fan/" target="_blank" rel="external nofollow noopener noreferrer"&gt;SIN&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;优选IP服务。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="开始配置"&gt;&lt;span&gt;开始配置&lt;/span&gt;
 &lt;a href="#%e5%bc%80%e5%a7%8b%e9%85%8d%e7%bd%ae" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;下面就以 &lt;code&gt;main.com&lt;/code&gt;, &lt;code&gt;huituiyuan.com&lt;/code&gt;,为例，分别为主域名和回退源域名，配置Cloudflare隧道加回源到国内优选IP，来实现国内加速访问。
主要为三个步骤：&lt;/p&gt;
&lt;p&gt;&lt;a href="#%e8%ae%be%e7%bd%ae%e5%9b%9e%e9%80%80%e6%ba%90"&gt;设置回退源&lt;/a&gt; 、&lt;a href="#%e9%85%8d%e7%bd%ae%e4%bc%98%e9%80%89ip%e6%9c%8d%e5%8a%a1"&gt;配置优选IP服务&lt;/a&gt;
、&lt;a href="#%e9%85%8d%e7%bd%ae%e4%b8%bb%e5%9f%9f%e5%90%8d"&gt;配置主域名&lt;/a&gt;&lt;/p&gt;
&lt;h3 class="heading-element" id="设置回退源"&gt;&lt;span&gt;设置回退源&lt;/span&gt;
 &lt;a href="#%e8%ae%be%e7%bd%ae%e5%9b%9e%e9%80%80%e6%ba%90" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;a.main.com&lt;/code&gt; 为主域名的cf隧道服务，&lt;code&gt;a.huituiyuan.com&lt;/code&gt;为回退源域名，cf隧道服务配置为 http://localhost ,不要填写端口。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ol&gt;
&lt;li&gt;登录Cloudflare，选择域名huituiyuan.com，进入&amp;quot;SSL/TLS&amp;quot;设置面。确保已开启&amp;quot;自定义主机名&amp;quot;功能，并配置相应的SSL证书。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;自定义主机名&lt;/code&gt;配置页面，选择&amp;quot;添加自定义主机名&amp;quot;,填写&lt;code&gt;a.main.com&lt;/code&gt;其他默认，点击&amp;quot;添加自定义主机名&amp;quot;完成。完成后下方会添加一条自定义主机名记录，&lt;code&gt;证书状态&lt;/code&gt;和&lt;code&gt;主机名状态&lt;/code&gt;都为&lt;code&gt;有效&lt;/code&gt;才表示配置成功,点击记录按照提示要求去&lt;code&gt;a.main.com&lt;/code&gt;添加txt记录完成验证即可。&lt;a href="#%e9%85%8d%e7%bd%ae%e4%b8%bb%e5%9f%9f%e5%90%8d"&gt;配置主域名&lt;/a&gt;会详细说明&lt;/li&gt;
&lt;li&gt;&lt;code&gt;自定义主机名&lt;/code&gt;配置页面，回退源添加&lt;code&gt;a.huituiyuan.com&lt;/code&gt;，添加完成。回退源状态为&lt;code&gt;有效&lt;/code&gt;才表示配置成功。&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 class="heading-element" id="配置优选ip服务"&gt;&lt;span&gt;配置优选IP服务&lt;/span&gt;
 &lt;a href="#%e9%85%8d%e7%bd%ae%e4%bc%98%e9%80%89ip%e6%9c%8d%e5%8a%a1" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;在&lt;code&gt;huituiyuan.com&lt;/code&gt;域名下，添加&lt;code&gt;cname&lt;/code&gt;记录，&lt;code&gt;cdn.huituiyuan.com&lt;/code&gt;，指向优选IP服务提供的域名，例如 &lt;code&gt;saas.sin.fan&lt;/code&gt;关闭小黄云加速。&lt;/p&gt;
&lt;h3 class="heading-element" id="配置主域名"&gt;&lt;span&gt;配置主域名&lt;/span&gt;
 &lt;a href="#%e9%85%8d%e7%bd%ae%e4%b8%bb%e5%9f%9f%e5%90%8d" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;在&lt;code&gt;main.com&lt;/code&gt;域名下，按照&lt;code&gt;设置回退源&lt;/code&gt;中第2步的,&lt;code&gt;自定义主机名&lt;/code&gt;记录,要求配置，添加相应的&lt;code&gt;txt&lt;/code&gt;记录完成DNS配置,完成自定义主机名状态验证。按要求配置自定义主机名的 DCV 委派。
自定义主机名的 DCV 委派,在main.com域名下添加cname记录，
&lt;code&gt;_acme-challenge.main.com&lt;/code&gt;指向&lt;code&gt;main.com.yourcode.dcv.cloudflare.com&lt;/code&gt;
（通配符自定义主机名）证书，而无需在每个续订期间手动放置 TXT 令牌。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;a.main.com&lt;/code&gt;的DNS记录修改&lt;code&gt;cname&lt;/code&gt;记录，指向&lt;code&gt;cdn.huituiyuan.com&lt;/code&gt;,关闭小黄云加速。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 class="heading-element" id="测试访问"&gt;&lt;span&gt;测试访问&lt;/span&gt;
 &lt;a href="#%e6%b5%8b%e8%af%95%e8%ae%bf%e9%97%ae" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;配置完成后，等待DNS解析生效，通常需要几分钟到数即可生效。然后访问&lt;code&gt;a.main.com&lt;/code&gt;，检查是否能够正常访问，并且速度是否有所提升。
可以使用&lt;a href="https://ping.chinaz.com/" target="_blank" rel="external nofollow noopener noreferrer"&gt;ping.cn&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;等工具测试访问速度。
测试结果显示，访问速度从原来的几秒提升到了几十毫秒，速度提升了数倍。&lt;/p&gt;
&lt;div class="details admonition note open disabled"&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;p&gt;CF隧道优选加速，只能提高国内访问速度，并不了提高CF隧道自身提供免费的带宽和流量限制！&lt;/p&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;&lt;!-- 
&gt; [!TIP]
&gt; 可选信息，可帮助用户取得更大的成功。

&gt; [!IMPORTANT]
&gt; 用户成功所需的关键信息。

&gt; [!WARNING]
&gt; 由于存在潜在风险，需要用户立即关注的关键内容。

&gt; [!CAUTION]
&gt; 操作的潜在负面后果。
这里使用MD语法编写你的文章
--&gt;</description></item><item><title>飞牛NAS之Docker</title><link>https://geekswg.js.cool/posts/2025/fn-docker/</link><pubDate>Fri, 26 Dec 2025 20:01:24 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2025/fn-docker/</guid><category domain="https://geekswg.js.cool/categories/nas/">NAS</category><description>&lt;p&gt;最近飞牛NAS发布了正式版系统，经过一段时间的使用，发现飞牛NAS的Docker功能还是很强大的，支持Docker和Docker-compose两种方式来部署应用。本文将分享一些我在飞牛NAS上使用Docker的经验和技巧。&lt;/p&gt;
&lt;h2 class="heading-element" id="什么是docker"&gt;&lt;span&gt;什么是Docker？&lt;/span&gt;
 &lt;a href="#%e4%bb%80%e4%b9%88%e6%98%afdocker" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;Docker是一种开源的应用容器引擎，允许开发者将应用程序及其依赖打包成一个标准化的容器，然后发布到任何流行的Linux机器上，也可以实现虚拟化。Docker容器是完全使用沙箱机制，相互之间不会有任何接口。优点是：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;便携性&lt;/strong&gt;：可以轻松地在不同环境中部署和运行应用程序。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;隔离性&lt;/strong&gt;：每个容器都是独立的，互不干扰。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;一致性&lt;/strong&gt;：确保应用程序在不同环境下的行为一致。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;资源效率&lt;/strong&gt;：容器共享主机内核，资源利用率高。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;快速启动&lt;/strong&gt;：容器启动速度快，适合弹性伸缩。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;安全性&lt;/strong&gt;：容器内置安全机制，避免了系统漏洞。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="heading-element" id="飞牛nas上的docker"&gt;&lt;span&gt;飞牛NAS上的Docker&lt;/span&gt;
 &lt;a href="#%e9%a3%9e%e7%89%9bnas%e4%b8%8a%e7%9a%84docker" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;飞牛NAS支持Docker和Docker-compose两种方式来部署应用。下面将详细介绍如何在飞牛NAS上使用Docker。&lt;/p&gt;
&lt;h2 class="heading-element" id="使用docker部署应用"&gt;&lt;span&gt;使用Docker部署应用&lt;/span&gt;
 &lt;a href="#%e4%bd%bf%e7%94%a8docker%e9%83%a8%e7%bd%b2%e5%ba%94%e7%94%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;飞牛已经内置了Docker，可以直接使用。非常方便。以下是使用Docker部署应用的步骤：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;登录飞牛NAS管理界面&lt;/strong&gt;：使用管理员账号登录飞牛NAS的Web管理界面。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;打开Docker应用&lt;/strong&gt;：在应用市场中找到Docker应用并打开。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;创建Docker容器&lt;/strong&gt;：在Docker应用中创建一个新的容器。填写容器名称、镜像名称、端口映射等信息，然后点击“创建”按钮。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;管理Docker容器&lt;/strong&gt;：创建完成后，可以在Docker应用中看到已创建的容器。可以启动、停止、删除容器，也可以查看容器的日志和资源使用情况。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 class="heading-element" id="docker-composeyml配置说明"&gt;&lt;span&gt;Docker-Compose.yml配置说明&lt;/span&gt;
 &lt;a href="#docker-composeyml%e9%85%8d%e7%bd%ae%e8%af%b4%e6%98%8e" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;Docker-compose.yml配置文件是Docker Compose的核心配置文件，用于定义Docker容器的运行环境。下面是Docker-compose.yml配置文件的基本结构：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;version: &amp;#39;3&amp;#39; # 指定Docker Compose文件的版本
services: # 定义服务
 service_name: # 服务名称
 image: image_name:tag # 指定使用的Docker镜像和标签
 container_name: container_name # 指定容器名称
 restart: unless-stopped # 容器重启策略
 environment: # 环境变量
 - KEY=VALUE
 volumes: # 数据卷映射
 - host_path:container_path
 ports: # 端口映射
 - &amp;#34;host_port:container_port&amp;#34;
 networks: # 网络配置
 - network_name&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="配置说明"&gt;&lt;span&gt;配置说明&lt;/span&gt;
 &lt;a href="#%e9%85%8d%e7%bd%ae%e8%af%b4%e6%98%8e" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;配置项&lt;/th&gt;
 &lt;th&gt;说明&lt;/th&gt;
 &lt;th&gt;可选值&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;version&lt;/td&gt;
 &lt;td&gt;指定Docker Compose文件的版本&lt;/td&gt;
 &lt;td&gt;3, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;services&lt;/td&gt;
 &lt;td&gt;定义服务&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;service_name&lt;/td&gt;
 &lt;td&gt;服务名称&lt;/td&gt;
 &lt;td&gt;自定义&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;image&lt;/td&gt;
 &lt;td&gt;指定使用的Docker镜像和标签&lt;/td&gt;
 &lt;td&gt;镜像名称:标签&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;container_name&lt;/td&gt;
 &lt;td&gt;指定容器名称&lt;/td&gt;
 &lt;td&gt;自定义&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;restart&lt;/td&gt;
 &lt;td&gt;容器重启策略&lt;/td&gt;
 &lt;td&gt;always, unless-stopped, on-failure, no&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;environment&lt;/td&gt;
 &lt;td&gt;环境变量&lt;/td&gt;
 &lt;td&gt;键值对&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;volumes&lt;/td&gt;
 &lt;td&gt;数据卷映射&lt;/td&gt;
 &lt;td&gt;主机路径:容器路径&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;ports&lt;/td&gt;
 &lt;td&gt;端口映射&lt;/td&gt;
 &lt;td&gt;主机端口:容器端口&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;networks&lt;/td&gt;
 &lt;td&gt;网络配置&lt;/td&gt;
 &lt;td&gt;网络名称&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;network_name&lt;/td&gt;
 &lt;td&gt;网络名称&lt;/td&gt;
 &lt;td&gt;自定义&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;driver&lt;/td&gt;
 &lt;td&gt;网络驱动&lt;/td&gt;
 &lt;td&gt;bridge, host, overlay&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;driver_opts&lt;/td&gt;
 &lt;td&gt;网络驱动选项&lt;/td&gt;
 &lt;td&gt;键值对&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;deploy&lt;/td&gt;
 &lt;td&gt;部署配置&lt;/td&gt;
 &lt;td&gt;replicas, update_config, restart_policy&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;resources&lt;/td&gt;
 &lt;td&gt;资源限制&lt;/td&gt;
 &lt;td&gt;limits, reservations&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;limits&lt;/td&gt;
 &lt;td&gt;资源限制&lt;/td&gt;
 &lt;td&gt;cpus, memory&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;reservations&lt;/td&gt;
 &lt;td&gt;资源保留&lt;/td&gt;
 &lt;td&gt;cpus, memory&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;replicas&lt;/td&gt;
 &lt;td&gt;副本数量&lt;/td&gt;
 &lt;td&gt;整数&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;update_config&lt;/td&gt;
 &lt;td&gt;更新配置&lt;/td&gt;
 &lt;td&gt;parallel, rolling_update&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;restart_policy&lt;/td&gt;
 &lt;td&gt;重启策略&lt;/td&gt;
 &lt;td&gt;always, unless-stopped, on-failure, no&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 class="heading-element" id="使用docker-compose部署应用"&gt;&lt;span&gt;使用Docker-compose部署应用&lt;/span&gt;
 &lt;a href="#%e4%bd%bf%e7%94%a8docker-compose%e9%83%a8%e7%bd%b2%e5%ba%94%e7%94%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;分享一些我在飞牛NAS上使用Docker-compose安装的一些好用，好玩，使用的Docker应用。&lt;/p&gt;
&lt;h3 class="heading-element" id="jellyfin"&gt;&lt;span&gt;Jellyfin&lt;/span&gt;
 &lt;a href="#jellyfin" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://jellyfin.org/" target="_blank" rel="external nofollow noopener noreferrer"&gt;Jellyfin&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;是一个开源的媒体管理系统，支持流媒体播放和媒体库管理,支持视频，音乐，照片，电子书，电视直播，基本上可以All In One,非常好用,而且100%免费，支持web，android，ios，tv，智能电视等设备。使用Docker-compose部署Jellyfin的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 jellyfin:
 image: nyanmisaka/jellyfin:latest
 container_name: jellyfin
 restart: unless-stopped
 environment:
 - PUID=0
 - PGID=0
 - TZ=Asia/Shanghai
 volumes:
 - ./config:/config #配置路径，根据实际路径填写
 - ./cache:/cache #缓存路径，根据实际路径填写
 - /:/media #媒体文件路径，根据实际路径填写
 ports:
 - 3722:8096
 - 8920:8920
 devices:
 - /dev/dri:/dev/dri&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="homepage"&gt;&lt;span&gt;HomePage&lt;/span&gt;
 &lt;a href="#homepage" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://gethomepage.dev/" target="_blank" rel="external nofollow noopener noreferrer"&gt;HomePage&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;是一个非常好用的私人应用&lt;a href="https://github.com/gethomepage/homepage" target="_blank" rel="external nofollow noopener noreferrer"&gt;主页导航开源项目&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;，自定义程度较高，集成了丰富的插件，集成Docker状态监控。使用Docker-compose部署HomePage的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 homepage:
 image: ghcr.io/gethomepage/homepage:latest
 container_name: homepage
 restart: always
 ports:
 - 4000:4000
 volumes:
 - ./config:/app/config # Make sure your local config directory exists
 - ./icons:/app/public/icons
 - ./images:/app/public/images
 - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations
 # 映射磁盘读权限
 - /vol2:/volume2:ro
 - /vol3:/volume3:ro
 environment:
 PORT: 4000
 HOMEPAGE_ALLOWED_HOSTS: homepage.geekswg.dpdns.org,192.168.129.130:4000 # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
 #PUID: 1000
 #PGID: 1001
 OPENWEATHERMAP_API_KEY: ce254243db8384604ce5a48124ad2ac6&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="cloudflare隧道"&gt;&lt;span&gt;Cloudflare隧道&lt;/span&gt;
 &lt;a href="#cloudflare%e9%9a%a7%e9%81%93" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://github.com/cloudflare/cloudflared" target="_blank" rel="external nofollow noopener noreferrer"&gt;cloudflared&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;Cloudflare隧道，非常好用的内外穿透工具，简单易用，可以将本地服务通过Cloudflare的网络暴露到公网。缺点是大陆访问的速度偏慢，整体比较稳定，一条隧道可以添加n个公共路由，十分强大。
使用Docker-compose部署Cloudflare隧道的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;version: &amp;#39;3.8&amp;#39;
services:
 cloudflared: 
 image: cloudflare/cloudflared:latest
 container_name: cf-tunnel
 restart: always
 network_mode: host
 command: tunnel --no-autoupdate run --token &amp;lt;your_token_here&amp;gt;&amp;lt;/your_token_here&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="fndesk"&gt;&lt;span&gt;FnDesk&lt;/span&gt;
 &lt;a href="#fndesk" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://github.com/IMGZCQ/fndesk" target="_blank" rel="external nofollow noopener noreferrer"&gt;FnDesk&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;是一个第三方的飞牛桌面管理软件,fndesk 飞牛桌面管理工具
实在太强大！我的飞牛我做主,多处自定样式主题美化,桌面图标任君摆布,让飞牛成为你的导航页，收藏夹,Docker应用入口&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 fndesk: #Compose项目名称
 container_name: fndesk #docker容器名称
 image: imgzcq/fndesk:latest #镜像名称
 restart: always #容器自动启动应用配置
 ports:
 - 9990:9990 #冒号左边修改自定义端口
 - 9991:9991 # HTTPS端口
 volumes:
 - /usr/trim/www:/fnw #不能改！
 - /usr/trim/share/.restore:/res #不能改！
 - /usr/local/apps/@appcenter/trim.media:/trim.media
 # ↑ v0.73起开放影视个性化需加入此项
 - ./deskdata:/deskdata #冒号左边的可以改但不建议 &lt;/code&gt;&lt;/pre&gt;&lt;div class="alert alert-tip"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M8 1.5c-2.363.0-4 1.69-4 3.75.0.984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75.0 01-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456.0 00-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863.0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751.0 01-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304.0-2.06-1.637-3.75-4-3.75zM5.75 12h4.5a.75.75.0 010 1.5h-4.5a.75.75.0 010-1.5zM6 15.25a.75.75.0 01.75-.75h2.5a.75.75.0 010 1.5h-2.5A.75.75.0 016 15.25z"/&gt;&lt;/svg&gt;提示&lt;/p&gt;&lt;p&gt;由于Docker限制，目前Docker版本已经停更，推荐安装fpk飞牛应用版本，功能更强大&lt;/p&gt;&lt;/div&gt;&lt;h3 class="heading-element" id="docker-copilot"&gt;&lt;span&gt;docker-copilot&lt;/span&gt;
 &lt;a href="#docker-copilot" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://github.com/onlyLTY/dockerCopilot" target="_blank" rel="external nofollow noopener noreferrer"&gt;docker-copilot&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;是一个第三方的Docker管理工具，可以通过Web界面管理Docker容器。使用Docker-compose部署docker-copilot的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 dockercopilot:
 container_name: docker-copilot
 restart: always
 privileged: true
 network_mode: bridge
 ports:
 - 12712:12712
 volumes:
 - /var/run/docker.sock:/var/run/docker.sock
 - ./data:/data
 environment:
 - TZ=Asia/Shanghai
 - DOCKER_HOST=unix:///var/run/docker.sock
 - secretKey=your_password #密码，不少于八位且非纯数字
 image: 0nlylty/dockercopilot:latest-dev&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="gotab标签页"&gt;&lt;span&gt;GoTab标签页&lt;/span&gt;
 &lt;a href="#gotab%e6%a0%87%e7%ad%be%e9%a1%b5" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://www.gotab.cn/" target="_blank" rel="external nofollow noopener noreferrer"&gt;GoTab标签页&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;是一个非常好用的标签页导航工具,可以&lt;a href="https://github.com/dengxiwang/gotab-personal" target="_blank" rel="external nofollow noopener noreferrer"&gt;本地私有部署&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;，虽然后端不开源但功能强大，支持自定义背景、图标和布局。使用Docker-compose部署GoTab标签页的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 gotab-mysql:
 image: mysql:8.0.44
 container_name: gotab-mysql
 command: --default-authentication-plugin=mysql_native_password
 restart: unless-stopped
 environment:
 MYSQL_ROOT_PASSWORD: myroot # 修改为你的root密码
 # 创建一个默认数据库，如果不需要可以注释掉这行
 MYSQL_DATABASE: gotab
 # 创建一个MySQL用户，如果不需要可以注释掉这行
 MYSQL_USER: gotab
 # MySQL用户的密码，如果不需要可以注释掉这行
 MYSQL_PASSWORD: gotab123
 MYSQL_DEFAULT_AUTH: mysql_native_password # 新增：强制原生密码认证
 ports:
 - &amp;#34;3306:3306&amp;#34;
 volumes:
 - mysql_data:/var/lib/mysql
 gotab-server:
 image: doxwant/gotab:latest
 container_name: gotab-server
 ports:
 - &amp;#34;9001:8080&amp;#34; # 映射主机的 8080 端口到容器的 8080 端口
 volumes:
 # 挂载上传文件目录，用于持久化存储用户上传的文件（根据实际修改）
 - ./uploads:/app/uploads
 # 挂载资源存储目录，用于保存程序运行过程中产生的资源文件（根据实际修改）
 - ./sourceStore:/app/sourceStore
 # 挂载配置文件 config.toml 到容器内部
 # 使用 bind 模式将主机当前目录下的 config.toml 挂载到容器内的 /app/config.toml（根据实际修改）
 - type: bind
 source: ./config.toml
 target: /app/config.toml

 environment:
 - TZ=Asia/Shanghai
 - SERVER_PORT=8080 # 设置服务监听的端口为 8080
 restart: unless-stopped # 容器退出时自动重启
 #network_mode: host # 使用主机网络模式（注意：在 Docker Desktop 上不支持）
volumes:
 mysql_data: {}&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="omnibox"&gt;&lt;span&gt;Omnibox&lt;/span&gt;
 &lt;a href="#omnibox" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;&lt;a href="https://hub.docker.com/r/lampon/omnibox" target="_blank" rel="external nofollow noopener noreferrer"&gt;Omnibox&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 它是一款支持网盘资源、多源影视、直播和电视资源的家庭影视,可在线播放，支持tvbox源。
使用Docker-compose部署Omnibox的步骤如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;services:
 omnibox:
 image: docker.1ms.run/lampon/omnibox:latest
 container_name: omnibox
 restart: always
 environment:
 - TZ=Asia/Shanghai
 ports:
 - &amp;#34;7023:7023&amp;#34; # 冒号左侧可自定
 volumes:
 - ./omnibox/data:/app/data # 将本地的 ./omnibox/data 目录挂载到容器的 /app/data 目录
 #network_mode: host
 # 这一段PanSou也要加上重新创建一下，后文会提及
 networks:
 - media-net
networks:
 media-net:
 driver: bridge # 使用默认的桥接网络驱动&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="持续更新中"&gt;&lt;span&gt;持续更新中&lt;/span&gt;
 &lt;a href="#%e6%8c%81%e7%bb%ad%e6%9b%b4%e6%96%b0%e4%b8%ad" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;最近一直在折腾各种Docker应用，发现了很多实用的工具和方法，后续会继续分享更多经验。&lt;/p&gt;
&lt;!-- 
&gt; [!NOTE]
&gt; 突出显示用户应考虑的信息，即使只是浏览也应考虑。

&gt; [!TIP]
&gt; 可选信息，可帮助用户取得更大的成功。

&gt; [!IMPORTANT]
&gt; 用户成功所需的关键信息。

&gt; [!WARNING]
&gt; 由于存在潜在风险，需要用户立即关注的关键内容。

&gt; [!CAUTION]
&gt; 操作的潜在负面后果。
这里使用MD语法编写你的文章 
--&gt;</description></item><item><title>LX-Music洛雪音乐助手</title><link>https://geekswg.js.cool/posts/2025/share-lxmusic/</link><pubDate>Sun, 06 Apr 2025 16:45:38 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2025/share-lxmusic/</guid><category domain="https://geekswg.js.cool/categories/tools/">工具</category><description>&lt;h2 class="heading-element" id="什么是-lx-music"&gt;&lt;span&gt;什么是 LX-Music？&lt;/span&gt;
 &lt;a href="#%e4%bb%80%e4%b9%88%e6%98%af-lx-music" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;LX-Music（&lt;a href="https://lxmusic.toside.cn/download" target="_blank" rel="external nofollow noopener noreferrer"&gt;洛雪音乐助手&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;）是一款免费且开源的音乐查找工具，支持多平台使用。它可以帮助用户快速搜索和下载来自多个音乐平台的歌曲，提供高质量的音乐体验。&lt;/p&gt;
&lt;h3 class="heading-element" id="主要功能"&gt;&lt;span&gt;主要功能&lt;/span&gt;
 &lt;a href="#%e4%b8%bb%e8%a6%81%e5%8a%9f%e8%83%bd" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;多平台搜索&lt;/strong&gt;：支持多个音乐平台的歌曲搜索。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;高音质下载&lt;/strong&gt;：提供多种音质选择，满足不同需求。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;简洁界面&lt;/strong&gt;：用户界面简洁直观，易于操作。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;开源免费&lt;/strong&gt;：完全免费，代码开源，安全可靠。&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 class="heading-element" id="如何使用-lx-music"&gt;&lt;span&gt;如何使用 LX-Music？&lt;/span&gt;
 &lt;a href="#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-lx-music" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;下载与安装&lt;/strong&gt;&lt;br&gt;
前往 &lt;a href="https://github.com/lyswhut/lx-music-desktop" target="_blank" rel="external nofollow noopener noreferrer"&gt;LX-Music 的 GitHub 仓库&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 下载适合您操作系统的安装包，并按照提示完成安装。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;搜索音乐&lt;/strong&gt;&lt;br&gt;
打开软件后，在搜索框中输入歌曲名称、歌手或专辑名称，点击搜索按钮。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;播放与下载&lt;/strong&gt;&lt;br&gt;
在搜索结果中选择您想要的歌曲，可以直接播放或点击下载按钮保存到本地。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;设置音质&lt;/strong&gt;&lt;br&gt;
在设置中选择您偏好的音质选项，确保最佳的听觉体验。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr&gt;
&lt;div class="alert alert-warning"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086.0l6.082 11.378A1.75 1.75.0 0114.082 15H1.918A1.75 1.75.0 01.375 12.425zm1.763.707a.25.25.0 00-.44.0L1.698 13.132a.25.25.0 00.22.368h12.164a.25.25.0 00.22-.368zm.53 3.996v2.5a.75.75.0 01-1.5.0v-2.5a.75.75.0 011.5.0zM9 11a1 1 0 11-2 0 1 1 0 012 0z"/&gt;&lt;/svg&gt;警告&lt;/p&gt;&lt;p&gt;请勿将下载的音乐用于商业用途，仅供个人学习和欣赏。
使用过程中请遵守相关法律法规，尊重版权。&lt;/p&gt;&lt;/div&gt;&lt;h2 class="heading-element" id="注意事项"&gt;&lt;span&gt;注意事项&lt;/span&gt;
 &lt;a href="#%e6%b3%a8%e6%84%8f%e4%ba%8b%e9%a1%b9" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;div class="alert alert-warning"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086.0l6.082 11.378A1.75 1.75.0 0114.082 15H1.918A1.75 1.75.0 01.375 12.425zm1.763.707a.25.25.0 00-.44.0L1.698 13.132a.25.25.0 00.22.368h12.164a.25.25.0 00.22-.368zm.53 3.996v2.5a.75.75.0 01-1.5.0v-2.5a.75.75.0 011.5.0zM9 11a1 1 0 11-2 0 1 1 0 012 0z"/&gt;&lt;/svg&gt;警告&lt;/p&gt;&lt;p&gt;LX Music只是一个空壳软件需要添加自定义音源才能正常的播放和下载音乐！&lt;/p&gt;&lt;/div&gt;&lt;h3 class="heading-element" id="音源设置"&gt;&lt;span&gt;音源设置&lt;/span&gt;
 &lt;a href="#%e9%9f%b3%e6%ba%90%e8%ae%be%e7%bd%ae" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;div class="alert alert-tip"&gt;&lt;p class="alert-title"&gt;&lt;svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"&gt;&lt;path d="M8 1.5c-2.363.0-4 1.69-4 3.75.0.984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75.0 01-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456.0 00-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863.0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751.0 01-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304.0-2.06-1.637-3.75-4-3.75zM5.75 12h4.5a.75.75.0 010 1.5h-4.5a.75.75.0 010-1.5zM6 15.25a.75.75.0 01.75-.75h2.5a.75.75.0 010 1.5h-2.5A.75.75.0 016 15.25z"/&gt;&lt;/svg&gt;提示&lt;/p&gt;&lt;p&gt;在软件&lt;code&gt;设置&lt;/code&gt;、&lt;code&gt;基本设置&lt;/code&gt;、&lt;code&gt;自定义源&lt;/code&gt;、&lt;code&gt;自定义源管理&lt;/code&gt;、然后选择&lt;code&gt;在线导入&lt;/code&gt; 或者 &lt;code&gt;本地导入&lt;/code&gt;两种方式导入你的自定义音源，&lt;/p&gt;&lt;/div&gt;&lt;h3 class="heading-element" id="音源分享"&gt;&lt;span&gt;音源分享&lt;/span&gt;
 &lt;a href="#%e9%9f%b3%e6%ba%90%e5%88%86%e4%ba%ab" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;Huibq_lxmusic源
&lt;pre&gt;&lt;code&gt;https://fastly.jsdelivr.net/gh/Huibq/keep-alive/render_api.js&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;六音
&lt;pre&gt;&lt;code&gt;https://ghproxy.net/https://raw.githubusercontent.com/pdone/lx-music-source/main/sixyin/latest.js&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;Flower
&lt;pre&gt;&lt;code&gt;https://ghproxy.net/https://raw.githubusercontent.com/pdone/lx-music-source/main/flower/latest.js&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;/ol&gt;</description></item><item><title>Markdown基本语法</title><link>https://geekswg.js.cool/posts/2024/md-basic/</link><pubDate>Sat, 07 Dec 2024 08:52:46 +0800</pubDate><author>geekswg@qq.com (geekswg)</author><guid>https://geekswg.js.cool/posts/2024/md-basic/</guid><category domain="https://geekswg.js.cool/categories/docs/">文档</category><description>&lt;p&gt;这篇文章提供了可以在 Hugo 的文章中使用的基本 Markdown 语法示例。&lt;/p&gt;
&lt;!-- markdownlint-disable-file --&gt;
&lt;div class="details admonition note open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-solid fa-pencil-alt" aria-hidden="true"&gt;&lt;/i&gt;注意&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;p&gt;这篇文章借鉴了一篇很棒的 &lt;a href="http://learn.getgrav.org/content/markdown" target="_blank" rel="external nofollow noopener noreferrer"&gt;来自 Grav 的文章&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;如果你想了解 &lt;strong&gt;FixIt&lt;/strong&gt; 主题的扩展 Markdown 语法，请阅读 [扩展 Markdown 语法页面]。&lt;/p&gt;
&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;事实上，编写 Web 内容很麻烦。&lt;strong&gt;&lt;ruby&gt;WYSIWYG&lt;rt&gt;所见即所得&lt;/rt&gt;&lt;/ruby&gt;&lt;/strong&gt; 编辑器帮助减轻了这一任务。但通常会导致代码太糟，或更糟糕的是，网页也会很丑。&lt;/p&gt;
&lt;p&gt;没有通常伴随的所有复杂和丑陋的问题，&lt;strong&gt;Markdown&lt;/strong&gt; 是一种更好的生成 &lt;strong&gt;HTML&lt;/strong&gt; 内容的方式。&lt;/p&gt;
&lt;p&gt;一些主要好处是：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Markdown 简单易学，几乎没有多余的字符，因此编写内容也更快。&lt;/li&gt;
&lt;li&gt;用 Markdown 书写时出错的机会更少。&lt;/li&gt;
&lt;li&gt;可以产生有效的 XHTML 输出。&lt;/li&gt;
&lt;li&gt;将内容和视觉显示保持分开，这样就不会打乱网站的外观。&lt;/li&gt;
&lt;li&gt;可以在你喜欢的任何文本编辑器或 Markdown 应用程序中编写内容。&lt;/li&gt;
&lt;li&gt;Markdown 使用起来很有趣！&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;John Gruber, Markdown 的作者如是说：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Markdown 格式的首要设计目标是更具可读性。
最初的想法是 Markdown 格式的文档应当以纯文本形式发布，
而不会看起来像被标签或格式说明所标记。
虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响，
但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式。&lt;/p&gt;
&lt;div id="id-2"&gt;&amp;ndash; &lt;em&gt;John Gruber&lt;/em&gt;&lt;/div&gt;
&lt;/blockquote&gt;
&lt;p&gt;话不多说，我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式！&lt;/p&gt;
&lt;div class="details admonition tip open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-regular fa-lightbulb" aria-hidden="true"&gt;&lt;/i&gt;技巧&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;i class="fa-regular fa-bookmark fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;将此页保存为书签，以备将来参考！&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="标题"&gt;&lt;span&gt;标题&lt;/span&gt;
 &lt;a href="#%e6%a0%87%e9%a2%98" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;从 &lt;code&gt;h2&lt;/code&gt; 到 &lt;code&gt;h6&lt;/code&gt; 的标题在每个级别上都加上一个 &lt;code&gt;＃&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;## h2 标题
### h3 标题
#### h4 标题
##### h5 标题
###### h6 标题&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;h2&amp;gt;h2 标题&amp;lt;/h2&amp;gt;
&amp;lt;h3&amp;gt;h3 标题&amp;lt;/h3&amp;gt;
&amp;lt;h4&amp;gt;h4 标题&amp;lt;/h4&amp;gt;
&amp;lt;h5&amp;gt;h5 标题&amp;lt;/h5&amp;gt;
&amp;lt;h6&amp;gt;h6 标题&amp;lt;/h6&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class="details admonition note open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-solid fa-pencil-alt" aria-hidden="true"&gt;&lt;/i&gt;标题 ID&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;p&gt;要添加自定义标题 ID, 请在与标题相同的行中将自定义 ID 放在花括号中：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;### 一个很棒的标题 {#custom-id}&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;h3 id=&amp;#34;custom-id&amp;#34;&amp;gt;一个很棒的标题&amp;lt;/h3&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="注释"&gt;&lt;span&gt;注释&lt;/span&gt;
 &lt;a href="#%e6%b3%a8%e9%87%8a" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;注释是和 HTML 兼容的：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!-- 这是一段注释 --&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;strong&gt;不能&lt;/strong&gt;看到以下的注释：&lt;/p&gt;
&lt;!-- 这是一段注释 --&gt;
&lt;h2 class="heading-element" id="水平线"&gt;&lt;span&gt;水平线&lt;/span&gt;
 &lt;a href="#%e6%b0%b4%e5%b9%b3%e7%ba%bf" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;HTML 中的 &lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt; 标签是用来在段落元素之间创建一个 &amp;ldquo;专题间隔&amp;rdquo; 的。
使用 Markdown, 你可以用以下方式创建一个 &lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt; 标签：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;___&lt;/code&gt;: 三个连续的下划线&lt;/li&gt;
&lt;li&gt;&lt;code&gt;---&lt;/code&gt;: 三个连续的破折号&lt;/li&gt;
&lt;li&gt;&lt;code&gt;***&lt;/code&gt;: 三个连续的星号&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;hr&gt;
&lt;hr&gt;
&lt;hr&gt;
&lt;h2 class="heading-element" id="段落"&gt;&lt;span&gt;段落&lt;/span&gt;
 &lt;a href="#%e6%ae%b5%e8%90%bd" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;按照纯文本的方式书写段落，纯文本在呈现的 HTML 中将用 &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;/&lt;code&gt;&amp;lt;/p&amp;gt;&lt;/code&gt; 标签包裹。&lt;/p&gt;
&lt;p&gt;如下段落：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;可以使用一个空白行进行&lt;strong&gt;换行&lt;/strong&gt;。&lt;/p&gt;
&lt;h2 class="heading-element" id="内联-html-元素"&gt;&lt;span&gt;内联 HTML 元素&lt;/span&gt;
 &lt;a href="#%e5%86%85%e8%81%94-html-%e5%85%83%e7%b4%a0" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;如果你需要某个 HTML 标签（带有一个类）, 则可以简单地像这样使用：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Markdown 格式的段落。

&amp;lt;div class=&amp;#34;class&amp;#34;&amp;gt;
 这是 &amp;lt;b&amp;gt;HTML&amp;lt;/b&amp;gt;
&amp;lt;/div&amp;gt;

Markdown 格式的段落。&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="强调"&gt;&lt;span&gt;强调&lt;/span&gt;
 &lt;a href="#%e5%bc%ba%e8%b0%83" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="加粗"&gt;&lt;span&gt;加粗&lt;/span&gt;
 &lt;a href="#%e5%8a%a0%e7%b2%97" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;用于强调带有较粗字体的文本片段。&lt;/p&gt;
&lt;p&gt;以下文本片段会被 &lt;strong&gt;渲染为粗体&lt;/strong&gt;。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;**渲染为粗体**
__渲染为粗体__&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;strong&amp;gt;渲染为粗体&amp;lt;/strong&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="斜体"&gt;&lt;span&gt;斜体&lt;/span&gt;
 &lt;a href="#%e6%96%9c%e4%bd%93" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;用于强调带有斜体的文本片段。&lt;/p&gt;
&lt;p&gt;以下文本片段被 &lt;em&gt;渲染为斜体&lt;/em&gt;。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;*渲染为斜体*
_渲染为斜体_&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;em&amp;gt;渲染为斜体&amp;lt;/em&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="删除线"&gt;&lt;span&gt;删除线&lt;/span&gt;
 &lt;a href="#%e5%88%a0%e9%99%a4%e7%ba%bf" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;按照 &lt;a href="https://github.github.com/gfm/" target="_blank" rel="external nofollow noopener noreferrer"&gt;&lt;strong&gt;&lt;ruby&gt;GFM&lt;rt&gt;GitHub flavored Markdown&lt;/rt&gt;&lt;/ruby&gt;&lt;/strong&gt;&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 你可以使用删除线。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;~~这段文本带有删除线。~~&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;p&gt;&lt;del&gt;这段文本带有删除线。&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;del&amp;gt;这段文本带有删除线。&amp;lt;/del&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="组合"&gt;&lt;span&gt;组合&lt;/span&gt;
 &lt;a href="#%e7%bb%84%e5%90%88" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;加粗，斜体，和删除线可以 组合使用。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;_**加粗和斜体**_
~~**删除线和加粗**~~
~~_删除线和斜体_~~
~~_**加粗，斜体和删除线**_~~&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;加粗和斜体&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;del&gt;&lt;strong&gt;删除线和加粗&lt;/strong&gt;&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;&lt;del&gt;&lt;em&gt;删除线和斜体&lt;/em&gt;&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;&lt;del&gt;&lt;em&gt;&lt;strong&gt;加粗，斜体和删除线&lt;/strong&gt;&lt;/em&gt;&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;em&amp;gt;&amp;lt;strong&amp;gt;加粗和斜体&amp;lt;/strong&amp;gt;&amp;lt;/em&amp;gt;
&amp;lt;del&amp;gt;&amp;lt;strong&amp;gt;删除线和加粗&amp;lt;/strong&amp;gt;&amp;lt;/del&amp;gt;
&amp;lt;del&amp;gt;&amp;lt;em&amp;gt;删除线和斜体&amp;lt;/em&amp;gt;&amp;lt;/del&amp;gt;
&amp;lt;del&amp;gt;&amp;lt;em&amp;gt;&amp;lt;strong&amp;gt;加粗，斜体和删除线&amp;lt;/strong&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/del&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 class="heading-element" id="引用"&gt;&lt;span&gt;引用&lt;/span&gt;
 &lt;a href="#%e5%bc%95%e7%94%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;用于在文档中引用其他来源的内容块。&lt;/p&gt;
&lt;p&gt;在要引用的任何文本之前添加 &lt;code&gt;&amp;gt;&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;gt; **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Fusion Drive&lt;/strong&gt; combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;blockquote&amp;gt;
 &amp;lt;p&amp;gt;
 &amp;lt;strong&amp;gt;Fusion Drive&amp;lt;/strong&amp;gt; combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
 &amp;lt;/p&amp;gt;
&amp;lt;/blockquote&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;引用也可以嵌套：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;gt; Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
&amp;gt;&amp;gt; Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;h2 class="heading-element" id="列表"&gt;&lt;span&gt;列表&lt;/span&gt;
 &lt;a href="#%e5%88%97%e8%a1%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="无序列表"&gt;&lt;span&gt;无序列表&lt;/span&gt;
 &lt;a href="#%e6%97%a0%e5%ba%8f%e5%88%97%e8%a1%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;一系列项的列表，其中项的顺序没有明显关系。&lt;/p&gt;
&lt;p&gt;你可以使用以下任何符号来表示无序列表中的项：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;* 一项内容
- 一项内容
&amp;#43; 一项内容&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;例如：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
* Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit
 * Phasellus iaculis neque
 * Purus sodales ultricies
 * Vestibulum laoreet porttitor sem
 * Ac tristique libero volutpat at
* Faucibus porta lacus fringilla vel
* Aenean sit amet erat nunc
* Eget porttitor lorem&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
&lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt;
&lt;li&gt;Nulla volutpat aliquam velit
&lt;ul&gt;
&lt;li&gt;Phasellus iaculis neque&lt;/li&gt;
&lt;li&gt;Purus sodales ultricies&lt;/li&gt;
&lt;li&gt;Vestibulum laoreet porttitor sem&lt;/li&gt;
&lt;li&gt;Ac tristique libero volutpat at&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Faucibus porta lacus fringilla vel&lt;/li&gt;
&lt;li&gt;Aenean sit amet erat nunc&lt;/li&gt;
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;ul&amp;gt;
 &amp;lt;li&amp;gt;Lorem ipsum dolor sit amet&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Consectetur adipiscing elit&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Integer molestie lorem at massa&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Facilisis in pretium nisl aliquet&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Nulla volutpat aliquam velit
 &amp;lt;ul&amp;gt;
 &amp;lt;li&amp;gt;Phasellus iaculis neque&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Purus sodales ultricies&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Vestibulum laoreet porttitor sem&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Ac tristique libero volutpat at&amp;lt;/li&amp;gt;
 &amp;lt;/ul&amp;gt;
 &amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Faucibus porta lacus fringilla vel&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Aenean sit amet erat nunc&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Eget porttitor lorem&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="有序列表"&gt;&lt;span&gt;有序列表&lt;/span&gt;
 &lt;a href="#%e6%9c%89%e5%ba%8f%e5%88%97%e8%a1%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;一系列项的列表，其中项的顺序确实很重要。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
&lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt;
&lt;li&gt;Nulla volutpat aliquam velit&lt;/li&gt;
&lt;li&gt;Faucibus porta lacus fringilla vel&lt;/li&gt;
&lt;li&gt;Aenean sit amet erat nunc&lt;/li&gt;
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;ol&amp;gt;
 &amp;lt;li&amp;gt;Lorem ipsum dolor sit amet&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Consectetur adipiscing elit&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Integer molestie lorem at massa&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Facilisis in pretium nisl aliquet&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Nulla volutpat aliquam velit&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Faucibus porta lacus fringilla vel&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Aenean sit amet erat nunc&amp;lt;/li&amp;gt;
 &amp;lt;li&amp;gt;Eget porttitor lorem&amp;lt;/li&amp;gt;
&amp;lt;/ol&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class="details admonition tip open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-regular fa-lightbulb" aria-hidden="true"&gt;&lt;/i&gt;技巧&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;p&gt;如果你对每一项使用 &lt;code&gt;1.&lt;/code&gt;, Markdown 将自动为每一项编号。例如：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
&lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt;
&lt;li&gt;Nulla volutpat aliquam velit&lt;/li&gt;
&lt;li&gt;Faucibus porta lacus fringilla vel&lt;/li&gt;
&lt;li&gt;Aenean sit amet erat nunc&lt;/li&gt;
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="代码"&gt;&lt;span&gt;代码&lt;/span&gt;
 &lt;a href="#%e4%bb%a3%e7%a0%81" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="行内代码"&gt;&lt;span&gt;行内代码&lt;/span&gt;
 &lt;a href="#%e8%a1%8c%e5%86%85%e4%bb%a3%e7%a0%81" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;用 &lt;code&gt;`&lt;/code&gt; 包装行内代码段。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;在这个例子中，`&amp;lt;section&amp;gt;&amp;lt;/section&amp;gt;` 会被包裹成 **代码**。&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;p&gt;在这个例子中，&lt;code&gt;&amp;lt;section&amp;gt;&amp;lt;/section&amp;gt;&lt;/code&gt; 会被包裹成 &lt;strong&gt;代码&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;p&amp;gt;
 在这个例子中，&amp;lt;code&amp;gt;&amp;amp;lt;section&amp;amp;gt;&amp;amp;lt;/section&amp;amp;gt;&amp;lt;/code&amp;gt; 会被包裹成 &amp;lt;strong&amp;gt;代码&amp;lt;/strong&amp;gt;。
&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="缩进代码"&gt;&lt;span&gt;缩进代码&lt;/span&gt;
 &lt;a href="#%e7%bc%a9%e8%bf%9b%e4%bb%a3%e7%a0%81" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;blockquote&gt;
&lt;p&gt;❌ 不推荐使用。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;将几行代码缩进至少四个空格，例如：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt; // Some comments
 line 1 of code
 line 2 of code
 line 3 of code&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;// Some comments
line 1 of code
line 2 of code
line 3 of code
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;pre&amp;gt;
 &amp;lt;code&amp;gt;
 // Some comments
 line 1 of code
 line 2 of code
 line 3 of code
 &amp;lt;/code&amp;gt;
&amp;lt;/pre&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="围栏代码块"&gt;&lt;span&gt;围栏代码块&lt;/span&gt;
 &lt;a href="#%e5%9b%b4%e6%a0%8f%e4%bb%a3%e7%a0%81%e5%9d%97" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;blockquote&gt;
&lt;p&gt;✅ 推荐使用。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;使用 &amp;ldquo;围栏&amp;rdquo; &lt;code&gt;```&lt;/code&gt; 来生成一段带有语言属性的代码块。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```markdown
Sample text here...
```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;pre language-html&amp;gt;
 &amp;lt;code&amp;gt;Sample text here...&amp;lt;/code&amp;gt;
&amp;lt;/pre&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="语法高亮"&gt;&lt;span&gt;语法高亮&lt;/span&gt;
 &lt;a href="#%e8%af%ad%e6%b3%95%e9%ab%98%e4%ba%ae" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank" rel="external nofollow noopener noreferrer"&gt;Chroma 语言高亮列表 - Hugo&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/alecthomas/chroma#supported-languages" target="_blank" rel="external nofollow noopener noreferrer"&gt;Chroma 支持语言 - Chroma&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;&lt;ruby&gt;GFM&lt;rt&gt;GitHub Flavored Markdown&lt;/rt&gt;&lt;/ruby&gt;&lt;/strong&gt; 也支持语法高亮。&lt;/p&gt;
&lt;p&gt;要激活它，只需在第一个代码 &amp;ldquo;围栏&amp;rdquo; 之后直接添加你要使用的语言的文件扩展名，
&lt;code&gt;```js&lt;/code&gt;, 语法高亮显示将自动应用于渲染的 HTML 中。&lt;/p&gt;
&lt;p&gt;例如，在以下 JavaScript 代码中应用语法高亮：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```js
grunt.initConfig({
 assemble: {
 options: {
 assets: &amp;#39;docs/assets&amp;#39;,
 data: &amp;#39;src/data/*.{json,yml}&amp;#39;,
 helpers: &amp;#39;src/custom-helpers.js&amp;#39;,
 partials: [&amp;#39;src/partials/**/*.{hbs,md}&amp;#39;]
 },
 pages: {
 options: {
 layout: &amp;#39;default.hbs&amp;#39;
 },
 files: {
 &amp;#39;./&amp;#39;: [&amp;#39;src/templates/pages/index.hbs&amp;#39;]
 }
 }
 }
};
```&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;grunt.initConfig({
 assemble: {
 options: {
 assets: &amp;#39;docs/assets&amp;#39;,
 data: &amp;#39;src/data/*.{json,yml}&amp;#39;,
 helpers: &amp;#39;src/custom-helpers.js&amp;#39;,
 partials: [&amp;#39;src/partials/**/*.{hbs,md}&amp;#39;]
 },
 pages: {
 options: {
 layout: &amp;#39;default.hbs&amp;#39;
 },
 files: {
 &amp;#39;./&amp;#39;: [&amp;#39;src/templates/pages/index.hbs&amp;#39;]
 }
 }
 }
};&lt;/code&gt;&lt;/pre&gt;&lt;div class="details admonition note open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-solid fa-pencil-alt" aria-hidden="true"&gt;&lt;/i&gt;注意&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;strong&gt;Hugo&lt;/strong&gt; 文档中的 &lt;a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank" rel="external nofollow noopener noreferrer"&gt;语法高亮页面&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 介绍了有关语法高亮的更多信息，
包括语法高亮的 shortcode。&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="表格"&gt;&lt;span&gt;表格&lt;/span&gt;
 &lt;a href="#%e8%a1%a8%e6%a0%bc" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;通过在每个单元格之间添加竖线作为分隔线，并在标题下添加一行破折号（也由竖线分隔）来创建表格。注意，竖线不需要垂直对齐。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;Option&lt;/th&gt;
 &lt;th&gt;Description&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;data&lt;/td&gt;
 &lt;td&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;engine&lt;/td&gt;
 &lt;td&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;ext&lt;/td&gt;
 &lt;td&gt;extension to be used for dest files.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;table&amp;gt;
 &amp;lt;thead&amp;gt;
 &amp;lt;tr&amp;gt;
 &amp;lt;th&amp;gt;Option&amp;lt;/th&amp;gt;
 &amp;lt;th&amp;gt;Description&amp;lt;/th&amp;gt;
 &amp;lt;/tr&amp;gt;
 &amp;lt;/thead&amp;gt;
 &amp;lt;tbody&amp;gt;
 &amp;lt;tr&amp;gt;
 &amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
 &amp;lt;td&amp;gt;path to data files to supply the data that will be passed into templates.&amp;lt;/td&amp;gt;
 &amp;lt;/tr&amp;gt;
 &amp;lt;tr&amp;gt;
 &amp;lt;td&amp;gt;engine&amp;lt;/td&amp;gt;
 &amp;lt;td&amp;gt;engine to be used for processing templates. Handlebars is the default.&amp;lt;/td&amp;gt;
 &amp;lt;/tr&amp;gt;
 &amp;lt;tr&amp;gt;
 &amp;lt;td&amp;gt;ext&amp;lt;/td&amp;gt;
 &amp;lt;td&amp;gt;extension to be used for dest files.&amp;lt;/td&amp;gt;
 &amp;lt;/tr&amp;gt;
 &amp;lt;/tbody&amp;gt;
&amp;lt;/table&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class="details admonition note"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-solid fa-pencil-alt" aria-hidden="true"&gt;&lt;/i&gt;文本右对齐或居中对齐&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;&lt;p&gt;在任何标题下方的破折号右侧添加冒号将使该列的文本右对齐，在任何标题下方的破折号两边添加冒号将使该列的对齐文本居中。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;| Option | Description |
|:------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th style="text-align: center"&gt;Option&lt;/th&gt;
 &lt;th style="text-align: right"&gt;Description&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td style="text-align: center"&gt;data&lt;/td&gt;
 &lt;td style="text-align: right"&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td style="text-align: center"&gt;engine&lt;/td&gt;
 &lt;td style="text-align: right"&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td style="text-align: center"&gt;ext&lt;/td&gt;
 &lt;td style="text-align: right"&gt;extension to be used for dest files.&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="links"&gt;&lt;span&gt;链接&lt;/span&gt;
 &lt;a href="#links" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;h3 class="heading-element" id="基本链接"&gt;&lt;span&gt;基本链接&lt;/span&gt;
 &lt;a href="#%e5%9f%ba%e6%9c%ac%e9%93%be%e6%8e%a5" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;https://assemble.io&amp;gt;
&amp;lt;contact@revolunet.com&amp;gt;
[Assemble](https://assemble.io)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下（将鼠标悬停在链接上，没有提示）:&lt;/p&gt;
&lt;p&gt;&lt;a href="https://assemble.io" target="_blank" rel="external nofollow noopener noreferrer"&gt;https://assemble.io&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="mailto:contact@revolunet.com" target="_blank" rel="external nofollow noopener noreferrer"&gt;contact@revolunet.com&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://assemble.io" target="_blank" rel="external nofollow noopener noreferrer"&gt;Assemble&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;#34;https://assemble.io&amp;#34;&amp;gt;https://assemble.io&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;#34;mailto:contact@revolunet.com&amp;#34;&amp;gt;contact@revolunet.com&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;#34;https://assemble.io&amp;#34;&amp;gt;Assemble&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="添加一个标题"&gt;&lt;span&gt;添加一个标题&lt;/span&gt;
 &lt;a href="#%e6%b7%bb%e5%8a%a0%e4%b8%80%e4%b8%aa%e6%a0%87%e9%a2%98" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;[Upstage](https://github.com/upstage/ &amp;#34;Visit Upstage!&amp;#34;)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下（将鼠标悬停在链接上，会有一行提示）:&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/upstage/" title="Visit Upstage!" target="_blank" rel="external nofollow noopener noreferrer"&gt;Upstage&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;输出的 HTML 看起来像这样：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;#34;https://github.com/upstage/&amp;#34; title=&amp;#34;Visit Upstage!&amp;#34;&amp;gt;Upstage&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 class="heading-element" id="引用式链接"&gt;&lt;span&gt;引用式链接&lt;/span&gt;
 &lt;a href="#%e5%bc%95%e7%94%a8%e5%bc%8f%e9%93%be%e6%8e%a5" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;引用式链接是一种特殊的链接，它使 URL 在 Markdown 中更易于显示和阅读。&lt;/p&gt;
&lt;p&gt;引用式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;[text][id]
⋮
[id]: http://example.org/ &amp;#34;title&amp;#34;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;例如：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;[FixIt][fixit-repo]

[fixit-repo]: https://github.com/hugo-fixit/FixIt &amp;#34;A clean, elegant but advanced blog theme for Hugo&amp;#34;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;呈现的输出效果如下：&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/hugo-fixit/FixIt" title="A clean, elegant but advanced blog theme for Hugo" target="_blank" rel="external nofollow noopener noreferrer"&gt;FixIt&lt;i class="fa-solid fa-external-link-alt fa-xs ms-1 text-secondary" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3 class="heading-element" id="定位标记"&gt;&lt;span&gt;定位标记&lt;/span&gt;
 &lt;a href="#%e5%ae%9a%e4%bd%8d%e6%a0%87%e8%ae%b0" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h3&gt;&lt;p&gt;定位标记使你可以跳至同一页面上的指定锚点。例如，每个章节：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;## Table of Contents
 * [Chapter 1](#chapter-1)
 * [Chapter 2](#chapter-2)
 * [Chapter 3](#chapter-3)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;将跳转到这些部分：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;## Chapter 1 &amp;lt;a id=&amp;#34;chapter-1&amp;#34;&amp;gt;&amp;lt;/a&amp;gt;
Content for chapter one.

## Chapter 2 &amp;lt;a id=&amp;#34;chapter-2&amp;#34;&amp;gt;&amp;lt;/a&amp;gt;
Content for chapter one.

## Chapter 3 &amp;lt;a id=&amp;#34;chapter-3&amp;#34;&amp;gt;&amp;lt;/a&amp;gt;
Content for chapter one.&lt;/code&gt;&lt;/pre&gt;&lt;div class="details admonition note open"&gt;
 &lt;div class="details-summary admonition-title"&gt;&lt;i class="icon fa-solid fa-pencil-alt" aria-hidden="true"&gt;&lt;/i&gt;注意&lt;i class="details-icon fa-solid fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="details-content"&gt;
 &lt;div class="admonition-content"&gt;定位标记的位置几乎是任意的。因为它们并不引人注目，所以它们通常被放在同一行了。&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="heading-element" id="脚注"&gt;&lt;span&gt;脚注&lt;/span&gt;
 &lt;a href="#%e8%84%9a%e6%b3%a8" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;脚注使你可以添加注释和参考，而不会使文档正文混乱。
当你创建脚注时，会在添加脚注引用的位置出现带有链接的上标编号。
读者可以单击链接以跳至页面底部的脚注内容。&lt;/p&gt;
&lt;p&gt;要创建脚注引用，请在方括号中添加插入符号和标识符 (&lt;code&gt;[^1]&lt;/code&gt;)。
标识符可以是数字或单词，但不能包含空格或制表符。
标识符仅将脚注引用与脚注本身相关联 - 在脚注输出中，脚注按顺序编号。&lt;/p&gt;
&lt;p&gt;在中括号内使用插入符号和数字以及用冒号和文本来添加脚注内容 (&lt;code&gt;[^1]：这是一段脚注&lt;/code&gt;)。
你不一定要在文档末尾添加脚注。可以将它们放在除列表，引用和表格等元素之外的任何位置。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;这是一个数字脚注 [^1]
这是一个带标签的脚注 [^label]

[^1]: 这是一个数字脚注
[^label]: 这是一个带标签的脚注&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;这是一个数字脚注 &lt;sup id="fnref:1"&gt;&lt;a href="#fn:1" class="footnote-ref" role="doc-noteref"&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;这是一个带标签的脚注 &lt;sup id="fnref:2"&gt;&lt;a href="#fn:2" class="footnote-ref" role="doc-noteref"&gt;2&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h2 class="heading-element" id="图片"&gt;&lt;span&gt;图片&lt;/span&gt;
 &lt;a href="#%e5%9b%be%e7%89%87" class="heading-mark"&gt;
 &lt;svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"&gt;&lt;path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"&gt;&lt;/path&gt;&lt;/svg&gt;
 &lt;/a&gt;
&lt;/h2&gt;&lt;p&gt;图片的语法与链接相似，但包含一个在前面的感叹号。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;![Minion](https://octodex.github.com/images/minion.png)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;img loading="lazy" src='https://octodex.github.com/images/minion.png' alt="Minion"&gt;&lt;/p&gt;
&lt;p&gt;或者：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;![Alt text](https://octodex.github.com/images/stormtroopocat.jpg &amp;#34;The Stormtroopocat&amp;#34;)&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;figure&gt;&lt;a class="lightgallery" target="_blank" href="https://octodex.github.com/images/stormtroopocat.jpg" title="The Stormtroopocat" data-thumbnail="https://octodex.github.com/images/stormtroopocat.jpg" data-sub-html="&lt;h2&gt;Alt text&lt;/h2&gt;&lt;p&gt;The Stormtroopocat&lt;/p&gt;"&gt;&lt;img loading="lazy" src='https://octodex.github.com/images/stormtroopocat.jpg' alt="Alt text"&gt;&lt;/a&gt;&lt;figcaption class="image-caption"&gt;The Stormtroopocat&lt;/figcaption&gt;
 &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;像链接一样，图片也具有引用式的语法：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;![Alt text][id]&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;figure&gt;&lt;a class="lightgallery" target="_blank" href="https://octodex.github.com/images/dojocat.jpg" title="The Dojocat" data-thumbnail="https://octodex.github.com/images/dojocat.jpg" data-sub-html="&lt;h2&gt;Alt text&lt;/h2&gt;&lt;p&gt;The Dojocat&lt;/p&gt;"&gt;&lt;img loading="lazy" src='https://octodex.github.com/images/dojocat.jpg' alt="Alt text"&gt;&lt;/a&gt;&lt;figcaption class="image-caption"&gt;The Dojocat&lt;/figcaption&gt;
 &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;稍后在文档中提供参考内容，用来定义 URL 的位置：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;[id]: https://octodex.github.com/images/dojocat.jpg &amp;#34;The Dojocat&amp;#34;&lt;/code&gt;&lt;/pre&gt;&lt;div class="footnotes" role="doc-endnotes"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:1"&gt;
&lt;p&gt;这是一个数字脚注&amp;#160;&lt;a href="#fnref:1" class="footnote-backref" role="doc-backlink"&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:2"&gt;
&lt;p&gt;这是一个带标签的脚注&amp;#160;&lt;a href="#fnref:2" class="footnote-backref" role="doc-backlink"&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</description></item></channel></rss>