<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Firefly</title><description>Demo site</description><link>https://blog.lixiuxu.cn/</link><templateTheme>Firefly</templateTheme><templateThemeVersion>6.8.7</templateThemeVersion><templateThemeUrl>https://github.com/CuteLeaf/Firefly</templateThemeUrl><lastBuildDate>2026年5月7日 04:44:41</lastBuildDate><item><title>Firefly 一款清新美观的 Astro 博客主题模板</title><link>https://blog.lixiuxu.cn/posts/firefly/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/firefly/</guid><description>Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;🌟 项目概述&lt;a href=&quot;#-项目概述&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;Firefly&lt;/strong&gt; 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;🖥️在线预览： &lt;a href=&quot;https://firefly.cuteleaf.cn/&quot;&gt;Firefly - Demo site&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;🏠我的博客： &lt;a href=&quot;https://blog.cuteleaf.cn/&quot; target=&quot;_blank&quot;&gt;https://blog.cuteleaf.cn&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;📝Firefly使用文档： &lt;a href=&quot;https://docs-firefly.cuteleaf.cn/&quot; target=&quot;_blank&quot;&gt;https://docs-firefly.cuteleaf.cn&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;⭐Firefly开源地址：&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;https://github.com/CuteLeaf/Firefly&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;⭐Fuwari开源地址：&lt;a href=&quot;https://github.com/saicaca/fuwari&quot; target=&quot;_blank&quot;&gt;https://github.com/saicaca/fuwari&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;CuteLeaf&lt;/div&gt;&lt;/div&gt;&lt;div&gt;/&lt;/div&gt;&lt;div&gt;Firefly&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;Waiting for api.github.com...&lt;/div&gt;&lt;div&gt;&lt;div&gt;00K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;span&gt;Waiting...&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href=&quot;https://github.com/saicaca/fuwari&quot; target=&quot;_blank&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;saicaca&lt;/div&gt;&lt;/div&gt;&lt;div&gt;/&lt;/div&gt;&lt;div&gt;fuwari&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;Waiting for api.github.com...&lt;/div&gt;&lt;div&gt;&lt;div&gt;00K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;span&gt;Waiting...&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;Firefly&quot; loading=&quot;lazy&quot; width=&quot;2201&quot; height=&quot;1238&quot; src=&quot;/_astro/1.DzpFX8mf_Z1gH7z7.webp&quot; srcset=&quot;/_astro/1.DzpFX8mf_I87xr.webp 640w, /_astro/1.DzpFX8mf_Z1TCS8Y.webp 750w, /_astro/1.DzpFX8mf_1OChcu.webp 828w, /_astro/1.DzpFX8mf_a34mN.webp 1080w, /_astro/1.DzpFX8mf_19VGwF.webp 1280w, /_astro/1.DzpFX8mf_CJ3L8.webp 1668w, /_astro/1.DzpFX8mf_hRMyP.webp 2048w, /_astro/1.DzpFX8mf_Z1gH7z7.webp 2201w&quot; /&gt;&lt;figcaption&gt;Firefly&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;🚀 技术架构&lt;a href=&quot;#-技术架构&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;静态站点生成&lt;/strong&gt;: 基于 Astro ，提供极快的加载速度和优秀的 SEO 优化&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;TypeScript 支持&lt;/strong&gt;: 完整的类型安全，提升开发体验和代码质量&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;响应式设计&lt;/strong&gt;: 使用 Tailwind CSS 构建，完美适配桌面端和移动端&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;组件化开发&lt;/strong&gt;: 支持 Astro、Svelte 组件，灵活可扩展&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;📖 配置说明&lt;a href=&quot;#-配置说明&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;blockquote&gt;&lt;p&gt;📚 &lt;strong&gt;详细配置文档&lt;/strong&gt;: 查看 &lt;a href=&quot;https://docs-firefly.cuteleaf.cn/&quot; target=&quot;_blank&quot;&gt;Firefly使用文档&lt;/a&gt; 获取完整的配置指南&lt;/p&gt;&lt;/blockquote&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 简单使用指南</title><link>https://blog.lixiuxu.cn/posts/guide/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/guide/</guid><description>如何使用 Firefly 博客模板。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;这个博客模板是基于 &lt;a href=&quot;https://astro.build/&quot; target=&quot;_blank&quot;&gt;Astro&lt;/a&gt; 构建的。对于本指南中未提及的内容，您可以在 &lt;a href=&quot;https://docs.astro.build/&quot; target=&quot;_blank&quot;&gt;Astro 文档&lt;/a&gt; 中找到答案。&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;文章的 Front-matter&lt;a href=&quot;#文章的-front-matter&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;我的第一篇博客文章&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;这是我新 Astro 博客的第一篇文章。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;./cover.jpg&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;前端&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;开发&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;category&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;前端开发&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;draft&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
















































































