<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Shortcodes on 我的文档站</title><link>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/</link><description>Recent content in Shortcodes on 我的文档站</description><generator>Hugo</generator><language>zh-CN</language><copyright>Copyright (c) 2020-2026 Thulite</copyright><lastBuildDate>Thu, 07 Sep 2023 16:12:03 +0200</lastBuildDate><atom:link href="https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/index.xml" rel="self" type="application/rss+xml"/><item><title>Callouts 提示框</title><link>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/callouts-%E6%8F%90%E7%A4%BA%E6%A1%86/</link><pubDate>Thu, 07 Sep 2023 16:12:03 +0200</pubDate><guid>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/callouts-%E6%8F%90%E7%A4%BA%E6%A1%86/</guid><description>&lt;p&gt;Callouts（提示框）是 Doks 提供的一种特殊的内容块，用于突出显示重要信息、警告、提示或其他需要引起读者注意的内容。通过使用 Callouts，你可以更有效地传达关键信息，增强文档的可读性和用户体验。&lt;/p&gt;
&lt;h2 id="callouts-的使用方法"&gt;Callouts 的使用方法&lt;/h2&gt;
&lt;p&gt;在 Doks 中，你可以使用以下语法来创建 Callouts：&lt;/p&gt;



&lt;div class="expressive-code"&gt;
 &lt;figure class="frame not-content"&gt;
 &lt;figcaption class="header"&gt;
 &lt;span class="title"&gt;&lt;/span&gt;
 &lt;/figcaption&gt;
 &lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;span class="lnt"&gt;2
&lt;/span&gt;&lt;span class="lnt"&gt;3
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; callout context=&amp;#34;note&amp;#34; title=&amp;#34;Note&amp;#34; icon=&amp;#34;outline/notebook&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;这是一个普通信息框。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; /callout &amp;gt;}}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
 &lt;/figure&gt;
&lt;/div&gt;
&lt;div class="callout callout-note d-flex flex-row mt-4 mb-4 pt-4 pe-4 pb-2 ps-3"&gt;
 &lt;svg
 xmlns="http://www.w3.org/2000/svg"
 width="24"
 height="24"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 
 class="outline/notebook svg-inline callout-icon me-2 mb-3" id="svg-notebook" role="img"&gt;
 &lt;path stroke="none" d="M0 0h24v24H0z" fill="none" /&gt;
 &lt;path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" /&gt;
 &lt;path d="M13 8l2 0" /&gt;
 &lt;path d="M13 12l2 0" /&gt;
&lt;/svg&gt;
 &lt;div class="callout-content"&gt;
 &lt;div class="callout-title"&gt;
 &lt;p&gt;Note&lt;/p&gt;</description></item><item><title>Details 折叠内容块</title><link>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/details-%E6%8A%98%E5%8F%A0%E5%86%85%E5%AE%B9%E5%9D%97/</link><pubDate>Thu, 07 Sep 2023 16:12:03 +0200</pubDate><guid>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/details-%E6%8A%98%E5%8F%A0%E5%86%85%E5%AE%B9%E5%9D%97/</guid><description>&lt;h3 id="details折叠内容块是-doks-提供的一种特殊的内容块用于组织和展示大量信息或次要内容通过使用-details你可以让读者根据需要展开或折叠内容从而提升文档的可读性和用户体验"&gt;details（折叠内容块）是 Doks 提供的一种特殊的内容块，用于组织和展示大量信息或次要内容。通过使用 details，你可以让读者根据需要展开或折叠内容，从而提升文档的可读性和用户体验。&lt;/h3&gt;
&lt;p&gt;你可以在 Markdown 中使用 

&lt;a class="link link--text" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" rel="external"&gt;details HTML element&lt;/a&gt; 并通过 &lt;code&gt;{{&amp;lt; details &amp;gt;}}&lt;/code&gt; shortcode 来创建。&lt;/p&gt;



&lt;div class="expressive-code"&gt;
 &lt;figure class="frame not-content"&gt;
 &lt;figcaption class="header"&gt;
 &lt;span class="title"&gt;&lt;/span&gt;
 &lt;/figcaption&gt;
 &lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;span class="lnt"&gt;2
&lt;/span&gt;&lt;span class="lnt"&gt;3
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-md" data-lang="md"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; details &amp;#34;折叠内容块&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;这是一个折叠内容块。点击标题可以展开或折叠内容。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; /details &amp;gt;}}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
 &lt;/figure&gt;
&lt;/div&gt;
&lt;details&gt;
 &lt;summary&gt;折叠内容块&lt;/summary&gt;
 这是一个折叠内容块。点击标题可以展开或折叠内容。&lt;/details&gt;
&lt;h4 id="默认状态"&gt;默认状态&lt;/h4&gt;
&lt;p&gt;默认情况下，details 内容块是折叠状态的，用户需要点击标题才能展开内容。
你可以在 details shortcode 中添加 &lt;code&gt;open&lt;/code&gt; 属性来设置默认展开状态。&lt;/p&gt;</description></item><item><title>Tabs 标签页</title><link>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/tabs-%E6%A0%87%E7%AD%BE%E9%A1%B5/</link><pubDate>Thu, 07 Sep 2023 16:12:03 +0200</pubDate><guid>https://www.eternal.foo/docs/hugo/themes/doks/basics/shortcodes/tabs-%E6%A0%87%E7%AD%BE%E9%A1%B5/</guid><description>&lt;p&gt;Tabs（标签页）是 Doks 提供的一种特殊的内容块，用于组织和展示相关内容。通过使用 Tabs，你可以将内容分成多个标签页，用户可以点击不同的标签来切换显示不同的内容，从而提升文档的可读性和用户体验。&lt;/p&gt;
&lt;div class="callout callout-tip d-flex flex-row mt-4 mb-4 pt-4 pe-4 pb-2 ps-3"&gt;
 &lt;svg
 xmlns="http://www.w3.org/2000/svg"
 width="24"
 height="24"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 
 class="outline/image-generation svg-inline callout-icon me-2 mb-3" id="svg-image-generation" role="img"&gt;
 &lt;path stroke="none" d="M0 0h24v24H0z" fill="none" /&gt;
 &lt;path d="M3 21v-4a4 4 0 1 1 4 4h-4" /&gt;
 &lt;path d="M21 3a16 16 0 0 0 -12.8 10.2" /&gt;
 &lt;path d="M21 3a16 16 0 0 1 -10.2 12.8" /&gt;
 &lt;path d="M10.6 9a9 9 0 0 1 4.4 4.4" /&gt;
 &lt;path d="M17 19a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2" /&gt;
 &lt;path d="M3 5a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2" /&gt;
&lt;/svg&gt;
 &lt;div class="callout-content"&gt;
 &lt;div class="callout-title"&gt;
 &lt;p&gt;Tip&lt;/p&gt;</description></item></channel></rss>