vuepress-theme-plume/assets/container-Bl1AMsmF.js

31 lines
10 KiB
JavaScript

import{P as e,f as t,h as n}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as r}from"./plugin-vue_export-helper-CxTVcLa7.js";var i=JSON.parse(`{"path":"/guide/markdown/container/","title":"提示容器 | 指南","lang":"zh-CN","frontmatter":{"title":"提示容器","icon":"mdi:message-text-outline","createTime":"2025/11/29 14:42:46","permalink":"/guide/markdown/container/","description":"提示容器能够帮助你在文档中突出显示重要信息,让内容层次更加清晰。 提示容器通过类型、标题和内容来定义不同的信息展示样式。 默认标题样式 输入示例: 实际效果: 注 这是一个注释框 相关信息 这是一个信息框 提示 这是一个提示框 注意 这是一个警告框 警告 这是一个危险警告框 详情 这是一个详情折叠框 自定义标题设置 通过在容器类型后添加文本,可以轻松设...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"提示容器\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-12-01T03:30:33.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/container/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"提示容器"}],["meta",{"property":"og:description","content":"提示容器能够帮助你在文档中突出显示重要信息,让内容层次更加清晰。 提示容器通过类型、标题和内容来定义不同的信息展示样式。 默认标题样式 输入示例: 实际效果: 注 这是一个注释框 相关信息 这是一个信息框 提示 这是一个提示框 注意 这是一个警告框 警告 这是一个危险警告框 详情 这是一个详情折叠框 自定义标题设置 通过在容器类型后添加文本,可以轻松设..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-12-01T03:30:33.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-01T03:30:33.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/container/"}]]},"readingTime":{"minutes":0.91,"words":274},"git":{"createdTime":1764559833000,"updatedTime":1764559833000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"db8a46eb4cdc6c4bcb15f0e38a5aacfef565975a","time":1764559833000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: optimize and completion docs (#766)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/container.md","headers":[],"bulletin":false}`),a={name:`container.md`};function o(r,i,a,o,s,c){return e(),t(`div`,null,[...i[0]||=[n(`<div class="hint-container tip"><p class="hint-container-title">提示容器能够帮助你在文档中突出显示重要信息,让内容层次更加清晰。</p></div><p>提示容器通过类型、标题和内容来定义不同的信息展示样式。</p><h2 id="默认标题样式" tabindex="-1"><a class="header-anchor" href="#默认标题样式"><span>默认标题样式</span></a></h2><p><strong>输入示例:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: note</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个注释框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: info</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个信息框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: tip</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个提示框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: warning</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个警告框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: caution</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个危险警告框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: details</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这是一个详情折叠框</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>实际效果:</strong></p><div class="hint-container note"><p class="hint-container-title">注</p><p>这是一个注释框</p></div><div class="hint-container info"><p class="hint-container-title">相关信息</p><p>这是一个信息框</p></div><div class="hint-container tip"><p class="hint-container-title">提示</p><p>这是一个提示框</p></div><div class="hint-container warning"><p class="hint-container-title">注意</p><p>这是一个警告框</p></div><div class="hint-container caution"><p class="hint-container-title">警告</p><p>这是一个危险警告框</p></div><details class="hint-container details"><summary>详情</summary><p>这是一个详情折叠框</p></details><h2 id="自定义标题设置" tabindex="-1"><a class="header-anchor" href="#自定义标题设置"><span>自定义标题设置</span></a></h2><p>通过在容器类型后添加文本,可以轻松设置自定义标题。</p><p><strong>输入示例:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: caution STOP</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">危险区域,请勿继续</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: details 点我查看代码</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello, VitePress!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>实际效果:</strong></p><div class="hint-container caution"><p class="hint-container-title">STOP</p><p>危险区域,请勿继续</p></div><details class="hint-container details"><summary>点我查看代码</summary><div class="language-js" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello, VuePress Plume!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div></details>`,19)]])}var s=r(a,[[`render`,o]]);export{i as _pageData,s as default};