&lt;table&gt;&lt;thead&gt;&lt;tr&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;code&gt;title&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章标题。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;published&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章发布日期。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;updated&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章更新日期。如果未设置，将默认使用发布日期。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;pinned&lt;/code&gt;&lt;/td&gt;&lt;td&gt;是否将此文章置顶在文章列表顶部。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;description&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章的简短描述。显示在首页上。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;image&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章封面图片路径。&lt;br /&gt;1. 以 &lt;code&gt;http://&lt;/code&gt; 或 &lt;code&gt;https://&lt;/code&gt; 开头：使用网络图片&lt;br /&gt;2. 以 &lt;code&gt;/&lt;/code&gt; 开头：&lt;code&gt;public&lt;/code&gt; 目录中的图片&lt;br /&gt;3. 不带任何前缀：相对于 markdown 文件的路径&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章标签。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;category&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章分类。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;lang&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章语言代码（如 &lt;code&gt;zh-CN&lt;/code&gt;）。仅当文章语言与站点默认语言不同时设置。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;licenseName&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章内容的许可证名称。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;licenseUrl&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章内容的许可证链接。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;author&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章作者。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;sourceLink&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章内容的来源链接或参考。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;draft&lt;/code&gt;&lt;/td&gt;&lt;td&gt;如果这篇文章仍是草稿，则不会显示。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;comment&lt;/code&gt;&lt;/td&gt;&lt;td&gt;是否启用此文章的评论功能。默认为 &lt;code&gt;true&lt;/code&gt;。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;slug&lt;/code&gt;&lt;/td&gt;&lt;td&gt;自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;password&lt;/code&gt;&lt;/td&gt;&lt;td&gt;文章密码。设置后文章内容将被 AES-256-GCM 加密，访客需输入密码才能查看。&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;passwordHint&lt;/code&gt;&lt;/td&gt;&lt;td&gt;密码提示。显示在密码输入框上方，帮助访客回忆密码，也可以不加。&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;文章文件的放置位置&lt;a href=&quot;#文章文件的放置位置&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您的文章文件应放置在 &lt;code&gt;src/content/posts/&lt;/code&gt; 目录中。您也可以创建子目录来更好地组织您的文章和资源。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;src/content/posts/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── post-1.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;└── post-2/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── cover.png&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;└── index.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;自定义文章 URL (Slug)&lt;a href=&quot;#自定义文章-url-slug&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;什么是 Slug？&lt;a href=&quot;#什么是-slug&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Slug 使用示例&lt;a href=&quot;#slug-使用示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;示例 1：使用文件名作为 URL&lt;a href=&quot;#示例-1使用文件名作为-url&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;我的第一篇博客文章&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;文件：&lt;code&gt;src/content/posts/my-first-blog-post.md&lt;/code&gt;&lt;/p&gt;&lt;p&gt;URL：&lt;code&gt;/posts/my-first-blog-post&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;示例 2：自定义 Slug&lt;a href=&quot;#示例-2自定义-slug&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;我的第一篇博客文章&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;slug&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;hello-world&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;文件：&lt;code&gt;src/content/posts/my-first-blog-post.md&lt;/code&gt;&lt;/p&gt;&lt;p&gt;URL：&lt;code&gt;/posts/hello-world&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;示例 3：其他语言文件名使用Slug&lt;a href=&quot;#示例-3其他语言文件名使用slug&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;如何使用 Firefly 博客主题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-09-09&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;slug&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;how-to-use-firefly-blog-theme&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;文件：&lt;code&gt;src/content/posts/如何使用Firefly博客主题.md&lt;/code&gt;&lt;/p&gt;&lt;p&gt;URL：&lt;code&gt;/posts/how-to-use-firefly-blog-theme&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Slug 使用建议&lt;a href=&quot;#slug-使用建议&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;使用英文和连字符&lt;/strong&gt;：&lt;code&gt;my-awesome-post&lt;/code&gt; 而不是 &lt;code&gt;my awesome post&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;保持简洁&lt;/strong&gt;：避免过长的 slug&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;具有描述性&lt;/strong&gt;：让 URL 能够反映文章内容&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;/ol&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;注意事项&lt;a href=&quot;#注意事项&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接&lt;/li&gt;
&lt;li&gt;如果多个文章使用相同的 slug，后面的文章会覆盖前面的&lt;/li&gt;
&lt;li&gt;Slug 会自动转换为小写&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Solana入门</title><link>https://blog.lixiuxu.cn/posts/2025-05-31-solana/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2025-05-31-solana/</guid><description>从旧 Hexo 博客迁移：Solana入门</description><pubDate>Sat, 31 May 2025 00:00:00 GMT</pubDate><content:encoded/></item><item><title>Hexo博客多机更新</title><link>https://blog.lixiuxu.cn/posts/2025-05-03-hexo%E7%9A%84%E5%A4%9A%E6%9C%BA%E6%9B%B4%E6%96%B0/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2025-05-03-hexo%E7%9A%84%E5%A4%9A%E6%9C%BA%E6%9B%B4%E6%96%B0/</guid><description>从旧 Hexo 博客迁移：Hexo博客多机更新</description><pubDate>Sat, 03 May 2025 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Hexo的多机更新&lt;a href=&quot;#hexo的多机更新&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;正如大家所看见的样子，我的个人博客很少有时间更新；更准确的来讲就是我的文章产出是非常稀少的，
那么我说明一下，目前我在供稿的公众号平台主要是AIProtein、SDbioinfor以及我自己的AIbioMed日记（就是这么深爱这个学科）&lt;/p&gt;&lt;p&gt;虽然跟新的频率很慢，但是还是有很多有意思的文章可以来更新。那么自己的博客为什么更新的这么慢呢？
在看过了《孤独的美食家》之后又再次诱发了我的更新创作的灵感。&lt;/p&gt;&lt;p&gt;那么到底是什么阻挠了我呢？（绝对不是懒）&lt;/p&gt;&lt;hr /&gt;&lt;section&gt;&lt;h2&gt;已有环境&lt;a href=&quot;#已有环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Home_PC : Win11 + Git&lt;/p&gt;&lt;p&gt;Home_Server : Arch Linux + Git&lt;/p&gt;&lt;p&gt;Office : Win11 + Git&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;Hexo框架多机更新的原理&lt;a href=&quot;#hexo框架多机更新的原理&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;主要是利用Git分支来实现hexo和源代码的同步&lt;/p&gt;&lt;p&gt;hexo生成的静态网页默认放在master分支上，这个由Hexo源代码文件夹下面的_config.yml文件&lt;/p&gt;&lt;p&gt;在全局配置中进行配置&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;deploy:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;type: git&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;repo: git@github.com:username/username.github.io.git&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;branch: master&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;那么我们之后创建一条hexo的分支，用以保存blog的源代码&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;更新的流程&lt;a href=&quot;#更新的流程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;那么之后我们每次进行文章的更新的时候，&lt;/p&gt;&lt;p&gt;同步的步骤&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 合并仓库和本地&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git pull&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 同步源代码&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git add .&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git commit -m &quot;xxxx&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git push&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 同步文章&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;hexo d -g&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>关于打牌日记的一些小思考</title><link>https://blog.lixiuxu.cn/posts/2024-10-06-%E5%85%B3%E4%BA%8E%E6%89%93%E7%89%8C%E6%97%A5%E8%AE%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E5%B0%8F%E6%80%9D%E8%80%83/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2024-10-06-%E5%85%B3%E4%BA%8E%E6%89%93%E7%89%8C%E6%97%A5%E8%AE%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E5%B0%8F%E6%80%9D%E8%80%83/</guid><description>从旧 Hexo 博客迁移：关于打牌日记的一些小思考</description><pubDate>Sun, 06 Oct 2024 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;首先，很遗憾宣布万智牌从2024年2月之后的系列里，就都没有提供中文版的卡包了&lt;a href=&quot;#首先很遗憾宣布万智牌从2024年2月之后的系列里就都没有提供中文版的卡包了&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;目前最让人感到难过的是中文版的失去，不过MTGA玩的多了也大概知道什么是什么了。&lt;/p&gt;&lt;p&gt;同时，我这次的「暮悲邸」系列是继「神河：霓朝纪」和「非瑞克西亚：万界归一」比较喜欢的系列，同时一些比较强力相较于8月的「斑隆洛」来说，鹏洛客只有一个（但是还是开出来了嘿嘿），一些新的机制我想在单独找个时间来分享一下。&lt;/p&gt;&lt;p&gt;这次的开盒的结果还是要总结一下的，共计5盒（3盒现开盒，2盒肥盒）&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;AI和万智牌&lt;a href=&quot;#ai和万智牌&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;目前我参考过得几个文章都在说明AI并不能很好的理解万智牌，这其中一定是有深意的。这里就简单写一些&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;关于混色的策略&lt;a href=&quot;#关于混色的策略&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;在万智牌中，不单单只有单独一种颜色，纯色和混色都是很常见的组合；尤其是在每次新系列发型时，线下牌店的现开赛中你无法保证自己能够开出来的某个单色牌是可以组成一个完整套牌的，因此混色的选择显得尤为重要。&lt;/p&gt;&lt;p&gt;这里我们只对这些颜色的组合进行解释，具体强弱牌桌上见&lt;/p&gt;&lt;section&gt;&lt;h2&gt;纯色&lt;a href=&quot;#纯色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;白色 &lt;strong&gt;W&lt;/strong&gt;hite— 大地 — 放逐、清场&lt;/p&gt;&lt;p&gt;蓝色 Bl&lt;strong&gt;U&lt;/strong&gt;e — 海洋 — 康、抓牌&lt;/p&gt;&lt;p&gt;黑色 &lt;strong&gt;B&lt;/strong&gt;lack — 沼泽 — 杀、掀坟&lt;/p&gt;&lt;p&gt;红色 &lt;strong&gt;R&lt;/strong&gt;ed — 山脉 — 打脸、烧&lt;/p&gt;&lt;p&gt;绿色 &lt;strong&gt;G&lt;/strong&gt;reen — 森林 — 大怪、爆费&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;双色&lt;a href=&quot;#双色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;蓝白（Azorius）— 俄佐立参议院 — 控制、清场&lt;/p&gt;&lt;p&gt;蓝黑（Dimir）— 底密尔会堂 — 弃牌、抓牌、杀&lt;/p&gt;&lt;p&gt;黑红（Rakdos）— 拉铎司宗派 — 换血&lt;/p&gt;&lt;p&gt;红绿（Gruul）— 古鲁部落 — 傻大个&lt;/p&gt;&lt;p&gt;白绿（Selesnya）— 瑟雷尼亚盟会 — tokens&lt;/p&gt;&lt;p&gt;黑白（Orzhov）— 欧佐夫集团 — 死者苏生&lt;/p&gt;&lt;p&gt;红白（Boros）— 波洛斯军团 — 走脸、All in&lt;/p&gt;&lt;p&gt;红蓝（Izzet）— 伊捷联盟 — 组合技、low&lt;/p&gt;&lt;p&gt;黑绿（Golgari）— 葛加理群落 — 杀不完&lt;/p&gt;&lt;p&gt;蓝绿（Simic）— 析米克联合 — 疯狂加豆&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;三色&lt;a href=&quot;#三色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;临三色&lt;a href=&quot;#临三色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;班特(Bant) — 绿白蓝&lt;/p&gt;&lt;p&gt;纳雅(Naya) — 红绿白&lt;/p&gt;&lt;p&gt;格利极(Grixis) — 蓝黑红&lt;/p&gt;&lt;p&gt;艾斯波(Esper) — 白蓝黑&lt;/p&gt;&lt;p&gt;勇得(Jund) — 黑红绿&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;对三色&lt;a href=&quot;#对三色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;阿布赞(Abzan) — 黑白绿&lt;/p&gt;&lt;p&gt;洁斯凯(Jeskai) — 白蓝红&lt;/p&gt;&lt;p&gt;玛尔都(Mardu) — 黑白红&lt;/p&gt;&lt;p&gt;苏勒台(Sultai) — 蓝黑绿&lt;/p&gt;&lt;p&gt;铁木尔(Temur) — 红绿蓝&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;四色&lt;a href=&quot;#四色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;EDH（指挥官赛制）&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;五色&lt;a href=&quot;#五色&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;！！！万界登神&lt;/p&gt;&lt;p&gt;悄咪咪自己又下单了一个补充盒和一个梦魇盒。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>简述定向进化</title><link>https://blog.lixiuxu.cn/posts/2024-10-04-%E7%AE%80%E8%BF%B0%E5%AE%9A%E5%90%91%E8%BF%9B%E5%8C%96/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2024-10-04-%E7%AE%80%E8%BF%B0%E5%AE%9A%E5%90%91%E8%BF%9B%E5%8C%96/</guid><description>从旧 Hexo 博客迁移：简述定向进化</description><pubDate>Fri, 04 Oct 2024 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;&lt;section&gt;&lt;h1&gt;简述酶的定向进化🦍&lt;a href=&quot;#简述酶的定向进化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h5&gt;Machine-learning-guided directed evolution&lt;a href=&quot;#machine-learning-guided-directed-evolution&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;&lt;img src=&quot;https://files.mdnice.com/user/66586/d2150ffb-7c96-4427-92f6-88cfa416ec47.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;&lt;p&gt;定向进化是酶工程中最为闪耀的一颗明珠，近些年在合成生物学中大放异彩，同时也和机器学习的发展一起逐步发展壮大。本文将主要介绍定向进化(Directed Evolution)这一技术的发展和机器学习在定向进化中的相关工作。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;关键词&lt;a href=&quot;#关键词&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;深度学习｜酶工程｜定向进化&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;section&gt;&lt;h6&gt;目录&lt;a href=&quot;#目录&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h6&gt;&lt;ol&gt;
&lt;li&gt;背景介绍&lt;/li&gt;
&lt;li&gt;实验流程
&lt;ul&gt;
&lt;li&gt;构建突变文库&lt;/li&gt;
&lt;li&gt;选择和筛选&lt;/li&gt;
&lt;li&gt;连续定向进化&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;相关工作
&lt;ul&gt;
&lt;li&gt;DeepSequence&lt;/li&gt;
&lt;li&gt;EVmutation&lt;/li&gt;
&lt;li&gt;UniRep&lt;/li&gt;
&lt;li&gt;ECnet&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;/section&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;section&gt;&lt;h2&gt;1. 背景介绍&lt;a href=&quot;#1-背景介绍&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;1.1 酶和酶催化&lt;a href=&quot;#11-酶和酶催化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;酶（Enzyme）&lt;/strong&gt; 的化学本质是具有催化活性的蛋白质（少部分是RNA）其具有一下性质：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;经酸碱水解的最终产物是氨基酸，且被蛋白酶水解失活&lt;/li&gt;
&lt;li&gt;是具有空间结构的大分子&lt;/li&gt;
&lt;li&gt;是两性电解质，在不同pH条件呈现不同的离子状态&lt;/li&gt;
&lt;li&gt;不能通过半透膜等胶体性质&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;strong&gt;酶促反应&lt;/strong&gt;（Enzyme catalysis）又称为酶促反应或酵素催化作用，指的是由酶作为催化剂进行催化的化学反应。&lt;/p&gt;&lt;p&gt;生物体内的化学反应绝大多数属于酶促反应，酶作为一种生物催化剂在催化一个化学反应时，既具有一般的催化剂的特征，又具有不同于一般催化剂的特殊性。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://img.picui.cn/free/2024/09/20/66ed069130e26.png&quot; alt=&quot;酶催化过程&quot; /&gt;&lt;figcaption&gt;酶催化过程&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;1.2 酶工程&lt;a href=&quot;#12-酶工程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;对酶的的开发和利用来说，酶是至关重要的一个生物技术内容。酶工程（Enzyme Engineering）主要研究酶的生产、固化、纯化技术、酶分子结构的修饰和改造以及在食品生物医学界的应用。&lt;/p&gt;&lt;p&gt;酶工程主要分为：化学酶工程 和 生物酶工程&lt;/p&gt;&lt;p&gt;&lt;strong&gt;化学酶工程&lt;/strong&gt;：初级酶工程，酶化学与化学工程技术相结合的产物。即通过对酶的化学修饰或固定化处理，改善酶的性质以提高酶的效率和降低成本，甚至通过化学合成法制造人工酶&lt;/p&gt;&lt;p&gt;&lt;strong&gt;生物酶工程&lt;/strong&gt;：高级酶工程，酶学与现代分子生物学技术相结合的产物。用基因重组技术 生产酶以及对酶基因进行修饰或设计新基因，从而生产性能稳定，具有新的生物活性及催化效率更高的酶。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;1.3 定向进化&lt;a href=&quot;#13-定向进化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;定向进化（Directed Evolution）&lt;/strong&gt; 是通过试管中模拟达尔文进化的进程，通过随机突变和重组并按照需求加以一定的选择压力，从而选择出具有特定特征的蛋白质。在2018年诺贝尔化学奖颁发Frances H. Arnold以表彰她实现了酶的定向进化这一技术。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://img.picui.cn/free/2024/09/20/66ed069134f11.png&quot; alt=&quot;图｜定向进化的流程&quot; /&gt;&lt;figcaption&gt;图｜定向进化的流程&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://pica.zhimg.com/80/v2-fa45278fa0f70b928edc2382fac255ca_1440w.webp&quot; alt=&quot;图｜2018年诺贝尓化学奖&quot; /&gt;&lt;figcaption&gt;图｜2018年诺贝尓化学奖&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;section&gt;&lt;h2&gt;2. 实验流程&lt;a href=&quot;#2-实验流程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;2.1 构建突变文库&lt;a href=&quot;#21-构建突变文库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;2.1.1 体外突变法&lt;a href=&quot;#211-体外突变法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;原位易错PCR（&lt;em&gt;In situ&lt;/em&gt; error-prone PCR, &lt;em&gt;Is&lt;/em&gt;-epPCR）&lt;/strong&gt;&lt;br /&gt;
通过将DNA连接酶的引入，建立了“变性-退火-延伸-连接”的循环PCR，实现了环状质粒的指数级PCR扩增，该方法所用引物为还有与模板治理不同筛选标记的线性双链DNA，可以将模板质粒直接从筛选平板上提取。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;定点饱和突变（sequence saturation mutagenesis)&lt;/strong&gt;&lt;br /&gt;
相比于易错 PCR 较高的随机性，饱和突变的目的性很强，操作也更为精确、简单，但是仍然存在明显的氨基酸偏好性(与易错 PCR 类似)、突变体库过于庞大等问题，因此在一定程度上增加了筛选成本。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;合成文库（synthetic library generation）&lt;/strong&gt;&lt;br /&gt;
在硅基芯片上应用大规模平行寡核苷酸合成技术，然后进行有效的基因组装，每种突变体均采用计算机模拟设计，并在合成前进行筛选，因此消除了不需要的序列偏倚、提前出现的终止密码子和多余的基序。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;2.1.2 体内突变法&lt;a href=&quot;#212-体内突变法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;基因突变体库的另一大类构建方法是体内突变法，即在胞内诱导特定基因的突变，无需进行 基因克隆与转化，很大程度上缩短了定向进化的实验周期。例如：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;基于单链DNA重组的多元自动化基因组工程技术&lt;/li&gt;
&lt;li&gt;CRISPR-Cas系统介导的重组技术&lt;/li&gt;
&lt;li&gt;正交易错复制系统&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2.2 选择和筛选&lt;a href=&quot;#22-选择和筛选&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;2.2.1 平板筛选法&lt;a href=&quot;#221-平板筛选法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;平板筛选是一种简单且直接的筛选方法,通常是利用平板培养基上不同重组细胞的表型(生长、水解等)在视觉上产生的区分度,将含有目标突变体的重组细胞筛选出来,缺点是仅适用于突变体库的初筛且通量较低&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;2.2.2 荧光筛选法&lt;a href=&quot;#222-荧光筛选法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;荧光筛选法是指针对本身无光学特性的酶反应,通过对底物进行荧光标记,根据由化学键断裂或形成导致的样本荧光信号的改变,来表征突变体的催化活性&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;2.2.3 质谱法&lt;a href=&quot;#223-质谱法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;在不需要标记的高通量筛选方法中,质谱法作为一种高灵敏度和高特异性的检测方法,在蛋白质工程中应用极广&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2.3 连续定向进化&lt;a href=&quot;#23-连续定向进化&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;连续进化（phage-assisted continuous evolution, PACE）&lt;/strong&gt; 由噬菌体辅助。连续进化希望在无人为干预的情况下，能够完成基因突变、蛋白表达、表型选择和筛选的迭代实验。连续定向进化通过缩短每轮进化的时间。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://img.picui.cn/free/2024/09/20/66ed06913ae35.png&quot; alt=&quot;图|连续进化流程&quot; /&gt;&lt;figcaption&gt;图|连续进化流程&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;section&gt;&lt;h2&gt;3. 相关工作&lt;a href=&quot;#3-相关工作&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在预测突变效应的效果，目前小编关注了几个自己用过的模型：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;DeepSequence&lt;/li&gt;
&lt;li&gt;EVmutation&lt;/li&gt;
&lt;li&gt;UniRep&lt;/li&gt;
&lt;li&gt;ECnet&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;section&gt;&lt;h3&gt;3.1 DeepSequence&lt;a href=&quot;#31-deepsequence&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;DeepSequence 是一个生成性的、无监督的生物序列潜变量模型，给定一个多重序列比对作为输入，它可以用来预测可获得的突变。通过具有非线性依赖关系的潜在变量模型来获得生物序列中的高阶依赖关系。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://files.mdnice.com/user/66586/76bc279a-3daf-4284-b683-752afcfc4522.png&quot; alt=&quot;图｜DeepSequnence结构&quot; /&gt;&lt;figcaption&gt;图｜DeepSequnence结构&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3.2 EVmutation&lt;a href=&quot;#32-evmutation&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;即Epistatic model（上位效应模型），一种无监督的概率模型，考虑了所有残基对之间的相互作用（上位效应），因为一个位点的突变可能会受到另外一个位点的影响。&lt;/p&gt;&lt;p&gt;推荐阅读：&lt;a href=&quot;https://zhuanlan.zhihu.com/p/455885589&quot; target=&quot;_blank&quot;&gt;《神经网络从深度突变扫描数据中学习蛋白质序列-功能关系》&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3.3 UniRep&lt;a href=&quot;#33-unirep&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;仅使用少量功能特征化的训练变体（Low-N）即可实现对序列空间的大规模探索，开发了一种在大型未标记蛋白质序列数据集上进行训练的深度学习模型UniRep。UniRep从头开始，仅从序列开始，就学会了将蛋白质的基本特征（包括生物物理，结构和进化信息）提炼成整体的统计摘要或表示形式。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://img.picui.cn/free/2024/09/20/66ed069133923.jpg&quot; alt=&quot;图｜UniRep结构&quot; /&gt;&lt;figcaption&gt;图｜UniRep结构&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3.4 ECnet&lt;a href=&quot;#34-ecnet&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;利用进化上下文来预测蛋白质工程的功能适应性Fitness。该算法整合了来自同源序列的局部进化背景与全局进化背景，这些序列明确地对蛋白质的残基-残基互作进行建模，以及编码来自庞大蛋白质序列空间的丰富语义和结构特征。&lt;/p&gt;&lt;p&gt;推荐阅读:&lt;a href=&quot;https://cloud.tencent.com/developer/article/1891817&quot; target=&quot;_blank&quot;&gt;《ECNet,学习进化信息指导蛋白质工程》&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;section&gt;&lt;h6&gt;参考文献&lt;a href=&quot;#参考文献&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h6&gt;&lt;p&gt;[1] Wang W W, Zhang Y C, Liu M J. One-step construction of mutagenesis libraries via in situ error-prone PCR[J]. Microbiology China, 2014, 41(4): 719-724.&lt;/p&gt;&lt;p&gt;[2] Luo, Y., Jiang, G., Yu, T., Liu, Y., Vo, L., Ding, H., Su, Y., Qian, W. W., Zhao, H., &amp;amp; Peng, J. (2021). ECNet is an evolutionary context-integrated deep learning framework for protein engineering. Nature Communications, 12(1), Article 1. &lt;a href=&quot;https://doi.org/10.1038/s41467-021-25976-8&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1038/s41467-021-25976-8&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[3] Wang, Y., Xue, P., Cao, M., Yu, T., Lane, S. T., &amp;amp; Zhao, H. (2021). Directed evolution: Methodologies and applications. Chemical Reviews, 121(20), Article 20. &lt;a href=&quot;https://doi.org/10.1021/acs.chemrev.1c00260&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1021/acs.chemrev.1c00260&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[4] Hopf, T., Ingraham, J., Poelwijk, F. et al. Mutation effects predicted from sequence co-variation. Nat Biotechnol 35, 128–135 (2017). &lt;a href=&quot;https://doi.org/10.1038/nbt.3769&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1038/nbt.3769&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[5] Riesselman, A.J., Ingraham, J.B. &amp;amp; Marks, D.S. Deep generative models of genetic variation capture the effects of mutations. Nat Methods 15, 816–822 (2018). &lt;a href=&quot;https://doi.org/10.1038/s41592-018-0138-4&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1038/s41592-018-0138-4&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[6] Alley, E.C., Khimulya, G., Biswas, S. et al. Unified rational protein engineering with sequence-based deep representation learning. Nat Methods 16, 1315–1322 (2019). &lt;a href=&quot;https://doi.org/10.1038/s41592-019-0598-1&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1038/s41592-019-0598-1&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[7] Ellis, H. M., Yu, D., DiTizio, T., &amp;amp; Donald L. Court. (2001). High efficiency mutagenesis, repair, and engineering of chromosomal DNA using single-stranded oligonucleotides. Proceedings of the National Academy of Sciences, 98(12), 6742–6746. &lt;a href=&quot;https://doi.org/10.1073/pnas.121164898&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1073/pnas.121164898&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[8] Jakočiūnas, T., Pedersen, L. E., Lis, A. V., Jensen, M. K., &amp;amp; Keasling, J. D. (2018). CasPER, a method for directed evolution in genomic contexts using mutagenesis and CRISPR/Cas9. Metabolic Engineering, 48, 288–296. &lt;a href=&quot;https://doi.org/https://doi.org/10.1016/j.ymben.2018.07.001&quot; target=&quot;_blank&quot;&gt;https://doi.org/https://doi.org/10.1016/j.ymben.2018.07.001&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[9] Ravikumar, A., Arzumanyan, G. A., Obadi, M. K. A., Javanpour, A. A., &amp;amp; Liu, C. C. (2018). Scalable, Continuous Evolution of Genes at Mutation Rates above Genomic Error Thresholds. Cell, 175(7), 1946–1957.e13. &lt;a href=&quot;https://doi.org/10.1016/j.cell.2018.10.021&quot; target=&quot;_blank&quot;&gt;https://doi.org/10.1016/j.cell.2018.10.021&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/blockquote&gt;</content:encoded></item><item><title>博客主题迁移小记</title><link>https://blog.lixiuxu.cn/posts/2024-10-01-%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E8%BF%81%E7%A7%BB%E5%B0%8F%E8%AE%B0/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2024-10-01-%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E8%BF%81%E7%A7%BB%E5%B0%8F%E8%AE%B0/</guid><description>从旧 Hexo 博客迁移：博客主题迁移小记</description><pubDate>Tue, 01 Oct 2024 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;好久不见&lt;a href=&quot;#好久不见&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;很长时间没有写过自己的博客了，虽然最近这段时间写过了很久的日记，但是博客的更新似乎少了很多。&lt;/p&gt;&lt;p&gt;那么这段时间之后，我应该会恢复对于博客的更新，那么这次更新我重新启用了一个新的更加符合博客风格的主题，随着这些年大家逐渐开始善用Github Pages去搭建自己的博客，逐渐的越来越多的框架越来越丰富，但是我使用了将近6年的Hexo，虽然没有太搞懂他的逻辑，但是像是基于Hugo或是其他的框架也逐渐越来越丰富。&lt;/p&gt;&lt;p&gt;那么这次更新的话，使用了一个小组件更加丰富，且能够进一步了解node项目的主题，Stellar。这个主题似乎已经更新的很完善了，而且更加符合我对于博客风格的认知。其二其自带的wiki功能能够省下我自己去维护一个单独的wiki项目的大部分时间，我想这也节省了我大部分将notion笔记转移到博客的时间，那么下一步如果有时间的话，我想要去找到一个notion同步到博客的方法。&lt;/p&gt;&lt;p&gt;那么希望自己多多的更新博客吧&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;祝大家国庆节假期快乐&lt;a href=&quot;#祝大家国庆节假期快乐&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;目前logo还是空缺的，有时间要自己设计一个自己的logo，网站就先空着吧&lt;a href=&quot;#目前logo还是空缺的有时间要自己设计一个自己的logo网站就先空着吧&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/section&gt;</content:encoded></item><item><title>Hello World</title><link>https://blog.lixiuxu.cn/posts/2024-01-01-hello-world/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2024-01-01-hello-world/</guid><description>从旧 Hexo 博客迁移：Hello World</description><pubDate>Mon, 01 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Welcome to &lt;a href=&quot;https://hexo.io/&quot; target=&quot;_blank&quot;&gt;Hexo&lt;/a&gt;! This is your very first post. Check &lt;a href=&quot;https://hexo.io/docs/&quot; target=&quot;_blank&quot;&gt;documentation&lt;/a&gt; for more info. If you get any problems when using Hexo, you can find the answer in &lt;a href=&quot;https://hexo.io/docs/troubleshooting.html&quot; target=&quot;_blank&quot;&gt;troubleshooting&lt;/a&gt; or you can ask me on &lt;a href=&quot;https://github.com/hexojs/hexo/issues&quot; target=&quot;_blank&quot;&gt;GitHub&lt;/a&gt;.&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;Quick Start&lt;a href=&quot;#quick-start&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;Create a new post&lt;a href=&quot;#create-a-new-post&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;$&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;hexo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;new&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;My New Post&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/writing.html&quot; target=&quot;_blank&quot;&gt;Writing&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Run server&lt;a href=&quot;#run-server&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;$&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;hexo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;server&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/server.html&quot; target=&quot;_blank&quot;&gt;Server&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Generate static files&lt;a href=&quot;#generate-static-files&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;$&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;hexo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;generate&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/generating.html&quot; target=&quot;_blank&quot;&gt;Generating&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Deploy to remote sites&lt;a href=&quot;#deploy-to-remote-sites&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;$&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;hexo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;deploy&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/one-command-deployment.html&quot; target=&quot;_blank&quot;&gt;Deployment&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>使用Quarto生成属于自己的图书</title><link>https://blog.lixiuxu.cn/posts/2023-10-06-%E4%BD%BF%E7%94%A8quarto%E7%94%9F%E6%88%90%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%9B%BE%E4%B9%A6/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2023-10-06-%E4%BD%BF%E7%94%A8quarto%E7%94%9F%E6%88%90%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%9B%BE%E4%B9%A6/</guid><description>从旧 Hexo 博客迁移：使用Quarto生成属于自己的图书</description><pubDate>Fri, 06 Oct 2023 00:00:00 GMT</pubDate><content:encoded/></item><item><title>Scikit-plot指北</title><link>https://blog.lixiuxu.cn/posts/2023-06-06-scikit-plot%E6%8C%87%E5%8C%97/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2023-06-06-scikit-plot%E6%8C%87%E5%8C%97/</guid><description>从旧 Hexo 博客迁移：Scikit-plot指北</description><pubDate>Tue, 06 Jun 2023 00:00:00 GMT</pubDate><content:encoded/></item><item><title>Sphinx快速创建文档</title><link>https://blog.lixiuxu.cn/posts/2023-01-26-sphinx%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E6%96%87%E6%A1%A3/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2023-01-26-sphinx%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E6%96%87%E6%A1%A3/</guid><description>从旧 Hexo 博客迁移：Sphinx快速创建文档</description><pubDate>Thu, 26 Jan 2023 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;最近在学一些很新的东西，所以想把这些内容整理整理发出来，那么做成一个Document的形式是一种很有效而且很常见的形式；那么Sphinx这个框架首先就进入到了我的视线。主要，可以很轻松的创建文档，同时他可以在编译过程中输出多种格式，这样的效果是我们最为需要的，同时，其可以部署在Github Page上，相比较于Gitbook的简单的文档形式，Sphinx可以通过引用插件的形式进行更多的个性化操作。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;部署环境&lt;a href=&quot;#部署环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;本地环境：Mac OS 13.0.1&lt;/p&gt;&lt;p&gt;线上部署：Github Page + Sphinx&lt;/p&gt;&lt;p&gt;在Mac环境下，可以用Homebrew快速安装Sphinx&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# Homebrew&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;brew&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;install&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;sphinx-doc&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;#pip&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;pip&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;install&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;sphinx-doc&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;创建项目&lt;a href=&quot;#创建项目&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;sphinx-quickstart&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;#快速创建项目&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 1.设置项目的根目录&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Enter&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;root&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;path&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;documentation.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Root path &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; the documentation [.]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 2.是否分离build和source目录（一半选择n）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;You&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;have&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;two&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;options&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;placing&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;build&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directory&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Sphinx&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;output.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Either,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;you&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;use&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directory&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;_build&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;within&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;root&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;path,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;or&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;you&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;separate&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;source&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;and&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;build&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directories&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;within&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;root&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;path.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Separate source and build directories (&lt;/span&gt;&lt;span&gt;y/n&lt;/span&gt;&lt;span&gt;) [n]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 3.设置前缀（默认）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Inside&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;root&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directory,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;two&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;more&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directories&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;will&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;be&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;created&lt;/span&gt;&lt;span&gt;; &lt;/span&gt;&lt;span&gt;&quot;_templates&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; custom HTML templates and &lt;/span&gt;&lt;span&gt;&quot;_static&quot;&lt;/span&gt;&lt;span&gt; for custom stylesheets and other static&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;files.&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;You&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;can&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;enter&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;another&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;prefix&lt;/span&gt;&lt;span&gt; (such &lt;/span&gt;&lt;span&gt;as&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;.&quot;&lt;/span&gt;&lt;span&gt;) to replace the underscore.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Name prefix &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; templates and static dir [_]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 4.输入项目的名称和作者&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;The&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;project&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;name&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;will&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;occur&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;in&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;several&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;places&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;in&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;built&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;documentation.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Project name: Sphinx-test&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Author name(&lt;/span&gt;&lt;span&gt;s&lt;/span&gt;&lt;span&gt;): test&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 5. 输入项目的版本号&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Sphinx&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;has&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;notion&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;of&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;version&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;and&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;release&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;software.&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Each&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;version&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;can&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;have&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;multiple&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;releases.&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;For&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;example,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Python&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;version&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;is&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;something&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;like&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;2.5&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;or&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;3.0,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;while&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;release&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;is&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;something&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;like&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;2.5.1&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;or&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;3.0a1.&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;If&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;you&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;don&apos;t need this dual structure,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;just set both to the same value.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Project version []: 1.0.0&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Project release [1.0.0]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;33&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;34&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 6.文档语言&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;35&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;If the documents are to be written in a language other than English,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;36&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;you can select a language here by its language code. Sphinx will then&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;37&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;translate text that it generates into that language.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;38&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;39&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;For a list of supported codes, see&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;40&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;http://sphinx-doc.org/config.html#confval-language.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;41&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Project language [en]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;42&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;43&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 7. 设定文档的后缀&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;44&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;The file name suffix for source files. Commonly, this is either &quot;.txt&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;45&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;or &quot;.rst&quot;.  Only files with this suffix are considered documents.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;46&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Source file suffix [.rst]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;47&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;48&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 8.设定首页名称&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;49&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;One document is special in that it is considered the top node of the&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;50&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;contents tree&quot;, that is, it is the root of the hierarchical structure&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;51&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;of the documents. Normally, this is &quot;index&quot;, but if your &quot;index&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;52&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;document is a custom template, you can also set this to another filename.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;53&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Name of your master document (without suffix) [index]:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;54&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;55&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 9.创建项目&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;56&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A Makefile and a Windows command file can be generated for you so that you&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;57&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;only have to run e.g. `make html&apos;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;instead&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;of&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;invoking&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;sphinx-build&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;58&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;directly.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;59&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Create Makefile? (&lt;/span&gt;&lt;span&gt;y/n&lt;/span&gt;&lt;span&gt;) [y]: y&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;60&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Create Windows command file? (&lt;/span&gt;&lt;span&gt;y/n&lt;/span&gt;&lt;span&gt;) [y]: y&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;61&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;62&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Creating&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;./conf.py.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;63&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Creating&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;./index.rst,.md.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;64&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Creating&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;./Makefile.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;65&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Creating&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;./make.bat.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;66&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;67&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Finished:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;An&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;initial&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;directory&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;structure&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;has&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;been&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;created.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;68&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;69&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;You&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;should&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;now&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;populate&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;your&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;master&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;./index.rst,.md&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;and&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;create&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;other&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;documentation&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;70&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;source&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;files.&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Use&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Makefile&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;to&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;build&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;docs,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;like&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;so:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;71&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;make&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;builder&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;72&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;where&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;builder&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;is&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;one&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;of&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;the&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;supported&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;builders,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;e.g.&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;html,&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;latex&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;or&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;linkcheck.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;通过上面的步骤就可以在本地创建一个完整的Sphinx项目&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── Makefile&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── build&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── make.bat&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;└── source&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── _static&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── _templates&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;├── conf.py&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;└── index.rst&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;整个项目结构如上所，&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;build：用来存放makefile生成的网页文件的目录&lt;/li&gt;
&lt;li&gt;source：文档的源代码&lt;/li&gt;
&lt;li&gt;conf.py：Sphinx的配置文件&lt;/li&gt;
&lt;li&gt;index.rst：主文档&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;后续配置&lt;a href=&quot;#后续配置&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;OK，到这里的话你的Sphinx项目已经创建好了，那么如何去配置这个Sphinx的情况，可以参考文章末尾的几个比较新手的使用手册，我也在一点点的摸索，所以大家一起学习一起交流。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;部署到Github Page&lt;a href=&quot;#部署到github-page&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;部署到Github这个步骤对于经常使用Git的用户来说并不是很难，但是如何将一个编译好的静态文档同步上去主要面临以下几个问题：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;如何只将一些代码和重要文件上传到Github仓库中去&lt;/li&gt;
&lt;li&gt;在已经有一个Github Page的情况下如何去展示多个page页面&lt;/li&gt;
&lt;/ul&gt;&lt;section&gt;&lt;h3&gt;Step0 创建Github项目仓库&lt;a href=&quot;#step0-创建github项目仓库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这一步的话我不用多做介绍了吧&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Step1 设置同步省略文件&lt;a href=&quot;#step1-设置同步省略文件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;.gitignore&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;build/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这个设置之后，很明显编译后生成的build文件夹，并不会随着Git的同步而一起同步到远端，&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Step2 创建Github Action任务&lt;a href=&quot;#step2-创建github-action任务&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这一步的话，还是不大清楚工作的具体原理是什么，目前知识感觉就是自己编写好的makefile直接放到线上环境中去执行；但是不晓得GitHub在这么多用户数量的情况下为什么会有这样的操作，这一步骤如果不清楚的话最好还是老老实实的去复制别人的文件去粘贴到自己的项目路径下（因为，我就是这么干的）&lt;/p&gt;&lt;p&gt;&lt;strong&gt;这部分的话未来找个具体的时间，可以好好的讲一讲&lt;/strong&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;最后写个小插曲—关于如何在项目中使用Jupyter Notebook&lt;a href=&quot;#最后写个小插曲关于如何在项目中使用jupyter-notebook&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;这个问题是在写一些可能会用到Jupyter中的代码和可视化结果展示的时候，具体的实现效果的话如图所示&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;https://docs.readthedocs.io/en/stable/_images/example-notebook-rendered.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;在 conf.py文件中添加插件&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;extensions &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;nbsphinx&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;将你的文件存储到项目根目录下（可以单独再去创建一个新的文件存放这些代码）&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.. toctree::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;:maxdepth:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;:caption:&lt;/span&gt;&lt;span&gt; Contents:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;   &lt;/span&gt;&lt;/span&gt;&lt;span&gt;notebooks/Example 1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;参考文章&lt;a href=&quot;#参考文章&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;[1] &lt;a href=&quot;https://zhuanlan.zhihu.com/p/27544821&quot; target=&quot;_blank&quot;&gt;用Sphinx快速制作文档&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[2] &lt;a href=&quot;https://www.osgeo.cn/sphinx/usage/installation.html&quot; target=&quot;_blank&quot;&gt;Sphinx官方文档&lt;/a&gt;&lt;/p&gt;&lt;p&gt;[3] &lt;a href=&quot;https://zh-sphinx-doc.readthedocs.io/en/latest/index.html&quot; target=&quot;_blank&quot;&gt;Sphinx使用手册&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>系统生物学整理内容汇总</title><link>https://blog.lixiuxu.cn/posts/2023-01-20-%E7%B3%BB%E7%BB%9F%E7%94%9F%E7%89%A9%E5%AD%A6%E6%95%B4%E7%90%86%E5%86%85%E5%AE%B9%E6%B1%87%E6%80%BB/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2023-01-20-%E7%B3%BB%E7%BB%9F%E7%94%9F%E7%89%A9%E5%AD%A6%E6%95%B4%E7%90%86%E5%86%85%E5%AE%B9%E6%B1%87%E6%80%BB/</guid><description>从旧 Hexo 博客迁移：系统生物学整理内容汇总</description><pubDate>Fri, 20 Jan 2023 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;这个生物学这个东西，最近不知道为什么越学越迷离；有很多时候甚至不清楚自己做的是什么，主要的原因可能还是不是生物自家出身，有很多基础的生物学内容几乎就是空白。&lt;/p&gt;&lt;p&gt;还是希望能通过这样的方式，稍稍明白明白自己在干点什么&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;什么是系统生物学&lt;a href=&quot;#什么是系统生物学&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;&lt;strong&gt;系统生物学&lt;/strong&gt;（systems biology），是一个使用&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E6%95%B4%E5%85%A8%E8%A7%80&quot; target=&quot;_blank&quot;&gt;整体论&lt;/a&gt;（而非&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%BF%98%E5%8E%9F%E8%AE%BA&quot; target=&quot;_blank&quot;&gt;还原论&lt;/a&gt;）的方式， 整合不同学科、层次的信息，以研究、分析、理解（即&lt;a href=&quot;https://zh.wikipedia.org/w/index.php?title=%E5%A4%9A%E7%BB%84%E5%AD%A6&amp;amp;action=edit&amp;amp;redlink=1&quot; target=&quot;_blank&quot;&gt;多组学&lt;/a&gt;整合分析）&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%94%9F%E7%89%A9%E7%B3%BB%E7%B5%B1&quot; target=&quot;_blank&quot;&gt;生物系统&lt;/a&gt;如何行使功能的&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E5%AD%A6%E6%9C%AF&quot; target=&quot;_blank&quot;&gt;学术&lt;/a&gt;领域。系统生物学通过研究各个生物系统内部所有组成成分间，各分子层面上的相互关系和相互作用（例如，与&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%BB%86%E8%83%9E%E4%BF%A1%E5%8F%B7%E4%BC%A0%E9%80%81&quot; target=&quot;_blank&quot;&gt;细胞信号传送&lt;/a&gt;、&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E4%BB%A3%E8%AC%9D%E9%80%9A%E8%B7%AF&quot; target=&quot;_blank&quot;&gt;代谢通路&lt;/a&gt;[&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%B3%BB%E7%BB%9F%E7%94%9F%E7%89%A9%E5%AD%A6#cite_note-pmid21570668-1&quot; target=&quot;_blank&quot;&gt;1]&lt;/a&gt;、&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%BB%86%E8%83%9E%E5%99%A8&quot; target=&quot;_blank&quot;&gt;细胞器&lt;/a&gt;、&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%BB%86%E8%83%9E&quot; target=&quot;_blank&quot;&gt;细胞&lt;/a&gt;、&lt;a href=&quot;https://zh.wikipedia.org/w/index.php?title=%E7%94%9F%E7%90%86%E7%B3%BB%E7%BB%9F&amp;amp;action=edit&amp;amp;redlink=1&quot; target=&quot;_blank&quot;&gt;生理系统&lt;/a&gt;与&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%94%9F%E7%89%A9&quot; target=&quot;_blank&quot;&gt;生物&lt;/a&gt;等相关的&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%9B%A0&quot; target=&quot;_blank&quot;&gt;基因&lt;/a&gt;和&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%9B%8B%E7%99%BD&quot; target=&quot;_blank&quot;&gt;蛋白&lt;/a&gt;网络），期望最终能够建立整个系统的可理解模型，以及为有机体绘制完整图谱。系统生物学使用&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%A8%A1%E6%8B%9F&quot; target=&quot;_blank&quot;&gt;计算机模拟&lt;/a&gt;，数学分析的方法来构建复杂&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%94%9F%E7%89%A9%E7%B3%BB%E7%B5%B1&quot; target=&quot;_blank&quot;&gt;生物系统&lt;/a&gt;的模型。&lt;/p&gt;&lt;p&gt;系统生物学不同于以往只注意个别的基因和蛋白质的&lt;a href=&quot;https://zh.wikipedia.org/w/index.php?title=%E5%AE%9E%E9%AA%8C%E7%94%9F%E7%89%A9%E5%AD%A6&amp;amp;action=edit&amp;amp;redlink=1&quot; target=&quot;_blank&quot;&gt;实验生物学&lt;/a&gt;，研究所有的基因、所有的蛋白质和组分间的所有相互关系；其目标是：对复杂的生物系统构建计算的数学模型，从总体上预测生物系统的真实性。特别是从2000年开始，这个概念在各种环境下被广泛用于生物学。&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E4%BA%BA%E7%B1%BB%E5%9F%BA%E5%9B%A0%E7%BB%84%E8%AE%A1%E5%88%92&quot; target=&quot;_blank&quot;&gt;人类基因组计划&lt;/a&gt;是生物学中应用&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%B3%BB%E7%BB%9F%E7%A7%91%E5%AD%A6&quot; target=&quot;_blank&quot;&gt;系统思维&lt;/a&gt;的一个例子，它导致新的合作的方式来处理在遗传学生物学领域的问题。系统生物学的目标之一是模拟和发现&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E6%B6%8C%E7%8E%B0&quot; target=&quot;_blank&quot;&gt;涌现的特性&lt;/a&gt;，细胞的，组织的和生物体的特性，作为一个系统，其理论描述只能用系统生物学的技术进行[&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%B3%BB%E7%BB%9F%E7%94%9F%E7%89%A9%E5%AD%A6#cite_note-2&quot; target=&quot;_blank&quot;&gt;2]&lt;/a&gt;。这些通常涉及&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E4%BB%A3%E8%B0%A2%E7%BD%91%E7%BB%9C&quot; target=&quot;_blank&quot;&gt;代谢网络&lt;/a&gt;或&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%BB%86%E8%83%9E%E4%BF%A1%E5%8F%B7%E4%BC%A0%E9%80%81&quot; target=&quot;_blank&quot;&gt;细胞信号传送&lt;/a&gt;网络[&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%B3%BB%E7%BB%9F%E7%94%9F%E7%89%A9%E5%AD%A6#cite_note-pmid21570668-1&quot; target=&quot;_blank&quot;&gt;1]&lt;/a&gt;。&lt;/p&gt;&lt;p&gt;系统生物学开始于对基因和&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%9B%8B%E7%99%BD%E8%B4%A8&quot; target=&quot;_blank&quot;&gt;蛋白质&lt;/a&gt;的研究，该研究使用&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E9%AB%98%E9%80%9A%E9%87%8F%E5%9F%BA%E5%9B%A0%E5%85%8B%E9%9A%86%E6%8A%80%E6%9C%AF&quot; target=&quot;_blank&quot;&gt;高通量技术&lt;/a&gt;来测定某物种在给定条件干涉下&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%9B%A0%E7%BB%84&quot; target=&quot;_blank&quot;&gt;基因组&lt;/a&gt;和&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%9B%8B%E7%99%BD%E8%B4%A8%E7%BB%84&quot; target=&quot;_blank&quot;&gt;蛋白质组&lt;/a&gt;的变化。研究基因组的高通量技术包括用来测定&lt;a href=&quot;https://zh.wikipedia.org/wiki/MRNA&quot; target=&quot;_blank&quot;&gt;mRNA&lt;/a&gt;变化的&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E7%94%9F%E7%89%A9%E6%99%B6%E7%89%87&quot; target=&quot;_blank&quot;&gt;生物芯片&lt;/a&gt;技术。高通量&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%9B%8B%E7%99%BD%E8%B4%A8%E7%BB%84%E5%AD%A6&quot; target=&quot;_blank&quot;&gt;蛋白质组学&lt;/a&gt;方法包括&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E8%B4%A8%E8%B0%B1&quot; target=&quot;_blank&quot;&gt;质谱&lt;/a&gt;，该技术用于鉴定蛋白质，检测蛋白修饰和量化蛋白质表达水平。&lt;/p&gt;&lt;p&gt;上面这段是摘自Wiki&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;一些哲学思考&lt;a href=&quot;#一些哲学思考&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;ol&gt;
&lt;li&gt;系统生物学与合成(synthesis)的观点&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;系统生物学试图由合成的角度看生物学，合成的观点选择面对子系统不独立的可能性，而希望寻找新的方法来解决子系统间交互作用的问题。就像是研究任何一个科学问题一样，解决这问题的第一个步骤是有系统地收集这些交互作用的信息。在过去采用化约论的观点看问题时，在用一个新的观点诠释问题时，才会注意到过去那些被忽视的信息。佛来明发现抗生素时，并不是因为只有他观察到这现象，而是因为只有他重视这现象。因此能够灵活地由不同的尺度，不同的观点看问题时，才容易有新的发现。&lt;/p&gt;&lt;p&gt;传统生物学假设细胞是一个黑盒子，我们可以加入物质(例如养份或抑制剂)，或制作突变株来扰动这未知的系统，再做实验上的观察。系统生物学在设计实验时，所测量的数值或许与过去所差不多，可是使用巨量分析的技术收集大量数据，而解释数据的观点也不相同，甚至会引入许多生物学者不熟悉的分析方式。这种先收集大量数据，再做理论分析的研究方法是比较有效率的方式，可在同样的时间内由不同的专家“平行”地研究不同的路径。更重要的是这种研究方式，让我们有机会观察到许多路径间的交互作用，这是在针对单一路径做研究时不容易看见的信息，因此才有机会由合成的角度分析生物学。在发展遗传工程学时，曾经淘汰了一批不习惯用这样方式思考的人，也让学习这种思考方式的人有了飞快的进展。系统生物学的观点是否相当于过去遗传工程学对生物学的冲击，不同的人或许有不同的见解，可是可以确认的是它会发现一些过去忽视的现象，而且能与化约的观点互补。或许现在发展系统生物学的时机尚未成熟，可是我们是要创造时势，或是在未来追随时代的潮流，是我们应该思考的问题。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;生物信息学是过渡到未来生物学的重要工具&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;未来的生物学究竟是否会综合化约与合成的观点来建立生物学的理论架构虽然尚不明朗，可以确认的是生物信息学的工具将像遗传工程技术那样的深入到每个生物学实验室。这种新的工具是这两种观点都需要的工具，它不但能被动地节省做分析的人力，也能主动地引入“由信息驱动的生物医学研究”。这种新的研究方式强调由数据中做观察，比较，进而提出假设，再以实验方法做验证。这种利用“信息探采(data mining)”的研究模式，与传统实验生物学的搭配，将使我们能更有效率地发现新的现象，因此生物信息学将使我们能更早地进展到有理论架构的未来生物学。&lt;/p&gt;&lt;p&gt;综合而言，基因体分析等研究为我们累积了巨量的数据，而生物信息学可协助我们利用这些数据加速做新的观察之速率，因此有机会由整体的、合成的角度检视生物学，而建立所谓的系统生物学。未来的生物学很可能透过灵活地、交错地运用化约与合成两种观点，建立起生物学的理论架构，使传统生物学由描述性的科学，转型变成一种分析性的未来生物学。&lt;/p&gt;&lt;p&gt;系统理论和系统思想对于我国知识分子并不陌生。1980年在我国学术界曾经流行过“三论”——系统论、信息论和控制论，其中的“系统论”是指奥地利科学家贝塔朗菲（L. Bertalanffy）在1970年创立的“一般系统论”（general system theory）。尽管贝塔朗菲是以生物学家的身份去思考、研究并提出系统论的，但他的系统论并不仅仅适用于生命科学，而且适用于物理学、心理学、经济学和社会科学等各门学科。如果说过去所谈论的是指在哲学层面上的、普适性强的一般系统论，那么本文所要介绍的系统生物学（systems biology），则是生命科学研究领域的一门新兴学科。&lt;/p&gt;&lt;p&gt;作为人类基因组计划的发起人之一，美国科学家莱诺伊•胡德（Leroy Hood）也是系统生物学的创始人之一。在胡德看来，系统生物学和人类基因组计划有着密切的关系。正是在基因组学、蛋白质组学等新型大科学发展的基础上，孕育了系统生物学。反之，系统生物学的诞生进一步提升了后基因组时代的生命科学研究能力。正如胡德所说，“系统生物学将是21世纪医学和生物学的核心驱动力”[1]。基于这一信念，胡德在1999年年底辞去了美国西雅图市华盛顿大学的教职，与另外两名志同道合的科学家一起创立了世界上第一个系统生物学研究所（Institute for Systems Biology）。随后，系统生物学便逐渐得到了生物学家的认同，也唤起了一大批生物学研究领域以外的专家的关注。2002年3月，美国《科学》周刊登载了系统生物学专集。该专集导论中的第一句话这样写道：“如果对当前流行的、时髦的关键词进行一番分析，那么人们会发现，‘系统’高居在排行榜上。”&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;什么是系统生物学？&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;根据胡德的定义，系统生物学是研究一个生物系统中所有组成成分（基因、mRNA、蛋白质等）的构成，以及在特定条件下这些组分间的相互关系的学科。也就是说，系统生物学不同于以往的实验生物学——仅关心个别的基因和蛋白质，它要研究所有的基因、所有的蛋白质、组分间的所有相互关系。显然，系统生物学是以整体性研究为特征的一种大科学。&lt;/p&gt;&lt;p&gt;系统生物学的基本工作流程有这样四个阶段。首先是对选定的某一生物系统的所有组分进行了解和确定，描绘出该系统的结构，包括基因相互作用网络和代谢途径，以及细胞内和细胞间的作用机理，以此构造出一个初步的系统模型。第二步是系统地改变被研究对象的内部组成成分（如基因突变）或外部生长条件，然后观测在这些情况下系统组分或结构所发生的相应变化，包括基因表达、蛋白质表达和相互作用、代谢途径等的变化，并把得到的有关信息进行整合。第三步是把通过实验得到的数据与根据模型预测的情况进行比较，并对初始模型进行修订。第四阶段是根据修正后的模型的预测或假设，设定和实施新的改变系统状态的实验，重复第二步和第三步，不断地通过实验数据对模型进行修订和精练。系统生物学的目标就是要得到一个理想的模型，使其理论预测能够反映出生物系统的真实性。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;系统生物学的灵魂——整合&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;作为后基因组时代的新秀，系统生物学与基因组学、蛋白质组学等各种“组学”的不同之处在于，它是一种整合型大科学。首先，它要把系统内不同性质的构成要素（基因、mRNA、蛋白质、生物小分子等）整合在一起进行研究。系统生物学研究所的第一篇研究论文，就是整合酵母的基因组分析和蛋白质组分析，研究酵母的代谢网络。由于不同生物分子的研究难度不一样，技术发展程度不一样，目前对它们的研究水平有较大的差距。例如，基因组和基因表达方面的研究已经比较完善，而蛋白质研究就较为困难，至于涉及生物小分子的代谢组分的研究就更不成熟。因此，要真正实现这种整合还有很长的路要走。&lt;/p&gt;&lt;p&gt;对于多细胞生物而言，系统生物学要实现从基因到细胞、到组织、到个体的各个层次的整合。《科学》周刊系统生物学专集中一篇题为“心脏的模型化——从基因到细胞、到整个器官”的论文，很好地体现了这种整合性。我们知道，系统科学的核心思想是：“整体大于部分之和”；系统特性是不同组成部分、不同层次间相互作用而“涌现”的新性质；对组成部分或低层次的分析并不能真正地预测高层次的行为。如何通过研究和整合去发现和理解涌现的系统性质，是系统生物学面临的一个带根本性的挑战。&lt;/p&gt;&lt;p&gt;系统生物学整合性的第三层含义是指研究思路和方法的整合。经典的分子生物学研究是一种垂直型的研究，即采用多种手段研究个别的基因和蛋白质。首先是在DNA水平上寻找特定的基因，然后通过基因突变、基因剔除等手段研究基因的功能；在基因研究的基础上，研究蛋白质的空间结构，蛋白质的修饰以及蛋白质间的相互作用等等。基因组学、蛋白质组学和其他各种“组学”则是水平型研究，即以单一的手段同时研究成千上万基因或蛋白质。而系统生物学的特点，则是要把水平型研究和垂直型研究整合起来，成为一种“三维”的研究。此外，系统生物学还是典型的多学科交叉研究，它需要生命科学、信息科学、数学、计算机科学等各种学科的共同参与。&lt;/p&gt;&lt;p&gt;系统生物学的整合性可以体现在两种不同的策略上。第一种就是胡德和系统生物学研究所采用的方式，选定一个较为简单的系统，如单细胞生物酵母，然后分析尽可能多的构成成分——基因组、转录组、蛋白质组、相互作用组，以揭示整个系统的行为。另外一种策略是吉尔曼（A. G. Gilman）领导的“信号转导联军”采用的，以一个较为复杂的系统（G蛋白介导的和与其相关的细胞信号转导系统）为研究对象，采用尽可能多的研究手段去进行分析。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;系统生物学的基础——信息&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;在前分子生物学时代，生物学家把生命视为具有特殊“活力”的有机体，遵循着无机界不存在的法则进行生命活动。在分子生物学时代，研究者们把生命视为一架精密的机器，由基因和蛋白质根据物理、化学的规律来运转。在后基因组时代，像胡德这种类型的科学家，把生命视为信息的载体，一切特性都可以从信息的流动中得到实现。&lt;/p&gt;&lt;p&gt;胡德提出，应该把生物学视为一门信息科学。这个观点包含有三层意思。首先，生物学研究的核心——基因组，是数字化的（digital）。生物学与所有其他学科，如物理学、化学、地理学，是完全不一样的科学，因为生物学以外的学科都只能通过类比的方式（analog）进行分析。既然生物学研究的核心是数字化的，因此生物学可以被完全破译。从理论上说，我们对生物学的把握应该超过其他任何一门学科。其次，生命的数字化核心表现为两大类型的信息，第一类信息是指编码蛋白质的基因，第二类信息是指控制基因行为的调控网络。显然，由一段DNA序列组成的基因是数字化的。值得强调的是，基因调控网络的信息从本质上说也是数字化的，因为控制基因表达的转录因子结合位点也是核苷酸序列。生物学是信息科学的第三层意思是，生物信息是有等级次序的，而且沿着不同的层次流动。一般说来，生物信息以这样的方向进行流动：DNA→mRNA→蛋白质相互作用网络→细胞→器官→个体→群体。这里要注意的是，每个层次信息都对理解生命系统的运行提供有用的视角。因此，系统生物学的重要任务就是要尽可能地获得每个层次的信息并将它们进行整合。&lt;/p&gt;&lt;p&gt;根据系统论的观点，构成系统的关键不是其组成的物质，而是组成部分的相互作用或部分之间的关系。这些相互作用或者关系，从本质上说就是信息。换一个角度来说，生命是远离平衡态的开放系统，为了维持其有序性，生命系统必须不断地与外部环境交换能量，以抵消其熵增过程。奥地利物理学家薛定谔早在1940年发表的著作《生命是什么？》中就已指出，生命以“负熵流”为食，而“负熵”其实就是信息的另一种表示方法。因此，我们可以这样说，生命系统是一个信息流的过程，系统生物学就是要研究并揭示这种信息的运行规律。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;系统生物学的钥匙——干涉&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;系统生物学一方面要了解生物系统的结构组成，另一方面是要揭示系统的行为方式。相比之下，后一个任务更为重要。也就是说，系统生物学研究的并非一种静态的结构，而是要在人为控制的状态下，揭示出特定的生命系统在不同的条件下和不同的时间里具有什么样的动力学特征。&lt;/p&gt;&lt;p&gt;凡是实验科学都有这样一种特征：人为地设定某种或某些条件去作用于被实验的对象，从而达到实验的目的。这种对实验对象的人为影响就是干涉（perturbation）。传统生物学采用非干涉方法如形态观察或分类研究生物体。20世纪形成的分子生物学等实验生物学的特点就是，科学家可以在实验室内利用各种手段干涉生物学材料，如通过诱导基因突变或修饰蛋白质，由此研究其性质和功能。系统生物学同样也是一门实验性科学，也离不开干涉这一重要的工具。&lt;/p&gt;&lt;p&gt;系统生物学中的干涉有这样一些特点。首先，这些干涉应该是有系统性的。例如人为诱导基因突变，过去大多是随机的；而在进行系统生物学研究时，应该采用的是定向的突变技术。上面所提到的对酵母的系统生物学研究，胡德等人就是把已知的参与果糖代谢的9个基因逐一进行突变，研究在每一个基因突变下的系统变化。果蝇从受精开始到形成成熟个体一共有66个典型的发育阶段，不久前科学家利用基因芯片技术，对每一个发育阶段的基因表达谱进行了系统的研究。这也是一类系统性的干涉方式。其次，系统生物学需要高通量的干涉能力，如高通量的遗传变异。现有技术已经能做到在短时间内，把酵母的全部6000多个基因逐一进行突变。对于较为复杂的多细胞生物，可以通过RNA干涉新技术来实现大规模的基因定向突变。随着研究技术的发展，一定还会有许多新的干涉技术应用于系统生物学。&lt;/p&gt;&lt;p&gt;需要提请人们注意的是，以测定基因组全序列或全部蛋白质组成的基因组研究或蛋白质组研究等“规模型大科学”，并不属于经典的实验科学。这类工作中并不需要干涉，其目标只是把系统的全部元素测定清楚，以便得到一个含有所有信息的数据库。胡德把这种类型的研究称为“发现的科学”（discovery science），而把上述依赖于干涉的实验科学称为“假设驱动的科学”（hypothesis-driven science），因为选择干涉就是在做出假设。系统生物学不同于一般的实验生物学就在于，它既需要“发现的科学”，也需要“假设驱动的科学”。首先要选择一种条件（干涉），然后利用“发现的科学”的方法，对系统在该条件下的所有元素进行测定和分析；在此基础上做出新的假设，然后再利用“发现的科学”研究手段进行新研究。这两种不同研究策略和方法的互动和整合，是系统生物学成功的保证。&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;系统生物学的另一个特点——对理论的依赖和建立模型的需求。&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;系统生物学的理想就是要得到一个尽可能接近真正生物系统的理论模型；建模过程贯穿在系统生物学研究的每一个阶段。离开了数学和计算机科学，就不会有系统生物学。也许正是基于这一考虑，科学家把系统生物学分为“湿”的实验部分（实验室内的研究）和“干”的实验部分（计算机模拟和理论分析）。“湿”、“干”实验的完美整合才是真正的系统生物学。&lt;/p&gt;&lt;p&gt;从某种意义上说，系统生物学在中国有很好的基础。我们的传统医学就是把人体视为一个系统，通过测定和改变系统的输入和输出来调节系统的状态。传统科学的缺点在于，它只能进行“黑箱操作”，不能解释系统的内部组成成分和动力学过程。而系统生物学则把生物系统化为“白箱”，不仅要了解系统的结构和功能，而且还要揭示出系统内部各组成成分的相互作用和运行规律。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;相关的领域&lt;a href=&quot;#相关的领域&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;ul&gt;
&lt;li&gt;表型组学            Phenomics&lt;/li&gt;
&lt;li&gt;基因组学&lt;/li&gt;
&lt;li&gt;表观遗传学&lt;/li&gt;
&lt;li&gt;转录组&lt;/li&gt;
&lt;li&gt;蛋白质组学&lt;/li&gt;
&lt;li&gt;代谢物组学&lt;/li&gt;
&lt;li&gt;糖组学&lt;/li&gt;
&lt;li&gt;脂类组学            Lipidomics&lt;/li&gt;
&lt;li&gt;相互作用组学    Interactomics&lt;/li&gt;
&lt;li&gt;代谢组学            Fluxomics&lt;/li&gt;
&lt;li&gt;生物组学            Biomics&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;大大的疑问和困惑&lt;a href=&quot;#大大的疑问和困惑&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;ul&gt;
&lt;li&gt;多组学联合分析居然也算是系统生物学的范畴吗？（看来已经做了一段时间了）&lt;/li&gt;
&lt;li&gt;开发的那些不知道是什么东西的小玩意&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;</content:encoded></item><item><title>R获取芯片探针与基因关系</title><link>https://blog.lixiuxu.cn/posts/2022-08-15-r%E8%8E%B7%E5%8F%96%E8%8A%AF%E7%89%87%E6%8E%A2%E9%92%88%E4%B8%8E%E5%9F%BA%E5%9B%A0%E5%85%B3%E7%B3%BB/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2022-08-15-r%E8%8E%B7%E5%8F%96%E8%8A%AF%E7%89%87%E6%8E%A2%E9%92%88%E4%B8%8E%E5%9F%BA%E5%9B%A0%E5%85%B3%E7%B3%BB/</guid><description>从旧 Hexo 博客迁移：R获取芯片探针与基因关系</description><pubDate>Mon, 15 Aug 2022 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;将一些比较常见的芯片的包转换Gene_ID&lt;/p&gt;

