mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
41 lines
26 KiB
JavaScript
41 lines
26 KiB
JavaScript
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/layout-slots/","title":"布局插槽 | 指南","lang":"zh-CN","frontmatter":{"title":"布局插槽","icon":"ph:layout-duotone","createTime":"2024/06/17 16:19:43","permalink":"/guide/layout-slots/","description":"概述 主题通过 <Layout /> 和 <NotFound /> 提供了 丰富的 布局插槽，可以通过这些插槽，在 页面 的不同位置注入内容。 以便用户可以个性化的使用主题。 使用 以 <Layout /> 为例，首先，需要创建一个 客户端配置文件： .vuepress/client.ts: .vuepress/cl...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"布局插槽\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-11-19T08:51:49.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/layout-slots/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"布局插槽"}],["meta",{"property":"og:description","content":"概述 主题通过 <Layout /> 和 <NotFound /> 提供了 丰富的 布局插槽，可以通过这些插槽，在 页面 的不同位置注入内容。 以便用户可以个性化的使用主题。 使用 以 <Layout /> 为例，首先，需要创建一个 客户端配置文件： .vuepress/client.ts: .vuepress/cl..."}],["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-11-19T08:51:49.000Z"}],["meta",{"property":"article:modified_time","content":"2025-11-19T08:51:49.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/layout-slots/"}]]},"readingTime":{"minutes":1.96,"words":589},"git":{"createdTime":1718618201000,"updatedTime":1763542309000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":16,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"20728f504d2ddba55e4bcca2f7a1b6793fa9ba04","time":1763542309000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add <code>plugin-llms</code> and <code><PageContextMenu /></code> component (#753)"},{"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":"9196d622212eda260ed73f5fd732d85a08135ff7","time":1745168164000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update layout slots doc"},{"hash":"0bceda590c78cd0727d63298eb77f936f4c3fe15","time":1745033997000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add layout slots (#558)"},{"hash":"97f046015c236bd37c9ffa49456a0e177b07c5b2","time":1744627886000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add <code>doc-meta-before</code> and <code>doc-meta-after</code> slots (#554)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"6e6f9af12cfa52770de67ee966bd15b37c3256dc","time":1740886005000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#509)"},{"hash":"597a199776e0bedf1217cf94f96f0dbed288a5cb","time":1732917565000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"style: lint fix"},{"hash":"0c53be8f10bec3e943a493111b321be89a5952cf","time":1731083728000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#332)"}]},"autoDesc":true,"filePathRelative":"guide/custom/slots.md","headers":[],"bulletin":false}`),u={name:`slots.md`},d={class:`code-block-title`,"data-title":`.vuepress/client.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`code-block-title`,"data-title":`.vuepress/layouts/Layout.vue`},h={class:`code-block-title-bar`},g={class:`title`};function _(c,l,u,_,v,y){let b=t(`VPIcon`),x=t(`CodeTabs`);return n(),i(`div`,null,[l[8]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>主题通过 <code><Layout /></code> 和 <code><NotFound /></code> 提供了 丰富的 布局插槽，可以通过这些插槽，在 页面 的不同位置注入内容。 以便用户可以个性化的使用主题。</p><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用"><span>使用</span></a></h2><p>以 <code><Layout /></code> 为例，首先，需要创建一个 客户端配置文件： <code>.vuepress/client.ts</code>:</p>`,4),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(b,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/client.ts`,-1)])]),l[1]||=o(`<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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> Layout</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">./layouts/Layout.vue</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> layouts</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> Layout</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:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[9]||=o(`<div class="hint-container info"><p class="hint-container-title">相关信息</p><p><code>layouts</code> 中的 <code>Layout</code> 名是固定的，这是 js 的简写语法， 实际上为 <code>Layout: Layout</code>，它是实现 布局插槽的关键。 <code>NotFound</code> 也是相同的规则。</p><p>你传入的其它非 <code>Layout</code> / <code>NotFound</code> 的组件，被认为是自定义布局组件。</p></div><p>然后，创建一个 <code>.vuepress/layouts/Layout.vue</code>，作为布局插槽的默认组件，在该组件中引入 当前主题的 <code><Layout /></code> 组件。</p>`,2),s(`div`,m,[s(`div`,h,[s(`span`,g,[r(b,{provider:`iconify`,name:`vscode-icons:file-type-vue`}),l[2]||=a(`.vuepress/layouts/Layout.vue`,-1)])]),l[3]||=o(`<div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-highlighted vp-code"><code class="language-vue"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> Layout</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress-theme-plume/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Layout</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">page-bottom</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">custom-content</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 自定义内容</span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line highlighted"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Layout</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">custom-content</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 100</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</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:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></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></div>`,1)]),l[10]||=s(`p`,null,[a(`也可以使用 渲染函数 实现注入内容，在 `),s(`code`,null,`.vuepress/client.ts`),a(` 中：`)],-1),r(x,{id:`28`,data:[{id:`.vuepress/client.ts`},{id:`.vuepress/components/CustomContent.vue`}]},{title0:e(({value:e,isActive:t})=>[r(b,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[4]||=s(`span`,null,`.vuepress/client.ts`,-1)]),title1:e(({value:e,isActive:t})=>[r(b,{provider:`iconify`,name:`vscode-icons:file-type-vue`}),l[5]||=s(`span`,null,`.vuepress/components/CustomContent.vue`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[6]||=[s(`div`,{class:`language-ts line-numbers-mode`,"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`}},`import`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` h`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vue`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` Layout`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vuepress-theme-plume/client`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` defineClientConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vuepress/client`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` CustomContent`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`./components/CustomContent.vue`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),a(`
|
|
`),s(`span`,{class:`line`}),a(`
|
|
`),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`}},` defineClientConfig`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`({`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` layouts`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: {`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` Layout`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: () => `),s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`h`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`Layout`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`, `),s(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`null`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`, {`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`page-bottom`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: () => `),s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`h`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`CustomContent`),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`}},`})`)])])]),s(`div`,{class:`line-numbers`,"aria-hidden":`true`,style:{"counter-reset":`line-number 0`}},[s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`}),s(`div`,{class:`line-number`})])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[7]||=[s(`div`,{class:`language-vue`,"data-highlighter":`shiki`,"data-ext":`vue`,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-vue`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`template`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),s(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),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`}},`custom-content`),s(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` Custom Content`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` </`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),a(`
|
|
`),s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`</`),s(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`template`),s(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)])])])],-1)]]),_:1}),l[11]||=o(`<h2 id="插槽" tabindex="-1"><a class="header-anchor" href="#插槽"><span>插槽</span></a></h2><div class="hint-container info"><p class="hint-container-title">相关信息</p><p>您可以预览 <a href="https://plume-layout-slots.netlify.app" target="_blank" rel="noopener noreferrer">https://plume-layout-slots.netlify.app</a> 以查看所有可用的插槽在站点中的位置。</p></div><h3 id="layout-插槽" tabindex="-1"><a class="header-anchor" href="#layout-插槽"><span><code><Layout /></code> 插槽</span></a></h3><ul><li><p>当 <code>pageLayout: doc</code> 时：</p><ul><li><code>doc-top</code></li><li><code>doc-bottom</code></li><li><code>doc-content-before</code></li><li><code>doc-footer-before</code></li><li><code>doc-before</code></li><li><code>doc-after</code></li><li><code>doc-title-before</code></li><li><code>doc-title-after</code></li><li><code>doc-meta-top</code></li><li><code>doc-meta-bottom</code></li><li><code>doc-meta-before</code></li><li><code>doc-meta-after</code></li><li><code>sidebar-nav-before</code></li><li><code>sidebar-nav-after</code></li><li><code>aside-top</code></li><li><code>aside-bottom</code></li><li><code>aside-outline-before</code></li><li><code>aside-outline-after</code></li></ul></li><li><p>当 <code>pageLayout: page</code> 时：</p><ul><li><code>page-top</code></li><li><code>page-bottom</code></li></ul></li><li><p>在 post 集合相关页面 中 （包括 文章列表页、标签页、归档页 均适用）：</p><ul><li><code>posts-top</code></li><li><code>posts-bottom</code></li><li><code>posts-aside-top</code></li><li><code>posts-aside-bottom</code></li><li><code>posts-extract-before</code></li><li><code>posts-extract-after</code></li></ul></li><li><p>在 文章列表页 中：</p><ul><li><code>posts-post-list-before</code></li><li><code>posts-post-list-after</code></li><li><code>posts-post-list-pagination-after</code></li></ul></li><li><p>在 标签页 中：</p><ul><li><code>posts-tags-before</code></li><li><code>posts-tags-title-after</code></li><li><code>posts-tags-content-before</code></li><li><code>posts-tags-after</code></li></ul></li><li><p>在 归档页 中：</p><ul><li><code>posts-archives-before</code></li><li><code>posts-archives-after</code></li></ul></li><li><p>在 分类页 中：</p><ul><li><code>posts-categories-before</code></li><li><code>posts-categories-content-before</code></li><li><code>posts-categories-after</code></li></ul></li></ul><h3 id="notfound-插槽" tabindex="-1"><a class="header-anchor" href="#notfound-插槽"><span><code><NotFound /></code> 插槽</span></a></h3><ul><li><code>not-found</code></li></ul><h3 id="通用插槽" tabindex="-1"><a class="header-anchor" href="#通用插槽"><span>通用插槽</span></a></h3><p>以下插槽在 <code><Layout /></code> 和 <code><NotFound /></code> 中都支持：</p><ul><li><code>layout-top</code></li><li><code>layout-bottom</code></li><li><code>nav-bar-title-before</code></li><li><code>nav-bar-title-after</code></li><li><code>nav-bar-content-before</code></li><li><code>nav-bar-content-after</code></li><li><code>nav-bar-menu-before</code></li><li><code>nav-bar-menu-after</code></li><li><code>nav-screen-content-before</code></li><li><code>nav-screen-content-after</code></li><li><code>nav-screen-menu-before</code></li><li><code>nav-screen-menu-after</code></li><li><code>footer-content</code></li><li><code>bulletin-content</code></li></ul>`,9)])}var v=c(u,[[`render`,_]]);export{l as _pageData,v as default}; |