vuepress-theme-plume/assets/file-tree-CRah3Gii.js

import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/markdown/file-tree/","title":"文件树 | 指南","lang":"zh-CN","frontmatter":{"title":"文件树","createTime":"2024/09/30 14:41:57","icon":"mdi:file-tree","permalink":"/guide/markdown/file-tree/","badge":{"text":"变更","type":"warning"},"description":"概述 在 Markdown 中，你可以使用 file-tree 容器 来显示带有文件图标和可折叠子目录的目录结构。 语法 在 ::: file-tree 容器，使用内置的 Markdown 无序列表语法 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 / 即可。 以下语法可用于自定义文件树...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"文件树\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-04-02T12:48:55.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/file-tree/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"文件树"}],["meta",{"property":"og:description","content":"概述 在 Markdown 中，你可以使用 file-tree 容器 来显示带有文件图标和可折叠子目录的目录结构。 语法 在 ::: file-tree 容器，使用内置的 Markdown 无序列表语法 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 / 即可。 以下语法可用于自定义文件树..."}],["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":"2026-04-02T12:48:55.000Z"}],["meta",{"property":"article:modified_time","content":"2026-04-02T12:48:55.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/file-tree/"}]]},"readingTime":{"minutes":2.31,"words":694},"git":{"createdTime":1727717214000,"updatedTime":1775134135000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":7,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"39a76a35d7bf1f48c818315343a42040aeefe36b","time":1775134135000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power)!: use <code>#</code> as the comment delimiter (#870)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"d14961d038bc1a13318ce14ee9fe25a8b2c9ac99","time":1746023641000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"},{"hash":"10708c97b4143bce6ab6ef3ed65b09d00c4a3513","time":1745929497000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add diff syntax in file-tree container, close #577 (#578)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"0c53be8f10bec3e943a493111b321be89a5952cf","time":1731083728000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#332)"},{"hash":"c177fd6917e42218f71845b91dbc397972334405","time":1727717214000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#240)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/file-tree.md","headers":[],"bulletin":false}`),u={name:`file-tree.md`},d={class:`vp-file-tree`},f={class:`vp-file-tree`};function p(c,l,u,p,m,h){let g=t(`VPCopyButton`),_=t(`VPIcon`),v=t(`FileTreeNode`),y=t(`CodeTabs`);return n(),i(`div`,null,[l[3]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>在 Markdown 中，你可以使用 <code>file-tree</code> 容器 来显示带有文件图标和可折叠子目录的目录结构。</p><h2 id="语法" tabindex="-1"><a class="header-anchor" href="#语法"><span>语法</span></a></h2><p>在 <code>::: file-tree</code> 容器，使用内置的 <strong>Markdown 无序列表语法</strong> 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 <code>/</code> 即可。</p><p>以下语法可用于自定义文件树的外观：</p><ul><li>通过加粗文件名或目录名来突出显示，例如 <code>**README.md**</code></li><li>通过在名称后添加以 <code>#</code> 开头的注释来为文件或目录添加注释，例如 <code>README.md # 这是一个 README 文件</code></li><li>通过在名称前添加 <code>++</code> 或 <code>--</code> 来标记文件或目录为 <strong>新增</strong> 或 <strong>删除</strong></li><li>使用 <code>...</code> 或 <code>…</code> 作为名称来添加占位符文件和目录。</li><li>在 <code>:::file-tree</code> 后添加 <code>icon=&quot;simple&quot;</code> 或 添加 <code>icon=&quot;colored&quot;</code> 可以切换为简单图标或彩色图标，默认为彩色图标。</li><li>在 <code>:::file-tree</code> 后添加 <code>title=&quot;xxxx&quot;</code> 可以为文件树添加标题。</li></ul><div class="hint-container important"><p class="hint-container-title"><code>rc.193</code> 主题更新说明</p><p>过去 <code>file-tree</code> 使用 <strong>空格</strong> 来区分文件名和注释，这在某些情况下会导致问题，例如文件名中包含空格时。 为了解决这个问题，我们引入了 <strong># 号注释</strong> 语法，您可以在文件名后添加以 <code>#</code> 开头的注释，例如 <code>README.md # 这是一个 README 文件</code>。</p><p><strong>此修改为 <mark class="danger">破坏性更新</mark> 更新。</strong></p></div><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;">::: file-tree</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> docs</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> .vuepress</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">++</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> config.ts</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">--</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> page1.md</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> README.md</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> theme  # 一个 </span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">主题</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 目录</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> client</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> components</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">      -</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;"> **</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">Navbar.vue</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> composables</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">      -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> useNavbar.ts</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> styles</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">      -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> navbar.css</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> config.ts</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> node/</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> package.json</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> pnpm-lock.yaml</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> .gitignore</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> README.md</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><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>`,10),s(`div`,d,[r(g,{text:`eJyVkUEOgyAQRfc9BRcoSY/QpC7bRW+ASCkVGCJo4s70DC677sE8STGKUk1smhAS5jPvMx+869pX1zZ+oQyo9ccnQmgu4qpkpmB2Voa9HXUK+iY4dutOQzg7YJVNQmi5JsfTORmUcNndmWIrBJWCabdwnkRQBrTXl0/7druQKiVFP8YWx5JUsm1QadnIWjkGlHX1L4oeEPSPQKdWyPoZ5nxp7iPGDws6Lmuj9hJojmuiZCRgLpzgGooYEv9F8Oma9weTrPZD`,encode:``,"aria-label":`复制`,"data-copied":`已复制`}),r(v,{expanded:``,type:`folder`,filename:`docs`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-docs`})]),default:e(()=>[r(v,{expanded:``,type:`folder`,filename:`.vuepress`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-folder`})]),default:e(()=>[r(v,{type:`file`,diff:`add`,filename:`config.ts`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-typescript`})]),_:1})]),_:1}),r(v,{type:`file`,diff:`remove`,filename:`page1.md`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-markdown`})]),_:1}),r(v,{type:`file`,filename:`README.md`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`flat-color-icons:info`})]),_:1})]),_:1}),r(v,{expanded:``,type:`folder`,filename:`theme`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-theme`})]),comment:e(()=>[...l[0]||=[a(`# 一个 `,-1),s(`strong`,null,`主题`,-1),a(` 目录`,-1)]]),default:e(()=>[r(v,{expanded:``,type:`folder`,filename:`client`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-client`})]),default:e(()=>[r(v,{expanded:``,type:`folder`,filename:`components`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-component`})]),default:e(()=>[r(v,{focus:``,type:`file`,filename:`Navbar.vue`,level:3},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-vue`})]),_:1})]),_:1}),r(v,{expanded:``,type:`folder`,filename:`composables`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-hook`})]),default:e(()=>[r(v,{type:`file`,filename:`useNavbar.ts`,level:3},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-typescript`})]),_:1})]),_:1}),r(v,{expanded:``,type:`folder`,filename:`styles`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:folder-type-style`})]),default:e(()=>[r(v,{type:`file`,filename:`navbar.css`,level:3},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-css`})]),_:1})]),_:1}),r(v,{type:`file`,filename:`config.ts`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-typescript`})]),_:1})]),_:1}),r(v,{type:`folder`,filename:`node`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-folder`})]),default:e(()=>[r(v,{type:`file`,filename:`…`,level:2})]),_:1})]),_:1}),r(v,{type:`file`,filename:`package.json`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-node`})]),_:1}),r(v,{type:`file`,filename:`pnpm-lock.yaml`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`})]),_:1}),r(v,{type:`file`,filename:`.gitignore`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-git`})]),_:1}),r(v,{type:`file`,filename:`README.md`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`flat-color-icons:info`})]),_:1}),r(v,{type:`file`,filename:`…`,level:0})]),l[4]||=o(`<h2 id="使用简单图标" tabindex="-1"><a class="header-anchor" href="#使用简单图标"><span>使用简单图标</span></a></h2><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;">::: file-tree icon=&quot;simple&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> docs</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> .vuepress</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">    -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> config.ts</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> page1.md</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">  -</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> README.md</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> package.json</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>输出：</strong></p>`,4),s(`div`,f,[r(g,{text:`eJzT43o0Zc6jKQ1ApJCSn1wM5DYpKCggBPXKSlMLilKLETIQcgpUPjk/Ly0zXa8EU2dBYnqqoV5uClwCpiXI1dHF1xUiAxMrSEzOBqrXyyrOzwMAG+JDzA==`,encode:``,"aria-label":`复制`,"data-copied":`已复制`}),r(v,{expanded:``,type:`folder`,filename:`docs`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-folder`})]),default:e(()=>[r(v,{expanded:``,type:`folder`,filename:`.vuepress`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-folder`})]),default:e(()=>[r(v,{type:`file`,filename:`config.ts`,level:2},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-file`})]),_:1})]),_:1}),r(v,{type:`file`,filename:`page1.md`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-file`})]),_:1}),r(v,{type:`file`,filename:`README.md`,level:1},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-file`})]),_:1})]),_:1}),r(v,{type:`file`,filename:`package.json`,level:0},{icon:e(()=>[r(_,{provider:`iconify`,name:`vscode-icons:default-file`})]),_:1})]),l[5]||=s(`h2`,{id:`配置`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#配置`},[s(`span`,null,`配置`)])],-1),l[6]||=s(`p`,null,[a(`你可以在 `),s(`code`,null,`markdown.fileTree`),a(` 选项中配置 文件树的图标默认类型：`)],-1),r(y,{id:`80`,data:[{id:`.vuepress/config.ts`}]},{title0:e(({value:e,isActive:t})=>[r(_,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[1]||=s(`span`,null,`.vuepress/config.ts`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[2]||=[s(`div`,{class:`language-ts`,"data-highlighter":`shiki`,"data-ext":`ts`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-ts`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` defineUserConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`({`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},`  theme`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`plumeTheme`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`({`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},`    markdown`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: {`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},`      fileTree`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: {`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},`        icon`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`simple`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`, `),s(`span`,{style:{"--shiki-light":`#A0ADA0`,"--shiki-dark":`#758575DD`}},`// 'simple' | 'colored'`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`      }`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`    },`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`  })`)]),a(`
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`})`)])])])],-1)]]),_:1}),l[7]||=s(`div`,{class:`hint-container tip`},[s(`p`,{class:`hint-container-title`},`担心彩色图标会影响构建包体积？`),s(`p`,null,[a(`您无需担心，文件树的彩色图标 也是从 `),s(`code`,null,`iconify`),a(` 解析获取，推荐您在本地安装 `),s(`code`,null,`@iconify/json`),a(` 项目， 主题会自动将 `),s(`code`,null,`@iconify/json`),a(` 中的图标数据解析为本地图标资源，即使您在不同的页面 多次使用，这包括了 导航栏、侧边栏、图标组件等，相同图标仅会存在一份资源！`)]),s(`p`,null,[a(`每个彩色图标的大小约在 `),s(`code`,null,`1kb ~ 2kb`),a(` 之间，即使您的文件树非常夸张的使用了 100+ 不同的图标，对最终的构建包体积影响 也不会很大。`)])],-1)])}var m=c(u,[[`render`,p]]);export{l as _pageData,m as default};