&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;目前市面上现有的芯片种类有很多，其中常用的芯片并不多&lt;/p&gt;&lt;p&gt;一般在分析数据都需要把探针的ID转换成Gene_ID&lt;/p&gt;&lt;p&gt;目前主要在生信技能树中出现过的芯片数据包，主要是以下几种：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;GPL        Origanism         bioc_package&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;1			GPL32			Mus musculus	 		  mgu74a&lt;/p&gt;&lt;p&gt;2			GPL33			Mus musculus	 		  mgu74b&lt;/p&gt;&lt;p&gt;3 		  GPL34   		 Mus musculus          	  mgu74c&lt;/p&gt;&lt;p&gt;6   		GPL74    		Homo sapiens         	   hcg110&lt;/p&gt;&lt;p&gt;7  		 GPL75  		  Mus musculus        	   mu11ksuba&lt;/p&gt;&lt;p&gt;8 		  GPL76    		Mus musculus        	   mu11ksubb&lt;/p&gt;&lt;p&gt;9   		GPL77 		  Mus musculus        	   mu19ksuba&lt;/p&gt;&lt;p&gt;10  	  GPL78   		 Mus musculus      	     mu19ksubb&lt;/p&gt;&lt;p&gt;11  	  GPL79  		  Mus musculus      	     mu19ksubc&lt;/p&gt;&lt;p&gt;12  	  GPL80   		 Homo sapiens       	     hu6800&lt;/p&gt;&lt;p&gt;13    	GPL81   		 Mus musculus       	    mgu74av2&lt;/p&gt;&lt;p&gt;14 	   GPL82    		Mus musculus           	mgu74bv2&lt;/p&gt;&lt;p&gt;15  	  GPL83    		Mus musculus           	mgu74cv2&lt;/p&gt;&lt;p&gt;16  	  GPL85		 Rattus norvegicus        	    rgu34a&lt;/p&gt;&lt;p&gt;17  	  GPL86 		Rattus norvegicus        	    rgu34b&lt;/p&gt;&lt;p&gt;18  	  GPL87		 Rattus norvegicus        	    rgu34c&lt;/p&gt;&lt;p&gt;19  	  GPL88 		Rattus norvegicus        	     rnu34&lt;/p&gt;&lt;p&gt;20  	  GPL89		 Rattus norvegicus        	     rtu34&lt;/p&gt;&lt;p&gt;22  	  GPL91   		 Homo sapiens           	hgu95av2&lt;/p&gt;&lt;p&gt;23  	  GPL92  		  Homo sapiens           	 hgu95b&lt;/p&gt;&lt;p&gt;24  	  GPL93   		 Homo sapiens           	 hgu95c&lt;/p&gt;&lt;p&gt;25  	  GPL94  		  Homo sapiens           	 hgu95d&lt;/p&gt;&lt;p&gt;26  	  GPL95 		   Homo sapiens           	 hgu95e&lt;/p&gt;&lt;p&gt;27  	 GPL96  		   Homo sapiens           	 hgu133a&lt;/p&gt;&lt;p&gt;28 	  GPL97   		 Homo sapiens            	hgu133b&lt;/p&gt;&lt;p&gt;29  	 GPL98   		 Homo sapiens           	hu35ksuba&lt;/p&gt;&lt;p&gt;30  	 GPL99    		Homo sapiens           	hu35ksubb&lt;/p&gt;&lt;p&gt;31  	 GPL100   		 Homo sapiens         	  hu35ksubc&lt;/p&gt;&lt;p&gt;32  	 GPL101   		 Homo sapiens         	  hu35ksubd&lt;/p&gt;&lt;p&gt;36  	 GPL201    		Homo sapiens         	   hgfocus&lt;/p&gt;&lt;p&gt;37  	  GPL339    		Mus musculus        	    moe430a&lt;/p&gt;&lt;p&gt;38  	  GPL340    	  Mus musculus          	 mouse4302&lt;/p&gt;&lt;p&gt;39  	  GPL341		 Rattus norvegicus     	       rae230a&lt;/p&gt;&lt;p&gt;40 	   GPL342 		Rattus norvegicus            rae230b&lt;/p&gt;&lt;p&gt;41  	  GPL570   	 Homo sapiens          		hgu133plus2&lt;/p&gt;&lt;p&gt;42   	 GPL571   	 Homo sapiens           		hgu133a2&lt;/p&gt;&lt;p&gt;43    	GPL886    	Homo sapiens           		hgug4111a&lt;/p&gt;&lt;p&gt;44   	 GPL887    	Homo sapiens           	hgug4110b&lt;/p&gt;&lt;p&gt;45  	  GPL1261  	  Mus musculus        	  mouse430a2&lt;/p&gt;&lt;p&gt;49  	  GPL1352    	Homo sapiens        	    u133x3p&lt;/p&gt;&lt;p&gt;50   	  GPL1355 	Rattus norvegicus   	         rat2302&lt;/p&gt;&lt;p&gt;51  	  GPL1708   	 Homo sapiens       	    hgug4112a&lt;/p&gt;&lt;p&gt;54  	  GPL2891    	Homo sapiens       	     h20kcod&lt;/p&gt;&lt;p&gt;55 	  GPL2898 	Rattus norvegicus     	      adme16cod&lt;/p&gt;&lt;p&gt;60 	  GPL3921    	Homo sapiens        	   hthgu133a&lt;/p&gt;&lt;p&gt;63 	  GPL4191   	 Homo sapiens        	    h10kcod&lt;/p&gt;&lt;p&gt;64 	  GPL5689   	 Homo sapiens        	   hgug4100a&lt;/p&gt;&lt;p&gt;65 	  GPL6097  	  Homo sapiens        	illuminaHumanv1&lt;/p&gt;&lt;p&gt;66 	  GPL6102   	 Homo sapiens       	 illuminaHumanv2&lt;/p&gt;&lt;p&gt;67 	  GPL6244  	  Homo sapiens  	hugene10sttranscriptcluster&lt;/p&gt;&lt;p&gt;68 	  GPL6947  	  Homo sapiens  	      illuminaHumanv3&lt;/p&gt;&lt;p&gt;69	   GPL8300   	 Homo sapiens  	         hgu95av2&lt;/p&gt;&lt;p&gt;70	   GPL8490  	  Homo sapiens  	IlluminaHumanMethylation27k&lt;/p&gt;&lt;p&gt;71 	  GPL10558   	 Homo sapiens	        illuminaHumanv4&lt;/p&gt;&lt;p&gt;72 	  GPL11532    	Homo sapiens	  hugene11sttranscriptcluster&lt;/p&gt;&lt;p&gt;73	   GPL13497   	 Homo sapiens	     HsAgilentDesign026652&lt;/p&gt;&lt;p&gt;74 	  GPL13534   	 Homo sapiens	 IlluminaHumanMethylation450k&lt;/p&gt;&lt;p&gt;75	   GPL13667    	Homo sapiens	            hgu219&lt;/p&gt;&lt;p&gt;76 	  GPL15380 	   Homo sapiens	   GGHumanMethCancerPanelv1&lt;/p&gt;&lt;p&gt;77 	  GPL15396   	 Homo sapiens	           hthgu133b&lt;/p&gt;&lt;p&gt;78 	  GPL17897   	 Homo sapiens	           hthgu133a&lt;/p&gt;&lt;p&gt;​&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>【ML】2022年机器学习的状况</title><link>https://blog.lixiuxu.cn/posts/2022-08-10-ml2022%E5%B9%B4%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%9A%84%E7%8A%B6%E5%86%B5/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2022-08-10-ml2022%E5%B9%B4%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%9A%84%E7%8A%B6%E5%86%B5/</guid><description>从旧 Hexo 博客迁移：【ML】2022年机器学习的状况</description><pubDate>Wed, 10 Aug 2022 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;在机器学习领域中：无法解释某些模型有用的具体原因&lt;a href=&quot;#在机器学习领域中无法解释某些模型有用的具体原因&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://www.aidancooper.co.uk/content/images/size/w960/2021/12/utility-vs-understanding-17.png&quot; alt=&quot;Utility vs Understanding: the State of Machine Learning Entering 2022&quot; /&gt;&lt;figcaption&gt;Utility vs Understanding: the State of Machine Learning Entering 2022&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>现有GitHub成就系统</title><link>https://blog.lixiuxu.cn/posts/2022-08-02-%E7%8E%B0%E6%9C%89github%E6%88%90%E5%B0%B1%E7%B3%BB%E7%BB%9F/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2022-08-02-%E7%8E%B0%E6%9C%89github%E6%88%90%E5%B0%B1%E7%B3%BB%E7%BB%9F/</guid><description>从旧 Hexo 博客迁移：现有GitHub成就系统</description><pubDate>Tue, 02 Aug 2022 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Github Achievements 个人页面目前已知的成就&lt;a href=&quot;#github-achievements-个人页面目前已知的成就&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;那么对于一个成就收集爱好者来说，收集过GitHub最近新出的成就徽章会是个很有意思的事情&lt;/p&gt;
































































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Title&lt;/th&gt;&lt;th&gt;badge&lt;/th&gt;&lt;th&gt;Enable&lt;/th&gt;&lt;th&gt;Earned by?&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Pair Extraordinaire&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/pair-extraordinaire-default.png&quot; alt=&quot;pair-extraordinaire-default&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;完成多个作者的合并请求&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Quickdraw&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/quickdraw-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;在5分钟内关闭一个issue / pull request&lt;br /&gt;（自己的项目也算 ）&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Starstruck&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/starstruck-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;创建的一个仓库获得16颗stars&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Galaxy Brain&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/galaxy-brain-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;回答别人的 discussion 被接受2次&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Pull Shark&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/pull-shark-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;成功合并2次 pull requests&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;YOLO&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/yolo-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;不评审直接合并代码&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Arctic Code Vault Contributor&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/arctic-code-vault-contributor-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;td&gt;在2020年GitHub代码存储计划中提交代码&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Public Sponsor&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/public-sponsor-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;成为公众支持计划中的一员&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Mars 2020 Contributor&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;/Users/l_collection/GitHub/github-profile-achievements/images/mars-2020-contributor-default.png&quot; /&gt;&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;td&gt;在2020 Github 火星计划中提交代码&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;其中&lt;strong&gt;Pair Extraordinaire&lt;/strong&gt;、&lt;strong&gt;Starstruck&lt;/strong&gt;、&lt;strong&gt;Galaxy Brain&lt;/strong&gt;、&lt;strong&gt;Pull Shark&lt;/strong&gt;分别在以下数字中可以获得对应的金银铜三种材质奖牌&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;10、24、48&lt;/li&gt;
&lt;li&gt;128、512、4096&lt;/li&gt;
&lt;li&gt;8、16、32&lt;/li&gt;
&lt;li&gt;16、128、1024&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;</content:encoded></item><item><title>VSCode插件开发日记--1环境配置</title><link>https://blog.lixiuxu.cn/posts/2022-01-03-vscode%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%97%A5%E8%AE%B0-1%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2022-01-03-vscode%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%97%A5%E8%AE%B0-1%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/</guid><description>从旧 Hexo 博客迁移：VSCode插件开发日记--1环境配置</description><pubDate>Mon, 03 Jan 2022 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;​	在插件商店中找了很久，能听歌了，能写知乎了，甚至可以去交代码了。但是在kaggle的比赛中并没有相关的插件，所以开始着手写自己的第一个插件，去适应相关的数据竞赛的环境。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;前期准备&lt;a href=&quot;#前期准备&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;​	在VScode的文档页有对插件开发的相关介绍，需要自己的电脑已经安装了Node.js 和 Git&lt;/p&gt;&lt;p&gt;​	之后运行&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;npm install -g yo generator-code&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;yo code&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? What type of extension do you want to create? New Extension (JavaScript)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? What&apos;s the name of your extension? Kaggle-Tools&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? What&apos;s the identifier of your extension? kaggle-tools&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? What&apos;s the description of your extension?&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? Enable JavaScript type checking in &apos;jsconfig.json&apos;? No&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? Initialize a git repository? Yes&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;? Which package manager to use? npm&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;之后，进入到编辑器中 ，按F5，会在一个新的本地插件开发窗口打开&lt;/p&gt;&lt;p&gt;![image-20220103195211834](/Users/l_collection/Library/Application Support/typora-user-images/image-20220103195211834.png)&lt;/p&gt;&lt;p&gt;在运行窗口中 &lt;code&gt;cmd+shift+p&lt;/code&gt; 调出命令面板，输入Hello World 右下角弹出相应的信息反馈。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;后续开发&lt;a href=&quot;#后续开发&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;之后可以尝试改变右下角的消息弹出内容&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1. 改变showInformationMessage()中的内容在extension.js文件中（我是以JavaScript格式生成的）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1. 再次运行开发窗口，重复运行一边上述的操作，发现弹出信息发生变化&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Debug&lt;a href=&quot;#debug&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;VScode在插件开发的过程中可以进行断点调试&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;项目文件夹结构&lt;a href=&quot;#项目文件夹结构&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── .gitignore                  //配置不需要加入版本管理的文件&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── .vscode                     // VS Code的整合&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── launch.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── settings.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── tasks.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── .vscodeignore                //配置不需要加入最终发布到拓展中的文件&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── README.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── src                         // 源文件&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── extension.ts            // 如果我们使用js来开发拓展，则该文件的后缀为.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── test                        // test文件夹&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── extension.test.ts       // 如果我们使用js来开发拓展，则该文件的后缀为.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── index.ts                // 如果我们使用js来开发拓展，则该文件的后缀为.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── node_modules&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── vscode                  // vscode对typescript的语言支持。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── typescript              // TypeScript的编译器&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── out                         // 编译之后的输出文件夹(只有TypeScript需要，JS无需)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── src&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   |   ├── extension.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   |   └── extension.js.map&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── test&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│       ├── extension.test.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│       ├── extension.test.js.map&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│       ├── index.js&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│       └── index.js.map&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── package.json                // 该拓展的资源配置文件&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── tsconfig.json               //&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;├── typings                     // 类型定义文件夹&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   ├── node.d.ts               // 和Node.js关联的类型定义&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;│   └── vscode-typings.d.ts     // 和VS Code关联的类型定义&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;└── vsc-extension-quickstart.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;section&gt;&lt;h3&gt;package.json&lt;a href=&quot;#packagejson&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;   &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;name&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;sample&quot;&lt;/span&gt;&lt;span&gt;,              &lt;/span&gt;&lt;span&gt;//插件扩展名称（对应创建项目时候的输入）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;displayName&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;sample&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;description&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;blog sample&quot;&lt;/span&gt;&lt;span&gt;,  &lt;/span&gt;&lt;span&gt;//插件扩展的描述（对应创建项目时候的输入）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;version&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;0.0.1&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;publisher&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;caipeiyu&quot;&lt;/span&gt;&lt;span&gt;,       &lt;/span&gt;&lt;span&gt;//发布时候的一个名称（对应创建项目时候的输入）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;engines&quot;&lt;/span&gt;&lt;span&gt;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;vscode&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;^0.10.10&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;categories&quot;&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;Other&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;activationEvents&quot;&lt;/span&gt;&lt;span&gt;: [          &lt;/span&gt;&lt;span&gt;//这是我们要理解的地方，是触发插件执行一些代码的配置&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;onCommand:extension.sayHello&quot;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;//这种是通过输入命令来触发执行的&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;main&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;./out/src/extension&quot;&lt;/span&gt;&lt;span&gt;,  &lt;/span&gt;&lt;span&gt;//这个是配置TypeScript编译成js的输出目录&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;contributes&quot;&lt;/span&gt;&lt;span&gt;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;commands&quot;&lt;/span&gt;&lt;span&gt;: [{             &lt;/span&gt;&lt;span&gt;//title 和 command是一个对应关系的&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;command&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;extension.sayHello&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;//这个是对应上面那个命令触发的，在代码里面也要用到&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;title&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;Hello World&quot;&lt;/span&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;//这个是我们在vscode里面输入的命令&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span&gt;: {                     &lt;/span&gt;&lt;span&gt;//是在发布打包，或者其他运行时候，要执行的一些脚本命令&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;vscode:prepublish&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/compile&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;compile&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/compile -watch -p ./&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;postinstall&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/install&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;devDependencies&quot;&lt;/span&gt;&lt;span&gt;: {           &lt;/span&gt;&lt;span&gt;//这是开发的依赖包，如果有其他的依赖包，并要打包的话，需要把dev去掉&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;typescript&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;^1.8.5&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;&quot;vscode&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;^0.11.0&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;   &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;extension.ts&lt;a href=&quot;#extensionts&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&apos;use strict&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// The module &apos;vscode&apos; contains the VS Code extensibility API&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// Import the module and reference it with the alias vscode in your code below&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;as&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;vscode&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// this method is called when your extension is activated&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// your extension is activated the very first time the command is executed&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;activate&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;context&lt;/span&gt;&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;ExtensionContext&lt;/span&gt;&lt;span&gt;) {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// Use the console to output diagnostic information (console.log) and errors (console.error)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// This line of code will only be executed once when your extension is activated&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Congratulations, your extension &quot;sample&quot; is now active!&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// The command has been defined in the package.json file&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// Now provide the implementation of the command with  registerCommand&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// The commandId parameter must match the command field in package.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;let&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;disposable&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;commands&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;registerCommand&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;extension.sayHello&apos;&lt;/span&gt;&lt;span&gt;, () &lt;/span&gt;&lt;span&gt;=&amp;gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;//只看这个地方&apos;extension.sayHello&apos;和 package.json 里面的 &quot;onCommand:extension.sayHello&quot; 是一个对应关系&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;// The code you place here will be executed every time your command is executed&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;// Display a message box to the user&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;window&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;showInformationMessage&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Hello World!&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;context&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;subscriptions&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;disposable&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// this method is called when your extension is deactivated&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;deactivate&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;当我们需要多增加一个命令叫做Hello Sample的，需要在package.json的文件中添加相关配置&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;activationEvents&quot;&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;&quot;onCommand:extension.sayHello&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;&quot;onCommand:extension.saySample&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;contributes&quot;&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;&quot;commands&quot;&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; [{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;command&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;extension.sayHello&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;title&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;Hello World&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;command&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;extension.saySample&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;&quot;title&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;Hello Sample&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;添加完成配置后，在extension.ts文件中注册命令事件&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;let&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;disposable&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;commands&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;refisterCommand&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;extension.sayHello&apos;&lt;/span&gt;&lt;span&gt;, () &lt;/span&gt;&lt;span&gt;=&amp;gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;window&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;showInformationMessage&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;Hello World!&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;context&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;subscriptions&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;dispossable&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;let&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;saySample&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;commands&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;registerCommand&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;extension.saySample&apos;&lt;/span&gt;&lt;span&gt;,() &lt;/span&gt;&lt;span&gt;=&amp;gt;&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;vscode&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;windows&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;showInformationMessage&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;This is a new sample command!&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;context&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;subscriptions&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;saySample&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;打包与发布&lt;a href=&quot;#打包与发布&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在编写完成插件后，需要将它打包压缩之后才能发布到官网中。&lt;/p&gt;&lt;p&gt;&lt;code&gt;npm install -g vsce&lt;/code&gt; 一个打包工具&lt;/p&gt;&lt;p&gt;cd到项目的目录下&lt;/p&gt;&lt;p&gt;&lt;code&gt;vsce public&lt;/code&gt;&lt;/p&gt;&lt;p&gt;发布成功后可以在vscode中用 &lt;code&gt;ext install&lt;/code&gt;来安装这个插件。这种方法需要去配置一个token，还会过期等巴拉巴拉的问题&lt;/p&gt;&lt;section&gt;&lt;h3&gt;正确简便的发布方式&lt;a href=&quot;#正确简便的发布方式&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;vsce package&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Executing prepublish script &apos;node ./node_modules/vscode/bin/compile&apos;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Created: /sample/sample-0.0.1.vsix&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;执行完成后，在执行一个&lt;code&gt;script &apos;node ./node_moudles/vscode/bin/compile&apos;&lt;/code&gt;这个命令是在&lt;code&gt;package.json&lt;/code&gt;&lt;/p&gt;&lt;p&gt;然后再配置&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span&gt;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;vscode:prepublish&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/compile&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;compile&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/compile -watch -p ./&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;&quot;postinstall&quot;&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;node ./node_modules/vscode/bin/install&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;执行之后会生成一个sample-0.0.1.vsix，这个就是打包好的插件安装包，直接拖到vscode的窗口上，就会提示安装成功重启vscode，重启之后就能使用相关命令了，在插件的目录下也多了相应的sample的目录&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>生信--高通量测序分析</title><link>https://blog.lixiuxu.cn/posts/2021-12-25-%E7%94%9F%E4%BF%A1-%E9%AB%98%E9%80%9A%E9%87%8F%E6%B5%8B%E5%BA%8F%E5%88%86%E6%9E%90/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-12-25-%E7%94%9F%E4%BF%A1-%E9%AB%98%E9%80%9A%E9%87%8F%E6%B5%8B%E5%BA%8F%E5%88%86%E6%9E%90/</guid><description>从旧 Hexo 博客迁移：生信--高通量测序分析</description><pubDate>Sat, 25 Dec 2021 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;生物信息学分析应用&lt;/p&gt;

