gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/file-tree-BIlQoRLd.js

38 lines
21 KiB
JavaScript
Raw Blame History

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":"/en/guide/markdown/file-tree/","title":"File Tree | Guide","lang":"en-US","frontmatter":{"title":"File Tree","createTime":"2025/10/08 14:41:57","icon":"mdi:file-tree","permalink":"/en/guide/markdown/file-tree/","badge":{"text":"Change","type":"warning"},"description":"Overview In Markdown, you can use the file-tree container to display directory structures with file icons and collapsible subdirectories. Syntax Within the ::: file-tree contain...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"File Tree\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-04-02T12:48:55.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/file-tree/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"File Tree"}],["meta",{"property":"og:description","content":"Overview In Markdown, you can use the file-tree container to display directory structures with file icons and collapsible subdirectories. Syntax Within the ::: file-tree contain..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["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":"zh-cn","href":"https://theme-plume.vuejs.press/guide/markdown/file-tree/"}]]},"readingTime":{"minutes":1.43,"words":430},"git":{"createdTime":1743080813000,"updatedTime":1775134135000,"contributors":[{"name":"zhenghaoyang24","username":"zhenghaoyang24","email":"95458562+zhenghaoyang24@users.noreply.github.com","commits":1,"avatar":"https://avatars.githubusercontent.com/zhenghaoyang24?v=4","url":"https://github.com/zhenghaoyang24"},{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"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":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"9f99ae3ca72b3085c6cd383a9084f42be299c400","time":1743080813000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en <code>markdown</code> doc (#538)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]}]},"autoDesc":true,"filePathRelative":"en/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="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>In Markdown, you can use the <code>file-tree</code> container to display directory structures with file icons and collapsible subdirectories.</p><h2 id="syntax" tabindex="-1"><a class="header-anchor" href="#syntax"><span>Syntax</span></a></h2><p>Within the <code>::: file-tree</code> container, use the built-in <strong>Markdown unordered list syntax</strong> to specify the organization of files and directories. Use nested list items to create subdirectories; to indicate that a directory&#39;s contents should not be displayed, simply add a slash <code>/</code> at the end of the list item.</p><p>The following syntax can be used to customize the appearance of the file tree:</p><ul><li>Emphasize file or directory names by making them bold, e.g., <code>**README.md**</code></li><li>Add comments to files or directories by appending a comment starting with <code>#</code> after the name, for example, <code>README.md This is a README file</code></li><li>Mark files or directories as <strong>added</strong> or <strong>deleted</strong> by prefixing the name with <code>++</code> or <code>--</code></li><li>Use <code>...</code> or <code>…</code> as the name to add placeholder files and directories.</li><li>Add <code>icon=&quot;simple&quot;</code> or <code>icon=&quot;colored&quot;</code> after <code>:::file-tree</code> to switch to simple icons or colored icons. The default is colored icons.</li><li>Add <code>title=&quot;xxxx&quot;</code> after <code>:::file-tree</code> to add a title to the file tree.</li></ul><p><strong>Input:</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 # A </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;">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-dark:#DBD7CAEE;"> directory</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>Output:</strong></p>`,9),s(`div`,d,[r(g,{text:`eJyVkUEOgyAQRfc9BRcoSY/QpC7bRW+ASCkVGCJo4s70DC677sE8STGKUk1smhAS5jPvMx+869pX1zZ+oQyo9ccnQmgu4qpkpmB2Voa9HXUK+iY4dutOQzg7YJVNQmi5JsfTORmUcNndmWIrBJWCabdwnkRQBrTXl0/7druQKiVFP8YWx5JUsm1QadnIWjkGlHX1L4oeEPSPQKdWyPoZ5nxp7iPGDws6Lmuj9hJojmuiZCRgLpzgGooYEv9F8Oma9weTrPZD`,encode:``,"aria-label":`Copy`,"data-copied":`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(`# A `,-1),s(`strong`,null,`theme`,-1),a(` directory`,-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="using-simple-icons" tabindex="-1"><a class="header-anchor" href="#using-simple-icons"><span>Using Simple Icons</span></a></h2><p><strong>Input:</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>Output:</strong></p>`,4),s(`div`,f,[r(g,{text:`eJzT43o0Zc6jKQ1ApJCSn1wM5DYpKCggBPXKSlMLilKLETIQcgpUPjk/Ly0zXa8EU2dBYnqqoV5uClwCpiXI1dHF1xUiAxMrSEzOBqrXyyrOzwMAG+JDzA==`,encode:``,"aria-label":`Copy`,"data-copied":`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:`configuration`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#configuration`},[s(`span`,null,`Configuration`)])],-1),l[6]||=s(`p`,null,[a(`You can configure the default icon type for file trees in the `),s(`code`,null,`markdown.fileTree`),a(` option:`)],-1),r(y,{id:`72`,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`},`Concerned about colored icons affecting build bundle size?`),s(`p`,null,[a(`You don't need to worry. The colored icons for the file tree are also resolved from `),s(`code`,null,`iconify`),a(`. We recommend installing the `),s(`code`,null,`@iconify/json`),a(` package locally in your project. The theme will automatically parse the icon data from `),s(`code`,null,`@iconify/json`),a(` into local icon resources. Even if you use the same icon multiple times across different pages (including navigation bars, sidebars, icon components, etc.), only one copy of the resource will exist for each icon!`)]),s(`p`,null,[a(`Each colored icon is approximately `),s(`code`,null,`1kb ~ 2kb`),a(` in size. Even if your file tree extensively uses 100+ different icons, the impact on the final build bundle size will not be significant.`)])],-1)])}var m=c(u,[[`render`,p]]);export{l as _pageData,m as default};
Reference in New Issue View Git Blame Copy Permalink