<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
      <title>Rocky‘s Blog - Doc</title>
      <link>https://suchaharcan.github.io/</link>
      <description>月更 技术博客 CXX优先</description>
      <generator>Zola</generator>
      <language>en</language>
      <atom:link href="https://suchaharcan.github.io/categories/doc/rss.xml" rel="self" type="application/rss+xml"/>
      <lastBuildDate>Thu, 15 Oct 2026 00:00:00 +0000</lastBuildDate>
      <item>
          <title>CMake</title>
          <pubDate>Thu, 15 Oct 2026 00:00:00 +0000</pubDate>
          <author>Suchaharcan</author>
          <link>https://suchaharcan.github.io/01Write_blog_CXX20/cmake/</link>
          <guid>https://suchaharcan.github.io/01Write_blog_CXX20/cmake/</guid>
          <description xml:base="https://suchaharcan.github.io/01Write_blog_CXX20/cmake/">&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;定期更新 该博客&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;总结CMake常用命令之前，先明确为什么要使用CMake?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;C++ 源码 编译链接 的原理， 在代码膨胀 到多文件， 项目复杂度，代码文件管理难度 ，跨平台等问题， 需要一个 更智能 更现代的 构建工具。 因为以上的问题和缺陷，所以需要CMake;&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;rmbuild&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cmake&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ..&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cmake&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-build&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; .&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cmake&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-build&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; .&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;j&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; 9&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 并行构建&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;</description>
      </item>
      <item>
          <title>Markdown</title>
          <pubDate>Thu, 15 Oct 2026 00:00:00 +0000</pubDate>
          <author>Suchaharcan</author>
          <link>https://suchaharcan.github.io/01Write_blog_CXX20/markdown/</link>
          <guid>https://suchaharcan.github.io/01Write_blog_CXX20/markdown/</guid>
          <description xml:base="https://suchaharcan.github.io/01Write_blog_CXX20/markdown/">&lt;blockquote&gt;