&lt;section&gt;&lt;h2&gt;高通量测序分析&lt;a href=&quot;#高通量测序分析&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;高通量测序，一次性对几百万到十亿条DNA分子进行并行测序，又称为下一代测序技术，其可以对一个物种的转录组和基因组进行深入、细致、全貌的分析，所以又被称为&lt;strong&gt;深度测序&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;主要包括：High-throughput Sequencing , Next Generation Sequencing , Deep Sequencing&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;高通量测序应用&lt;a href=&quot;#高通量测序应用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;DNA测序：全基因组de novo测序，基因组重测序，宏基因组测序，人类外显子组捕获测序&lt;/li&gt;
&lt;li&gt;RNA测序：转录组测序，microRNA测序，电子表达谱测序&lt;/li&gt;
&lt;li&gt;表观基因组研究：ChIP-Seq，DNA甲基化&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;基因组测序&lt;a href=&quot;#基因组测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;基因组测序是对一个物种的基因组DNA打断后进行高通量测序，根据是否有已知基因组数据主要分为de novo全基因组测序和基因组重测序，De novo基因组测序是对未知基因组序列的物种进行基因组从头测序，利用生物信息学分析手段对序列进行拼接、组装，从而获得该物种的基因组图谱。全基因组重测序是对一直基因组序列的物种进行不同个体的基因组测序，并在此基础上对个体或群体进行差异化分析&lt;/p&gt;&lt;section&gt;&lt;h3&gt;Paired-End方法&lt;a href=&quot;#paired-end方法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;基因组打断后，选择一定长度（200-500bp）的序列链接两端接头进行两头测序。Mate-end建库较为复杂，序列打断后，选取一定长度序列（3-5kb），需先连接生物素，再环化，再打断，生物素富集，连接两端接头进行两端测序。&lt;/p&gt;&lt;p&gt;​	基因组测序应用生物信息学分析其结果，主要涵盖以下几个方面：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- 数据产出处理：图像识别与Base Calling去除接头序列、检测与去除污染序列等&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- 基因组组装：原始数据统计、测序深度分析、组装结果统计等；&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- 基因组注释：Coding Gene注释、RNA分类注释、重复序列注释等；&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- 基因功能注释：GO功能分类、Interpro功能分类；&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- 比较基因组及分子进化分析：SNP/InDel/CNV检测等&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;宏基因组测序&lt;a href=&quot;#宏基因组测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;是对某一个特定环境，如肠道、土壤、海水等，其中所有微生物进行基因组测序。通过这种方法可以对该环境中的微生物种类和优势物种进行检测，解释微生物群落多样性、种群结构、进化关系、功能活性、相互协作关系及与环境之间的关系。自然环境中很多微生物无法分离培养，而这种方法并不需要对微生物进行分离培养。宏基因组测序方法有：全基因组的宏基因组测序和16S/18S rRNA宏基因组测序。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;全基因组的宏基因组测序&lt;a href=&quot;#全基因组的宏基因组测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;​	通过高通量测序技术，对环境样品的总DNA直接进行全基因组的宏基因组测序，能够实现微生物群落的物种分类研究、群落结构、系统进化、功能注释以及物种间的代谢网络研究，挖掘具有应用价值的基因资源，开发新的微生物活性物质。与传统的Sanger法相比，速度快，性价比高，周期短，单个样品的测序量接近饱和。&lt;/p&gt;&lt;p&gt;​	宏基因组测序信息分析主要包括：拼接组装、物种分类组成分析、基因预测和功能注释、生成Profilling table、主成分分析（PCA），筛选与样品分组显著的相关因子，多样品间比较分析等。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;16S/18S rRNA宏基因组测序&lt;a href=&quot;#16s18s-rrna宏基因组测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;​	是微生物群落分析和细菌进化研究以及分类研究最常用的靶分子，采用新一代的测序技术，对16S/18S rRNA的可变区进行测序分析，不需要进行克隆筛选，能全面的反映微生物群体的物种组成，真实的物种分布及丰度信息。&lt;/p&gt;&lt;p&gt;​	16S/18S rRNA测序信息分析主要包括：物种分类、物种丰度分析、OTU（Operational Taxonomic Units）分析，多样性分析，系统进化分析，多样品间的比较分析等。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;人类外显子组捕获测序&lt;a href=&quot;#人类外显子组捕获测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;​	指全部外显子区域的集合，该区域包括合成蛋白质所需要的重要信息，涵盖了与个体记表型相关的大部分功能性变异。与全基因组重测序相比，外显子组测序只需要对外显子区域的DNA，覆盖度更深，数据准确性更高，更加简便、经济、高效。&lt;/p&gt;&lt;p&gt;​	外显子捕获是指用外显子芯片杂交，把基因组外显子序列进行捕获，然后对所捕获的序列进行测序。现在常用外显子芯片有Roche NimbleGen Sequence Capture 2.1M Human Exome Array和Agilent SureSelect Target Enrichment System（Human Exome）。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;转录组测序&lt;a href=&quot;#转录组测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;转录组即特定细胞在某一功能状态下所能转录出来的所有RNA的总和，包括mRNA和非编码RNA(Non-coding RNA)。&lt;/p&gt;&lt;p&gt;第二代测序系统可精确检测单个碱基，并且不受到研究中先验信息的干扰，科研人员能够快速地获得某一物种特定器官或组织在某一状态下几乎所有mRNA转录本序列，从而能够开展：UTRs区域界定、可变剪切研究、低丰度新转录本发现、融合基因鉴定、cSNP（编码序列单核苷酸多态性）研究等。
无参考序列转录组分析内容包括：1 测序数据产量统计，数据成分和质量评估；2 Contig及Scaffold长度分布；3 Unigene的长度分布和功能注释，GO分类，Pathway分析，差异表达分析；4 蛋白功能预测与分类，差异表达基因GO富集和 Pathway富集分析。&lt;/p&gt;&lt;p&gt;有参考序列转录组分析内容包括：1 基本数据统计，比对参考序列；2 序列在基因组上在分布；3 测序深度分析、随机性评估和基因差异表达分析；4 新基因预测，基因可变剪接鉴定和基因融合鉴定等。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;电子表达谱测序&lt;a href=&quot;#电子表达谱测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;电子表达谱测序（Digital Gene Expression, DGE）又称为基因表达标签测序（mRNA tag profiling），又称Tag-SAGE。其原理是通过两种酶切作用对基因中一段长度为21nt的序列标签进行测序。由于其测序只针对表达的基因进行测序，产生的数据量相对较小，是研究基因表达谱的经济而快速的研究手段。是对特定处理条件下的全基因组基因表达谱进行分析，已被广泛用于功能基因组学和医学等研究领域。&lt;/p&gt;&lt;p&gt;电子表达谱分析内容包括：图像识别与原始碱基数据读取，去污染、去接头，标签序列计数统计，基因组比对与统计，基因序列比对获得所表达的基因列表，基因差异表达分析，聚类与表达类型分析，GO基因富集与分类分析，Pathway富集与分类分析，蛋白相互作用网络分析，反义链转录本与新转录本检测等。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;小RNA测序&lt;a href=&quot;#小rna测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;小RNA是指长度在21-31nt的内源性非蛋白质编码RNA，广泛存在于高等和低等生物体内，其对mRNA的转录及转录后水平等生命过程起到调节作用。现已知小RNA可归纳成三类：微RNA (miRNA)，小干扰RNA(siRNA)和与piwi相互作用的RNA(piRNA)。&lt;/p&gt;&lt;p&gt;miRNA长度为2124nt，产生于有典型茎环二级结构的原转录本(pri-miRNA)，在动植物的目标mRNA的降解与抑制方面发挥重要作用。siRNA，长度在1925nt，产生于长双链RNA，同样在动植物的目标mRNA的降解与抑制方面发挥重要作用。piRNA，长度26~31nt，由与其相互作用的Piwi蛋白定义，目前研究表明其在配子形成的过程中起作用。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;小RNA测序分析内容包括以下两个主要方面：&lt;a href=&quot;#小rna测序分析内容包括以下两个主要方面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;基本分析：原始数据读取，去接头、去污染序列，长度分布统计，基因组比对等。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;高级分析：Small RNA的分类注释，miRNA / siRNA / piRNA的鉴定，新miRNA预测，差异表达miRNA聚类分析等。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;ChIP-Seq&lt;a href=&quot;#chip-seq&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;​	ChIP-Chromatin Immunoprecipitation染色质免疫共沉淀，是指通过蛋白免疫相互作用，用抗体把和染色质相互作用的蛋白，如组蛋白、转录因子等，沉淀下来，从而所获取与其相结合的DNA序列。ChIP-Seq就是通过高通量测序对ChIP所得到的序列进行测序，从而进行蛋白和DNA相互作用相关研究。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;ChIP-Seq分析内容包括：&lt;a href=&quot;#chip-seq分析内容包括&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;ChIP Sequencing结果与参考基因组序列进行比对。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;ChIP Sequencing reads 在全基因组的分布：唯一比对reads 在repeats 区域的分布，唯一比对reads 在各基因功能元件上的分布，唯一比对reads 的全基因组覆盖深度。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;全基因组peak 扫描：peak 扫描，peak 长度分布统计，peak 的全基因组覆盖度，peak 在基因功能元件上的分布特征，&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Peak相关基因分析筛选与GO功能富集分析。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;多个样品的差异分析：基于peak 相关基因的差异分析，基于peak 的差异分析。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;DNA甲基化测序&lt;a href=&quot;#dna甲基化测序&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;​	DNA甲基化对机体发育和基因表达有很重要的调控作用，和各种癌症的发生和发展也有很大相关性，所以对基因组DNA甲基化进行研究是一直来的热门课题。通过高通量测序来研究DNA甲基化现在主要有两种方法，一种是MeDIP，是通过与DNA甲基化位点相结合的抗体，进行免疫共沉淀，然后对所得DNA序列进行测序。另一种是Bisulfite Sequencing，是通过Bisulfite处理基因组来区分甲基化位点。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;MeDIP-Seq分析内容包括：&lt;a href=&quot;#medip-seq分析内容包括&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;MeDIP-seq 序列与参考序列的比对。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;MeDIP-seq 序列数据在全基因组的分布趋势： MeDIP-seq 测序reads 在全基因组上每条染色体上的分布，MeDIP-seq 测序reads 在全基因组上的覆盖深度，MeDIP-Seq 测序reads 在CG、CHG和CHH位点上的覆盖深度，MeDIP-Seq 测序reads 在不同基因功能元件上的分布，MeDIP-Seq 测序reads 在不同OE含量区域中的分布。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;统计MeDIP-seq 序列富集区域（peak）的信息：Peak 扫描，Peak 长度数量及比例分布统计，单个样品Peak 的OE含量分布统计，寻找Peak 相关基因，统计Peak 在不同基因功能元件上的分布。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;基于Peak 的多样品间差异分析：分析两个样品间的Peak 相关差异基因，对两个样品间的差异基因进行GO功能富集分析及pathway 功能分析。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;Bisulfite Sequencing分析内容包括：&lt;a href=&quot;#bisulfite-sequencing分析内容包括&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Bisulfite-seq序列与参考序列的比对。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;深度和覆盖度分析：C碱基有效测序深度的累积分布，不同reads 测序深度下的基因组覆盖度。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;计算C碱基的甲基化水平。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;全基因组甲基化数据分布趋势分析：甲基化C碱基中CG, CHG 与CHH的分布比例（H=A、C or T），CG、CHG和CHH中的所有C的甲基化水平，各条染色体中CG、CHG和CHH中C的甲基化水平（该项分析目前只用于“人”），统计不同基因区域内CG、CHG和CHH中C的甲基化水平，不同基因元件区域中CG、CHG和CHH中C的甲基化水平，CHG，CHH中甲基化C附近的9bp序列的序列特征分析。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;全基因组DNA 甲基化图谱：染色体水平的甲基化C碱基的密度分布（该项分析目前只用于“人”），Scaffold的甲基化C碱基密度分布（该项分析针对物种：非人），不同基因组区域的甲基化分布特征，基因组不同转录元件中的DNA甲基化水平。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;差异甲基化区域（DMR）分析。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>生物信息学实践</title><link>https://blog.lixiuxu.cn/posts/2021-11-29-%E7%94%9F%E7%89%A9%E4%BF%A1%E6%81%AF%E5%AD%A6%E5%AE%9E%E8%B7%B5/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-11-29-%E7%94%9F%E7%89%A9%E4%BF%A1%E6%81%AF%E5%AD%A6%E5%AE%9E%E8%B7%B5/</guid><description>从旧 Hexo 博客迁移：生物信息学实践</description><pubDate>Mon, 29 Nov 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;总体上还是什么都没有的&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>数据结构（二）-- 初识数据结构</title><link>https://blog.lixiuxu.cn/posts/2021-09-18-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%BA%8C/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-09-18-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%BA%8C/</guid><description>从旧 Hexo 博客迁移：数据结构（二）-- 初识数据结构</description><pubDate>Sat, 18 Sep 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;数据结构基本概念&lt;a href=&quot;#数据结构基本概念&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;数据&lt;/strong&gt; 对于客观事物的符号表示，所有能输入到计算机中并被计算机程序处理的符号总称&lt;/p&gt;&lt;p&gt;&lt;strong&gt;数据元素&lt;/strong&gt; 数据的基本单位，在计算机程序中通常作为一个整体进行考虑和处理&lt;/p&gt;&lt;p&gt;&lt;strong&gt;数据对象&lt;/strong&gt; 性质相同的数据集合，是数据的一个子集&lt;/p&gt;&lt;p&gt;&lt;strong&gt;数据结构&lt;/strong&gt; 相互之间存在一种或多种特定关系的数据元素的集合&lt;/p&gt;&lt;p&gt;&lt;strong&gt;结构&lt;/strong&gt; 数据元素之间的关系&lt;/p&gt;&lt;p&gt;常见的数据结构：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;集合    所有元素同属于同一集合中&lt;/li&gt;
&lt;li&gt;线性结构    结构中的数据元素之间存在一个对一个的关系&lt;/li&gt;
&lt;li&gt;树形结构    结构中的数据元素之间存在一个对多个的关系&lt;/li&gt;
&lt;li&gt;图状结构/网状结构    结构中的数据元素之间存在多个对多个的关系&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;strong&gt;数据结构的形式定义&lt;/strong&gt; 一个二元组&lt;/p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;Data_Struct=(D,S)Data\_Struct=(D,S)&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;D&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;_&lt;/span&gt;&lt;span&gt;S&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;span&gt;r&lt;/span&gt;&lt;span&gt;u&lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;D&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;S&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;p&gt;D : 数据元素的有限集 			S ： D上关系的有限集&lt;/p&gt;&lt;p&gt;&lt;strong&gt;物理结构&lt;/strong&gt; 数据结构在计算机中的表示 （存储结构）&lt;/p&gt;&lt;p&gt;&lt;strong&gt;位（bit）&lt;/strong&gt; 信息的最小单位&lt;/p&gt;&lt;p&gt;&lt;strong&gt;元素（结点）&lt;/strong&gt; 若干位组合起来形成的一个位串表示数据元素&lt;/p&gt;&lt;p&gt;&lt;strong&gt;数据域&lt;/strong&gt; 数据元素由若干数据项组成，位串中对应于各个数据项的子位串&lt;/p&gt;&lt;p&gt;&lt;strong&gt;顺序映像 &amp;amp;&amp;amp; 非顺序映像&lt;/strong&gt; 数据元素之间的关系在计算机中有两种不同的表示方式&lt;/p&gt;&lt;p&gt;&lt;strong&gt;顺序存储结构 &amp;amp;&amp;amp; 链式存储结构&lt;/strong&gt;&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;顺序结构的特点： 借助元素在存储器中的相对位置来表示数据元素之间的逻辑关系&lt;/li&gt;
&lt;li&gt;非顺序结构的特点： 借助指示元素存储地址的指针（pointer）表示数据元素之间的逻辑关系&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;&lt;strong&gt;虚拟存储结构&lt;/strong&gt; 数据结构在C虚拟处理器中的表示&lt;/p&gt;&lt;p&gt;&lt;strong&gt;数据类型&lt;/strong&gt; 和数据结构密切相关的概念，用来刻画程序操作对象的特征&lt;/p&gt;&lt;p&gt;&lt;strong&gt;原子类型&lt;/strong&gt; 原子类型的值是不可分解的    例如： 基本类型、指针类型和空类型&lt;/p&gt;&lt;p&gt;&lt;strong&gt;结构类型&lt;/strong&gt; 数值是可以分解的，例如 结构体&lt;/p&gt;&lt;p&gt;&lt;strong&gt;抽象数据类型 Abstract Data Type&lt;/strong&gt; 是指一个数学模型以及定义在该模型上的一组操作&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;原子类型    属于原子类型的变量的值是不可分割的&lt;/li&gt;
&lt;li&gt;固定聚合类型    属于改类型的变量，数据&lt;/li&gt;
&lt;li&gt;可变聚合类型    构成可变聚合类型的“值”的成分数目不确定&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;</content:encoded></item><item><title>数据结构（一）-- 序章</title><link>https://blog.lixiuxu.cn/posts/2021-09-13-%E5%BA%8F%E7%AB%A0/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-09-13-%E5%BA%8F%E7%AB%A0/</guid><description>从旧 Hexo 博客迁移：数据结构（一）-- 序章</description><pubDate>Mon, 13 Sep 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;关于这门课程&lt;a href=&quot;#关于这门课程&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;数据结构作为计算机专业的基础专业课程，在学习中有着举足轻重的作用；而如果未来有考研的计划的话，这会是一个很重要的课程。&lt;/p&gt;&lt;section&gt;&lt;h2&gt;文章结构&lt;a href=&quot;#文章结构&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;未来我会跟着课程的进度，对对应章节进行归纳整理出相对应的文章，把握课程的中心思想并为期末复习做好充足准备。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Github入门教程</title><link>https://blog.lixiuxu.cn/posts/2021-03-09-github%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-03-09-github%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/</guid><description>从旧 Hexo 博客迁移：Github入门教程</description><pubDate>Tue, 09 Mar 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这又是我开的另一个大坑的内容，这部分主要是想要讲一下GitHub的基本使用方法、一些常用的指令以及一个我正在采用的同步的一个流程。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;关于GitHub&lt;a href=&quot;#关于github&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;GitHub是全球最大的同性交流网站，在上面你几乎能找到你想要的一切内容，而且越来越多人和组织加入到开源的大家庭中这是一件好事。我也是很早以前就接触到了开源的世界，大家在一起交流分享知识增进自己的代码水平，让自己不断的成长。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;进入社区前你要做好的准备&lt;a href=&quot;#进入社区前你要做好的准备&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;首先就是一个GitHub的账号，当然如今市面上有很多的开源社区都可以选择，技术和实现的过程几乎是一样的，这里我以我最常用的GitHub为例子来个大家讲解。账号可以在GitHub首页直接注册，目前来说裸连的话也是没有问题的。但是有些时候也会抽风，所以最好准备一个梯子以防不时之需。&lt;/p&gt;&lt;p&gt;注册完账号之后便是配置在本地环境，直接在终端中输入以下指令&lt;/p&gt;&lt;p&gt;&lt;code&gt;ssh-keygen -C &quot;email adress&quot; -t rsa&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这条指令会在你的用户路径下生成一个./ssh的文件夹，进入之后你会发现有两个文件，id_rsa这个文件是私钥（保存好），另一个id_rsa.pub这个是你的公钥。&lt;/p&gt;&lt;p&gt;之后进入GitHub的个人设置页面中&lt;code&gt;SSH and GPG keys&lt;/code&gt;选项中将你的公钥复制进去（是公钥里面的数据，记事本打开即可），完成之后点击add SSH key。&lt;/p&gt;&lt;p&gt;这样你的配置就完成了。&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;关于指令的用法&lt;a href=&quot;#关于指令的用法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在本地的环境配置好了以后&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.notion.so/d4a976e09955401fbf818fb9dc29a981&quot; target=&quot;_blank&quot;&gt;常用指令&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;创建新仓库&lt;a href=&quot;#创建新仓库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;创建新的文件夹，打开，执行&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;init&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;检出仓库&lt;a href=&quot;#检出仓库&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;执行语句将他人的仓库克隆到本地&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;clone&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;/path/to/repository&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果是远程服务器上的仓库&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;clone&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;username@host:/path/to/repository&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;工作流&lt;a href=&quot;#工作流&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本地的仓库被GitHub用三部分进行维护，并加以三颗“树”状结构进行维护。&lt;/p&gt;&lt;p&gt;工作目录   是你仓库中实际存储的内容&lt;/p&gt;&lt;p&gt;暂存区（Index）   在你改动工作目录后，将你的操作暂时存储在该区域&lt;/p&gt;&lt;p&gt;HEAD     他指向自己的最后一次操作&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;添加和提交&lt;a href=&quot;#添加和提交&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;可以提出更改（将他们添加到暂存区中）&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;filename&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;使用指令将实际的更改提交&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;commit&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-m&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;代码提交信息&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;之后你的改动就被提交到了HEAD，但是还没有推送到远程仓库&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;推送改动&lt;a href=&quot;#推送改动&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;执行语句，将你的改动从HEAD中推送到远端仓库&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;master&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;上方语句实例中，将HEAD提交到master分支中，也可提交到其他分支中。&lt;/p&gt;&lt;p&gt;如果没有克隆现有仓库，而且你还想将自己的仓库同步到某个服务器中&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;remote&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;server&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这样就可以将自己的仓库同步上去了&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;分支&lt;a href=&quot;#分支&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;在开发的时候是在默认的主支上进行的，你可以通过一定的指令操作同步到其他分支，最后开发结束之后合并在一起。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;feature_x&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;//创建一个feature_x的分支，并切换过去&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;mastr&lt;/span&gt;&lt;span&gt;         &lt;/span&gt;&lt;span&gt;//切换到主分支&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;branch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-d&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;feature_x&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;//将feature_x分支删除&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;push&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;branch&amp;gt;&lt;/span&gt;&lt;span&gt;   &lt;/span&gt;&lt;span&gt;//除非将分支推送到远程仓库，不然别人无法访问&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;更新合并&lt;a href=&quot;#更新合并&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;更新本地仓库至线上最新改动版本&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;pull&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;以用来在自己的工作目录中 &lt;em&gt;获取(fetch)&lt;/em&gt; 并 &lt;em&gt;合并(merge)  远端的改动&lt;/em&gt;&lt;/p&gt;&lt;p&gt;如果要合并其他分支到自己当前分支上时，执行&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;merge&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;branch&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;在这两种情况下，git都会尝试自动合并改动。有一定的几率会出现 冲突(conflicts) 。这时候需要自己去手动修改某些文件，使得修改完成之后，执行&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;add&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;filename&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;将修改的内容标记为合并成功&lt;/p&gt;&lt;p&gt;在合并之前，可以使用&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;diff&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;source_branch&amp;gt;&amp;lt;target_branch&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;来看一下修改前后文件的差别在哪里&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;标签&lt;a href=&quot;#标签&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;为软件发布创建标签是推荐的，在之前的软件开发过程中，这个理念就有所体现，在SVN中也有。&lt;/p&gt;&lt;p&gt;可以执行以下命令创建一个叫做1.0.0的标签&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;tag&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;1.0.0&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;1b2e1d63ff&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;后面的 1b2e1d63ff 是你想提交ID的前十位字符，可以使用 git log 获取提交ID&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;log&lt;a href=&quot;#log&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;如果想要了解一个本地仓库的历史记录，可以直接执行&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;同时也可以添加一些参数，来获取一些自己想要的特定消息，只看某一人的提交&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--author=bob&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;一个压缩后的每一条提交记录只占一行的输出：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--pretty=oneline&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;或者你想通过ASCII艺术的树形结构来展示所有的分支，每个分支都标示了他的名字和标签&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--graph&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--oneline&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--decorate&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--all&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;看看那些文件发生了变化&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--name-status&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;这些只是你可以使用的一小部分参数&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--help&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;替换本地改动&lt;a href=&quot;#替换本地改动&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;假如操作发生失误，可以使用如下的命令替换掉本地改动&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;checkout&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--&amp;lt;filename&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;此命令可以将HEAD中的最新内容替换掉你的工作目录中的文件。已经添加到暂存区的改动以及新文件都不会收到影响。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;fetch&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;origin&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;git&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;reset&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;--hard&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;oringin/master&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;假如你想丢弃你在本地的所有改动与提交，可以到服务器上获取最新的版本历史，并将你的本地主分支指向它&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>构建自己的学习环境</title><link>https://blog.lixiuxu.cn/posts/2021-02-13-%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%8E%AF%E5%A2%83/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-02-13-%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%8E%AF%E5%A2%83/</guid><description>从旧 Hexo 博客迁移：构建自己的学习环境</description><pubDate>Sat, 13 Feb 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;一直觉得自己的学习环境是十分混乱的，而且学习的目标也是杂乱的，不能很轻易的就看出自己的学习的需求，所以一套合理的学习分工是很有必要的，充分利用自己周未的资源同时也提高自己的学习效率。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;环境&lt;a href=&quot;#环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;我的主要的设备是两台笔记本（win+mac环境）加上一台ipad。平时上课和课后的笔记练习等等都是在ipad上完成的，这样大大方便了我的日常学习，在课堂上也可以很快的记录笔记，只是课后的整理并不是很有效率。同时两台电脑的环境可以很好的互相弥补之间的差距，这样的话就算是需要用到win环境的时候也有必要的准备。&lt;/p&gt;&lt;section&gt;&lt;h2&gt;如何更加充分的利用自己的ipad&lt;a href=&quot;#如何更加充分的利用自己的ipad&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;我很担心自己买回来ipad之后是“买前生产力，买后爱奇艺”的这种情况，但是事实并不是这样的，第一个学期下来，我还是坚持的挺好的，比较少的游戏时间和较较长的学习时间。&lt;/p&gt;&lt;p&gt;那么下学期，我想让我的学习更具有效率一点，所以我就要准备好一明确的分工，文献的整理可以在整理好后全平台查询。&lt;/p&gt;&lt;p&gt;一节课开始前我会准备提前先预习下一节课的内容，同时，上课时gn会很好的帮助我记录一节课的内容，其实就算是错过了也有len可以帮助我及时的把黑板的内容记录下来。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;暂时想到这么多，下学期开学之后会再更新的&lt;a href=&quot;#暂时想到这么多下学期开学之后会再更新的&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Mac环境下安装conda并配置环境</title><link>https://blog.lixiuxu.cn/posts/2021-02-09-mac%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85conda%E5%B9%B6%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-02-09-mac%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85conda%E5%B9%B6%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83/</guid><description>从旧 Hexo 博客迁移：Mac环境下安装conda并配置环境</description><pubDate>Tue, 09 Feb 2021 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;写在前面&lt;a href=&quot;#写在前面&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;从Linux环境到Windows环境再到如今Mac环境下，python的环境和一些常用环境的配置都挺让人头大的，正巧最近了解到conda环境可以很方便的配置一些常用的环境，以及一些python的包管理也很方便，所以这里我便简单的记录一下我的安装历程，把出现的一些问题罗列一下，希望能帮助到别人不踩相同的坑。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;安装Anacoda/Miniconda&lt;a href=&quot;#安装anacodaminiconda&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;下载安装&lt;a href=&quot;#下载安装&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;根据自己使用的环境的不同，可以在清华大学开源镜像站中找到合适的安装包，&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://mirrors.tuna.tsinghua.edu.cn/#&quot; target=&quot;_blank&quot;&gt;快速链接&lt;/a&gt; 在右侧获取下载链接 -----&amp;gt; 常用软件 ------&amp;gt; 选择anaconda/miniconda&lt;/p&gt;&lt;p&gt;两者的主要区别就是，anaconda包含了所有的所需要的内容，而miniconda是一个轻量级的替代，只包含了python和conda从而体积也小了很多。&lt;/p&gt;&lt;p&gt;下载之后在终端中，使用指令&lt;code&gt;bash xxxxx.sh&lt;/code&gt;进行安装，按回车后会出现大段的安装说明，直接顺着流程进行就可以顺利安装了&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;配置conda环境&lt;a href=&quot;#配置conda环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;安装完成之后，使用&lt;code&gt;vim ~/.condarc&lt;/code&gt;编辑这个文件，便可以修改里面的内容，根据清华大学开源镜像站中的帮助手册，你可以很快的配置完成这一步。&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;出现的情况&lt;a href=&quot;#出现的情况&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;每次打开终端自动进入conda的虚拟环境&lt;/p&gt;&lt;p&gt;解决方法：&lt;/p&gt;&lt;p&gt;​			在.condarc中配置	auto_activate_base  为   false就是关闭&lt;/p&gt;&lt;p&gt;​			如果需要打开 conda config —set auto_activate_base true&lt;/p&gt;&lt;p&gt;​			就可以重新打开&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;创建虚拟环境&lt;a href=&quot;#创建虚拟环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;使用指令 &lt;code&gt;conda create -n env_name&lt;/code&gt;可以创建一个名为env_name的环境&lt;/p&gt;&lt;p&gt;之后进入环境之后再运行 &lt;code&gt;conda install pkg_name&lt;/code&gt;安装你所需要的包&lt;/p&gt;&lt;section&gt;&lt;h2&gt;出现的问题&lt;a href=&quot;#出现的问题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Linking packages …&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;PaddingError: Placeholder of length ‘30’ too short in package qt-5.6.2-vc14_0.%&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;The package must be rebuilt with conda-build &amp;gt; 2.0.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;方案：&lt;/p&gt;&lt;p&gt;&lt;code&gt;conda update conda&lt;/code&gt; ,然后&lt;code&gt;conda update –all &lt;/code&gt;下，可以解决大部分问题&lt;/p&gt;&lt;p&gt;参考阅读：https:&lt;em&gt;//blog.csdn.net/xxzhangx/article/details/54379255?locationNum=3&amp;amp;fps=1&lt;/em&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;常用的指令&lt;a href=&quot;#常用的指令&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;退出虚拟环境&lt;a href=&quot;#退出虚拟环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;conda deactivate&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;查看所有虚拟环境&lt;a href=&quot;#查看所有虚拟环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;conda info -e&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;查看安装的包&lt;a href=&quot;#查看安装的包&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;conda list&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;删除虚拟环境&lt;a href=&quot;#删除虚拟环境&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;conda remove -n env_name --all&lt;/code&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>青蛙过河题解</title><link>https://blog.lixiuxu.cn/posts/2021-02-01-%E9%9D%92%E8%9B%99%E8%BF%87%E6%B2%B3%E9%A2%98%E8%A7%A3/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/2021-02-01-%E9%9D%92%E8%9B%99%E8%BF%87%E6%B2%B3%E9%A2%98%E8%A7%A3/</guid><description>从旧 Hexo 博客迁移：青蛙过河题解</description><pubDate>Mon, 01 Feb 2021 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;我会以图片的形式简单形容一下思路，能够更好的理解。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/Users/l_collection/blog/source/img/img001.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;可以很明显的推导出，整个递归的边界就是**tiao(0,y) = y+1 ** ，而左右两岸之间没多一根柱子的话就会使他的数量翻一倍，*&lt;em&gt;tiao(x,y) = tiao(x-1,y)&lt;em&gt;2&lt;/em&gt;&lt;/em&gt; 这个公式是推导出来的另一种形式。&lt;/p&gt;
&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;#include&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;lt;bits/stdc++.h&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;using&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;namespace&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;std&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;tiao&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;x&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/span&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;y&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;if&lt;/span&gt;&lt;span&gt;(x &lt;/span&gt;&lt;span&gt;==&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; y&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;else&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;span&gt;tiao&lt;/span&gt;&lt;span&gt;(x&lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;,y);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;main&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt; t;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;while&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;scanf&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;%d&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;t)&lt;/span&gt;&lt;span&gt;!=&lt;/span&gt;&lt;span&gt;EOF)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;        &lt;/span&gt;&lt;span&gt;for&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt; i&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;;i&lt;/span&gt;&lt;span&gt;&amp;lt;=&lt;/span&gt;&lt;span&gt;t;i&lt;/span&gt;&lt;span&gt;++&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;int&lt;/span&gt;&lt;span&gt; x,y;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;            &lt;/span&gt;&lt;span&gt;scanf&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;%d%d&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;x,&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;y);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;            &lt;/span&gt;&lt;/span&gt;&lt;span&gt;cout &lt;/span&gt;&lt;span&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;tiao&lt;/span&gt;&lt;span&gt;(x,y) &lt;/span&gt;&lt;span&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span&gt;endl;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;section&gt;&lt;h3&gt;反思&lt;a href=&quot;#反思&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这个题目整体还是以道很简单的递归的题目，同时也是看自己的数学上的推导能力，接下来还是要自己动手多推导，同时也要提高自己的代码实现能力，又很多的题目都是有想法的但是最后还是没有足够的代码基础进行实现。&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 代码块示例</title><link>https://blog.lixiuxu.cn/posts/code-examples/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/code-examples/</guid><description>在Firefly中使用表达性代码的代码块在 Markdown 中的外观。</description><pubDate>Sat, 03 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;在这里，我们将探索如何使用 &lt;a href=&quot;https://expressive-code.com/&quot; target=&quot;_blank&quot;&gt;Expressive Code&lt;/a&gt; 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;表达性代码&lt;a href=&quot;#表达性代码&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;语法高亮&lt;a href=&quot;#语法高亮&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/syntax-highlighting/&quot; target=&quot;_blank&quot;&gt;语法高亮&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h4&gt;常规语法高亮&lt;a href=&quot;#常规语法高亮&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;此代码有语法高亮!&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;渲染 ANSI 转义序列&lt;a href=&quot;#渲染-ansi-转义序列&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;ANSI colors:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- Regular: &lt;/span&gt;&lt;span&gt;Red&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Green&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Yellow&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Blue&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Magenta&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Cyan&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- Bold:    &lt;/span&gt;&lt;span&gt;Red&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Green&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Yellow&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Blue&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Magenta&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Cyan&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- Dimmed:  &lt;/span&gt;&lt;span&gt;Red&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Green&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Yellow&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Blue&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Magenta&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Cyan&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;256 colors (showing colors 160-177):&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;160 &lt;/span&gt;&lt;span&gt;161 &lt;/span&gt;&lt;span&gt;162 &lt;/span&gt;&lt;span&gt;163 &lt;/span&gt;&lt;span&gt;164 &lt;/span&gt;&lt;span&gt;165&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;166 &lt;/span&gt;&lt;span&gt;167 &lt;/span&gt;&lt;span&gt;168 &lt;/span&gt;&lt;span&gt;169 &lt;/span&gt;&lt;span&gt;170 &lt;/span&gt;&lt;span&gt;171&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;172 &lt;/span&gt;&lt;span&gt;173 &lt;/span&gt;&lt;span&gt;174 &lt;/span&gt;&lt;span&gt;175 &lt;/span&gt;&lt;span&gt;176 &lt;/span&gt;&lt;span&gt;177&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Full RGB colors:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;ForestGreen - RGB(34, 139, 34)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Text formatting: &lt;/span&gt;&lt;span&gt;Bold&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Dimmed&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Italic&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Underline&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;编辑器和终端框架&lt;a href=&quot;#编辑器和终端框架&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/frames/&quot; target=&quot;_blank&quot;&gt;编辑器和终端框架&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h4&gt;代码编辑器框架&lt;a href=&quot;#代码编辑器框架&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;my-test-file.js&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;标题属性示例&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/content/index.html&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;文件名注释示例&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;终端框架&lt;a href=&quot;#终端框架&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;echo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;此终端框架没有标题&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;PowerShell 终端示例&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Write-Output&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;这个有标题!&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;覆盖框架类型&lt;a href=&quot;#覆盖框架类型&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;echo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;看，没有框架!&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;PowerShell Profile.ps1&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# 如果不覆盖，这将是一个终端框架&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;Watch-Tail&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;Get-Content&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;Tail &lt;/span&gt;&lt;/span&gt;&lt;span&gt;20&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;Wait $args }&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;New-Alias&lt;/span&gt;&lt;span&gt; tail &lt;/span&gt;&lt;span&gt;Watch-Tail&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;文本和行标记&lt;a href=&quot;#文本和行标记&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/text-markers/&quot; target=&quot;_blank&quot;&gt;文本和行标记&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h4&gt;标记整行和行范围&lt;a href=&quot;#标记整行和行范围&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第1行 - 通过行号定位&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第2行&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第3行&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第4行 - 通过行号定位&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第5行&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第6行&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第7行 - 通过范围 &quot;7-8&quot; 定位&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 第8行 - 通过范围 &quot;7-8&quot; 定位&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;选择行标记类型 (mark, ins, del)&lt;a href=&quot;#选择行标记类型-mark-ins-del&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;line-markers.js&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;demo&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;此行标记为已删除&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 此行和下一行标记为已插入&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;这是第二个插入行&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;此行使用中性默认标记类型&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;为行标记添加标签&lt;a href=&quot;#为行标记添加标签&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;labeled-line-markers.jsx&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;button&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;role&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;button&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;...&lt;/span&gt;&lt;span&gt;props&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;className&lt;/span&gt;&lt;span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;buttonClassName&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;disabled&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;disabled&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;!&lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span&gt;typeof&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;===&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;string&apos;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;?&lt;/span&gt;&lt;span&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;button&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;在单独行上添加长标签&lt;a href=&quot;#在单独行上添加长标签&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;labeled-line-markers.jsx&lt;/span&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;button&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;role&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;button&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;...&lt;/span&gt;&lt;span&gt;props&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;className&lt;/span&gt;&lt;span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;buttonClassName&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;disabled&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;disabled&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;!&lt;/span&gt;&lt;span&gt;active&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span&gt;typeof&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;===&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;string&apos;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;?&lt;/span&gt;&lt;span&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;span&lt;/span&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;children&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;button&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;使用类似 diff 的语法&lt;a href=&quot;#使用类似-diff-的语法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;此行将标记为已插入&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;此行将标记为已删除&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;这是常规行&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;--- a/README.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+++ b/README.md&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;@@ -1,3 +1,4 @@&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+this is an actual diff file&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-all contents will remain unmodified&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;no whitespace will be removed either&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;结合语法高亮和类似 diff 的语法&lt;a href=&quot;#结合语法高亮和类似-diff-的语法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;thisIsJavaScript&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 整个块都会以 JavaScript 高亮显示，&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 并且我们仍然可以为其添加 diff 标记！&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;要删除的旧代码&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;新的闪亮代码！&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;标记行内的单独文本&lt;a href=&quot;#标记行内的单独文本&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;demo&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 标记行内的任何给定文本&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;支持给定文本的多个匹配项&apos;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;正则表达式&lt;a href=&quot;#正则表达式&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;单词 &lt;/span&gt;&lt;mark&gt;&lt;span&gt;yes&lt;/span&gt;&lt;/mark&gt;&lt;span&gt; 和 &lt;/span&gt;&lt;mark&gt;&lt;span&gt;yep&lt;/span&gt;&lt;/mark&gt;&lt;span&gt; 将被标记。&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;转义正斜杠&lt;a href=&quot;#转义正斜杠&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Terminal window&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;echo&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;Test&quot;&lt;/span&gt;&lt;span&gt; &amp;gt; &lt;/span&gt;&lt;mark&gt;&lt;span&gt;/home/&lt;/span&gt;&lt;/mark&gt;&lt;span&gt;test.txt&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;选择内联标记类型 (mark, ins, del)&lt;a href=&quot;#选择内联标记类型-mark-ins-del&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;demo&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;这些是插入和删除的标记类型&apos;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// return 语句使用默认标记类型&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;mark&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/mark&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;自动换行&lt;a href=&quot;#自动换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/word-wrap/&quot; target=&quot;_blank&quot;&gt;自动换行&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h4&gt;为每个块配置自动换行&lt;a href=&quot;#为每个块配置自动换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 启用换行的示例&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;getLongString&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// wrap=false 的示例&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;getLongString&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;配置换行的缩进&lt;a href=&quot;#配置换行的缩进&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// preserveIndent 示例（默认启用）&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;getLongString&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// preserveIndent=false 的示例&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;getLongString&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;可折叠部分&lt;a href=&quot;#可折叠部分&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/collapsible-sections/&quot; target=&quot;_blank&quot;&gt;可折叠部分&lt;/a&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;5 collapsed lines&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 所有这些样板设置代码将被折叠&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;someBoilerplateEngine&lt;/span&gt;&lt;span&gt; } &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;@example/some-boilerplate&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;import&lt;/span&gt;&lt;span&gt; { &lt;/span&gt;&lt;span&gt;evenMoreBoilerplate&lt;/span&gt;&lt;span&gt; } &lt;/span&gt;&lt;span&gt;from&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;@example/even-more-boilerplate&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;engine&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;someBoilerplateEngine&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;evenMoreBoilerplate&lt;/span&gt;&lt;span&gt;())&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 这部分代码默认可见&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;engine&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;doSomething&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;3&lt;/span&gt;&lt;span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;calcFn&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;calcFn&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 您可以有多个折叠部分&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;3 collapsed lines&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// 这将保持可见&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;`计算结果: &lt;/span&gt;&lt;span&gt;${&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;span&gt; + &lt;/span&gt;&lt;span&gt;${&lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;span&gt; = &lt;/span&gt;&lt;span&gt;${&lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;span&gt;`&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;4 collapsed lines&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 直到块末尾的所有代码将再次被折叠&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;engine&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;closeConnection&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;engine&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;freeMemory&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;engine&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;shutdown&lt;/span&gt;&lt;span&gt;({ &lt;/span&gt;&lt;span&gt;reason&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&apos;示例样板代码结束&apos;&lt;/span&gt;&lt;span&gt; })&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;行号&lt;a href=&quot;#行号&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/line-numbers/&quot; target=&quot;_blank&quot;&gt;行号&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;为每个块显示行号&lt;a href=&quot;#为每个块显示行号&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// 此代码块将显示行号&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;来自第2行的问候!&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;我在第3行&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;// 此块禁用行号&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;你好?&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;抱歉，你知道我在第几行吗?&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;更改起始行号&lt;a href=&quot;#更改起始行号&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;来自第5行的问候!&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;console&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&apos;我在第6行&apos;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 布局系统详解</title><link>https://blog.lixiuxu.cn/posts/firefly-layout-system/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/firefly-layout-system/</guid><description>深入了解 Firefly 的布局系统，包括侧边栏布局（左侧/双侧）和文章列表布局（列表/网格），以及自适应网格列数。</description><pubDate>Sat, 03 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;📖 概述&lt;a href=&quot;#-概述&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 提供了灵活的布局系统，允许您根据内容需求和个人喜好自定义博客的视觉呈现方式。布局系统主要包括&lt;strong&gt;侧边栏布局&lt;/strong&gt;和&lt;strong&gt;文章列表布局&lt;/strong&gt;两个维度，它们相互配合，共同决定了页面的整体结构。&lt;/p&gt;&lt;p&gt;本文将详细介绍 Firefly 的各种布局模式、它们的特点、使用场景，以及不同布局组合的效果。&lt;/p&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;img alt=&quot;左侧边栏+列表布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/left-list.CdJfuugk_23fiFf.webp&quot; srcset=&quot;/_astro/left-list.CdJfuugk_Z1mA0Ez.webp 640w, /_astro/left-list.CdJfuugk_Z10qgrr.webp 750w, /_astro/left-list.CdJfuugk_Z2cj349.webp 828w, /_astro/left-list.CdJfuugk_u3eLs.webp 1080w, /_astro/left-list.CdJfuugk_2fAX5y.webp 1280w, /_astro/left-list.CdJfuugk_2oEKUW.webp 1668w, /_astro/left-list.CdJfuugk_Z1KIWFC.webp 2048w, /_astro/left-list.CdJfuugk_23fiFf.webp 2192w&quot; /&gt;&lt;figcaption&gt;左侧边栏+列表布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;右侧边栏+网格布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/right-grid2.BDLeNFG9_Z1Ypd95.webp&quot; srcset=&quot;/_astro/right-grid2.BDLeNFG9_26ckzG.webp 640w, /_astro/right-grid2.BDLeNFG9_1tKDP4.webp 750w, /_astro/right-grid2.BDLeNFG9_Z1CTouC.webp 828w, /_astro/right-grid2.BDLeNFG9_27C8ym.webp 1080w, /_astro/right-grid2.BDLeNFG9_ZDs3VJ.webp 1280w, /_astro/right-grid2.BDLeNFG9_Z20DfDW.webp 1668w, /_astro/right-grid2.BDLeNFG9_ZiVVYz.webp 2048w, /_astro/right-grid2.BDLeNFG9_Z1Ypd95.webp 2192w&quot; /&gt;&lt;figcaption&gt;右侧边栏+网格布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;左侧边栏+三列网格布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/left-grid3.DCIbm9j3_Z5Vd5j.webp&quot; srcset=&quot;/_astro/left-grid3.DCIbm9j3_aED3D.webp 640w, /_astro/left-grid3.DCIbm9j3_ZKzKs3.webp 750w, /_astro/left-grid3.DCIbm9j3_ZqcTCb.webp 828w, /_astro/left-grid3.DCIbm9j3_gjdwz.webp 1080w, /_astro/left-grid3.DCIbm9j3_22TUla.webp 1280w, /_astro/left-grid3.DCIbm9j3_ZHnOlo.webp 1668w, /_astro/left-grid3.DCIbm9j3_ZIg0jq.webp 2048w, /_astro/left-grid3.DCIbm9j3_Z5Vd5j.webp 2192w&quot; /&gt;&lt;figcaption&gt;左侧边栏+三列网格布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;/div&gt;&lt;div&gt;&lt;figure&gt;&lt;img alt=&quot;双侧边栏+列表布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/both-list.CybtDZTU_xxVkb.webp&quot; srcset=&quot;/_astro/both-list.CybtDZTU_Z1JydKr.webp 640w, /_astro/both-list.CybtDZTU_Z1notxj.webp 750w, /_astro/both-list.CybtDZTU_2uTRDU.webp 828w, /_astro/both-list.CybtDZTU_Z10D7yB.webp 1080w, /_astro/both-list.CybtDZTU_JTAJu.webp 1280w, /_astro/both-list.CybtDZTU_SXozS.webp 1668w, /_astro/both-list.CybtDZTU_1NKNMf.webp 2048w, /_astro/both-list.CybtDZTU_xxVkb.webp 2192w&quot; /&gt;&lt;figcaption&gt;双侧边栏+列表布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;双侧边栏+网格布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/both-grid.B-BFe9Al_1g1tLj.webp&quot; srcset=&quot;/_astro/both-grid.B-BFe9Al_SVz9I.webp 640w, /_astro/both-grid.B-BFe9Al_1g6jmQ.webp 750w, /_astro/both-grid.B-BFe9Al_4dwK9.webp 828w, /_astro/both-grid.B-BFe9Al_Ziaz7t.webp 1080w, /_astro/both-grid.B-BFe9Al_1sn9bC.webp 1280w, /_astro/both-grid.B-BFe9Al_1BqW21.webp 1668w, /_astro/both-grid.B-BFe9Al_2wemen.webp 2048w, /_astro/both-grid.B-BFe9Al_1g1tLj.webp 2192w&quot; /&gt;&lt;figcaption&gt;双侧边栏+网格布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;双侧边栏+网格瀑布流布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/masonry.BgzRsBcp_2mfpqn.webp&quot; srcset=&quot;/_astro/masonry.BgzRsBcp_Q6h0.webp 640w, /_astro/masonry.BgzRsBcp_Z1iSuyb.webp 750w, /_astro/masonry.BgzRsBcp_2mj2SJ.webp 828w, /_astro/masonry.BgzRsBcp_19DifP.webp 1080w, /_astro/masonry.BgzRsBcp_ZGipcR.webp 1280w, /_astro/masonry.BgzRsBcp_1XuHi6.webp 1668w, /_astro/masonry.BgzRsBcp_ZwgGla.webp 2048w, /_astro/masonry.BgzRsBcp_2mfpqn.webp 2192w&quot; /&gt;&lt;figcaption&gt;双侧边栏+网格瀑布流布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;一、侧边栏布局系统&lt;a href=&quot;#一侧边栏布局系统&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;侧边栏是博客页面的重要组成部分，用于展示导航、分类、标签、统计信息等辅助内容。Firefly 支持两种侧边栏布局模式。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1.1 单侧边栏模式&lt;a href=&quot;#11-单侧边栏模式&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;左侧边栏 (position: “left”)&lt;a href=&quot;#左侧边栏-position-left&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;左侧边栏布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/left-list.CdJfuugk_23fiFf.webp&quot; srcset=&quot;/_astro/left-list.CdJfuugk_Z1mA0Ez.webp 640w, /_astro/left-list.CdJfuugk_Z10qgrr.webp 750w, /_astro/left-list.CdJfuugk_Z2cj349.webp 828w, /_astro/left-list.CdJfuugk_u3eLs.webp 1080w, /_astro/left-list.CdJfuugk_2fAX5y.webp 1280w, /_astro/left-list.CdJfuugk_2oEKUW.webp 1668w, /_astro/left-list.CdJfuugk_Z1KIWFC.webp 2048w, /_astro/left-list.CdJfuugk_23fiFf.webp 2192w&quot; /&gt;&lt;figcaption&gt;左侧边栏布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;右侧边栏 (position: “right”)&lt;a href=&quot;#右侧边栏-position-right&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;右侧边栏布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/right-grid2.BDLeNFG9_Z1Ypd95.webp&quot; srcset=&quot;/_astro/right-grid2.BDLeNFG9_26ckzG.webp 640w, /_astro/right-grid2.BDLeNFG9_1tKDP4.webp 750w, /_astro/right-grid2.BDLeNFG9_Z1CTouC.webp 828w, /_astro/right-grid2.BDLeNFG9_27C8ym.webp 1080w, /_astro/right-grid2.BDLeNFG9_ZDs3VJ.webp 1280w, /_astro/right-grid2.BDLeNFG9_Z20DfDW.webp 1668w, /_astro/right-grid2.BDLeNFG9_ZiVVYz.webp 2048w, /_astro/right-grid2.BDLeNFG9_Z1Ypd95.webp 2192w&quot; /&gt;&lt;figcaption&gt;右侧边栏布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;特点&lt;a href=&quot;#特点&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;侧边栏固定在页面其中一侧&lt;/li&gt;
&lt;li&gt;文章阅读区域体验更佳，更宽敞&lt;/li&gt;
&lt;li&gt;更加简约，没有那么紧凑&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;适用场景&lt;a href=&quot;#适用场景&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;传统博客风格&lt;/li&gt;
&lt;li&gt;强调导航和分类的博客&lt;/li&gt;
&lt;li&gt;需要突出用户资料的个人博客&lt;/li&gt;
&lt;li&gt;内容为主，辅助信息次之的场景&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;Tip&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;可以通过showBothSidebarsOnPostPage配置是否在文章详情页显示双侧边栏&lt;/p&gt;&lt;p&gt;当position为left或right时开启此项后，文章详情页将显示双侧边栏，主页等其他页面保持单侧边栏&lt;/p&gt;&lt;p&gt;适用在只想用单侧栏，但在文章详情页想用对侧栏的目录等组件的场景&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;配置示例&lt;a href=&quot;#配置示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/sidebarConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;sidebarLayoutConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SidebarLayoutConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;enable&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;position&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;left&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// 左侧边栏&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;showBothSidebarsOnPostPage&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// 是否在文章详情页显示双侧边栏&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;1.2 双侧边栏模式 (position: “both”)&lt;a href=&quot;#12-双侧边栏模式-position-both&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;特点&lt;a href=&quot;#特点-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;左右两侧同时存在侧边栏&lt;/li&gt;
&lt;li&gt;主内容区域位于中间&lt;/li&gt;
&lt;li&gt;最大化利用屏幕空间&lt;/li&gt;
&lt;li&gt;可以展示更多辅助信息&lt;/li&gt;
&lt;li&gt;适合宽屏显示器&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;布局结构&lt;a href=&quot;#布局结构&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;双侧边栏+列表布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/both-list.CybtDZTU_xxVkb.webp&quot; srcset=&quot;/_astro/both-list.CybtDZTU_Z1JydKr.webp 640w, /_astro/both-list.CybtDZTU_Z1notxj.webp 750w, /_astro/both-list.CybtDZTU_2uTRDU.webp 828w, /_astro/both-list.CybtDZTU_Z10D7yB.webp 1080w, /_astro/both-list.CybtDZTU_JTAJu.webp 1280w, /_astro/both-list.CybtDZTU_SXozS.webp 1668w, /_astro/both-list.CybtDZTU_1NKNMf.webp 2048w, /_astro/both-list.CybtDZTU_xxVkb.webp 2192w&quot; /&gt;&lt;figcaption&gt;双侧边栏+列表布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;双侧边栏+网格布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/both-grid.B-BFe9Al_1g1tLj.webp&quot; srcset=&quot;/_astro/both-grid.B-BFe9Al_SVz9I.webp 640w, /_astro/both-grid.B-BFe9Al_1g6jmQ.webp 750w, /_astro/both-grid.B-BFe9Al_4dwK9.webp 828w, /_astro/both-grid.B-BFe9Al_Ziaz7t.webp 1080w, /_astro/both-grid.B-BFe9Al_1sn9bC.webp 1280w, /_astro/both-grid.B-BFe9Al_1BqW21.webp 1668w, /_astro/both-grid.B-BFe9Al_2wemen.webp 2048w, /_astro/both-grid.B-BFe9Al_1g1tLj.webp 2192w&quot; /&gt;&lt;figcaption&gt;双侧边栏+网格布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;适用场景&lt;a href=&quot;#适用场景-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;宽屏桌面端浏览&lt;/li&gt;
&lt;li&gt;信息密集型博客&lt;/li&gt;
&lt;li&gt;需要展示大量辅助内容&lt;/li&gt;
&lt;li&gt;专业性强的技术博客&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;配置示例&lt;a href=&quot;#配置示例-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/sidebarConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;sidebarLayoutConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SidebarLayoutConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;enable&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;position&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;both&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// 双侧边栏&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;二、文章列表布局系统&lt;a href=&quot;#二文章列表布局系统&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;文章列表是博客首页和归档页的核心内容，Firefly 提供两种展示方式，并支持多种网格配置。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;2.1 列表模式 (defaultMode: “list”)&lt;a href=&quot;#21-列表模式-defaultmode-list&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;特点&lt;a href=&quot;#特点-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;单列纵向排列&lt;/li&gt;
&lt;li&gt;显示文章封面图&lt;/li&gt;
&lt;li&gt;展示更多文章摘要&lt;/li&gt;
&lt;li&gt;适合深度阅读&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;列表布局结构&lt;a href=&quot;#列表布局结构&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;列表模式布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/left-list.CdJfuugk_23fiFf.webp&quot; srcset=&quot;/_astro/left-list.CdJfuugk_Z1mA0Ez.webp 640w, /_astro/left-list.CdJfuugk_Z10qgrr.webp 750w, /_astro/left-list.CdJfuugk_Z2cj349.webp 828w, /_astro/left-list.CdJfuugk_u3eLs.webp 1080w, /_astro/left-list.CdJfuugk_2fAX5y.webp 1280w, /_astro/left-list.CdJfuugk_2oEKUW.webp 1668w, /_astro/left-list.CdJfuugk_Z1KIWFC.webp 2048w, /_astro/left-list.CdJfuugk_23fiFf.webp 2192w&quot; /&gt;&lt;figcaption&gt;列表模式布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;优点&lt;a href=&quot;#优点&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;✅ 视觉冲击力强，封面图吸引眼球&lt;/li&gt;
&lt;li&gt;✅ 可以展示更多文章信息（摘要、标签等）&lt;/li&gt;
&lt;li&gt;✅ 适合图片内容丰富的博客&lt;/li&gt;
&lt;li&gt;✅ 移动端友好，单列更易阅读&lt;/li&gt;
&lt;li&gt;✅ 兼容所有侧边栏配置（单侧、双侧）&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;配置示例&lt;a href=&quot;#配置示例-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/siteConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;siteConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SiteConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;postListLayout&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;defaultMode&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;list&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;// 列表模式&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;allowSwitch&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,   &lt;/span&gt;&lt;span&gt;// 允许用户切换&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2.2 网格模式 (defaultMode: “grid”)&lt;a href=&quot;#22-网格模式-defaultmode-grid&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;特点&lt;a href=&quot;#特点-3&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;自适应列数，根据浏览器宽度自动调整&lt;/li&gt;
&lt;li&gt;紧凑布局，信息密度高&lt;/li&gt;
&lt;li&gt;适合快速浏览&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;自适应网格&lt;a href=&quot;#自适应网格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;网格模式通过 &lt;code&gt;columnWidth&lt;/code&gt; 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;网格布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/left-grid3.DCIbm9j3_Z5Vd5j.webp&quot; srcset=&quot;/_astro/left-grid3.DCIbm9j3_aED3D.webp 640w, /_astro/left-grid3.DCIbm9j3_ZKzKs3.webp 750w, /_astro/left-grid3.DCIbm9j3_ZqcTCb.webp 828w, /_astro/left-grid3.DCIbm9j3_gjdwz.webp 1080w, /_astro/left-grid3.DCIbm9j3_22TUla.webp 1280w, /_astro/left-grid3.DCIbm9j3_ZHnOlo.webp 1668w, /_astro/left-grid3.DCIbm9j3_ZIg0jq.webp 2048w, /_astro/left-grid3.DCIbm9j3_Z5Vd5j.webp 2192w&quot; /&gt;&lt;figcaption&gt;网格布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;配置示例&lt;a href=&quot;#配置示例-3&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/siteConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;siteConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SiteConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;postListLayout&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;defaultMode&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;grid&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;allowSwitch&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;grid&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;masonry&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;true&lt;/span&gt;&lt;span&gt;,      &lt;/span&gt;&lt;span&gt;// 开启瀑布流&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;      &lt;/span&gt;&lt;span&gt;columnWidth&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;320&lt;/span&gt;&lt;span&gt;,   &lt;/span&gt;&lt;span&gt;// 卡片最小宽度(px)，浏览器自动计算列数&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2.3 瀑布流布局 (Masonry)&lt;a href=&quot;#23-瀑布流布局-masonry&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Firefly 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;瀑布流布局&quot; loading=&quot;lazy&quot; width=&quot;2192&quot; height=&quot;1233&quot; src=&quot;/_astro/masonry.BgzRsBcp_2mfpqn.webp&quot; srcset=&quot;/_astro/masonry.BgzRsBcp_Q6h0.webp 640w, /_astro/masonry.BgzRsBcp_Z1iSuyb.webp 750w, /_astro/masonry.BgzRsBcp_2mj2SJ.webp 828w, /_astro/masonry.BgzRsBcp_19DifP.webp 1080w, /_astro/masonry.BgzRsBcp_ZGipcR.webp 1280w, /_astro/masonry.BgzRsBcp_1XuHi6.webp 1668w, /_astro/masonry.BgzRsBcp_ZwgGla.webp 2048w, /_astro/masonry.BgzRsBcp_2mfpqn.webp 2192w&quot; /&gt;&lt;figcaption&gt;瀑布流布局&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&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;code&gt;columnWidth&lt;/code&gt; 和容器宽度动态计算列数，无需固定配置。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;配置灵活&lt;/strong&gt;：您可以在 &lt;code&gt;siteConfig.ts&lt;/code&gt; 中通过 &lt;code&gt;postListLayout.grid.masonry&lt;/code&gt; 选项自由开启或关闭此功能。&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;三、布局组合指南&lt;a href=&quot;#三布局组合指南&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 允许您自由组合侧边栏和文章列表布局。以下是各种组合的效果说明。&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;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;列表模式&lt;/td&gt;&lt;td&gt;⭐⭐⭐⭐⭐&lt;/td&gt;&lt;td&gt;摄影、设计、生活类博客，强调图片和沉浸感&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;单侧边栏&lt;/td&gt;&lt;td&gt;网格模式&lt;/td&gt;&lt;td&gt;⭐⭐⭐⭐⭐&lt;/td&gt;&lt;td&gt;技术、笔记类博客，平衡阅读与检索效率&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;双侧边栏&lt;/td&gt;&lt;td&gt;列表模式&lt;/td&gt;&lt;td&gt;⭐⭐⭐⭐⭐&lt;/td&gt;&lt;td&gt;需要展示大量侧边栏信息的站点&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;双侧边栏&lt;/td&gt;&lt;td&gt;网格模式&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;hr /&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;四、响应式布局行为&lt;a href=&quot;#四响应式布局行为&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 的布局系统具有智能的响应式设计，会根据屏幕尺寸自动调整。&lt;/p&gt;&lt;p&gt;为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：&lt;/p&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;网格列数自动减少&lt;/strong&gt;：网格模式的列数由 &lt;code&gt;columnWidth&lt;/code&gt; 和容器宽度自动决定，屏幕越窄列数越少。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;列表模式 -&amp;gt; 网格模式&lt;/strong&gt;：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;双侧边栏 -&amp;gt; 单侧边栏&lt;/strong&gt;：当屏幕宽度小于 1280px 时，会根据&lt;code&gt;tabletSidebar&lt;/code&gt;配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;五、常见问题&lt;a href=&quot;#五常见问题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;Q1: 如何调整网格列数？&lt;a href=&quot;#q1-如何调整网格列数&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;A&lt;/strong&gt;: 通过 &lt;code&gt;columnWidth&lt;/code&gt; 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;六、总结&lt;a href=&quot;#六总结&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 的布局系统给予了您更大的自由度，您都可以通过简单的配置实现。&lt;/p&gt;&lt;p&gt;我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;相关链接&lt;a href=&quot;#相关链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;📚 &lt;a href=&quot;https://docs-firefly.cuteleaf.cn/config/sidebarConfig-usage/&quot; target=&quot;_blank&quot;&gt;侧边栏配置文档&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;📚 &lt;a href=&quot;https://docs-firefly.cuteleaf.cn/config/siteConfig-usage/&quot; target=&quot;_blank&quot;&gt;站点配置文档&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;🏠 &lt;a href=&quot;https://docs-firefly.cuteleaf.cn/&quot; target=&quot;_blank&quot;&gt;Firefly 官方文档&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;⭐ &lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;Firefly GitHub&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;</content:encoded></item><item><title>Firefly 文章加密</title><link>https://blog.lixiuxu.cn/posts/encrypted-demo/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/encrypted-demo/</guid><description>这是一篇密码保护的示例文章，用于演示文章加密功能。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>本文已加密保护，请访问网站查看。</content:encoded></item><item><title>KaTeX 数学公式示例</title><link>https://blog.lixiuxu.cn/posts/katex-math-example/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/katex-math-example/</guid><description>展示 Firefly 主题对 KaTeX 数学公式的支持，包括行内公式、块级公式和复杂数学符号。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;本文展示了 &lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;Firefly&lt;/a&gt; 主题对 KaTeX 数学公式的渲染支持。&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;行内公式 (Inline)&lt;a href=&quot;#行内公式-inline&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;行内公式使用单个 &lt;code&gt;$&lt;/code&gt; 符号包裹。&lt;/p&gt;&lt;p&gt;例如：欧拉公式 &lt;span&gt;&lt;span&gt;eiπ+1=0e^{i\pi} + 1 = 0&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;e&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;iπ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; 是数学中最优美的公式之一。&lt;/p&gt;&lt;p&gt;质能方程 &lt;span&gt;&lt;span&gt;E=mc2E = mc^2&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;E&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;m&lt;/span&gt;&lt;span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; 也是家喻户晓。&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;块级公式 (Block)&lt;a href=&quot;#块级公式-block&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;块级公式使用两个 &lt;code&gt;$$&lt;/code&gt; 符号包裹，会居中显示。&lt;/p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∫&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;−&lt;/span&gt;&lt;span&gt;∞&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;∞&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;e&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;−&lt;/span&gt;&lt;span&gt;&lt;span&gt;x&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;d&lt;/span&gt;&lt;span&gt;x&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;π&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;x&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;−&lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;±&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;−&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;4&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;复杂示例&lt;a href=&quot;#复杂示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;矩阵 (Matrices)&lt;a href=&quot;#矩阵-matrices&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;(abcd)(αβγδ)=(aα+bγaβ+bδcα+dγcβ+dδ)\begin{pmatrix}
a &amp;amp; b \\
c &amp;amp; d
\end{pmatrix}
\begin{pmatrix}
\alpha &amp;amp; \beta \\
\gamma &amp;amp; \delta
\end{pmatrix} =
\begin{pmatrix}
a\alpha + b\gamma &amp;amp; a\beta + b\delta \\
c\alpha + d\gamma &amp;amp; c\beta + d\delta
\end{pmatrix}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;a&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;c&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;b&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;d&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;α&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;γ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;β&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;δ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;α&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;bγ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;α&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;d&lt;/span&gt;&lt;span&gt;γ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt;β&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt;δ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;β&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;d&lt;/span&gt;&lt;span&gt;δ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;极限与求和 (Limits and Sums)&lt;a href=&quot;#极限与求和-limits-and-sums&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;n&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∑&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;∞&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;n&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;6&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;π&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;x&lt;/span&gt;&lt;span&gt;→&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;lim&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;x&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;sin&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;x&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;麦克斯韦方程组 (Maxwell’s Equations)&lt;a href=&quot;#麦克斯韦方程组-maxwells-equations&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\begin{aligned}
\nabla \cdot \mathbf{E} &amp;amp;= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &amp;amp;= 0 \\
\nabla \times \mathbf{E} &amp;amp;= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &amp;amp;= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t}
\end{aligned}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∇&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;⋅&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;E&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∇&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;⋅&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;B&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∇&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;×&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;E&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∇&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;×&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;B&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;ε&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;ρ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;−&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∂&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∂&lt;/span&gt;&lt;span&gt;B&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;μ&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;J&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;μ&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;ε&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∂&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;∂&lt;/span&gt;&lt;span&gt;E&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;化学方程式 (Chemical Equations)&lt;a href=&quot;#化学方程式-chemical-equations&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;CHX4+2 OX2→COX2+2 HX2O\ce{CH4 + 2O2 -&amp;gt; CO2 + 2H2O}&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;CH&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;X&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;4&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;O&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;X&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;CO&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;X&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;H&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;X&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;O&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;更多符号&lt;a href=&quot;#更多符号&quot;&gt;&lt;span&gt;#&lt;/span&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;Alpha&lt;/td&gt;&lt;td&gt;&lt;code&gt;\alpha&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;α\alpha&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;α&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Beta&lt;/td&gt;&lt;td&gt;&lt;code&gt;\beta&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;β\beta&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;β&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Gamma&lt;/td&gt;&lt;td&gt;&lt;code&gt;\Gamma&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;Γ\Gamma&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Γ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Pi&lt;/td&gt;&lt;td&gt;&lt;code&gt;\pi&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;π\pi&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;π&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Infinity&lt;/td&gt;&lt;td&gt;&lt;code&gt;\infty&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;∞\infty&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;∞&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Right Arrow&lt;/td&gt;&lt;td&gt;&lt;code&gt;\rightarrow&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;→\rightarrow&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;→&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Partial&lt;/td&gt;&lt;td&gt;&lt;code&gt;\partial&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;span&gt;&lt;span&gt;∂\partial&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;∂&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;更多 KaTeX 语法请参考 &lt;a href=&quot;https://katex.org/docs/supported.html&quot; target=&quot;_blank&quot;&gt;KaTeX Supported Functions&lt;/a&gt;。&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>MDX 格式文章示例</title><link>https://blog.lixiuxu.cn/posts/mdx-example/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/mdx-example/</guid><description>这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。</description><pubDate>Fri, 02 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;Tip&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;Firefly&lt;/a&gt; 支持 &lt;code&gt;MDX&lt;/code&gt; 和 &lt;code&gt;Markdown&lt;/code&gt; 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
&lt;section&gt;&lt;h2&gt;Markdown 和 MDX 的区别&lt;a href=&quot;#markdown-和-mdx-的区别&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。&lt;/li&gt;
&lt;li&gt;MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。&lt;/li&gt;
&lt;/ul&gt;


































