vuepress-theme-plume/assets/component-overrides-PAva3XJB.js

import{B as e,P as t,_ as n,f as r,g as i,h as a,l as o}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as s}from"./plugin-vue_export-helper-CxTVcLa7.js";var c=JSON.parse(`{"path":"/guide/component-overrides/","title":"组件覆写 | 指南","lang":"zh-CN","frontmatter":{"title":"组件覆写","icon":"carbon:cics-sit-overrides","createTime":"2024/06/17 16:20:15","permalink":"/guide/component-overrides/","description":"概述 布局插槽十分实用，但有时候你可能会觉得它不够灵活。主题同样提供了单个组件覆写的能力。 注意 在使用此功能前，你应该首先熟悉本主题的源代码，了解 主题内置的各个组件，以便 安全的 覆写他们。 主题的组件源代码托管在 GitHub，遵循 MIT 协议。 使用 主题将所有 非全局的组件 都注册了一个带 @theme 前缀的 alias 。 例如，VPF...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"组件覆写\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/component-overrides/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"组件覆写"}],["meta",{"property":"og:description","content":"概述 布局插槽十分实用，但有时候你可能会觉得它不够灵活。主题同样提供了单个组件覆写的能力。 注意 在使用此功能前，你应该首先熟悉本主题的源代码，了解 主题内置的各个组件，以便 安全的 覆写他们。 主题的组件源代码托管在 GitHub，遵循 MIT 协议。 使用 主题将所有 非全局的组件 都注册了一个带 @theme 前缀的 alias 。 例如，VPF..."}],["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-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/component-overrides/"}]]},"readingTime":{"minutes":0.73,"words":219},"git":{"createdTime":1718618201000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":6,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"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":"520dce22c1b037232401c4b6ddf5a90346da41a0","time":1725984193000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"style: lint fix"},{"hash":"b079a8652a38579cfee9e31db3567a365a3d4b84","time":1718618201000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"}]},"autoDesc":true,"filePathRelative":"guide/custom/component-overrides.md","headers":[],"bulletin":false}`),l={name:`component-overrides.md`},u={class:`code-block-title`,"data-title":`.vuepress/config.ts`},d={class:`code-block-title-bar`},f={class:`title`};function p(s,c,l,p,m,h){let g=e(`VPIcon`);return t(),r(`div`,null,[c[2]||=a(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>布局插槽十分实用，但有时候你可能会觉得它不够灵活。主题同样提供了单个组件覆写的能力。</p><div class="hint-container warning"><p class="hint-container-title">注意</p><p>在使用此功能前，你应该首先熟悉本主题的源代码，了解 主题内置的各个组件，以便 安全的 覆写他们。</p><p>主题的组件源代码托管在 <a href="https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/theme/src/client/components" target="_blank" rel="noopener noreferrer">GitHub</a>，遵循 MIT 协议。</p></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用"><span>使用</span></a></h2><p>主题将所有 非全局的组件 都注册了一个带 <code>@theme</code> 前缀的 <a href="https://v2.vuepress.vuejs.org/zh/reference/plugin-api.html#alias" target="_blank" rel="noopener noreferrer">alias</a> 。 例如，<code>VPFooter.vue</code> 的别名是 <code>@theme/VPFooter.vue</code> 。</p><p>如果你想要覆写 <code>VPFooter.vue</code> 组件，只需要在配置文件 <code>.vuepress/config.ts</code> 中覆盖这个别名即可：</p>`,6),o(`div`,u,[o(`div`,d,[o(`span`,f,[n(g,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[0]||=i(`.vuepress/config.ts`,-1)])]),c[1]||=a(`<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;"><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;"> defineUserConfig</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;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<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;"> plumeTheme</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;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress-theme-plume</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<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;"> getDirname</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> path</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;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress/utils</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">__dirname</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> getDirname</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">meta</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">url</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</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;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(),</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  alias</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line"><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">    &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@theme/VPFooter.vue</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">path</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">resolve</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">      __dirname</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">      &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">./components/MyFooter.vue</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:#999999;--shiki-dark:#666666;">  },</span></span>
<span class="line"><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></div>`,1)])])}var m=s(l,[[`render`,p]]);export{c as _pageData,m as default};