&lt;p&gt;`同步翻译 整理 Markdown 官方 和 其他优秀归纳文章即可&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;参考 &lt;a class=&quot;external&quot; rel=&quot;external&quot; title=&quot;博客布局 和 主题细节应用 推荐 优先参考&quot; href=&quot;https://daudix.one/&quot;&gt;Ametrine主题开发者本人网站&lt;/a&gt;， &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://tangled.org/daudix.one/daudix.one&quot;&gt;博客源码参照&lt;/a&gt;
而 主题内置的 样例博客可作为重要参考&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;对自身的要求仅是 熟练使用，无 迁移 晋升的 空间&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr /&gt;
&lt;h1 id=&quot;markdown&quot;&gt;Markdown&lt;/h1&gt;
&lt;p&gt;Text can be &lt;strong&gt;bold&lt;/strong&gt;, &lt;em&gt;italic&lt;/em&gt;, &lt;del&gt;strikethrough&lt;/del&gt;, and &lt;em&gt;&lt;strong&gt;&lt;del&gt;all at the same time&lt;/del&gt;&lt;/strong&gt;&lt;/em&gt;. &lt;br/&gt;
&lt;a href=&quot;../cmake&quot;&gt;Link to another page&lt;/a&gt;&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-2-1&quot;&gt;&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fn-2&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;.&lt;/p&gt;
&lt;h2 id=&quot;biao-ti&quot;&gt;标题&lt;/h2&gt;
&lt;p&gt;There should be whitespace between paragraphs&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-1-1&quot;&gt;&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fn-1&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;.&lt;/p&gt;
&lt;p&gt;| &lt;strong&gt;段落&lt;/strong&gt; |&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;要创建段落，请使用空行分隔一行或多行文本。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;换行&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;借助 Alfred 的快捷文本 &lt;code&gt;mkbr&lt;/code&gt;进行快速触发 &lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;“Original content is original only for a few seconds before getting old”&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Rule #21 of the internet
&lt;strong&gt;加粗字体&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;**&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;yin-yong-kuai-white-check-mark&quot;&gt;引用块 ✅&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;嵌套引用块 &lt;code&gt;要创建引用块，请在段落前添加 &amp;gt;。&lt;/code&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;h2 id=&quot;yin-yong-kuai-ke-yi-qian-tao-zai-yao-qian-tao-de-duan-luo-qian-tian-jia&quot;&gt;引用块可以嵌套。在要嵌套的段落前添加 &lt;code&gt;&amp;gt;&amp;gt;&lt;/code&gt;。&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;包含其他元素的引用块&lt;/li&gt;
&lt;li&gt;引用块可以包含&lt;strong&gt;其他 Markdown 格式的元素&lt;/strong&gt;。&lt;code&gt;并非所有元素&lt;/code&gt;都可以使用——你需要进行实验以查看哪些元素有效。&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;markdown-alert-note&quot;&gt;
&lt;p&gt;Useful information that users should know, even when skimming content.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;markdown-alert-tip&quot;&gt;
&lt;p&gt;Helpful advice for doing things better or more easily.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;markdown-alert-important&quot;&gt;
&lt;p&gt;Key information users need to know to achieve their goal.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;markdown-alert-warning&quot;&gt;
&lt;p&gt;Urgent info that needs immediate user attention to avoid problems.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;markdown-alert-caution&quot;&gt;
&lt;p&gt;Advises about risks or negative outcomes of certain actions.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;有序列表&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;添加带有数字和句号的行项目。数字不必按数字顺序排列，但列表应从数字一开头。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;无序列表&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;在行项目前添加破折号 (-)、星号 (*) 或加号 (+)。&lt;br/&gt;
&lt;code&gt;缩进&lt;/code&gt;一个或多个项目以创建嵌套列表。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;为了兼容性，请不要在同一列表中&lt;code&gt;混合&lt;/code&gt;和匹配分隔符——选择一个并坚持使用它。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;第一项&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;第二项&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;第三项&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;缩进项&lt;/li&gt;
&lt;li&gt;缩进项&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;第四项&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Item 1&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Item 2&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Item 2.1&lt;/li&gt;
&lt;li&gt;Item 2.2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Item 3&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;Item 4&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;Perform step #1&lt;/li&gt;
&lt;li&gt;Proceed to step #2&lt;/li&gt;
&lt;li&gt;Conclude with step #3&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot;/&gt;
Milk&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;/&gt;
Eggs&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;/&gt;
Flour&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot;/&gt;
Coffee&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;/&gt;
Combustible lemons&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;要在列表中&lt;code&gt;添加另一个元素&lt;/code&gt;，同时保留列表的连续性，请将元素缩进四个空格或一个制表符，如下例所示。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;This is the first list item.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Here’s the second list item.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A blockquote would look great below the second list item.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;And here’s the third list item.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;代码&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;cmake&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/blockquote&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style=&quot;text-align: left&quot;&gt;Character&lt;/th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Show&lt;/th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Quotes&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;Derpy Hooves&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;My Little Pony&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;I just don’t know what went wrong&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;Gir&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Invader ZIM&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;GUESS WHO MADE WAAAAFFLES?!!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;WALL-E&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;WALL-E&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Ooooo 0.0&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;Taco&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Inanimate Insanity&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;SOUR CREAM!&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-l-i z-d-9 z-d-i&quot;&gt;let&lt;/span&gt;&lt;span&gt; highlight&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; true&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;scss&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;pre&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; mark&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l z-l-hl z-d-hl&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;12&lt;/span&gt;&lt;span&gt;  display&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-1 z-d-3&quot;&gt; block&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l z-l-hl z-d-hl&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;13&lt;/span&gt;&lt;span&gt;  color&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-1 z-d-3&quot;&gt; currentcolor&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;14&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;15&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;pre&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; table&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; td&lt;/span&gt;&lt;span class=&quot;z-l-4 z-l-i z-d-7 z-d-i&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt;nth-of-type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l z-l-hl z-d-hl&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;17&lt;/span&gt;&lt;span&gt;  color&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt;6b6b6b&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l z-l-hl z-d-hl&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;18&lt;/span&gt;&lt;span&gt;  font-style&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-1 z-d-3&quot;&gt; italic&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;giallo-ln&quot;&gt;19&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;水平线 ✅&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;单独的一行上使用三个或更多星号 (***)、破折号 (—) 或下划线 (___)&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-3-1&quot;&gt;&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fn-3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;components-zu-jian&quot;&gt;Components - 组件&lt;/h2&gt;
&lt;p&gt;Ametrine provides a few useful &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://keats.github.io/tera/#components&quot;&gt;components&lt;/a&gt; that simplify some tasks. They can be used on all pages.&lt;/p&gt;
&lt;blockquote class=&quot;markdown-alert-note&quot;&gt;
&lt;p&gt;As of version 0.21.0, Zola supports &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts&quot;&gt;GitHub flavored alerts&lt;/a&gt; natively, without this component. It can be enabled by adding the following to &lt;code&gt;zola.toml&lt;/code&gt;:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;toml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;markdown&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;github_alerts&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; true&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/blockquote&gt;
&lt;p&gt;Required variables are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;icon&lt;/code&gt;: Icon from &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://phosphoricons.com&quot;&gt;phosphoricons.com&lt;/a&gt; that will be used in the alert.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;title&lt;/code&gt;: Title of the alert.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Optional variables are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;color&lt;/code&gt;: Color that the alert should be colored into. Available colors are: &lt;code&gt;red&lt;/code&gt;, &lt;code&gt;orange&lt;/code&gt;, &lt;code&gt;yellow&lt;/code&gt;, &lt;code&gt;green&lt;/code&gt;, &lt;code&gt;blue&lt;/code&gt;, and &lt;code&gt;purple&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote
  class=&quot;markdown-alert-blue&quot;
  style=&quot;
    --alert-title: &#39;Fake Warning XD&#39;;
    --alert-icon: url(&#39;data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240.26%2C186.1%2C152.81%2C34.23h0a28.74%2C28.74%2C0%2C0%2C0-49.62%2C0L15.74%2C186.1a27.45%2C27.45%2C0%2C0%2C0%2C0%2C27.71A28.31%2C28.31%2C0%2C0%2C0%2C40.55%2C228h174.9a28.31%2C28.31%2C0%2C0%2C0%2C24.79-14.19A27.45%2C27.45%2C0%2C0%2C0%2C240.26%2C186.1Zm-20.8%2C15.7a4.46%2C4.46%2C0%2C0%2C1-4%2C2.2H40.55a4.46%2C4.46%2C0%2C0%2C1-4-2.2%2C3.56%2C3.56%2C0%2C0%2C1%2C0-3.73L124%2C46.2a4.77%2C4.77%2C0%2C0%2C1%2C8%2C0l87.44%2C151.87A3.56%2C3.56%2C0%2C0%2C1%2C219.46%2C201.8ZM116%2C136V104a12%2C12%2C0%2C0%2C1%2C24%2C0v32a12%2C12%2C0%2C0%2C1-24%2C0Zm28%2C40a16%2C16%2C0%2C1%2C1-16-16A16%2C16%2C0%2C0%2C1%2C144%2C176Z%22/%3E%3C/svg%3E&#39;);
  &quot;&gt;
  &lt;p&gt;Hi, I’m a fake custom alert.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I’m a list with an &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://example.org&quot;&gt;inline&lt;/a&gt; link.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;lian-jie&quot;&gt;链接 ⭐&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;必须是英文引号 填充悬浮提示&lt;/code&gt; &lt;br/&gt;
添加标题
您可以选择为链接添加标题。当用户将鼠标悬停在链接上时，它将显示为工具提示。要添加标题，请在 URL 后用引号将其括起来。&lt;br/&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;eg: &lt;a class=&quot;external&quot; rel=&quot;external&quot; title=&quot;The best search engine for privacy&quot; href=&quot;https://duckduckgo.com&quot;&gt;Duck Duck Go&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;markdown&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;Duck Duck Go&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-2 z-l-u z-d-5 z-d-u&quot;&gt;https://duckduckgo.com&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-d-3&quot;&gt;The best search engine for privacy&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;Spotify&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-2 z-l-u z-d-5 z-d-u&quot;&gt;https://open.spotify.com/playlist/7zbBvAvpb9NJfkO0e7lJx3&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;images-and-videos&quot;&gt;Images and Videos&lt;/h3&gt;
&lt;p&gt;By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use components with different argument combinations.&lt;/p&gt;
&lt;p&gt;Available variables are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;url&lt;/code&gt;: URL to an image.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;url_min&lt;/code&gt;: URL to compressed version of an image, original can be opened by clicking on the image.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;alt&lt;/code&gt;: Alt text, same as if the text were inside square brackets in Markdown.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;full&lt;/code&gt;: Forces image to be full-width.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;start&lt;/code&gt;: Float image to the start of paragraph and scale it down.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;end&lt;/code&gt;: Float image to the end of paragraph and scale it down.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;pixels&lt;/code&gt;: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;has_alpha&lt;/code&gt;: Removes rounded corners and shadow, useful for images with transparency.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;drop_shadow&lt;/code&gt;: Uses drop shadow instead of box shadow, useful for images with transparency.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;no_hover&lt;/code&gt;: Removes zoom on hover. 悬停取消缩放&lt;/li&gt;
&lt;li&gt;&lt;code&gt;spoiler&lt;/code&gt;: Blurs image until hovered over/pressed on, useful for plot rich game screenshots. 模糊图像，直到悬停/点击 适用 内容丰富敏感的内容&lt;/li&gt;
&lt;li&gt;&lt;code&gt;spoiler&lt;/code&gt; with &lt;code&gt;solid&lt;/code&gt;: Ditto, but makes the image completely hidden.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{{&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;image&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;graph.png&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; alt&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;This is an image&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;no-hover&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; }}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;image src=&quot;graph.png&quot; alt=&quot;This is an image&quot; class=&quot;no-hover&quot;/&gt;
&lt;figure&gt;
&lt;p&gt;&lt;img
class=&quot;no-hover&quot;
alt=&quot;Portal Gun blueprint&quot;
src=&quot;https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg&quot;
 /&gt;&lt;/p&gt;
&lt;figcaption&gt;Image with an alt text and without zoom on hover&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;a href=&quot;https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg&quot;&gt;
&lt;img
class=&quot;no-hover&quot;
alt=&quot;The gravestone of J.P.G.&quot;
src=&quot;https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg&quot;
 /&gt;
&lt;/a&gt;
&lt;figcaption&gt;Image with compressed version, an alt text, and without zoom on hover&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;p&gt;&lt;img
class=&quot;spoiler&quot;
alt=&quot;Portal Gun blueprint&quot;
src=&quot;https://files.catbox.moe/lk7nee.jpg&quot;
 /&gt;&lt;/p&gt;
&lt;figcaption&gt;Image with an alt text, hidden behind a spoiler&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola components.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;#full&lt;/code&gt;: Forces image to be full-width.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#start&lt;/code&gt;: Float image to the start of paragraph and scale it down.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#end&lt;/code&gt;: Float image to the end of paragraph and scale it down.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#pixels&lt;/code&gt;: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#has-alpha&lt;/code&gt;: Removes rounded corners and shadow, useful for images with transparency.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#drop-shadow&lt;/code&gt;: Uses drop shadow instead of box shadow, useful for images with transparency.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#no-hover&lt;/code&gt;: Removes zoom on hover.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#spoiler&lt;/code&gt;: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#spoiler&lt;/code&gt; with &lt;code&gt;#solid&lt;/code&gt;: Ditto, but makes the image completely hidden.&lt;/li&gt;
&lt;/ul&gt;
&lt;br /&gt;
&lt;figure&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://containertoolbx.org&quot;&gt;&lt;img src=&quot;https://containertoolbx.org/assets/toolbx.gif#full#pixels#has-alpha#drop-shadow#no-hover&quot; alt=&quot;Toolbx header image&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;figcaption&gt;Full-width image with an alt text, pixel-art rendering, drop shadow, and with no rounded corners and zoom on hover&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;br /&gt;
&lt;p&gt;&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/2005_Ford_Mustang_V6_Premium_Convertible.jpg/330px-2005_Ford_Mustang_V6_Premium_Convertible.jpg#start&quot; alt=&quot;2005 Ford Mustang V6 Premium Convertible&quot; /&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.&lt;/p&gt;
&lt;p&gt;For videos it’s all the same except for a few differences: &lt;code&gt;no_hover&lt;/code&gt; and &lt;code&gt;url_min&lt;/code&gt; variables are not available.&lt;/p&gt;
&lt;p&gt;Additionally, the following &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes&quot;&gt;attributes&lt;/a&gt; can be set:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;autoplay&lt;/code&gt;: Start playing the video automatically.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;controls&lt;/code&gt;: Display video controls such as volume control, seeking and pause/resume.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;loop&lt;/code&gt;: Play the video again once it ends.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;muted&lt;/code&gt;: Turn off the audio by default.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;playsinline&lt;/code&gt;: Prevent the video from playing in fullscreen by default (depends on the browser).&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{{&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;video&lt;/span&gt;&lt;span&gt; sources&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;video.webm&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;span&gt; alt&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;This is a video&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; controls&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; }}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;figure&gt;
&lt;video preload=&quot;auto&quot; aria-title=&quot;Duckling preening&quot; controls&gt;
&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;figcaption&gt;Duckling preening&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;video preload=&quot;auto&quot; aria-title=&quot;Duckling preening&quot; controls&gt;
&lt;source src=&quot;https://player.bilibili.com/player.html?isOutside=true&amp;aid=117215848307384&amp;bvid=BV1gRtk6CEry&amp;cid=41595440421&amp;p=1&amp;high_quality=1&quot; type=&quot;video/html?isOutside=true&amp;aid=117215848307384&amp;bvid=BV1gRtk6CEry&amp;cid=41595440421&amp;p=1&amp;high_quality=1&quot;&gt;
&lt;/video&gt;
&lt;figcaption&gt;Duckling preening&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;iframe src=&quot;//player.bilibili.com/player.html?isOutside=true&amp;aid=117215848307384&amp;bvid=BV1gRtk6CEry&amp;cid=41595440421&amp;p=1&quot; scrolling=&quot;no&quot; border=&quot;0&quot; frameborder=&quot;no&quot; framespacing=&quot;0&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;h3 id=&quot;crt&quot;&gt;CRT&lt;/h3&gt;
&lt;p&gt;Alright, this one doesn’t simplify anything, it just puts ASCII art into a CRT-like box.&lt;/p&gt;
&lt;blockquote class=&quot;markdown-alert-note&quot;&gt;
&lt;p&gt;As this element is intended to be purely decorative (e.g. for displaying ASCII art), it is hidden from screen readers unless a &lt;code&gt;label&lt;/code&gt; is supplied. Ensure that no vital content is wrapped in it.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;crt&lt;/span&gt;&lt;span&gt; label&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;ASCII illustration of public library halls.&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;-&amp;gt; ASCII art &amp;lt;-&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span&gt;crt&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;crt&quot;  role=&quot;img&quot; aria-label=&quot;ASCII illustration of public library halls.&quot;&gt;&lt;code aria-hidden=&quot;true&quot;&gt;&lt;span&gt;
---

|.&#39;&#39;, Public_Library_Halls ,&#39;&#39;.|
|.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.|
|.&#39;.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;&#39;, ,&#39;&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.| |.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|===; ;===|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;, ,&#39;|:::|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|---|&#39;.|, _______ ,|.&#39;|---|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;.|&#39;|???????|&#39;|.&#39;|:::|.&#39;.&#39;.&#39;.&#39;.|
|,&#39;,&#39;,&#39;,&#39;,|---|&#39;,|&#39;|???????|&#39;|,&#39;|---|,&#39;,&#39;,&#39;,&#39;,|
|.&#39;.&#39;.&#39;.&#39;.|:::|&#39;.|&#39;|???????|&#39;|.&#39;|:::|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|---|&#39;,&#39; /%%%\ &#39;,&#39;|---|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|===:&#39; /%%%%%\ &#39;:===|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;.|%%%%%%%%%%%%%%%%%%%%%%%%%|.&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;.&#39;,&#39; /%%%%%%%%%\ &#39;,&#39;.&#39;.&#39;.&#39;.|
|.&#39;.&#39;.&#39;,&#39; /%%%%%%%%%%%\ &#39;,&#39;.&#39;.&#39;.|
|.&#39;.&#39;,&#39; /%%%%%%%%%%%%%\ &#39;,&#39;.&#39;.|
|.&#39;,&#39; /%%%%%%%%%%%%%%%\ &#39;,&#39;.|
|;________****/%%%%%Spicer%%%%%%\_****_______;|
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Alternatively, if you have &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://www.getzola.org/documentation/content/syntax-highlighting/&quot;&gt;syntax highlighting&lt;/a&gt; enabled and you need to preserve whitespace, you can use a code block with &lt;code&gt;crt=true&lt;/code&gt; added right after three backticks.&lt;/p&gt;
&lt;blockquote class=&quot;markdown-alert-note&quot;&gt;
&lt;p&gt;The downside of this approach is that it will keep the ASCII art accessible to screen readers, which is bad for accessebility. Whitespace issue should hopefully be fixed with the release of Zola 0.23.0. See &lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://codeberg.org/daudix/ametrine/issues/116&quot;&gt;#116&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;```crt=true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  /\&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; /  \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;/____\&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;```&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;plain&quot; data-crt=&quot;true&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  /\&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; /  \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;/____\&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;audio&quot;&gt;Audio&lt;/h3&gt;
&lt;p&gt;Places a useless audio button with a funny hover animation. Needs &lt;code&gt;extra.audio_button&lt;/code&gt; to be enabled on page, section, or config level for it to work.&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{{&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;audio&lt;/span&gt;&lt;span&gt; name&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Party!&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; url&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;party-horn.mp3&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; }}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Hi everyone! You know what I like doing? That’s right, throwing
&lt;button class=&quot;audio&quot; data-audio=&quot;party-horn.mp3&quot;&gt;Parties&lt;i class=&quot;icon speaker-high&quot; style=&quot;--icon: url(&#39;data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M157.27%2C21.22a12%2C12%2C0%2C0%2C0-12.64%2C1.31L75.88%2C76H32A20%2C20%2C0%2C0%2C0%2C12%2C96v64a20%2C20%2C0%2C0%2C0%2C20%2C20H75.88l68.75%2C53.47A12%2C12%2C0%2C0%2C0%2C164%2C224V32A12%2C12%2C0%2C0%2C0%2C157.27%2C21.22ZM36%2C100H68v56H36Zm104%2C99.46L92%2C162.13V93.87l48-37.33ZM212%2C128a44%2C44%2C0%2C0%2C1-11%2C29.11%2C12%2C12%2C0%2C1%2C1-18-15.88%2C20%2C20%2C0%2C0%2C0%2C0-26.43%2C12%2C12%2C0%2C0%2C1%2C18-15.86A43.94%2C43.94%2C0%2C0%2C1%2C212%2C128Zm40%2C0a83.87%2C83.87%2C0%2C0%2C1-21.39%2C56%2C12%2C12%2C0%2C0%2C1-17.89-16%2C60%2C60%2C0%2C0%2C0%2C0-80%2C12%2C12%2C0%2C1%2C1%2C17.88-16A83.87%2C83.87%2C0%2C0%2C1%2C252%2C128Z%22/%3E%3C/svg%3E&#39;);&quot;&gt;&lt;/i&gt;&lt;/button&gt;
! Actually I don’t I just wanted to show off audio button.&lt;/p&gt;
&lt;h3 id=&quot;youtube&quot;&gt;YouTube&lt;/h3&gt;
&lt;p&gt;Allows to embed a YouTube video using youtube-nocookie.&lt;/p&gt;
&lt;p&gt;Available variables are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;autoplay&lt;/code&gt;: Whether the video should autoplay.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;start&lt;/code&gt;: On which second video should start.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{{&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;youtube&lt;/span&gt;&lt;span&gt; id&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;0Da8ZhKcNKQ&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; }}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;iframe
  class=&quot;youtube-embed&quot;
  src=&quot;https://www.youtube-nocookie.com/embed/0Da8ZhKcNKQ&quot;
  allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot;
  referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen&gt;
&lt;/iframe&gt;
&lt;h3 id=&quot;vimeo&quot;&gt;Vimeo&lt;/h3&gt;
&lt;p&gt;Allows to embed a Vimeo video.&lt;/p&gt;
&lt;p&gt;Available variables are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;autoplay&lt;/code&gt;: Whether the video should autoplay.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{{&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;vimeo&lt;/span&gt;&lt;span&gt; id&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;869483483&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; }}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;iframe
  class=&quot;vimeo-embed&quot;
  src=&quot;https://player.vimeo.com/video/869483483&quot;
  allow=&quot;autoplay; fullscreen; picture-in-picture&quot;
  allowfullscreen&gt;
&lt;/iframe&gt;
&lt;h3 id=&quot;bilibili&quot;&gt;BiliBili&lt;/h3&gt;
&lt;blockquote class=&quot;markdown-alert-important&quot;&gt;
&lt;p&gt;[!NOTE]
B站版本的视频调用方式我要仿写实现&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;overflow-auto&quot;&gt;Overflow Auto&lt;/h3&gt;
&lt;p&gt;Sometimes, an element gets too wide, and it’s not possible to make it adaptive in any sensible way (think tables), this is when this component comes in.&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;overflow_auto&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Table (for example)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span&gt;overflow_auto&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Accepts either of the two optional arguments:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;overshoot&lt;/code&gt;: Adds a vertical overshoot, to make the cutoff visually nicer.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;overshoot_row&lt;/code&gt;: Ditto, but horizontal.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;jinja&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span&gt;overflow_auto&lt;/span&gt;&lt;span&gt; overshoot_row&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;| #   | Song                          | Artist        | Duration | Popularity | Genres | Year | Added      |&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;| --- | ----------------------------- | ------------- | -------- | ---------- | ------ | ---- | ---------- |&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;| 1   | Good Morning                  | gifting guide | 03:22    | 2          |        | 2025 | 2026-01-30 |&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;| 2   | On Little Cat Feet            | Nightmargin   | 02:35    | 46         |        | 2016 | 2025-12-21 |&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;| 3   | Take Responsibility (Hear Me) | Koa           | 03:25    | 11         |        | 2024 | 2025-12-21 |&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{%&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;/&lt;/span&gt;&lt;span&gt;overflow_auto&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt; %}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;overflow-auto overshoot-row&quot;&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;#&lt;/th&gt;&lt;th&gt;Song&lt;/th&gt;&lt;th&gt;Artist&lt;/th&gt;&lt;th&gt;Duration&lt;/th&gt;&lt;th&gt;Popularity&lt;/th&gt;&lt;th&gt;Genres&lt;/th&gt;&lt;th&gt;Year&lt;/th&gt;&lt;th&gt;Added&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Good Morning&lt;/td&gt;&lt;td&gt;gifting guide&lt;/td&gt;&lt;td&gt;03:22&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;2025&lt;/td&gt;&lt;td&gt;2026-01-30&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;On Little Cat Feet&lt;/td&gt;&lt;td&gt;Nightmargin&lt;/td&gt;&lt;td&gt;02:35&lt;/td&gt;&lt;td&gt;46&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;2016&lt;/td&gt;&lt;td&gt;2025-12-21&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Take Responsibility (Hear Me)&lt;/td&gt;&lt;td&gt;Koa&lt;/td&gt;&lt;td&gt;03:25&lt;/td&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;2024&lt;/td&gt;&lt;td&gt;2025-12-21&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;h2 id=&quot;description-list&quot;&gt;Description List&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dl&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dt&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Something&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dt&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dd&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;And its description&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dd&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;dl&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;dl&gt;
&lt;dt&gt;Name&lt;/dt&gt;
&lt;dd&gt;Godzilla&lt;/dd&gt;
&lt;dt&gt;Born&lt;/dt&gt;
&lt;dd&gt;1952&lt;/dd&gt;
&lt;dt&gt;Birthplace&lt;/dt&gt;
&lt;dd&gt;Japan&lt;/dd&gt;
&lt;dt&gt;Color&lt;/dt&gt;
&lt;dd&gt;Green&lt;/dd&gt;
&lt;/dl&gt;
&lt;h2 id=&quot;form-input&quot;&gt;Form Input&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
  &lt;li&gt;
    &lt;input type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Milk&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Eggs&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Flour&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;checkbox&quot; checked /&gt;
    &lt;label&gt;Coffee&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;checkbox&quot; disabled /&gt;
    &lt;label&gt;Combustible lemons&lt;/label&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;With &lt;code&gt;switch&lt;/code&gt; class:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;switch&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Milk&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Eggs&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Flour&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch&quot; type=&quot;checkbox&quot; checked /&gt;
    &lt;label&gt;Coffee&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch&quot; type=&quot;checkbox&quot; disabled /&gt;
    &lt;label&gt;Combustible lemons&lt;/label&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;With &lt;code&gt;switch&lt;/code&gt; and &lt;code&gt;big&lt;/code&gt; classes:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;switch big&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Checkbox&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch big&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Milk&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch big&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Eggs&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch big&quot; type=&quot;checkbox&quot; /&gt;
    &lt;label&gt;Flour&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch big&quot; type=&quot;checkbox&quot; checked /&gt;
    &lt;label&gt;Coffee&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input class=&quot;switch big&quot; type=&quot;checkbox&quot; disabled /&gt;
    &lt;label&gt;Combustible lemons&lt;/label&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;With &lt;code&gt;radio&lt;/code&gt; type:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;radio&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; name&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Radio&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
  &lt;li&gt;
    &lt;input type=&quot;radio&quot; name=&quot;test&quot; /&gt;
    &lt;label&gt;Milk&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;radio&quot; name=&quot;test&quot; /&gt;
    &lt;label&gt;Eggs&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;radio&quot; name=&quot;test&quot; /&gt;
    &lt;label&gt;Flour&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;radio&quot; name=&quot;test&quot; checked /&gt;
    &lt;label&gt;Coffee&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type=&quot;radio&quot; name=&quot;test&quot; disabled /&gt;
    &lt;label&gt;Combustible lemons&lt;/label&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;With &lt;code&gt;color&lt;/code&gt; type:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Color:&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; value&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;#000000&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;label for=&quot;color&quot;&gt;Color:&lt;/label&gt;
&lt;input id=&quot;color&quot; type=&quot;color&quot; value=&quot;#b57edc&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for=&quot;color&quot;&gt;Disabled:&lt;/label&gt;
&lt;input id=&quot;color&quot; type=&quot;color&quot; value=&quot;#b57edc&quot; disabled /&gt;&lt;/p&gt;
&lt;p&gt;With &lt;code&gt;range&lt;/code&gt; type:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; type&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;range&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; max&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; value&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;33&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;input type=&quot;range&quot; max=&quot;100&quot; value=&quot;33&quot; id=&quot;range&quot;&gt;
&lt;!-- For the demo purposes only --&gt;
&lt;small id=&quot;range-value&quot;&gt;&lt;/small&gt;
&lt;!-- End --&gt;
&lt;h2 id=&quot;figure-captions&quot;&gt;Figure Captions&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;markdown&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;figure&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  -&amp;gt; Whatever content &amp;lt;-&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;figcaption&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Caption of content above&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;figcaption&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;figure&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;figure&gt;
&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/MPDJRsT/ImMAXM3.png&quot; alt=&quot;The Office&quot; /&gt;&lt;/p&gt;
  &lt;figcaption&gt;The Office where Stanley works, it has yellow floor and beige walls&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;accordion&quot;&gt;Accordion&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;markdown&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;details&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;summary&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Accordion title&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;summary&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  -&amp;gt; Contents here &amp;lt;-&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;details&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;details&gt;
  &lt;summary&gt;Reveal accordion&lt;/summary&gt;
&lt;p&gt;Get it? I know, it’s an awful pun.
&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PianoAccordeon.jpg/916px-PianoAccordeon.jpg#has-alpha#no-hover&quot; alt=&quot;Piano Accordion&quot; /&gt;&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id=&quot;side-comment&quot;&gt;Side Comment&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;small&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Small, cute text that doesn&amp;#39;t catch attention.&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;small&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;Small, cute text that doesn’t catch attention.&lt;/small&gt;&lt;/p&gt;
&lt;h2 id=&quot;abbreviation&quot;&gt;Abbreviation&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;abbr&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; title&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;American Standard Code for Information Interchange&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;ASCII&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;abbr&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;abbr title=&quot;American Standard Code for Information Interchange&quot;&gt;ASCII&lt;/abbr&gt; art is awesome!&lt;/p&gt;
&lt;h2 id=&quot;aside&quot;&gt;Aside&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;aside&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;-&amp;gt; Contents here &lt;/span&gt;&lt;span class=&quot;z-l-9 z-l-i z-l-u z-d-9 z-d-i z-d-u&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;-&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;aside&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;aside&gt;
&lt;p&gt;Quill and a parchment&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg&quot; alt=&quot;Quill and a parchment&quot; /&gt;&lt;/p&gt;
&lt;/aside&gt;
&lt;p&gt;A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.&lt;/p&gt;
&lt;p&gt;As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.&lt;/p&gt;
&lt;h2 id=&quot;keyboard-input&quot;&gt;Keyboard Input&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;kbd&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;⌘ Command&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;kbd&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;To switch the keyboard layout, press &lt;kbd&gt;⌘ Super&lt;/kbd&gt; + &lt;kbd&gt;Space&lt;/kbd&gt;.&lt;/p&gt;
&lt;h2 id=&quot;mark-text&quot;&gt;Mark Text&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;mark&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Marked text&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;mark&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You know what? I’m gonna say some &lt;mark&gt;very important&lt;/mark&gt; stuff, so &lt;mark&gt;important&lt;/mark&gt; that even &lt;strong&gt;bold&lt;/strong&gt; is not enough.&lt;/p&gt;
&lt;h2 id=&quot;deleted-and-inserted-text&quot;&gt;Deleted and Inserted Text&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;del&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Something deleted&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;del&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;ins&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Something added&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;ins&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;del&gt;Text deleted&lt;/del&gt; &lt;ins&gt;Text added&lt;/ins&gt;&lt;/p&gt;
&lt;h2 id=&quot;progress-indicator&quot;&gt;Progress Indicator&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;progress&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;progress&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;progress&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; value&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;33&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; max&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;progress&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;progress&gt;&lt;/progress&gt;
&lt;progress value=&quot;33&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;&lt;/p&gt;
&lt;h2 id=&quot;sample-output&quot;&gt;Sample Output&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;samp&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Sample Output&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;samp&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;samp&gt;Sample Output&lt;/samp&gt;&lt;/p&gt;
&lt;h2 id=&quot;inline-quotation&quot;&gt;Inline Quotation&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Someone said something&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Blah blah &lt;q&gt;Inline Quote&lt;/q&gt; hmm.&lt;/p&gt;
&lt;h2 id=&quot;unarticulated-annotation&quot;&gt;Unarticulated Annotation&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;u&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Gmarrar mitsakes&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;u&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;u&gt;Yeet&lt;/u&gt; the &lt;u&gt;sus&lt;/u&gt; drip while &lt;u&gt;vibing&lt;/u&gt; with the &lt;u&gt;TikTok&lt;/u&gt; &lt;u&gt;fam&lt;/u&gt; on a cap-free boomerang.&lt;/p&gt;
&lt;h2 id=&quot;titles&quot;&gt;Titles&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;strong&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Title-Looking Text&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;strong&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong class=&quot;title&quot;&gt;Title-Looking Text&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;external-links&quot;&gt;External Links&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;external&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;https://example.org&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;External link&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; href=&quot;https://example.org&quot;&gt;Link to site&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;spoilers&quot;&gt;Spoilers&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;spoiler&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Some spoiler&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You know, &lt;span class=&quot;spoiler&quot;&gt;Ametrines are very pretty.&lt;/span&gt; I know, crazy.&lt;/p&gt;
&lt;p&gt;With &lt;code&gt;solid&lt;/code&gt; class:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;spoiler solid&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Some spoiler&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You know, &lt;span class=&quot;spoiler solid&quot;&gt;Ametrines are very pretty.&lt;/span&gt; I know, crazy.&lt;/p&gt;
&lt;h2 id=&quot;buttons&quot;&gt;Buttons&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;buttons&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;#top&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Go to Top&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;suggested external&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;https://example.org&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Example&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;buttons&quot;&gt;
  &lt;a href=&quot;#top&quot;&gt;Go to Top&lt;/a&gt;
  &lt;a class=&quot;suggested external&quot; href=&quot;https://example.org&quot;&gt;Example&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;With &lt;code&gt;centered&lt;/code&gt; and &lt;code&gt;big&lt;/code&gt; classes:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;buttons centered big&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;suggested&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Do Something…&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;buttons centered big&quot;&gt;
  &lt;button class=&quot;suggested&quot;&gt;Do Something…&lt;/button&gt;
&lt;/div&gt;
&lt;p&gt;Standalone:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;suggested&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Do Something…&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;button external&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;https://example.org&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Example&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;button class=&quot;suggested&quot;&gt;Do Something…&lt;/button&gt;
&lt;a class=&quot;button external&quot; href=&quot;https://example.org&quot;&gt;Example&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Disabled:&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; disabled&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;suggested&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;Do Something…&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; aria-disabled&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;button external&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;https://example.org&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;gt;&lt;/span&gt;&lt;span&gt;Example&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;a&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;button disabled class=&quot;suggested&quot;&gt;Do Something…&lt;/button&gt;
&lt;a aria-disabled=&quot;true&quot; class=&quot;button external&quot; href=&quot;https://example.org&quot;&gt;Example&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;accent-color&quot;&gt;Accent Color&lt;/h2&gt;
&lt;p&gt;For demo purposes only, usually it should be changed from the config file.&lt;/p&gt;
&lt;!-- For the demo purposes only --&gt;
&lt;input type=&quot;range&quot; max=&quot;360&quot; value=&quot;0&quot; id=&quot;range-h&quot; class=&quot;hollow&quot;&gt;
&lt;input type=&quot;range&quot; max=&quot;100&quot; value=&quot;0&quot; id=&quot;range-s&quot; class=&quot;hollow&quot;&gt;
&lt;input type=&quot;range&quot; max=&quot;100&quot; value=&quot;0&quot; id=&quot;range-l&quot; class=&quot;hollow&quot;&gt;
&lt;p&gt;&lt;code&gt;hsl(&lt;span id=&quot;range-h-value&quot;&gt;&lt;/span&gt;, &lt;span id=&quot;range-s-value&quot;&gt;&lt;/span&gt;, &lt;span id=&quot;range-l-value&quot;&gt;&lt;/span&gt;)&lt;/code&gt;&lt;/p&gt;
&lt;!-- End --&gt;
&lt;h2 id=&quot;xia-zai-zhi-ding-lu-jing-zhong-de-wen-jian&quot;&gt;下载指定路径中的文件&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;例如 当前博客文件夹中的playlist.csv&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;若图片文件能索引到，可以更好的显示&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span&gt; id&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;download-csv&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; class&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;card&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt; href&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;playlist.csv&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; playlist.csv&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; •&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; 9.1&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; kB&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;/&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/blockquote&gt;
&lt;h2 id=&quot;url-he-dian-zi-you-jian-di-zhi&quot;&gt;URL 和电子邮件地址&lt;/h2&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://open.spotify.com/playlist/7zbBvAvpb9NJfkO0e7lJx3&quot;&gt;Spotify&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;要快速将 URL 或电子邮件地址变成链接，请用尖括号将其括起来&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-4-1&quot;&gt;&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fn-4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;。&lt;/p&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;http://markdownguide.cn&quot;&gt;http://markdownguide.cn&lt;/a&gt;
&lt;a href=&quot;mailto:fake@example.com&quot;&gt;fake@example.com&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;font size=&quot;5&quot;&gt;呈现的输出如下所示&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;http://markdownguide.cn&lt;/p&gt;
&lt;h2 id=&quot;ge-shi-hua-lian-jie-white-check-mark&quot;&gt;格式化链接 ⭐✅&lt;/h2&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;[!WARNING] &lt;code&gt;&amp;gt; [!WARNING]&lt;/code&gt; 警告
要 强调 链接，请在方括号和圆括号前后添加星号。要将链接表示为 代码，请在方括号中添加反引号。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;yin-yong-shi-lian-jie&quot;&gt;引用式链接&lt;/h2&gt;
&lt;p&gt;⚠️ 文内 引用 跨文引用 ，找更直观的理解&lt;/p&gt;
&lt;p&gt;引用式链接是一种特殊的链接，它使 URL 在 Markdown 中更易于显示和阅读。引用式链接由两部分构成：一部分与文本保持一致，另一部分存储在文件中的其他位置，以保持文本易于阅读。&lt;/p&gt;
&lt;h2 id=&quot;tu-xiang&quot;&gt;图像&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-5-1&quot;&gt;&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fn-5&quot;&gt;[5]&lt;/a&gt;&lt;/sup&gt;&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;添加一个感叹号 (!)，后跟方括号中的备用文本，以及括号中图片资源的路径或 URL。您可以在路径或 URL 后添加引号中的标题（可选）。 &lt;code&gt;![图片名称](图片URL &quot;图片悬浮信息&quot;)&lt;/code&gt; &lt;br/&gt;
路径是相对于该博客路径为基础，相对于图片的位置，若图片和博客为同一路径，直接书写图片名称即可&lt;br/&gt;
推荐&lt;code&gt;png&lt;/code&gt;格式&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/graph.png&quot; alt=&quot;Graph chart with three criteria: BPM, Energy, and Loud (Db). BPM goes up and down with regular intervals relatively smoothly, Energy goes from low to high, with three drops in the first half, and Loud (Db) is smooth except in the places of said Energy drops.&quot; title=&quot;图片悬浮信息&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://www.geologyin.com/2021/04/the-colorful-charm-of-ametrine.html&quot;&gt;&lt;img src=&quot;https://files.catbox.moe/7uisx8.jpg&quot; alt=&quot;Rough Ametrine from Bolivia. 在线网络图片&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;heading-ids&quot;&gt;标题 ID \&lt;/h2&gt;
&lt;p&gt;许多 Markdown 处理器支持 标题 的自定义 ID——一些 Markdown 处理器会自动添加它们。添加自定义 ID 允许您直接链接到标题并使用 CSS 修改它们。要添加自定义标题 ID，请在与标题同行的花括号中括起自定义 ID。&lt;/p&gt;
&lt;h3 id=&quot;custom-id&quot;&gt;My Great Heading \&lt;/h3&gt;
&lt;p&gt;HTML 如下所示&lt;/p&gt;
&lt;h3 id=&quot;custom-id&quot;&gt;My Great Heading&lt;/h3&gt;
&lt;p&gt;链接到标题 ID
您可以通过创建带有数字符号 (#) 和自定义标题 ID 的 标准链接 来链接到文件中带有自定义 ID 的标题。这些通常称为锚链接。&lt;/p&gt;
&lt;p&gt;Markdown HTML 呈现的输出
&lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#heading-ids&quot;&gt;标题 ID&lt;/a&gt; &lt;a href=&quot;#heading-ids&quot;&gt;标题 ID&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;标题 ID
其他网站可以通过将自定义标题 ID 添加到网页的完整 URL 来链接到标题（例如，&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;http://markdownguide.cn/extended-syntax#heading-ids&quot;&gt;标题 ID&lt;/a&gt;）。&lt;/p&gt;
&lt;h1 id=&quot;umldeng-tu&quot;&gt;UML等图&lt;/h1&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;前置条件&lt;/code&gt;: 项目中需要引入指定的js文件实现渲染转换，后续再引入该功能&lt;/p&gt;
&lt;/blockquote&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn-2&quot;&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://example.org&quot;&gt;Footnote (link)&lt;/a&gt; &lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fr-2-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-1&quot;&gt;
&lt;p&gt;Footnote &lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fr-1-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-3&quot;&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://genius.com/37573135&quot;&gt;https://genius.com/37573135&lt;/a&gt; &lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fr-3-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-4&quot;&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://genius.com/29300699&quot;&gt;https://genius.com/29300699&lt;/a&gt; &lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fr-4-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-5&quot;&gt;
&lt;p&gt;Update: between first revision of this post and the time I write this at we played it again after such a &lt;a href=&quot;https://suchaharcan.github.io/01Write_blog_CXX20/markdown/#fr-5-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</description>
      </item>
      <item>
          <title>Zola</title>
          <pubDate>Thu, 15 Oct 2026 00:00:00 +0000</pubDate>
          <author>Suchaharcan</author>
          <link>https://suchaharcan.github.io/01Write_blog_CXX20/zola-blog/</link>
          <guid>https://suchaharcan.github.io/01Write_blog_CXX20/zola-blog/</guid>
          <description xml:base="https://suchaharcan.github.io/01Write_blog_CXX20/zola-blog/">&lt;blockquote&gt;
&lt;p&gt;本文受众：Zola博客引擎， ametrine博客主题， 复现本博客网站的爱好者，以及 &lt;code&gt;¯\(°_o)/¯&lt;/code&gt; &lt;code&gt;me&lt;/code&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;单独说明，若是我个人针对ametrine博客主题添加的网站特写会单独说明 &lt;br/&gt;
&lt;code&gt;tldr：&lt;/code&gt; 直接去主题开发者 或 你熟知的 github.io 参考 &lt;code&gt;workflows&lt;/code&gt;中的部署yml文件进行本地部署复现&lt;br/&gt;
然后 根据 文档 和 AI 进行逐行熟悉 源项目 再 魔改成自己的&lt;br/&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;h1 id=&quot;blog-md-biao-qian-tou&quot;&gt;Blog-md 标签头&lt;/h1&gt;
&lt;h2 id=&quot;yan-se&quot;&gt;颜色&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;色相（Hue）‌：颜色在色轮上的位置，范围 0–360 度。0 是红色、120 是绿色、240 是蓝色。&lt;/li&gt;
&lt;li&gt;饱和度（Saturation）‌：颜色的鲜艳程度，0% 是灰色，100% 是最鲜艳的纯色。&lt;/li&gt;
&lt;li&gt;亮度（Lightness）‌：颜色的明暗程度，0% 是黑色，100% 是白色。‌‌&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;可借助&lt;code&gt;Snipaste-截图贴图&lt;/code&gt;中的取色器获取到RGB值 ， 在&lt;a class=&quot;external&quot; rel=&quot;external&quot; title=&quot;若有更好的网站 后续可替换&quot; href=&quot;https://www.ol-tools.com/color-converter&quot;&gt;RGB转HSL在线网站&lt;/a&gt;转换即可&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;accent_color&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;red&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;blue&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;orange&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;green&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 懒惰写法&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;accent_color&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(123, 33%, 60%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(27.567572, 87%, 67%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 更符合人类感知&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;hsl(123,&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 86%,&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 33%&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 柔和草绿&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; Has several modes:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; - Use one of the presets (applies to both light and dark modes):&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   accent_color = &amp;quot;&amp;lt;red, orange, yellow, green, blue, purple&amp;gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; - Use a single HSL color for both light and dark modes:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   accent_color = &amp;quot;hsl(270, 50%, 60%)&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; - Use separate colors for light and dark modes (it&amp;#39;s possible to mix both&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; presets and HSL colors):&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   Presets:    accent_color = [&amp;quot;red&amp;quot;, &amp;quot;blue&amp;quot;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   Preset + HSL:   accent_color = [&amp;quot;red&amp;quot;, &amp;quot;hsl(270, 50%, 60%)&amp;quot;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   HSLs: accent_color = [&amp;quot;hsl(270, 50%, 60%)&amp;quot;, &amp;quot;hsl(27.567572, 87%, 67%)&amp;quot;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; Custom colors must be in HSL format. You can also define your own color&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;rss-atomding-yue&quot;&gt;RSS/Atom订阅&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;updated&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-10-15&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-10-15&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 该字段必须要有的&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;gui-lei&quot;&gt;归类&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;优先使用现有归类，除非 后续博客产出 过多，否则不单独 新增 归类&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;categories&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Doc&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Tracking&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 需要持续迭代更新的帮助文档&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;zi-ti-zi-hao&quot;&gt;字体字号&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;全局字体 位置：&lt;a href=&quot;/Users/songhoujin/00BlogZola/sass/fonts.scss:5&quot;&gt;sass/fonts.scss (line 5)&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;scss&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-4 z-l-i z-d-7 z-d-i&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-1 z-l-i z-d-3 z-d-i&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-10 z-l-i z-d-8 z-d-i&quot;&gt;  --font-sans-serif&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Golos Text&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-10 z-l-i z-d-8 z-d-i&quot;&gt;  --font-monospace&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Commit Mono&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote&gt;
&lt;p&gt;主题的 body 直接消费它（themes/ametrine/sass/citrine/sass/base/_base.scss:33）：&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;scss&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  font-family&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; var&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-10 z-l-i z-d-8 z-d-i&quot;&gt;--font-sans-serif&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-10 z-l-i z-d-8 z-d-i&quot;&gt;--font-system-ui&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;z-l-10 z-l-i z-d-8 z-d-i&quot;&gt;--font-emoji&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;所以改 –font-sans-serif 就能改全站默认正文/UI 字体；代码块仍走 –font-monospace。如果换成新字体，先在同一个文件里补 @font-face，再把变量指过去&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;文章标题&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-10-21&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;extra&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;body_font_size&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;19px&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;  #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 可选，不写则继承全局 21px&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;body_font&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;pop&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;overflow-auto overshoot-row&quot;&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;#&lt;/th&gt;&lt;th&gt;body_font取值&lt;/th&gt;&lt;th&gt;字体字典&lt;/th&gt;&lt;th&gt;Duration&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;golos Golos Text&lt;/td&gt;&lt;td&gt;golos Golos Text&lt;/td&gt;&lt;td&gt;主题默认字体&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;code&gt;pop&lt;/code&gt;&lt;/td&gt;&lt;td&gt;华康 POP1 体&lt;/td&gt;&lt;td&gt;Identify-V 中文&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;essay&lt;/td&gt;&lt;td&gt;Essay Text&lt;/td&gt;&lt;td&gt;Identify-V 英文&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;mono&lt;/td&gt;&lt;td&gt;Commit Mono&lt;/td&gt;&lt;td&gt;等宽&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;wenkai&lt;/td&gt;&lt;td&gt;霞鹜文楷&lt;/td&gt;&lt;td&gt;主题默认字体&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;fangsong&lt;/td&gt;&lt;td&gt;仿宋&lt;/td&gt;&lt;td&gt;Identify-V 中文&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;sarasa&lt;/td&gt;&lt;td&gt;纱黑体&lt;/td&gt;&lt;td&gt;Identify-V 英文&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;pingfang&lt;/td&gt;&lt;td&gt;系统 PingFang SC（Apple 设备）&lt;/td&gt;&lt;td&gt;等宽&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;h2 id=&quot;jia-jie-mi&quot;&gt;加解密&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;个人功能&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;a class=&quot;external&quot; rel=&quot;external&quot; href=&quot;https://suchaharcan.github.io/02Engineer_blog_Debug/deny-website-littlesnitch/&quot;&gt;跳转链接查看示例效果&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;通过 Little Snitch 屏蔽网站&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;基础教程&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;updated&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-06-21&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-06-20&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;taxonomies&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Network&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;extra&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;accent_color&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(145 22% 34%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(145 28% 50%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;extra.encryption&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;encrypt&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;ping-bi-rss-atomding-yue&quot;&gt;屏蔽RSS/Atom订阅&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;个人功能
正确写法是放在 front matter 顶层（不要放进 [extra]）
该文章会从根 feed 和所在板块 feed 中消失，文章本身仍能正常访问。它只影响订阅源，不影响页面发布；如果还想让它不进搜索，再另加 in_search_index = false&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;encrypt = true 的文章因为 post-build.mjs 的过滤，本身已经不会出现在 feed 里；include_in_feeds = false 更适合“不加密、但就是不想进 RSS”的普通文章。两者都写时也不冲突，include_in_feeds = false 会在 Zola 生成 feed 阶段就先排除。&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;不进入 RSS 的文章&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-10-20&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;include_in_feeds&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; false&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;banner&quot;&gt;Banner&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Untitled 2025.m3u&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;My musical preferences of 2025, in a playlist form.&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;updated&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 2026-07-04&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;taxonomies&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Music&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Playlist&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;[&lt;/span&gt;&lt;span&gt;extra&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;accent_color&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(209.49, 35.76%, 32.35%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;hsl(200.0, 15.19%, 69.02%)&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;banner&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;banner.webp&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;styles&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; =&lt;/span&gt;&lt;span&gt; [&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;blog/2025-playlist/style.css&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;+++&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;blog-md-nei-rong-zhu-ti&quot;&gt;Blog-md 内容主体&lt;/h2&gt;
&lt;blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;[!WARNING] &lt;code&gt;&amp;gt; [!WARNING]&lt;/code&gt; 警告&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;kan-ban&quot;&gt;看板&lt;/h2&gt;
&lt;h1 id=&quot;zhu-ti-geng-xin-ametrine&quot;&gt;主题更新 -ametrine&lt;/h1&gt;
&lt;blockquote&gt;
&lt;p&gt;以&lt;code&gt;ametrine&lt;/code&gt;主题为 当前核心主题&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cd&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ~/00BlogZola&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; ① 先回到主仓库当前记录的提交，确保是干净基线（可选但推荐）&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; ② 拉取新版主题：main 分支最新 + 初始化并递归更新嵌套子模块&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;    （--init --recursive 会拉取 sass/citrine，这是新版能编译的关键）&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&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;-init&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-recursive&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; ③ 先编译验证（与 CI 完全一致的完整流程用 ./build-site.sh）&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;zola&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; build&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; ④ 编译失败 → 撤销本次拉取，回到主仓库记录的旧提交&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; diff&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;                #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; themes/ametrine 应不再出现&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; status&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;    #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 前面无 + / - 符号即已回到记录提交&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;如果第 ④ 步提示本地有改动不让覆盖，加 --force：&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-force&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 上述是给读者详解，以下是 个人一键命令使用的&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cd&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ~/00BlogZola&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&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;-init&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-recursive&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; zola&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; build&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; then&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;  echo&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;✅ 新版主题编译通过（尚未记录，确认保留后再提交）&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;else&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;  echo&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;❌ 编译失败，自动撤销本次拉取&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;  git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; submodule&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt;fi&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;关键提醒&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;回退为什么有效：主仓库「记录的」子仓库提交始终是旧的 fc6f62c217ae，
只要你在成功之前不执行 &lt;code&gt;git add themes/ametrine&lt;/code&gt;，&lt;code&gt;git submodule update themes/ametrine&lt;/code&gt;（不带 –remote）就能把工作区拉回这个记录提交，相当于放弃新版。&lt;/li&gt;
&lt;li&gt;确认保留新版时才提交：&lt;/li&gt;
&lt;/ol&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; add&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; themes/ametrine&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; commit&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;m&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;upgrade ametrine theme&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; 提交之后，「记录提交」就变成新版了，此后第&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ④&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; 步会回退到新版而不是旧版。&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;citrine 残留无害：回退后 &lt;code&gt;themes/ametrine/sass/citrine&lt;/code&gt; 这个目录可能还留在本地，旧版主题不引用它，不影响编译，不用特意删。&lt;/li&gt;
&lt;li&gt;更确定的拉取方式（可选）：如果不想依赖 –remote 对嵌套子模块的自动行为，也可以进子仓库手动拉取，与 CI 完全一致&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;cd ~/00BlogZola/themes/ametrine
git fetch origin main
git checkout origin/main
git submodule update –init –recursive
cd ~/00BlogZola&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; 之后的编译验证和回退步骤同上。&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;</description>
      </item>
      <item>
          <title>ASCII - 表情符号在博客文章</title>
          <pubDate>Thu, 15 Oct 2026 00:00:00 +0000</pubDate>
          <author>Suchaharcan</author>
          <link>https://suchaharcan.github.io/03Share_blog/ascii-mac/</link>
          <guid>https://suchaharcan.github.io/03Share_blog/ascii-mac/</guid>
          <description xml:base="https://suchaharcan.github.io/03Share_blog/ascii-mac/">&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;rocket&lt;/code&gt;菜单栏常驻 双击``触发 可模糊搜索&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;博客文章编写， 代码注释， 聊天通讯 均可使用 ，但含义必须明确通用&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;技术性博客 编写： 基于 场景 需求 约束 目标 步骤 验证 复现 这6点顺序编写&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1 id=&quot;zi-dian-ying-she-gui-ze-ji-he&quot;&gt;字典映射规则集合&lt;/h1&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;star&lt;/td&gt;&lt;td&gt;重点醒目提示&lt;/td&gt;&lt;td&gt;⭐&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;white-check-mark&lt;/td&gt;&lt;td&gt;可行性提醒 完成状态 安全&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;interrobang&lt;/td&gt;&lt;td&gt;有疑问&lt;/td&gt;&lt;td&gt;⁉️&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;pushpin&lt;/td&gt;&lt;td&gt;置顶提醒&lt;/td&gt;&lt;td&gt;📌&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;gear&lt;/td&gt;&lt;td&gt;配置 规则&lt;/td&gt;&lt;td&gt;⚙️&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;warning&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;/tr&gt;
&lt;tr&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;
</description>
      </item>
      <item>
          <title>Git</title>
          <pubDate>Tue, 29 Sep 2026 00:00:00 +0000</pubDate>
          <author>Suchaharcan</author>
          <link>https://suchaharcan.github.io/01Write_blog_CXX20/git/</link>
          <guid>https://suchaharcan.github.io/01Write_blog_CXX20/git/</guid>
          <description xml:base="https://suchaharcan.github.io/01Write_blog_CXX20/git/">&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;定期更新 该博客&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;日常开发中遇到的 git场景 ，在搜索应用后，总结到这里来，便于后续积累迁移&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1 id=&quot;clone-chu-ci-la-qu&quot;&gt;clone - 初次拉取&lt;/h1&gt;
&lt;h2 id=&quot;dan-fen-zhi-wu-li-shi-ti-jiao-shi&quot;&gt;单分支无历史提交式&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;场景描述：只获取最新，分支标签关联仓库历史提交全部舍弃&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;git clone --depth 1 --single-branch --branch main --no-tags \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  https://mirrors.tuna.tsinghua.edu.cn/git/llvm-project.git \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  ~/00CXX_GitRes/llvm-project&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;–depth 1 只取最新一条提交&lt;/li&gt;
&lt;li&gt;–single-branch 不抓其它分支（LLVM 有几千个分支，不限制会多几百 MB）&lt;/li&gt;
&lt;li&gt;–no-tags 不抓 tag（LLVM 的 tag 极多，这是体积大头之一）&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;hao-xi-guan&quot;&gt;好习惯&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;克隆完立刻把“只更新 main、永不抓 tag、自动清理“固化进本地配置：&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cd&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ~/00CXX_GitRes/llvm-project&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;# 良好习惯，后续每次拉取都要针对该本地仓库的基础配置进行优先设置&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;# bat .git/config ##进行查看该本地仓库的配置&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; remote.origin.fetch&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;#39;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;+refs/heads/main:refs/remotes/origin/main&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;#39;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; remote.origin.tagOpt&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-no-tags&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; fetch.prune&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; fetch.pruneTags&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; gc.pruneExpire&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; now&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;chang-yong-bie-ming&quot;&gt;常用别名&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 一条命令完成&amp;quot;取最新快照 + 丢弃本地提交/改动&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; alias.update&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;#39;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;!git fetch --depth 1 --no-tags --prune origin main &amp;amp;&amp;amp; git reset --hard origin/main &amp;amp;&amp;amp; git log --oneline -1&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;#39;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 定期瘦身&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; config&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-local&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; alias.slim&lt;/span&gt;&lt;span class=&quot;z-l-3 z-d-6&quot;&gt; \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;  &amp;#39;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;!git reflog expire --expire=now --all &amp;amp;&amp;amp; git gc --prune=now --quiet &amp;amp;&amp;amp; git count-objects -vH&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;#39;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote&gt;
&lt;p&gt;注意：Git 没有持久化的“默认浅深度“配置项（fetch.depth 不是有效键，我查了本机 git 2.55 的配置文档确认过）。&lt;br/&gt;
所以 –depth 1 必须每次 fetch 时显式带上——这正是 git update 别名帮你固化的事，&lt;br/&gt;
别直接敲裸 &lt;code&gt;git pull&lt;/code&gt;。&lt;br/&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;hou-xu-geng-xin-yong-yuan-zhi-you-yi-fen-kuai-zhao&quot;&gt;后续更新：永远只有一份快照&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cd&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; ~/00CXX_GitRes/llvm-project&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; update&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; = fetch --depth 1 + reset --hard，等价于下面两行&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;yan-zheng-que-shi-mei-zai-zan-li-shi&quot;&gt;验证“确实没在攒历史“&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 任何时候三条命令自检：&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; rev-parse&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-is-shallow-repository&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;   #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 必须是 true&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; rev-list&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;-count&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; HEAD&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;               #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 必须恒等于 1&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; tag&lt;/span&gt;&lt;span class=&quot;z-l-9 z-d-9&quot;&gt; |&lt;/span&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt; wc&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;                         #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 必须恒等于 0&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; count-objects&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;vH&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;                   #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; size-pack 明显膨胀时跑一次 git slim&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote&gt;
&lt;p&gt;如果 is-shallow-repository 变成 false，说明中间某次更新用了不带 –depth 的命令（或镜像不支持 shallow 而返回了全量），最省事的处理是删掉重克隆一次。&lt;br/&gt;
额外网络优化（可选）：git config –global http.version HTTP/1.1 和 git config –global http.postBuffer 524288000 能缓解大包传输偶发卡死；如果你本机有代理（看到你装过 Geph），可以只给 GitHub 走代理、国内镜像直连&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1 id=&quot;dai-ma-ti-jiao-gen-zong-guan-li-gitignore&quot;&gt;代码提交跟踪管理 - .gitignore&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;忽略整个文件夹‌：logs/ 或 logs/**，匹配该目录及子目录下的所有文件。&lt;/li&gt;
&lt;li&gt;仅忽略文件夹内文件，保留文件夹本身‌：logs/*，不会忽略空目录，但会忽略其直接子文件和子目录。&lt;/li&gt;
&lt;li&gt;取消对已跟踪文件的忽略‌：.gitignore 只对未跟踪文件生效；若文件已提交，需先执行 git rm –cached &amp;lt;路径&amp;gt;，再提交删除记录&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;build/*&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;  #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt;cmake搭建的C++项目，编译文件不提交，但该空目录是编译构建路径，建议提交，可采用该写法&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;logs/**&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 日志在项目运行实时产生，无需提交到仓库中进行跟踪管理&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h1 id=&quot;add-tian-jia-dao-cang-ku&quot;&gt;add - 添加到仓库&lt;/h1&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; .&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h1 id=&quot;commit-ti-jiao&quot;&gt;commit - 提交&lt;/h1&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; commit&lt;/span&gt;&lt;span&gt; -&lt;/span&gt;&lt;span&gt;m&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt; &amp;quot;&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt;Update File md&lt;/span&gt;&lt;span class=&quot;z-l-5 z-d-4&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h1 id=&quot;push-tui-song&quot;&gt;push - 推送&lt;/h1&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; push&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; origin&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; mian&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h1 id=&quot;status-zhuang-tai&quot;&gt;status - 状态&lt;/h1&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;git&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; status&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;h1 id=&quot;e-wai-chang-jian-ming-ling&quot;&gt;额外常见命令&lt;/h1&gt;
&lt;h2 id=&quot;cloc-tong-ji-dai-ma-liang&quot;&gt;cloc - 统计代码量&lt;/h2&gt;
&lt;pre class=&quot;giallo z-l-code z-d-code&quot; &gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span class=&quot;z-l-2 z-d-5&quot;&gt;cloc&lt;/span&gt;&lt;span class=&quot;z-l-8 z-d-10&quot;&gt; .&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; #&lt;/span&gt;&lt;span class=&quot;z-l-6 z-l-i z-d-2 z-d-i&quot;&gt; 在当前目录下按文件类型进行代码量统计&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;</description>
      </item>
    </channel>
</rss>