&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;特性&lt;/th&gt;&lt;th&gt;Markdown&lt;/th&gt;&lt;th&gt;MDX&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;基础语法&lt;/td&gt;&lt;td&gt;支持 (CommonMark)&lt;/td&gt;&lt;td&gt;支持 (CommonMark)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;HTML 标签&lt;/td&gt;&lt;td&gt;支持&lt;/td&gt;&lt;td&gt;支持 (作为 JSX)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;组件导入&lt;/td&gt;&lt;td&gt;不支持&lt;/td&gt;&lt;td&gt;支持 (import)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;动态数据&lt;/td&gt;&lt;td&gt;不支持&lt;/td&gt;&lt;td&gt;支持 (JS 表达式)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;样式定制&lt;/td&gt;&lt;td&gt;有限 (class/style)&lt;/td&gt;&lt;td&gt;灵活 (className/CSS-in-JS)&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;使用组件&lt;a href=&quot;#使用组件&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;这是一个图标组件：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;import { Icon } from &apos;astro-icon/components&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div class=&quot;flex items-center gap-2 my-4&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;Icon name=&quot;fa7-solid:rocket&quot; class=&quot;text-4xl text-red-500&quot; /&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;span&amp;gt;火箭发射！&amp;lt;/span&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;div&gt;     &lt;span&gt;火箭发射！&lt;/span&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;使用 JSX&lt;a href=&quot;#使用-jsx&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;你也可以直接写 HTML/JSX：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div className=&quot;p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。&lt;/p&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;简单的变量导出&lt;a href=&quot;#简单的变量导出&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export const year = new Date().getFullYear()&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;今年是 {year} 年。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;今年是 2026 年。&lt;/p&gt;&lt;p&gt;更多信息，请查看 &lt;a href=&quot;https://mdxjs.com/&quot; target=&quot;_blank&quot;&gt;MDX 文档&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown 扩展功能</title><link>https://blog.lixiuxu.cn/posts/markdown-extended/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/markdown-extended/</guid><description>了解 Firefly 中的 Markdown 功能</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h2&gt;GitHub 仓库卡片&lt;a href=&quot;#github-仓库卡片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。&lt;/p&gt;&lt;a href=&quot;https://github.com/CuteLeaf/Firefly&quot; target=&quot;_blank&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;CuteLeaf&lt;/div&gt;&lt;/div&gt;&lt;div&gt;/&lt;/div&gt;&lt;div&gt;Firefly&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;Waiting for api.github.com...&lt;/div&gt;&lt;div&gt;&lt;div&gt;00K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;div&gt;0K&lt;/div&gt;&lt;span&gt;Waiting...&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;&lt;p&gt;使用代码 &lt;code&gt;::github{repo=&quot;CuteLeaf/Firefly&quot;}&lt;/code&gt; 创建 GitHub 仓库卡片。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;::github{repo=&quot;CuteLeaf/Firefly&quot;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;提醒框(Admonitions)配置&lt;a href=&quot;#提醒框admonitions配置&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Firefly 采用了 &lt;a href=&quot;https://github.com/lin-stephanie/rehype-callouts&quot; target=&quot;_blank&quot;&gt;rehype-callouts&lt;/a&gt; 插件，支持了三种风格的提醒框主题：&lt;code&gt;GitHub&lt;/code&gt;、&lt;code&gt;Obsidian&lt;/code&gt; 和 &lt;code&gt;VitePress&lt;/code&gt;。您可以在 &lt;code&gt;src/config/siteConfig.ts&lt;/code&gt; 中进行配置：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;src/config/siteConfig.ts&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;export&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;siteConfig&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;SiteConfig&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;rehypeCallouts&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;// 选项: &quot;github&quot; | &quot;obsidian&quot; | &quot;vitepress&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;    &lt;/span&gt;&lt;span&gt;theme&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&quot;github&quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;  &lt;/span&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;注意：&lt;strong&gt;更改配置后需要重启开发服务器才能生效。&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。&lt;/p&gt;&lt;section&gt;&lt;h3&gt;1. GitHub 主题风格&lt;a href=&quot;#1-github-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;这是 GitHub 官方支持的 5 种基本类型。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;GitHub&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1086&quot; src=&quot;/_astro/github.urcbElKG_Z1bC9wS.webp&quot; srcset=&quot;/_astro/github.urcbElKG_pVFO3.webp 640w, /_astro/github.urcbElKG_Zogsaw.webp 750w, /_astro/github.urcbElKG_Z1vPnOl.webp 828w, /_astro/github.urcbElKG_ZdNO71.webp 1080w, /_astro/github.urcbElKG_2lIC61.webp 1280w, /_astro/github.urcbElKG_Z2wFGcQ.webp 1668w, /_astro/github.urcbElKG_22xd9l.webp 2048w, /_astro/github.urcbElKG_Z1bC9wS.webp 2144w&quot; /&gt;&lt;figcaption&gt;GitHub&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;基本语法&lt;/strong&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 突出显示用户应该考虑的信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 用户成功所必需的关键信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 关键内容，需要立即注意。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 行动的负面潜在后果。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 这是一个带有自定义标题的示例。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;2. Obsidian 主题风格&lt;a href=&quot;#2-obsidian-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://obsidian.md/&quot; target=&quot;_blank&quot;&gt;Obsidian&lt;/a&gt; 风格支持非常丰富的类型和别名。&lt;/p&gt;
点击展开 Obsidian 语法列表&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 通用的笔记块。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ABSTRACT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ABSTRACT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 文章的摘要。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!SUMMARY&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; SUMMARY&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 文章的总结（同 Abstract）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TLDR&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TLDR&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 太长不看（同 Abstract）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!INFO&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; INFO&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 提供额外信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TODO&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TODO&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 需要完成的事项。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 实用技巧或提示。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!HINT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; HINT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 暗示（同 Tip）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;24&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;25&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;26&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 重要信息（Obsidian 风格通常使用类似的图标）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;27&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;28&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!SUCCESS&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; SUCCESS&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;29&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 操作成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;30&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;31&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CHECK&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CHECK&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;32&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 检查通过（同 Success）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;33&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;34&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!DONE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; DONE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;35&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 已完成（同 Success）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;36&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;37&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!QUESTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; QUESTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;38&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 提出问题。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;39&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;40&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!HELP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; HELP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;41&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 寻求帮助（同 Question）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;42&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;43&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAQ&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAQ&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;44&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 常见问题（同 Question）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;45&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;46&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;47&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 警告信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;48&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;49&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;50&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 注意事项（同 Warning）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;51&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;52&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ATTENTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ATTENTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;53&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引起注意（同 Warning）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;54&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;55&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAILURE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAILURE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;56&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 操作失败。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;57&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;58&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!FAIL&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; FAIL&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;59&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 失败（同 Failure）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;60&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;61&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!MISSING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; MISSING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;62&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 缺失内容（同 Failure）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;63&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;64&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!DANGER&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; DANGER&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;65&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 危险操作警告。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;66&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;67&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!ERROR&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; ERROR&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;68&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 错误信息（同 Danger）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;69&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;70&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!BUG&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; BUG&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;71&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 报告软件缺陷。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;72&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;73&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!EXAMPLE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; EXAMPLE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;74&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 展示一个例子。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;75&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;76&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!QUOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; QUOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;77&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引用一段话。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;78&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;79&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CITE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CITE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;80&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 引证（同 Quote）。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;81&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;82&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;83&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 这是一个带有自定义标题的示例。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;Obsidian&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1320&quot; src=&quot;/_astro/obsidian.Cwb2iYzd_1I7Wom.webp&quot; srcset=&quot;/_astro/obsidian.Cwb2iYzd_Ef4jX.webp 640w, /_astro/obsidian.Cwb2iYzd_Z21Lznp.webp 750w, /_astro/obsidian.Cwb2iYzd_2fRye1.webp 828w, /_astro/obsidian.Cwb2iYzd_1T2EQt.webp 1080w, /_astro/obsidian.Cwb2iYzd_17K54.webp 1280w, /_astro/obsidian.Cwb2iYzd_14jgEg.webp 1668w, /_astro/obsidian.Cwb2iYzd_TyKGG.webp 2048w, /_astro/obsidian.Cwb2iYzd_1I7Wom.webp 2144w&quot; /&gt;&lt;figcaption&gt;Obsidian&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;3. VitePress 主题风格&lt;a href=&quot;#3-vitepress-主题风格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;https://vitepress.dev/&quot; target=&quot;_blank&quot;&gt;VitePress&lt;/a&gt; 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 &lt;strong&gt;5 种&lt;/strong&gt; 基础类型。&lt;/p&gt;
点击展开 VitePress 语法列表&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!NOTE&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; NOTE&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Note。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; TIP&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Tip。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!IMPORTANT&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; IMPORTANT&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Important。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!WARNING&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; WARNING&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Warning。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!CAUTION&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; CAUTION&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 对应 GitHub 的 Caution。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;!TIP&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt; 自定义标题&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; VitePress 风格同样支持自定义标题。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img alt=&quot;VitePress&quot; loading=&quot;lazy&quot; width=&quot;2144&quot; height=&quot;1318&quot; src=&quot;/_astro/vitepress.D2YnjBWE_Z1rUl1H.webp&quot; srcset=&quot;/_astro/vitepress.D2YnjBWE_a8rfo.webp 640w, /_astro/vitepress.D2YnjBWE_1dRCyH.webp 750w, /_astro/vitepress.D2YnjBWE_25m85l.webp 828w, /_astro/vitepress.D2YnjBWE_ZhpWJ1.webp 1080w, /_astro/vitepress.D2YnjBWE_j03hn.webp 1280w, /_astro/vitepress.D2YnjBWE_Z1AHxbA.webp 1668w, /_astro/vitepress.D2YnjBWE_ZkwCfV.webp 2048w, /_astro/vitepress.D2YnjBWE_Z1rUl1H.webp 2144w&quot; /&gt;&lt;figcaption&gt;VitePress&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;4. Docusaurus 风格语法&lt;a href=&quot;#4-docusaurus-风格语法&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;仅支持语法，风格保持跟上面三个主题相同。&lt;/p&gt;
点击展开 Docusaurus 语法列表 &lt;p&gt;支持以下类型的提醒框：&lt;code&gt;note&lt;/code&gt; &lt;code&gt;tip&lt;/code&gt; &lt;code&gt;important&lt;/code&gt; &lt;code&gt;warning&lt;/code&gt; &lt;code&gt;caution&lt;/code&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::note&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;突出显示用户应该考虑的信息，即使在快速浏览时也是如此。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::tip&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::important&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;用户成功所必需的关键信息。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::warning&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;14&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;由于潜在风险需要用户立即注意的关键内容。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;15&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;16&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;17&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::caution&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;18&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;行动的负面潜在后果。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;19&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;21&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::tip&lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;自定义标题&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;22&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;可选信息，帮助用户更成功。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;23&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;:::&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;显示更多&lt;/span&gt;&lt;span&gt;显示更少&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;剧透&lt;a href=&quot;#剧透&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以为文本添加剧透。文本也支持 &lt;strong&gt;Markdown&lt;/strong&gt; 语法。&lt;/p&gt;&lt;p&gt;内容 被隐藏了 &lt;strong&gt;哈哈&lt;/strong&gt;！&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;内容 :spoiler[被隐藏了 &lt;/span&gt;&lt;span&gt;**哈哈**&lt;/span&gt;&lt;span&gt;]！&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;图片画廊网格 (Image Grid)&lt;a href=&quot;#图片画廊网格-image-grid&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;您可以使用 &lt;code&gt;[grid]&lt;/code&gt; 和 &lt;code&gt;[/grid]&lt;/code&gt; 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;自动补齐图片高度：&lt;/strong&gt; 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;图注恒定底端对齐：&lt;/strong&gt; 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;img alt=&quot;示例图片一&quot; loading=&quot;lazy&quot; width=&quot;3328&quot; height=&quot;1872&quot; src=&quot;/_astro/firefly1.CZCuCN4V_1dgNYg.webp&quot; srcset=&quot;/_astro/firefly1.CZCuCN4V_Z1oImC9.webp 640w, /_astro/firefly1.CZCuCN4V_1i57aM.webp 750w, /_astro/firefly1.CZCuCN4V_3bOMV.webp 828w, /_astro/firefly1.CZCuCN4V_ZFy9e2.webp 1080w, /_astro/firefly1.CZCuCN4V_TW7id.webp 1280w, /_astro/firefly1.CZCuCN4V_GbVq.webp 1668w, /_astro/firefly1.CZCuCN4V_MiHUH.webp 2048w, /_astro/firefly1.CZCuCN4V_FJNnX.webp 2560w, /_astro/firefly1.CZCuCN4V_1dgNYg.webp 3328w&quot; /&gt;&lt;figcaption&gt;示例图片一&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;示例图片二&quot; loading=&quot;lazy&quot; width=&quot;4096&quot; height=&quot;2212&quot; src=&quot;/_astro/firefly2.dxmXG905_ZyJm5m.webp&quot; srcset=&quot;/_astro/firefly2.dxmXG905_VG1L6.webp 640w, /_astro/firefly2.dxmXG905_ZgGmKx.webp 750w, /_astro/firefly2.dxmXG905_Z2qDwK8.webp 828w, /_astro/firefly2.dxmXG905_Z1AO6EE.webp 1080w, /_astro/firefly2.dxmXG905_2m5ePB.webp 1280w, /_astro/firefly2.dxmXG905_mURyM.webp 1668w, /_astro/firefly2.dxmXG905_ZIlkOV.webp 2048w, /_astro/firefly2.dxmXG905_Z28Akm.webp 2560w, /_astro/firefly2.dxmXG905_ZyJm5m.webp 4096w&quot; /&gt;&lt;figcaption&gt;示例图片二&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure&gt;&lt;img alt=&quot;示例图片二&quot; loading=&quot;lazy&quot; width=&quot;3840&quot; height=&quot;2160&quot; src=&quot;/_astro/firefly3.CGzFXcxi_Z1Lz6q8.webp&quot; srcset=&quot;/_astro/firefly3.CGzFXcxi_ZmVxR3.webp 640w, /_astro/firefly3.CGzFXcxi_2jQUUS.webp 750w, /_astro/firefly3.CGzFXcxi_14XDy2.webp 828w, /_astro/firefly3.CGzFXcxi_Hxghp.webp 1080w, /_astro/firefly3.CGzFXcxi_2j3wNE.webp 1280w, /_astro/firefly3.CGzFXcxi_1oMBrR.webp 1668w, /_astro/firefly3.CGzFXcxi_2bp8r9.webp 2048w, /_astro/firefly3.CGzFXcxi_24QdTp.webp 2560w, /_astro/firefly3.CGzFXcxi_Z1Lz6q8.webp 3840w&quot; /&gt;&lt;figcaption&gt;示例图片二&lt;/figcaption&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;基本语法&lt;/strong&gt;&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;grid&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片一&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;./images/firefly1.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片二&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;./images/firefly2.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![&lt;/span&gt;&lt;span&gt;示例图片二&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;./images/firefly3.avif&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;/grid&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown Mermaid 图表</title><link>https://blog.lixiuxu.cn/posts/markdown-mermaid/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/markdown-mermaid/</guid><description>一个包含 Mermaid 的 Markdown 博客文章简单示例。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;section&gt;&lt;h1&gt;Markdown 中 Mermaid 图表完整指南&lt;a href=&quot;#markdown-中-mermaid-图表完整指南&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;p&gt;本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。&lt;/p&gt;&lt;section&gt;&lt;h2&gt;流程图示例&lt;a href=&quot;#流程图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;流程图非常适合表示流程或算法步骤。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;graph TD
    A[开始] --&amp;gt; B{条件检查}
    B --&amp;gt;|是| C[处理步骤 1]
    B --&amp;gt;|否| D[处理步骤 2]
    C --&amp;gt; E[子过程]
    D --&amp;gt; E
    subgraph E [子过程详情]
        E1[子步骤 1] --&amp;gt; E2[子步骤 2]
        E2 --&amp;gt; E3[子步骤 3]
    end
    E --&amp;gt; F{另一个决策}
    F --&amp;gt;|选项 1| G[结果 1]
    F --&amp;gt;|选项 2| H[结果 2]
    F --&amp;gt;|选项 3| I[结果 3]
    G --&amp;gt; J[结束]
    H --&amp;gt; J
    I --&amp;gt; J&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;时序图示例&lt;a href=&quot;#时序图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;时序图显示对象之间随时间的交互。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;sequenceDiagram
    participant User as 用户
    participant WebApp as 网页应用
    participant Server as 服务器
    participant Database as 数据库

    User-&amp;gt;&amp;gt;WebApp: 提交登录请求
    WebApp-&amp;gt;&amp;gt;Server: 发送认证请求
    Server-&amp;gt;&amp;gt;Database: 查询用户凭据
    Database--&amp;gt;&amp;gt;Server: 返回用户数据
    Server--&amp;gt;&amp;gt;WebApp: 返回认证结果
    
    alt 认证成功
        WebApp-&amp;gt;&amp;gt;User: 显示欢迎页面
        WebApp-&amp;gt;&amp;gt;Server: 请求用户数据
        Server-&amp;gt;&amp;gt;Database: 获取用户偏好
        Database--&amp;gt;&amp;gt;Server: 返回偏好设置
        Server--&amp;gt;&amp;gt;WebApp: 返回用户数据
        WebApp-&amp;gt;&amp;gt;User: 加载个性化界面
    else 认证失败
        WebApp-&amp;gt;&amp;gt;User: 显示错误消息
        WebApp-&amp;gt;&amp;gt;User: 提示重新输入
    end&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;甘特图示例&lt;a href=&quot;#甘特图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;甘特图非常适合显示项目进度和时间线。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;gantt
    title 网站开发项目时间线
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section 设计阶段
    需求分析      :a1, 2023-10-01, 7d
    UI设计                 :a2, after a1, 10d
    原型创建        :a3, after a2, 5d
    
    section 开发阶段
    前端开发      :b1, 2023-10-20, 15d
    后端开发       :b2, after a2, 18d
    数据库设计           :b3, after a1, 12d
    
    section 测试阶段
    单元测试              :c1, after b1, 8d
    集成测试       :c2, after b2, 10d
    用户验收测试   :c3, after c2, 7d
    
    section 部署
    生产环境部署     :d1, after c3, 3d
    发布                    :milestone, after d1, 0d&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;类图示例&lt;a href=&quot;#类图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;类图显示系统的静态结构，包括类、属性、方法及其关系。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User &quot;1&quot; -- &quot;*&quot; Article : 写作
    User &quot;1&quot; -- &quot;*&quot; Comment : 发表
    Article &quot;1&quot; -- &quot;*&quot; Comment : 拥有
    Article &quot;1&quot; -- &quot;*&quot; Category : 属于&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;状态图示例&lt;a href=&quot;#状态图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;状态图显示对象在其生命周期中经历的状态序列。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;stateDiagram-v2
    [*] --&amp;gt; 草稿
    
    草稿 --&amp;gt; 审核中 : 提交
    审核中 --&amp;gt; 草稿 : 拒绝
    审核中 --&amp;gt; 已批准 : 批准
    已批准 --&amp;gt; 已发布 : 发布
    已发布 --&amp;gt; 已归档 : 归档
    已发布 --&amp;gt; 草稿 : 撤回
    
    state 已发布 {
        [*] --&amp;gt; 活跃
        活跃 --&amp;gt; 隐藏 : 临时隐藏
        隐藏 --&amp;gt; 活跃 : 恢复
        活跃 --&amp;gt; [*]
        隐藏 --&amp;gt; [*]
    }
    
    已归档 --&amp;gt; [*]&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;饼图示例&lt;a href=&quot;#饼图示例&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;饼图非常适合显示比例和百分比数据。&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;pie title 网站流量来源分析
    &quot;搜索引擎&quot; : 45.6
    &quot;直接访问&quot; : 30.1
    &quot;社交媒体&quot; : 15.3
    &quot;推荐链接&quot; : 6.4
    &quot;其他来源&quot; : 2.6&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;总结&lt;a href=&quot;#总结&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。&lt;/p&gt;&lt;p&gt;要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。&lt;/p&gt;&lt;p&gt;尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>Markdown 教程</title><link>https://blog.lixiuxu.cn/posts/markdown-tutorial/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/markdown-tutorial/</guid><description>一个简明的 Markdown 博客示例。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#block-elements&quot;&gt;块级元素&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#paragraphs-and-line-breaks&quot;&gt;段落与换行&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#headers&quot;&gt;标题&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#blockquotes&quot;&gt;引用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#lists&quot;&gt;列表&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#code-blocks&quot;&gt;代码块&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#horizontal-rules&quot;&gt;分割线&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#table&quot;&gt;表格&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#span-elements&quot;&gt;内联元素&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#links&quot;&gt;链接&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#emphasis&quot;&gt;强调&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#code&quot;&gt;行内代码&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#images&quot;&gt;图片&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#strikethrough&quot;&gt;删除线&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#miscellaneous&quot;&gt;杂项&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#automatic-links&quot;&gt;自动链接&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#backslash-escapes&quot;&gt;反斜杠转义&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#inline-html&quot;&gt;内联 HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;
&lt;section&gt;&lt;h2&gt;块级元素&lt;a href=&quot;#块级元素&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;段落与换行&lt;a href=&quot;#段落与换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;section&gt;&lt;h4&gt;段落&lt;a href=&quot;#段落&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;使用一个或多个空行分隔段落。（仅包含&lt;strong&gt;空格&lt;/strong&gt;或&lt;strong&gt;制表符&lt;/strong&gt;的行也视为空行。）&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This will be&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;inline.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is second paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This will be
inline.&lt;/p&gt;&lt;p&gt;This is second paragraph.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;换行&lt;a href=&quot;#换行&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;br /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;在行末添加&lt;strong&gt;两个或更多空格&lt;/strong&gt;来产生换行。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This will be not&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;inline.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This will be not&lt;br /&gt;
inline.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;标题&lt;a href=&quot;#标题&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持两种标题样式：Setext 与 atx。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;Setext&lt;a href=&quot;#setext&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;使用&lt;strong&gt;等号 (=)&lt;/strong&gt; 表示 &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;、使用&lt;strong&gt;短横线 (-)&lt;/strong&gt; 表示 &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;，数量不限，作为“下划线”。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is an H1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;=============&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is an H2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-------------&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;hr /&gt;&lt;section&gt;&lt;h4&gt;atx&lt;a href=&quot;#atx&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h5&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;在行首使用 1-6 个&lt;strong&gt;井号 (#)&lt;/strong&gt;，对应 &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; 至 &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# This is an H1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;## This is an H2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;###### This is an H6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2-1&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h6&gt;This is an H6&lt;a href=&quot;#this-is-an-h6&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h6&gt;&lt;hr /&gt;&lt;p&gt;可选：你可以在行尾“闭合” atx 标题。末尾的井号数量&lt;strong&gt;不必与&lt;/strong&gt;开头一致。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;# This is an H1 #&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;## This is an H2 ##&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;### This is an H3 ######&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;
&lt;section&gt;&lt;h1&gt;This is an H1&lt;a href=&quot;#this-is-an-h1-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;section&gt;&lt;h2&gt;This is an H2&lt;a href=&quot;#this-is-an-h2-2&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;section&gt;&lt;h3&gt;This is an H3&lt;a href=&quot;#this-is-an-h3&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;引用&lt;a href=&quot;#引用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 使用邮件风格的 &lt;strong&gt;&amp;gt;&lt;/strong&gt; 作为引用符号。若手动换行并在每行前加 &amp;gt;，显示效果最佳。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; id sem consectetuer libero luctus adipiscing.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/p&gt;&lt;p&gt;Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 &amp;gt; 即可。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;id sem consectetuer libero luctus adipiscing.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.&lt;/p&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;p&gt;Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;引用可以嵌套（引用中的引用），通过增加 &amp;gt; 层级实现。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; This is the first level of quoting.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; &amp;gt; This is nested blockquote.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Back to the first level.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;p&gt;This is the first level of quoting.&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;This is nested blockquote.&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;Back to the first level.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;引用内可包含其他 Markdown 元素，包括标题、列表与代码块。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; ## This is a header.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 1.   This is the first list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; 2.   This is the second list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt; Here&apos;s some example code:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;gt;     return shell_exec(&quot;echo $input | $markdown_script&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;blockquote&gt;&lt;h2&gt;This is a header.&lt;a href=&quot;#this-is-a-header&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;This is the first list item.&lt;/li&gt;
&lt;li&gt;This is the second list item.&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;Here’s some example code:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;return shell_exec(&quot;echo $input | $markdown_script&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/blockquote&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;列表&lt;a href=&quot;#列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持有序（数字）与无序（圆点）列表。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;无序列表&lt;a href=&quot;#无序列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;无序列表可使用 &lt;strong&gt;星号 (*)&lt;/strong&gt;、&lt;strong&gt;加号 (+)&lt;/strong&gt; 或 &lt;strong&gt;短横线 (-)&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;Red&lt;/li&gt;
&lt;li&gt;Green&lt;/li&gt;
&lt;li&gt;Blue&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;p&gt;等价于：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;或者：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Red&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Green&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   Blue&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;有序列表&lt;a href=&quot;#有序列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;有序列表使用数字加英文句点：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1.  Bird&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;2.  McHale&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;3.  Parish&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ol&gt;
&lt;li&gt;Bird&lt;/li&gt;
&lt;li&gt;McHale&lt;/li&gt;
&lt;li&gt;Parish&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;p&gt;注意：像下面这样可能会“意外触发”有序列表：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1986. What a great season.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ol&gt;
&lt;li&gt;What a great season.&lt;/li&gt;
&lt;/ol&gt;&lt;hr /&gt;&lt;p&gt;你可以用&lt;strong&gt;反斜杠转义 (\)&lt;/strong&gt; 句点：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;1986\. What a great season.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;1986. What a great season.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;列表中的缩进内容&lt;a href=&quot;#列表中的缩进内容&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;section&gt;&lt;h5&gt;列表项里的引用&lt;a href=&quot;#列表项里的引用&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;在列表项内放置引用，需要将 &amp;gt; 符号整体缩进：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   A list item with a blockquote:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt; This is a blockquote&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt; inside a list item.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;A list item with a blockquote:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;This is a blockquote
inside a list item.&lt;/p&gt;&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h5&gt;列表项里的代码块&lt;a href=&quot;#列表项里的代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;在列表项内放置代码块，需要缩进两层——&lt;strong&gt;8 个空格&lt;/strong&gt;或&lt;strong&gt;两个 Tab&lt;/strong&gt;：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   A list item with a code block:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;code goes here&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;A list item with a code block:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;code goes here&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h5&gt;嵌套列表&lt;a href=&quot;#嵌套列表&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* A&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;* A1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;* A2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* C&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;ul&gt;
&lt;li&gt;A
&lt;ul&gt;
&lt;li&gt;A1&lt;/li&gt;
&lt;li&gt;A2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;B&lt;/li&gt;
&lt;li&gt;C&lt;/li&gt;
&lt;/ul&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;代码块&lt;a href=&quot;#代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;pre&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;将代码块中的每行缩进至少&lt;strong&gt;4 个空格&lt;/strong&gt;或&lt;strong&gt;1 个制表符&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a normal paragraph:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;This is a code block.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is a normal paragraph:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a code block.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;代码块会一直持续，直到遇到未缩进的行（或文末）。&lt;/p&gt;&lt;p&gt;在代码块内，&lt;strong&gt;与号 (&amp;amp;)&lt;/strong&gt; 和尖括号 &lt;strong&gt;(&amp;lt; &amp;gt;)&lt;/strong&gt; 会自动转为 HTML 实体。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&quot;footer&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;amp;copy; 2004 Foo Corporation&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div class=&quot;footer&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;amp;copy; 2004 Foo Corporation&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;围栏代码块&lt;a href=&quot;#围栏代码块&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;使用成对的反引号围起来（如下所示），就不需要四空格缩进了。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Here&apos;s an example:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function test() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console.log(&quot;notice the blank line before this function?&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Here’s an example:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;function test() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;console.log(&quot;notice the blank line before this function?&quot;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;语法高亮&lt;a href=&quot;#语法高亮&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```ruby&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;require &apos;redcarpet&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;markdown = Redcarpet.new(&quot;Hello World!&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;puts markdown.to_html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;```&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;require &lt;/span&gt;&lt;span&gt;&apos;redcarpet&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;markdown&lt;/span&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Redcarpet&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;new&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;Hello World!&quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;puts&lt;/span&gt;&lt;span&gt; markdown.&lt;/span&gt;&lt;span&gt;to_html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;分割线（水平线）&lt;a href=&quot;#分割线水平线&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;hr /&amp;gt;&lt;/code&gt;
一行中放置&lt;strong&gt;三个或以上的短横线 (-)、星号 (*) 或下划线 (_)&lt;/strong&gt;。符号之间允许有空格。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;* * *&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;***&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*****&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;- - -&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---------------------------------------&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;___&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;表格&lt;a href=&quot;#表格&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这是扩展语法。&lt;/p&gt;&lt;p&gt;用&lt;strong&gt;竖线 (|)&lt;/strong&gt; 分隔列，用&lt;strong&gt;短横线 (-)&lt;/strong&gt; 分隔表头，使用&lt;strong&gt;冒号 (:)&lt;/strong&gt; 指定对齐方式。&lt;/p&gt;&lt;p&gt;两侧的&lt;strong&gt;竖线 (|)&lt;/strong&gt; 与对齐可选。用于表头分隔时，每列至少需要 &lt;strong&gt;3 个短横线&lt;/strong&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;| Left | Center | Right |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|:-----|:------:|------:|&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|aaa   |bbb     |ccc    |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;|ddd   |eee     |fff    |&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;A | B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---|---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;123|456&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A |B&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;--|--&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;13&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;12|45&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;



















&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Left&lt;/th&gt;&lt;th&gt;Center&lt;/th&gt;&lt;th&gt;Right&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ddd&lt;/td&gt;&lt;td&gt;eee&lt;/td&gt;&lt;td&gt;fff&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;












&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;A&lt;/th&gt;&lt;th&gt;B&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;123&lt;/td&gt;&lt;td&gt;456&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;












&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;A&lt;/th&gt;&lt;th&gt;B&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;45&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;内联元素&lt;a href=&quot;#内联元素&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;链接&lt;a href=&quot;#链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 支持两种链接样式：行内链接与引用式链接。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;行内链接&lt;a href=&quot;#行内链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;行内链接格式：&lt;code&gt;[文本](URL &quot;标题&quot;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题可选。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is [an example](http://example.com/ &quot;Title&quot;) inline link.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[This link](http://example.net/) has no title attribute.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;an example&lt;/a&gt; inline link.&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;http://example.net/&quot; target=&quot;_blank&quot;&gt;This link&lt;/a&gt; has no title attribute.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;如果引用同一站点的本地资源，可以使用相对路径：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;See my [About](/about/) page for details.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;See my &lt;a href=&quot;/about/&quot;&gt;About&lt;/a&gt; page for details.&lt;/p&gt;&lt;hr /&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;引用式链接&lt;a href=&quot;#引用式链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;可以预定义链接引用。定义格式：&lt;code&gt;[id]: URL &quot;标题&quot;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题同样可选。引用时使用：&lt;code&gt;[文本][id]&lt;/code&gt;&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[id]: http://example.com/  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is [an example][id] reference-style link.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;an example&lt;/a&gt; reference-style link.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;说明：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;方括号中包含链接标识（&lt;strong&gt;不区分大小写&lt;/strong&gt;，可在左侧缩进最多三格空格）；&lt;/li&gt;
&lt;li&gt;随后是冒号；&lt;/li&gt;
&lt;li&gt;再跟一个或多个空格（或 tab）；&lt;/li&gt;
&lt;li&gt;然后是链接 URL；&lt;/li&gt;
&lt;li&gt;URL 可选地用尖括号包裹；&lt;/li&gt;
&lt;li&gt;可选地跟随标题属性，用引号或圆括号包裹。&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;以下三种定义等价：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  &apos;Optional Title Here&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: http://example.com/  (Optional Title Here)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[foo]: &amp;lt;http://example.com/&amp;gt;  &quot;Optional Title Here&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;如果使用空的方括号，则链接文本本身会作为名称。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[Google]: http://google.com/&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[Google][]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;http://google.com/&quot; target=&quot;_blank&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;强调&lt;a href=&quot;#强调&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;，&lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 使用 &lt;strong&gt;星号 (*)&lt;/strong&gt; 或 &lt;strong&gt;下划线 (_)&lt;/strong&gt; 表示强调。&lt;strong&gt;一个分隔符&lt;/strong&gt;对应 &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;；&lt;strong&gt;两个分隔符&lt;/strong&gt;对应 &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*single asterisks*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;_single underscores_&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;**double asterisks**&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;__double underscores__&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;em&gt;single asterisks&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;single underscores&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;double asterisks&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;double underscores&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;但如果两侧有空格，则会被视作普通字符而非强调语法。&lt;/p&gt;&lt;p&gt;你可以使用反斜杠进行转义：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\*this text is surrounded by literal asterisks\*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;*this text is surrounded by literal asterisks*&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;行内代码&lt;a href=&quot;#行内代码&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;用&lt;strong&gt;反引号 (`)&lt;/strong&gt; 包裹。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;Use the `printf()` function.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Use the &lt;code&gt;printf()&lt;/code&gt; function.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;若行内代码中需要包含反引号字符，可使用&lt;strong&gt;多重反引号&lt;/strong&gt;作为定界符：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;``There is a literal backtick (`) here.``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;code&gt;There is a literal backtick (`) here.&lt;/code&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A single backtick in a code span: `` ` ``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;A backtick-delimited string in a code span: `` `foo` ``&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;A single backtick in a code span: &lt;code&gt;`&lt;/code&gt;&lt;/p&gt;&lt;p&gt;A backtick-delimited string in a code span: &lt;code&gt;`foo`&lt;/code&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;图片&lt;a href=&quot;#图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;img /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Markdown 的图片语法与链接类似，支持行内与引用两种方式。&lt;/p&gt;&lt;section&gt;&lt;h4&gt;行内图片&lt;a href=&quot;#行内图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;行内图片语法：&lt;code&gt;![替代文本](URL &quot;标题&quot;)&lt;/code&gt;&lt;/p&gt;&lt;p&gt;标题可选。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text](/path/to/img.jpg)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text](/path/to/img.jpg &quot;Optional title&quot;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;Alt text&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;Alt text&quot; title=&quot;Optional title&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;说明：&lt;/p&gt;&lt;ul&gt;
&lt;li&gt;一个感叹号 !；&lt;/li&gt;
&lt;li&gt;后接方括号，放置图片的替代文本；&lt;/li&gt;
&lt;li&gt;再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。&lt;/li&gt;
&lt;/ul&gt;&lt;/section&gt;&lt;section&gt;&lt;h4&gt;引用式图片&lt;a href=&quot;#引用式图片&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;引用式图片语法：&lt;code&gt;![替代文本][id]&lt;/code&gt;&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  &quot;Optional title attribute&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;![Alt text][img id]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;/p&gt;&lt;figure&gt;&lt;img src=&quot;https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp&quot; alt=&quot;Alt text&quot; title=&quot;Optional title attribute&quot; /&gt;&lt;figcaption&gt;Alt text&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;删除线&lt;a href=&quot;#删除线&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;HTML 标签：&lt;code&gt;&amp;lt;del&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;p&gt;这是扩展语法。&lt;/p&gt;&lt;p&gt;GFM 增加了删除线语法。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;~~Mistaken text.~~&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;Mistaken text.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;杂项&lt;a href=&quot;#杂项&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;section&gt;&lt;h3&gt;自动链接&lt;a href=&quot;#自动链接&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;http://example.com/&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;address@example.com&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;http://example.com/&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;#&quot;&gt;address@example.com&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;GFM 会自动识别标准 URL 并转换为链接。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;https://github.com/emn178/markdown&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/emn178/markdown&quot; target=&quot;_blank&quot;&gt;https://github.com/emn178/markdown&lt;/a&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;section&gt;&lt;h3&gt;反斜杠转义&lt;a href=&quot;#反斜杠转义&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\*literal asterisks\*&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;*literal asterisks*&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;以下字符可通过反斜杠转义以按字面量输出：&lt;/p&gt;&lt;p&gt;Code:&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;\   backslash&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;`   backtick&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;*   asterisk&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;_   underscore&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;{}  curly braces&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;[]  square brackets&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;()  parentheses&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;#   hash mark&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;+   plus sign&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;-   minus sign (hyphen)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;.   dot&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;!   exclamation mark&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;&lt;/section&gt;&lt;/section&gt;&lt;section&gt;&lt;h2&gt;内联 HTML&lt;a href=&quot;#内联-html&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is a regular paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;table&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;td&amp;gt;Foo&amp;lt;/td&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;This is another regular paragraph.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;This is a regular paragraph.&lt;/p&gt;&lt;table&gt;
    &lt;tbody&gt;&lt;tr&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;This is another regular paragraph.&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;请注意：在&lt;strong&gt;块级 HTML 标签&lt;/strong&gt;内不会处理 Markdown 语法。&lt;/p&gt;&lt;p&gt;与块级标签不同，在&lt;strong&gt;行内级标签&lt;/strong&gt;内会处理 Markdown 语法。&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;span&amp;gt;**Work**&amp;lt;/span&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;**No Work**&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p&gt;预览：&lt;/p&gt;&lt;hr /&gt;&lt;p&gt;&lt;span&gt;&lt;strong&gt;Work&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div&gt;
  **No Work**
&lt;/div&gt;
***&lt;/section&gt;&lt;/section&gt;</content:encoded></item><item><title>在文章中嵌入视频</title><link>https://blog.lixiuxu.cn/posts/video/</link><guid isPermaLink="true">https://blog.lixiuxu.cn/posts/video/</guid><description>这篇文章演示如何在博客文章中嵌入视频。</description><pubDate>Thu, 01 Jan 1970 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;在文章中嵌入视频&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;published&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2023-10-19&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;// ...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;section&gt;&lt;h2&gt;YouTube&lt;a href=&quot;#youtube&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/section&gt;
&lt;section&gt;&lt;h2&gt;Bilibili&lt;a href=&quot;#bilibili&quot;&gt;&lt;span&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt; &lt;/section&gt;</content:encoded></item></channel></rss>