gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-26 11:38:15 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/guide/custom-home/index.html

360 lines
223 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="generator" content="VuePress 2.0.0-rc.28" /><meta name="theme" content="VuePress Theme Plume 1.0.0-rc.196" /><script id="check-mac-os">document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))</script><script id="check-dark-mode">;(function () {const um= localStorage.getItem('vuepress-theme-appearance') || 'auto';const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = um === 'dark' || (um !== 'light' && sm);document.documentElement.dataset.theme = isDark ? 'dark' : 'light';})();</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"自定义首页","image":["https://theme-plume.vuejs.press/images/custom-banner.jpg"],"dateModified":"2026-02-25T13:48:39.000Z","author":[]}</script><meta property="og:url" content="https://theme-plume.vuejs.press/guide/custom-home/"><meta property="og:site_name" content="Plume 主题"><meta property="og:title" content="自定义首页"><meta property="og:description" content="概述 主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。 主题通过 frontmatter 来定义你的首页。在 sourceDir 的 README.md 文件中，编写 frontmatter。 README.md 主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。 通过..."><meta property="og:type" content="article"><meta property="og:image" content="https://theme-plume.vuejs.press/images/custom-banner.jpg"><meta property="og:locale" content="zh-CN"><meta property="og:locale:alternate" content="en-US"><meta property="og:updated_time" content="2026-02-25T13:48:39.000Z"><meta property="article:modified_time" content="2026-02-25T13:48:39.000Z"><link rel="alternate" hreflang="en-us" href="https://theme-plume.vuejs.press/en/guide/custom-home/"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><meta name="google-site-verification" content="AaTP7bapCAcoO9ZGE67ilpy99GL6tYqtD30tRHjO9Ps"><title>自定义首页 | 指南 | Plume 主题</title><meta name="description" content="概述 主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。 主题通过 frontmatter 来定义你的首页。在 sourceDir 的 README.md 文件中，编写 frontmatter。 README.md 主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。 通过..."><link rel="preload" href="/assets/style-BWa8vtF2.css" as="style"><link rel="stylesheet" href="/assets/style-BWa8vtF2.css"><link rel="modulepreload" href="/assets/app-BD-J4YiG.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper-CxTVcLa7.js"><link rel="modulepreload" href="/assets/chunk-DseTPa7n.js"><link rel="modulepreload" href="/assets/preload-helper-ca-nBW7U.js"><link rel="modulepreload" href="/assets/composables-Cos0mzHz.js"><link rel="modulepreload" href="/assets/VPHomeHero-BOyUwtEx.js"><link rel="modulepreload" href="/assets/composables-DZZu5bwD.js"><link rel="modulepreload" href="/assets/client-67ooR6Xb.js"><link rel="modulepreload" href="/assets/theme-colors-bZHGy5AR.js"><link rel="modulepreload" href="/assets/VPButton-CzyedWjg.js"><link rel="modulepreload" href="/assets/runtime-core.esm-bundler-CZvn3YaB.js"><link rel="modulepreload" href="/assets/runtime-dom.esm-bundler-DTRCDnrc.js"><link rel="modulepreload" href="/assets/dist-CMy7OcvW.js"><link rel="modulepreload" href="/assets/codeRepl-BV_0qCs3.js"><link rel="modulepreload" href="/assets/VPCopyright-DF9Z-yBw.js"><link rel="modulepreload" href="/assets/home-Bm8xngBk.js"><link rel="modulepreload" href="/assets/custom-content-CVyzDzNJ.js"></head><body><div id="app"><!--[--><!--[--><div class="theme-plume vp-layout" vp-container data-v-a5aadcf6><!--[--><!--[--><!--]--><!--[--><span tabindex="-1" data-v-26bc9d93></span><a href="#VPContent" class="vp-skip-link visually-hidden" data-v-26bc9d93> Skip to content </a><!--]--><!----><header class="vp-nav" data-v-a5aadcf6 data-v-f81e37e9><div class="vp-navbar" vp-navbar data-v-f81e37e9 data-v-b90976a4><div class="wrapper" data-v-b90976a4><div class="container" data-v-b90976a4><div class="title" data-v-b90976a4><div class="vp-navbar-title has-sidebar" data-v-b90976a4 data-v-f77fe1b1><a class="vp-link link no-icon title" href="/" data-v-f77fe1b1><!--[--><!--[--><!--]--><!--[--><!--[--><!--[--><img class="vp-image dark logo" style="" src="/plume.png" alt data-v-414baac9><!--]--><!--[--><img class="vp-image light logo" style="" src="/plume.png" alt data-v-414baac9><!--]--><!--]--><!--]--><span data-v-f77fe1b1>Plume 主题</span><!--[--><!--]--><!--]--><!--[--><!--]--><!----></a></div></div><div class="content" data-v-b90976a4><div class="content-body" data-v-b90976a4><!--[--><!--]--><div class="vp-navbar-search search" data-v-b90976a4><div class="search-wrapper" data-v-62419745><!----><div id="local-search" data-v-62419745><button type="button" class="mini-search mini-search-button" aria-label="搜索文档" data-v-62419745><span class="mini-search-button-container"><span class="mini-search-search-icon vpi-mini-search" aria-label="search icon"></span><span class="mini-search-button-placeholder">搜索文档</span></span><span class="mini-search-button-keys"><kbd class="mini-search-button-key"></kbd><kbd class="mini-search-button-key">K</kbd></span></button></div></div></div><!--[--><!--]--><nav aria-labelledby="main-nav-aria-label" class="vp-navbar-menu menu" data-v-b90976a4 data-v-b42927e7><span id="main-nav-aria-label" class="visually-hidden" data-v-b42927e7>Main Navigation</span><!--[--><!--[--><a class="vp-link link navbar-menu-link active" href="/guide/intro/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-icon-park-outline-guide-board" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>指南</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/config/intro/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-icon-park-outline-setting-two" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>配置</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/blog/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-material-symbols-article-outline" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>博客</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/demos/" tabindex="0" data-v-b42927e7 data-v-29cf8989><!--[--><span class="vp-icon vpi-map-wind-surfing" style="" aria-hidden data-provider="iconify" data-v-29cf8989></span><span data-v-29cf8989>案例</span><!----><!--]--><!--[--><!--]--><!----></a><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-b42927e7 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-15bfbb59><span class="text" data-v-15bfbb59><span class="vp-icon vpi-icon-park-outline-more-three" style="" aria-hidden data-provider="iconify" data-v-15bfbb59></span><!----><span data-v-15bfbb59>更多</span><!----><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><div class="items" data-v-f3964f32><!--[--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/faq/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-wpf-faq" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 常见问题 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/sponsor/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-line-md-coffee-loop" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 喝杯奶茶 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/tools/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-jam-tools" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 主题工具 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/friends/" data-v-e06ddb34><!--[--><span class="vp-icon vpi-carbon-friendship" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 友情链接 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-group" data-v-f3964f32 data-v-6c770283><p class="title" data-v-6c770283><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-6c770283></span><span data-v-6c770283>Vuepress</span></p><!--[--><!--[--><div class="vp-menu-link" data-v-6c770283 data-v-e06ddb34><a class="vp-link link vp-external-link-icon" href="https://v2.vuepress.vuejs.org" target="_blank" rel="noopener noreferrer" data-v-e06ddb34><!--[--><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 官方文档 <!----><!--]--><!--[--><!--]--><span class="visually-hidden">（在新窗口打开）</span></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-6c770283 data-v-e06ddb34><a class="vp-link link vp-external-link-icon" href="https://ecosystem.vuejs.press/" target="_blank" rel="noopener noreferrer" data-v-e06ddb34><!--[--><span class="vp-icon vpi-logos-vue bg" style="" aria-hidden data-provider="iconify" data-v-e06ddb34></span> 生态系统 <!----><!--]--><!--[--><!--]--><span class="visually-hidden">（在新窗口打开）</span></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-b42927e7 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-15bfbb59><span class="text" data-v-15bfbb59><span class="vp-icon vpi-codicon-versions" style="" aria-hidden data-provider="iconify" data-v-15bfbb59></span><!----><span data-v-15bfbb59>1.0.0-rc.196</span><span class="vp-badge tip vp-menu-badge" style="" data-v-15bfbb59 data-v-52c8341f><!--[-->新<!--]--></span><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><div class="items" data-v-f3964f32><!--[--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/changelog/" data-v-e06ddb34><!--[--><!----> 更新日志 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-f3964f32 data-v-e06ddb34><a class="vp-link link" href="/contributing/" data-v-e06ddb34><!--[--><!----> 参与贡献 <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!--[--><!--]--><div class="vp-flyout vp-navbar-translations translations" data-v-b90976a4 data-v-e0a18246 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="选择语言" data-v-15bfbb59><span class="text" data-v-15bfbb59><!----><span class="vpi-languages option-icon" data-v-15bfbb59></span><!----><!----><span class="vpi-chevron-down text-icon" data-v-15bfbb59></span></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><!----><!--[--><!--[--><div class="items" data-v-e0a18246><p class="title" data-v-e0a18246>简体中文</p><!--[--><div class="vp-menu-link" data-v-e0a18246 data-v-e06ddb34><a class="vp-link link" href="/en/guide/custom-home/" data-v-e06ddb34><!--[--><!----> English <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="vp-navbar-appearance appearance" data-v-b90976a4 data-v-17780d44><button class="vp-switch vp-switch-appearance" type="button" role="switch" aria-checked="false" title data-v-17780d44 data-v-cbe77d87 data-v-36bbbf22><span class="check" data-v-36bbbf22><span class="icon" data-v-36bbbf22><!--[--><span class="vpi-sun sun" data-v-cbe77d87></span><span class="vpi-moon moon" data-v-cbe77d87></span><!--]--></span></span></button></div><div class="vp-social-links vp-navbar-social-links social-links" data-v-b90976a4 data-v-ba70645a data-v-5dc0805d><!--[--><a class="vp-social-link no-icon" href="https://github.com/pengzhanbo/vuepress-theme-plume" aria-label="github" title="github" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-github" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><a class="vp-social-link no-icon" href="https://qm.qq.com/q/FbPPoOIscE" aria-label="qq" title="qq" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-qq" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><!--]--></div><div class="vp-flyout vp-navbar-extra extra" data-v-b90976a4 data-v-7e94ae84 data-v-15bfbb59><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-15bfbb59><span class="vpi-more-horizontal icon" data-v-15bfbb59></span></button><div class="menu" data-v-15bfbb59><div class="vp-menu" data-v-15bfbb59 data-v-f3964f32><!----><!--[--><!--[--><div class="group translations" data-v-7e94ae84><p class="trans-title" data-v-7e94ae84>简体中文</p><!--[--><div class="vp-menu-link" data-v-7e94ae84 data-v-e06ddb34><a class="vp-link link" href="/en/guide/custom-home/" data-v-e06ddb34><!--[--><!----> English <!----><!--]--><!--[--><!--]--><!----></a></div><!--]--></div><div class="group appearance" data-v-7e94ae84><div class="item appearance" data-v-7e94ae84><p class="label" data-v-7e94ae84>外观</p><div class="appearance-action" data-v-7e94ae84><button class="vp-switch vp-switch-appearance" type="button" role="switch" aria-checked="false" title data-v-7e94ae84 data-v-cbe77d87 data-v-36bbbf22><span class="check" data-v-36bbbf22><span class="icon" data-v-36bbbf22><!--[--><span class="vpi-sun sun" data-v-cbe77d87></span><span class="vpi-moon moon" data-v-cbe77d87></span><!--]--></span></span></button></div></div></div><div class="group social" data-v-7e94ae84><div class="item social-links" data-v-7e94ae84><div class="vp-social-links social-links-list" data-v-7e94ae84 data-v-5dc0805d><!--[--><a class="vp-social-link no-icon" href="https://github.com/pengzhanbo/vuepress-theme-plume" aria-label="github" title="github" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-github" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><a class="vp-social-link no-icon" href="https://qm.qq.com/q/FbPPoOIscE" aria-label="qq" title="qq" target="_blank" rel="noopener" data-v-5dc0805d data-v-c5bc2a09><span class="vp-icon vpi-simple-icons-qq" style="" aria-hidden data-provider="iconify" data-v-c5bc2a09></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="vp-navbar-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="nav-screen" data-v-b90976a4 data-v-2122c19e><span class="container" data-v-2122c19e><span class="top" data-v-2122c19e></span><span class="middle" data-v-2122c19e></span><span class="bottom" data-v-2122c19e></span></span></button></div></div></div></div><div class="divider" data-v-b90976a4><div class="divider-line" data-v-b90976a4></div></div></div><!----></header><div class="vp-local-nav reached-top has-sidebar" data-v-a5aadcf6 data-v-5171e520><button class="menu" aria-expanded="false" aria-controls="SidebarNav" data-v-5171e520><span class="vpi-align-left menu-icon" data-v-5171e520></span><span class="menu-text" data-v-5171e520>Menu</span></button><div class="vp-local-nav-outline-dropdown" style="--vp-vh:0px;" data-v-5171e520 data-v-d5044118><!----><!----></div></div><!--[--><aside class="vp-sidebar" vp-sidebar data-v-28af193e><div class="curtain" data-v-28af193e></div><nav id="SidebarNav" class="nav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-28af193e><span id="sidebar-aria-label" class="visually-hidden" data-v-28af193e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-idea" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>从这里开始</span><!----></h2><button type="button" class="caret" aria-label="Collapse 从这里开始" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-tooltip-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/intro/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>主题介绍</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-install" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/usage/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>安装与使用</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-tree-structure-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/project-structure/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>项目结构</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><section class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-list-bar-tree-16-regular" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/" data-v-ab4803a9><!--[--><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>集合</span><!----></h3><!--]--><!--[--><!--]--><!----></a><!----></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-post-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/post/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>post 集合</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-ultimate-sidebar-line-left" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/collection/doc/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>doc 集合</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-sidebar-duotone" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/sidebar/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>侧边栏</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-edit-4-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/write/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>编写文章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-markdown-outline-rounded" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/auto-frontmatter/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>frontmatter</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-language" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/locales/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>国际化</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-deployed-code-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/deployment/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>部署</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-clarity-bundle-solid" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/optimize-build/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>构建优化</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-mdl2-edit-create" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>写作</span><!----></h2><button type="button" class="caret" aria-label="Collapse 写作" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-markdown-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>markdown</span><!----></h3><button type="button" class="caret" aria-label="Expand markdown" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-markdown-20-filled" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/basic/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>基础</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-mdl2-auto-enhance-on" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/extensions/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>扩展</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ic-outline-data-object" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/attrs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>属性支持</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-emoji-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/emoji/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>emoji</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-math" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/math/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>数学公式</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-table-plus" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/table/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>table 增强</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-emoji" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-mark-pen-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/mark/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>马克笔</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-weui-eyes-off-outlined" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/plot/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>隐秘文本</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-tooltip-question-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/abbreviation/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>缩写词</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-iconamoon-comment-add-light" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/annotation/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>内容注释</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-message-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/container/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>提示容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-alert-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/github-alerts/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Github 警报</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-broken" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-steps-number" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/steps/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>步骤</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-file-tree" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/file-tree/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文件树</span><span class="vp-badge warning vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->变更<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-stash-side-peek" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/code-tree/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码树</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-text-field-linear" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/field/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>字段容器</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-vaadin-tabs" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/tabs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>选项组</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-uiw-qrcode" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/qrcode/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>二维码</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-timeline-text-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/timeline/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>时间线</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fxemoji-window bg" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/window/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>示例容器</span><span class="vp-badge warning vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->变更<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-flex-no-wrap" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/flex/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Flex 容器</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-collapse-categories" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/collapse/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>折叠面板</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-gg-npm" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/npm-to/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>npmTo 容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-streamline-desktop-help" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/caniuse/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Can I Use</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-cil-chat-bubble" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/chat/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>对话记录</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-table-simple-include-16-regular" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/include/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>导入文件</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-eos-icons-env" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/env/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>环境预设</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-obsidian" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/obsidian/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Obsidian 兼容</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-code-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>代码块</span><!----></h3><button type="button" class="caret" aria-label="Expand 代码块" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ic-outline-code" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/intro/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>介绍</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-majesticons-code-block-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/features/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>特性支持</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-code" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/copy-code/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码复制</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fluent-group-list-20-filled" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/group/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>代码分组</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-import" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/import/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>导入代码</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-experiment-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/markdown/twoslash/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Two Slash</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-demo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>代码演示</span><!----></h3><button type="button" class="caret" aria-label="Expand 代码演示" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-html-five" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/frontend/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>前端演示</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-rust" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/rust/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Rust</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-devicon-plain-go" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/golang/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Golang</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-brand-kotlin" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/kotlin/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Kotlin</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-devicon-plain-python" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/repl/python/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Python</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-codepen-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/code-pen/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Code Pen</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-bxl-jsfiddle" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/jsfiddle/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Js Fiddle</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-codesandbox" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/code-sandbox/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Code Sandbox</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-replit" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/code/replit/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Replit</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-chart-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>图表</span><!----></h3><button type="button" class="caret" aria-label="Expand 图表" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-chart-bold" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/chartjs/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>chart.js</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-raphael-piechart" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/echarts/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>ECharts</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-file-icons-mermaid" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/mermaid/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>mermaid</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-f7-flowchart" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/flowchart/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>flowchart</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-mind-map" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/markmap/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>markmap</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-arcticons-uml-class-editor" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/chart/plantuml/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>PlantUML</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><section class="vp-sidebar-item sidebar-item level-1 collapsible collapsed" data-v-ab4803a9 data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-dashicons-embed-video" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>资源嵌入</span><!----></h3><button type="button" class="caret" aria-label="Expand 资源嵌入" aria-expanded="false" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div style="display:none;" data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-teenyicons-pdf-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/pdf/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>PDF 阅读</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-bilibili-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/bilibili/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Bilibili 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lets-icons-video-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/acfun/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>AcFun 视频</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-youtube" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/youtube/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Youtube 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-video" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/video/artplayer/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>ArtPlayer 视频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-rivet-icons-audio" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/embed/audio/reader/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Audio Reader 音频</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-box" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>功能</span><!----></h2><button type="button" class="caret" aria-label="Collapse 功能" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-raphael-smile2" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-search" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/content-search/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>内容搜索</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-image-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/image-preview/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图片预览</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-la-comment" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/comments/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>评论</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mingcute-announcement-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/bulletin/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>公告板</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-encryption-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/encryption/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>加密</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-simple-icons-contributorcovenant" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/contributors/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章贡献者</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-radix-icons-activity-log" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/changelog/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章变更历史</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-creative-commons" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/copyright/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章版权所有</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-light-branding-watermark-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/watermark/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>文章水印</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-friendship" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/friend-links/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>友情链接页</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lucide-replace" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/replace-assets/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>资源链接替换</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-seo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/seo/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>SEO</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-sitemap-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/sitemap/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>sitemap</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-ai" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/features/llmstxt/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>LLMs txt</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-uiw-component" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>组件</span><!----></h2><button type="button" class="caret" aria-label="Collapse 组件" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-iconamoon-badge-light" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/badge/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>徽章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-grommet-icons-emoji" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/icon/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图标</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-lets-icons-hide-eye" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/plot/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>“隐秘” 文本</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-broken" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-solar-card-send-linear" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/link-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>链接卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fa-photo" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/image-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>图片卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-vaadin-grid-h" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card-grid/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>卡片容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ri-layout-masonry-line" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/card-masonry/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>瀑布流容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-tabler-container" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/home-box/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>首页布局容器</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-octicon-repo-16" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/github-repo-card/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Repo 卡片</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-akar-icons-npm-fill" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/npm-badge/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Npm 徽章</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-dashicons-images-alt2" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/components/swiper/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>轮播图</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible has-active" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-dashboard-customize-outline-rounded" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义</span><!----></h2><button type="button" class="caret" aria-label="Collapse 自定义" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><section class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-material-symbols-home-outline" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-home/" data-v-ab4803a9><!--[--><h3 class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义首页</span><!----></h3><!--]--><!--[--><!--]--><!----></a><!----></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-2 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-effects" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-home/hero-effect/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Hero 背景效果</span><span class="vp-badge tip vp-menu-badge" style="" data-v-ab4803a9 data-v-52c8341f><!--[-->新<!--]--></span></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-icon-park-outline-theme" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/custom-style/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>自定义样式</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-ph-layout-duotone" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/layout-slots/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>布局插槽</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-carbon-cics-sit-overrides" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/component-overrides/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>组件覆写</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-71ba64cb><section class="vp-sidebar-item sidebar-item level-0 collapsible" data-v-71ba64cb data-v-ab4803a9><div class="item" role="button" tabindex="0" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-mdi-api" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><h2 class="text" data-v-ab4803a9><span data-v-ab4803a9>API</span><!----></h2><button type="button" class="caret" aria-label="Collapse API" aria-expanded="true" tabindex="-1" data-v-ab4803a9><span class="vpi-chevron-right caret-icon" data-v-ab4803a9></span></button></div><div data-v-ab4803a9 data-v-ab4803a9><div class="items" data-v-ab4803a9><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-nimbus-browser" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/api/client/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>客户端</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-ab4803a9 data-v-ab4803a9><div class="item" data-v-ab4803a9><div class="indicator" data-v-ab4803a9></div><span class="vp-icon vpi-fa6-brands-node" style="" aria-hidden data-provider="iconify" data-v-ab4803a9></span><a class="vp-link link link" href="/guide/api/node/" data-v-ab4803a9><!--[--><p class="text" data-v-ab4803a9><span data-v-ab4803a9>Node</span><!----></p><!--]--><!--[--><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="vp-sidebar-control" data-v-28af193e><button type="button" class="toggle-sidebar-btn" aria-label="Toggle sidebar" data-v-28af193e><span class="vpi-sidebar-close" data-v-28af193e></span></button></div><!--]--><!--[--><div id="VPContent" vp-content class="vp-content has-sidebar" data-v-a5aadcf6 data-v-d3283ff2><div class="vp-doc-container has-sidebar has-aside" data-v-d3283ff2 data-v-c2acd915><!--[--><!--]--><div class="container" data-v-c2acd915><div class="aside" vp-outline data-v-c2acd915><div class="aside-curtain" data-v-c2acd915></div><div class="aside-container" data-v-c2acd915><div class="aside-content" data-v-c2acd915><div class="vp-doc-aside" data-v-c2acd915 data-v-8e9ccc00><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="vp-doc-aside-outline" role="navigation" data-v-8e9ccc00 data-v-c71a8a7e><div class="content" data-v-c71a8a7e><div class="outline-marker" data-v-c71a8a7e></div><div id="doc-outline-aria-label" aria-level="2" class="outline-title" role="heading" data-v-c71a8a7e><span data-v-c71a8a7e>此页内容</span><span class="vpi-print icon" data-v-c71a8a7e></span></div><ul class="root" data-v-c71a8a7e data-v-875470cb><!--[--><!--]--></ul></div></nav><!--[--><!--[--><!--[--><!--[--><div class="aside-nav-wrapper" data-v-a5aadcf6 data-v-44a708ba><a class="vp-link link no-icon vp-external-link-icon link" href="https://github.com/pengzhanbo/vuepress-theme-plume" target="_blank" rel="noopener noreferrer" data-v-44a708ba><!--[--><span class="vp-icon vpi-tabler-star" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>在 GitHub 上 Star</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a><a class="vp-link link no-icon vp-external-link-icon link" href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose" target="_blank" rel="noopener noreferrer" data-v-44a708ba><!--[--><span class="vp-icon vpi-octicon-issue-opened-16" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>遇到问题？</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a><a class="vp-link link link" href="/sponsor/" data-v-44a708ba><!--[--><span class="vp-icon vpi-ep-milk-tea" style="" aria-hidden data-provider="iconify" data-v-44a708ba></span><span class="link-text" data-v-44a708ba>喝杯奶茶</span><span class="vpi-arrow-right" data-v-44a708ba></span><!--]--><!--[--><!--]--><!----></a></div><!--]--><!--]--><!--]--><!--]--><div class="spacer" data-v-8e9ccc00></div><!--[--><!--]--></div></div></div></div><div class="content" data-v-c2acd915><div class="content-container" data-v-c2acd915><!--[--><!--]--><main class="main" data-v-c2acd915><nav class="vp-breadcrumb" data-v-c2acd915 data-v-68dbda29><ol vocab="https://schema.org/" typeof="BreadcrumbList" data-v-68dbda29><!--[--><li property="itemListElement" typeof="ListItem" data-v-68dbda29><a class="vp-link link no-icon breadcrumb" href="/" property="item" typeof="WebPage" data-v-68dbda29><!--[-->首页<!--]--><!--[--><!--]--><!----></a><span class="vpi-chevron-right" data-v-68dbda29></span><meta property="name" content="首页" data-v-68dbda29><meta property="position" content="1" data-v-68dbda29></li><li property="itemListElement" typeof="ListItem" data-v-68dbda29><span class="vp-link no-icon breadcrumb" property="item" typeof="WebPage" data-v-68dbda29><!--[-->指南<!--]--><!--[--><!--]--><!----></span><span class="vpi-chevron-right" data-v-68dbda29></span><meta property="name" content="指南" data-v-68dbda29><meta property="position" content="2" data-v-68dbda29></li><li property="itemListElement" typeof="ListItem" data-v-68dbda29><a class="vp-link link no-icon breadcrumb current" href="/guide/custom-home/" property="item" typeof="WebPage" data-v-68dbda29><!--[-->自定义首页<!--]--><!--[--><!--]--><!----></a><!----><meta property="name" content="自定义首页" data-v-68dbda29><meta property="position" content="3" data-v-68dbda29></li><!--]--></ol></nav><!--[--><!--]--><!--[--><div class="vp-doc-title" data-v-42fa9e7c><!--[--><!--]--><h1 class="page-title" data-v-42fa9e7c><!----> 自定义首页 <!----></h1><!--[--><!--[--><!--[--><!--[--><div class="vp-page-context-menu" data-v-a5aadcf6 data-v-b0188d12><div class="page-context-button" type="button" data-v-b0188d12><span class="page-context-copy" data-v-b0188d12><span class="vpi-copy" data-v-b0188d12></span><span class="text" data-v-b0188d12>复制页面</span></span><span class="page-context-toggle" data-v-b0188d12><span class="vpi-chevron-down" data-v-b0188d12></span></span></div><ul class="page-context-menu" style="display:none;" data-v-b0188d12><li data-v-b0188d12><a href="javascript:void(0)" data-v-b0188d12><span class="vpi-copy" data-v-b0188d12></span><span data-v-b0188d12>复制页面 <small data-v-b0188d12>将页面以 Markdown 格式复制供 LLMs 使用</small></span></a></li><!--[--><li data-v-b0188d12><a href="/guide/custom-home/index.md" target="_blank" rel="noopener noreferrer" aria-label="以 Markdown 格式查看" type="text/markdown" data-allow-mismatch data-v-b0188d12><span class="vpi-markdown" data-v-b0188d12></span><span data-v-b0188d12>以 Markdown 格式查看 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>以纯文本查看此页面</small></span></a></li><li data-v-b0188d12><a href="https://chat.openai.com/?prompt=" target="_blank" rel="noopener noreferrer" aria-label="在 ChatGPT 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-chatgpt" data-v-b0188d12></span><span data-v-b0188d12>在 ChatGPT 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 ChatGPT 提问有关此页面</small></span></a></li><li data-v-b0188d12><a href="https://claude.ai/new?q=" target="_blank" rel="noopener noreferrer" aria-label="在 Claude 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-claude" data-v-b0188d12></span><span data-v-b0188d12>在 Claude 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 Claude 提问有关此页面</small></span></a></li><li data-v-b0188d12><a href="https://perplexity.ai/?q=" target="_blank" rel="noopener noreferrer" aria-label="在 Perplexity 中打开" data-allow-mismatch data-v-b0188d12><span class="vpi-perplexity" data-v-b0188d12></span><span data-v-b0188d12>在 Perplexity 中打开 <span class="vpi-external-link" data-v-b0188d12></span><small data-v-b0188d12>向 Perplexity 提问有关此页面</small></span></a></li><!--]--></ul></div><!--]--><!--]--><!--]--><!--]--></div><div class="vp-doc-meta" data-v-42fa9e7c><!--[--><!--]--><p class="reading-time" data-v-42fa9e7c><span class="vpi-books icon" data-v-42fa9e7c></span><span data-v-42fa9e7c>约 2286 字</span><span data-v-42fa9e7c>大约 8 分钟</span></p><!----><!--[--><!--]--><p class="create-time" data-v-42fa9e7c><span class="vpi-clock icon" data-v-42fa9e7c></span><span data-v-42fa9e7c>2024-03-02</span></p></div><!--]--><!--[--><!--]--><!--[--><div class="_guide_custom-home_ external-link-icon-enabled vp-doc plume-content" vp-content data-v-c2acd915><!--[--><!--]--><div data-v-c2acd915><h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。</p><p>主题通过 <code>frontmatter</code> 来定义你的首页。在 <code>sourceDir</code> 的 <code>README.md</code> 文件中，编写 <code>frontmatter</code>。</p><div class="code-block-title" data-title="README.md"><div class="code-block-title-bar"><span class="title"><span class="vp-icon vpi-flat-color-icons-info bg" style="" aria-hidden data-provider="iconify"></span>README.md</span></div><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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> custom</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">---</span></span></code></pre></div></div><p>主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。</p><p>通过 <code>config</code> 属性，以 数组 的形式，可以定义多个区域。通过 <code>type</code> 字段，可以定义该区域的类型。 主题内置了 <code>banner</code>， <code>hero</code>，<code>text-image</code>，<code>image-text</code>，<code>features</code>，<code>profile</code>，<code>custom</code> 等不同的类型， 你可以随意组合使用它们，组装成你的自定义首页。 如果它们均不满足你的需求，你也可以 编写自定义组件，来自定义你的首页。</p><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><h3 id="home" tabindex="-1"><a class="header-anchor" href="#home"><span>home</span></a></h3><ul><li>类型： <code>boolean</code></li></ul><p>声明该页面是否为首页</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config"><span>config</span></a></h3><ul><li>类型： <code>PlumeHomeConfig[]</code></li><li>默认值： <code>[]</code></li></ul><p>根据数组的顺序定义页面的区域内容。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 该区域的类型，根据类型应用不同的组件</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">banner</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">hero</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">text-image</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">image-text</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">features</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">profile</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">custom</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 该区域是否占满全屏</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> full</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">boolean</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 该区域的背景图片</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 你可以定义在 浅色/暗色 模式下的背景图片</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> backgroundImage</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | { </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 该区域的背景 定位方式</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> backgroundAttachment</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">fixed</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">local</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="区域类型" tabindex="-1"><a class="header-anchor" href="#区域类型"><span>区域类型</span></a></h2><h3 id="banner" tabindex="-1"><a class="header-anchor" href="#banner"><span>banner</span></a></h3><ul><li>类型： <code>PlumeThemeHomeBanner</code></li></ul><p>大屏 banner， 适用于放置在 首页的 首位。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeBanner</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">banner</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 背景大图</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> banner</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 取值范围： 0 - 1。配置首页 banner 大图的遮罩蒙版不透明度。</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 支持配置 浅色/深色 模式下 的不同值。当值为 0 时，不显示遮罩蒙版。</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 这在首页首屏大图比较亮时，可以适当使图片看起来暗一些。</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> bannerMask</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | { </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">light</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dark</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> hero</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:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> tagline</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> actions</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:#B07D48;--shiki-dark:#BD976A;"> theme</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">brand</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">alt</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> link</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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 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="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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> banner</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> banner</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> https://api.pengzhanbo.cn/wallpaper/bing</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> bannerMask</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.1</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.3</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> hero</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 鹏展博</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> tagline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Front End Developer</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> actions</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:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 我的博客</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> link</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /blog/</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:#B56959;--shiki-dark:#C98A7D;"> brand</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Github</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> link</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> https://github.com/pengzhanbo</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:#B56959;--shiki-dark:#C98A7D;"> alt</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 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><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-banner.jpg" alt="banner" width="1000" height="520"></section></article><h3 id="hero" tabindex="-1"><a class="header-anchor" href="#hero"><span>hero</span></a></h3><ul><li>类型： <code>PlumeThemeHomeHero</code></li></ul><p>适用于 文档 类型站点，放置于 首位。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeHero</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">hero</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> hero</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> tagline</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> actions</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:#B07D48;--shiki-dark:#BD976A;"> theme</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">brand</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">alt</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">sponsor</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> link</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 文本左侧图标</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> suffixIcon</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 文本右侧图标</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> target</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">_blank</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">_self</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 主题内置的背景效果，如果为非预设背景效果，则可以传入背景图片链接地址</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> effect</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">tint-plate</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">prism</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">pixel-blast</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">hyper-speed</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">liquid-ether</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><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;">dot-grid</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">iridescence</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">orb</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">beams</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">lightning</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 背景效果配置项，根据 `effect` 值不同，配置项不同</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> effectConfig</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">any</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 如果是非预设背景，可以设置背景图片的滤镜效果</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> filter</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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 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><a class="vp-link link read-more" href="/guide/custom-home/hero-effect/"><!--[-->查看 <strong>背景效果 配置 &amp; 演示</strong> 了解更多<!--]--><!--[--><!--]--><!----></a></p><p>主题还支持自定义 <code>name</code>, <code>tagline</code>， <code>text</code> 的颜色。</p><p>通过 <code>CSS Vars</code> 进行配置。</p><div class="language-css" data-highlighter="shiki" data-ext="css" 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-css"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* 默认设置，可以在 `index.css` 中覆盖 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">root</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* home hero name 背景色，通过背景色裁剪的方式定义文本颜色，</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> 因此，可以设置渐变背景的方式使文本更具表现力 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-bg-home-hero-name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> linear-gradient</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">315</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">deg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-purple-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 15</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-brand-2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 65</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-brand-2</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:#B07D48;--shiki-dark:#BD976A;"> --vp-c-home-hero-tagline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-c-home-hero-text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-3</span><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><h3 id="doc-hero" tabindex="-1"><a class="header-anchor" href="#doc-hero"><span>doc-hero</span></a></h3><ul><li>类型： <code>PlumeThemeHomeDocHero</code></li></ul><p>适用于 文档 类型站点，放置于 首位。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeDocHero</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">doc-hero</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> hero</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> tagline</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> image</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | { </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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;">dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> actions</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:#B07D48;--shiki-dark:#BD976A;"> theme</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">brand</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">alt</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">sponsor</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> link</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 文本左侧图标</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> suffixIcon</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 文本右侧图标</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> target</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</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;">_blank</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">_self</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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 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="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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> doc-hero</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> hero</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Theme Plume</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> VuePress Next Theme</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> tagline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 一个简约易用的，功能丰富的 vuepress 文档&amp;博客 主题</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /plume.png</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> actions</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:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> brand</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 快速开始 →</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> link</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /guide/intro/</span></span>
<span class="line"><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:#B56959;--shiki-dark:#C98A7D;"> alt</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Github</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> link</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> https://github.com/pengzhanbo/vuepress-theme-plume</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 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><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-doc-hero.jpg" alt="Theme Plume"></section></article><p>主题还支持自定义 <code>name</code>, <code>tagline</code>， <code>text</code> 的颜色，以及 <code>image</code> 的背景色。</p><p>通过 <code>CSS Vars</code> 进行配置。</p><div class="language-css" data-highlighter="shiki" data-ext="css" 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-css"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* 默认设置，可以在 `index.css` 中覆盖 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">root</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-name-color</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> transparent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-name-background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> linear-gradient</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">120</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">deg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-purple-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 30</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-brand-2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">));</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-tagline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-image-background-image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> linear-gradient</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">-45</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">deg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-brand-soft</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 50</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-brand-2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 50</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:#B07D48;--shiki-dark:#BD976A;"> --vp-home-hero-image-filter</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> blur</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">44</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><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><h3 id="features" tabindex="-1"><a class="header-anchor" href="#features"><span>features</span></a></h3><ul><li>类型： <code>PlumeThemeHomeFeatures</code></li></ul><p>适用于展示 特性、功能、等。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeFeatures</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">features</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> description</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> features</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">PlumeThemeHomeFeature</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>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeFeature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /**</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> * 图标，也支持传入 iconify 图标名</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">FeatureIcon</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> details</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> link</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> linkText</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> target</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">type</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> FeatureIcon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> height</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> wrap</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">boolean</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> height</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> wrap</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">boolean</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 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="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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> features</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> features</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:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 响应式布局</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 💻</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 适配移动设备，PC，平板</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 博客 &amp; 文档</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 📖</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 无论是想写博客，或想写产品文档，或者两者兼顾</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 开箱即用</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 🚀</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持零配置即可使用，也支持丰富的自定义配置</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 多语言</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> ⚖</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 内置了 中文/英文支持，还可以自定义添加更多的语言支持</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 双色主题</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 👨‍💻</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持 浅色/深色 主题，包括代码高亮</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 插件</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 📦</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 内置丰富的插件，一站式解决网站一般需求</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 搜索、评论</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 🔍</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持多种评论系统，支持本地搜索、Algolia搜索</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 加密</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 🔒</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持全站加密、部分加密（加密目录、加密文章）</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Markdown 增强</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 📝</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> details</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持 Markdown 语法，支持 代码块分组、提示容器、任务列表、数学公式、代码演示等</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 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 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><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-features.jpg" alt="custom-features"></section></article><h3 id="text-image-image-text" tabindex="-1"><a class="header-anchor" href="#text-image-image-text"><span>text-image | image-text</span></a></h3><ul><li>类型： <code>PlumeThemeHomeTextImage</code></li></ul><p>左右布局的 文本 和 图片。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeTextImage</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">text-image</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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;">image-text</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">PlumeThemeImage</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> description</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> list</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: (</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> | { </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">title</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">description</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">type</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeImage</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> string</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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></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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> image-text</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 功能</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 内置丰富的功能，满足网站一般需求。</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /images/plume-1.svg</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> list</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:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 文章信息</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 为文章添加标签、分类、字数统计、阅读时间、写作日期等信息。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 评论</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持 4 种评论系统，你可以自由选择符合你的需求的评论系统。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 搜索</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持基于 minisearch 的本地搜索， 支持Algolia搜索。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 加密</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 支持全站加密、部分加密（加密目录、加密文章）。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 代码复制</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 一键复制代码块中的内容</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> text-image</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 博客</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 主题默认支持博客，生成你的个人博客。</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /images/plume-2.svg</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> list</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:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 文章列表</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 通过文章写作日期，自动排序并生成博客文章列表页。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 博主信息</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 自定义名称、座右铭、头像，社交媒体链接。</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> -</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 标签、归档</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 自动生成标签页，为文章根据年份进行归档。</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 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 class="line-number"></div></div></div><p><strong>效果：</strong></p><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-image-text.jpg" alt="image-text"></section></article><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-text-image.jpg" alt="text-image"></section></article><h3 id="posts" tabindex="-1"><a class="header-anchor" href="#posts"><span>posts</span></a></h3><p>将 post 集合文章列表页 作为一个单独区域，插入到 首页中。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomePosts</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">posts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> collection</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div><p>当存在多个 post 集合时，默认读取第一个集合的文章列表页。 还可以通过 <code>collection</code> 配置项来指定读取哪个集合的文章列表页。</p><p><code>collection</code> 的值应该与 集合的 <code>dir</code> 值相同。</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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> posts</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> collection</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> blog</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">---</span></span></code></pre></div><h3 id="profile" tabindex="-1"><a class="header-anchor" href="#profile"><span>profile</span></a></h3><ul><li>类型： <code>PlumeThemeHomeProfile</code></li></ul><p>展示个人信息。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeProfile</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">profile</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> description</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> avatar</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">PlumeThemeImage</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> circle</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">boolean</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">type</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeImage</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> string</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> light</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> alt</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">?</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;">string</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></div><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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> profile</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> pengzhanbo</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> avatar</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> /images/avatar.png</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">---</span></span></code></pre></div><p><strong>效果：</strong></p><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-profile.jpg" alt="profile"></section></article><h3 id="custom" tabindex="-1"><a class="header-anchor" href="#custom"><span>custom</span></a></h3><ul><li>类型： <code>PlumeThemeHomeCustom</code></li></ul><p>自定义内容，在 <code>README.md</code> 的 文件中，编写的 markdown 内容，将会被插入到 对应的区域。</p><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:#AB5959;--shiki-dark:#CB7676;">interface</span><span style="--shiki-light:#2E8F82;--shiki-dark:#5DA994;"> PlumeThemeHomeCustom</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> extends</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> PlumeHomeConfigBase</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</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;">custom</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> custom</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">###</span><span style="--shiki-light:#1C6B48;--shiki-light-font-weight:bold;--shiki-dark:#4D9375;--shiki-dark-font-weight:bold;"> 安装</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::code-tabs</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab pnpm</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sh</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">pnpm</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> add</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress@next</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress-theme-plume</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vue</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;">@tab npm</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sh</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">npm</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> install</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress@next</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress-theme-plume</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;">@tab yarn</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">sh</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">yarn</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> add</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress@next</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> vuepress-theme-plume</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 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><article class="window-wrapper"><header class="window-header"><div class="window-left"><i></i><i></i><i></i></div><div class="window-right"><i class="vpi-window-share"></i><i class="vpi-window-add"></i><i class="vpi-window-copy"></i></div></header><section class="window-content" style="--window-gap:0;"><img src="/images/custom-content.jpg" alt="content"></section></article><h2 id="自定义区域类型" tabindex="-1"><a class="header-anchor" href="#自定义区域类型"><span>自定义区域类型</span></a></h2><p>当主题内置的区域类型不足以满足你的需求时，你可以自定义区域类型。</p><p>每一个自定义区域类型，本质上都是一个组件。</p><p>一个 简单的实例如下：</p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-263-0" aria-selected="true"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-vue bg" style="" aria-hidden data-provider="iconify"></span><span>your-component.vue</span><!--]--></button><!--]--></div><!--[--><div id="codetab-263-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-vue bg" style="" aria-hidden data-provider="iconify"></span><span>your-component.vue</span><!--]--></div><!--[--><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 vp-code"><code class="language-vue"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</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:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> ThemeHomeConfigBase</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;"> VPHomeBox</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/client</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;">props</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineProps</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">ThemeHomeConfigBase</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> &amp; </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">{</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 组件 props, frontmatter 中的属性将会传递给组件</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}&gt;()</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">VPHomeBox</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> :type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">type</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> :background-image</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">backgroundImage</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> :background-attachment</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">backgroundAttachment</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> :full</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">full</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &gt;</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!-- 自定义你的内容 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">...</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">VPHomeBox</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</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></div><!--]--></div><!--]--></div><p>在 <code>.vuepress/client.ts</code> 在 <code>enhance</code> 钩子中添加 组件</p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-271-0" aria-selected="true"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-typescript bg" style="" aria-hidden data-provider="iconify"></span><span>.vuepress/client.ts</span><!--]--></button><!--]--></div><!--[--><div id="codetab-271-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><span class="vp-icon vpi-vscode-icons-file-type-typescript bg" style="" aria-hidden data-provider="iconify"></span><span>.vuepress/client.ts</span><!--]--></div><!--[--><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;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress/client</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:#B07D48;--shiki-dark:#BD976A;"> YourComponent</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;">your-component.vue</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</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:#59873A;--shiki-dark:#80A665;"> enhance</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({ </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }) {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">component</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;">your-component</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;">YourComponent</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><!--]--></div><!--]--></div><p>然后，你就可以在 <code>README.md</code> 中使用 <code>your-component</code> 了。</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:#999999;--shiki-dark:#666666;">---</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">home</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">config</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:#998418;--shiki-dark:#B8A965;"> type</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;">your-component</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> # ...</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">---</span></span></code></pre></div></div><!--[--><h2 id="doc-contributors" tabindex="-1"><a href="#doc-contributors" class="header-anchor"><span>贡献者</span></a></h2><div class="vp-contributors"><a href="https://github.com/pengzhanbo" target="_blank" rel="noreferrer" class="vp-contributor"><img src="https://avatars.githubusercontent.com/pengzhanbo?v=4" alt class="vp-contributor-avatar"><span class="vp-contributor-name">pengzhanbo</span></a></div><!--]--><!--[--><h2 id="doc-changelog" tabindex="-1"><a href="#doc-changelog" class="header-anchor"><span>更新日志</span></a></h2><div class="vp-changelog-wrapper"><div class="vp-changelog-header"><div class="vp-latest-updated"><span class="vp-changelog-icon"></span><span data-allow-mismatch>2026/2/25 13:48</span></div><div><span class="vp-changelog-menu-icon"></span><span>查看所有更新日志</span></div></div><ul class="vp-changelog-list"><!--[--><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/ce32605aeee40ca873962e21ff8012f320001523" target="_blank" rel="noreferrer"><code>ce326</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(plugin-md-power): rename <code>demo-wrapper</code> container to <code>window</code> (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/858" target="_blank" rel="noopener noreferrer">#858</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2026-02-25T13:48:39.000Z">2026/2/25</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/aa6168c31dd06d7ebbc2085fae06f037cdd2d0bd" target="_blank" rel="noreferrer"><code>aa616</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(theme): add home hero effects (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/738" target="_blank" rel="noopener noreferrer">#738</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-10-25T03:55:17.000Z">2025/10/25</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/4d2361a7046214fe0f4e4af01831107fd00e38ad" target="_blank" rel="noreferrer"><code>4d236</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(theme)!: add collections support (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/704" target="_blank" rel="noopener noreferrer">#704</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-10-07T15:13:09.000Z">2025/10/7</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/4f60b5424d2033c0a98c9b885af05c251a69c3bc" target="_blank" rel="noreferrer"><code>4f60b</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">style: lint fix</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-06-24T07:13:03.000Z">2025/6/24</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/9ef832294086b576318015312bea0ee7a3a7e616" target="_blank" rel="noreferrer"><code>9ef83</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">perf: update deps to latest</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-05-17T01:33:09.000Z">2025/5/17</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/b3561ef3832bbbf3a6ca09b0e48524d4104b3317" target="_blank" rel="noreferrer"><code>b3561</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">chore: tweak</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-05-06T06:07:01.000Z">2025/5/6</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/0fd6cac57412002f4d72dc10378789b529adc357" target="_blank" rel="noreferrer"><code>0fd6c</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">refactor(theme): improve types and flat config (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/524" target="_blank" rel="noopener noreferrer">#524</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-03-15T18:29:30.000Z">2025/3/15</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/6e6f9af12cfa52770de67ee966bd15b37c3256dc" target="_blank" rel="noreferrer"><code>6e6f9</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">docs: improve docs (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/509" target="_blank" rel="noopener noreferrer">#509</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-03-02T03:26:45.000Z">2025/3/2</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/6442ffa25a0299eaca4b6786e0644a50d33887a8" target="_blank" rel="noreferrer"><code>6442f</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(theme): add <code>doc-hero</code> support for custom home (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/462" target="_blank" rel="noopener noreferrer">#462</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-02-16T07:02:26.000Z">2025/2/16</time></span></li><li class="vp-changelog-item-commit"><a class="vp-changelog-hash" href="https://github.com/pengzhanbo/vuepress-theme-plume/commit/90db0346718874d5eb352238a37f3cedf2b533c7" target="_blank" rel="noreferrer"><code>90db0</code></a><span class="vp-changelog-divider">-</span><span class="vp-changelog-message">feat(theme): add icon support for home hero actions (<a href="https://github.com/pengzhanbo/vuepress-theme-plume/issues/456" target="_blank" rel="noopener noreferrer">#456</a>)</span><span class="vp-changelog-date" data-allow-mismatch>于 <time datetime="2025-02-08T06:47:57.000Z">2025/2/8</time></span></li><!--]--></ul></div><!--]--><!----><footer class="vp-doc-footer" data-v-c2acd915 data-v-393f5f4b><!--[--><!--]--><div class="edit-info" data-v-393f5f4b><div class="edit-link" data-v-393f5f4b><a class="vp-link link no-icon vp-external-link-icon edit-link-button" href="https://github.com/pengzhanbo/vuepress-theme-plume/edit/main/docs/guide/custom/home.md" target="_blank" rel="noopener noreferrer" data-v-393f5f4b><!--[--><span class="vpi-square-pen edit-link-icon" aria-label="edit icon" data-v-393f5f4b></span> 编辑此页<!--]--><!--[--><!--]--><!----></a></div><!----></div><!----><nav class="prev-next" data-v-393f5f4b><div class="pager" data-v-393f5f4b><a class="vp-link link pager-link prev" href="/guide/components/swiper/" data-v-393f5f4b><!--[--><span class="desc" data-v-393f5f4b>上一页</span><span class="title" data-v-393f5f4b><span class="vp-icon vpi-dashicons-images-alt2" style="" aria-hidden data-provider="iconify" data-v-393f5f4b></span><span data-v-393f5f4b>轮播图</span></span><!--]--><!--[--><!--]--><!----></a></div><div class="pager" data-v-393f5f4b><a class="vp-link link pager-link next" href="/guide/custom-home/hero-effect/" data-v-393f5f4b><!--[--><span class="desc" data-v-393f5f4b>下一页</span><span class="title" data-v-393f5f4b><span class="vp-icon vpi-icon-park-outline-effects" style="" aria-hidden data-provider="iconify" data-v-393f5f4b></span><span data-v-393f5f4b>Hero 背景效果</span></span><!--]--><!--[--><!--]--><!----></a></div></nav></footer></div><!--]--></main><div id="comment" class="giscus-wrapper input-top vp-comment" vp-comment style="display:block;" data-v-c2acd915><div style="display: flex;align-items: center;justify-content: center;height: 96px"><span style="--loading-icon: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg preserveAspectRatio=%22xMidYMid%22 viewBox=%2225 25 50 50%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 dur=%222s%22 keyTimes=%220;1%22 repeatCount=%22indefinite%22 values=%220;360%22%3E%3C/animateTransform%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2220%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Canimate attributeName=%22stroke-dasharray%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%221,200;90,200;1,200%22%3E%3C/animate%3E%3Canimate attributeName=%22stroke-dashoffset%22 dur=%221.5s%22 keyTimes=%220;0.5;1%22 repeatCount=%22indefinite%22 values=%220;-35px;-125px%22%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E&quot;);--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!--]--><button type="button" class="vp-back-to-top" aria-label="back to top" data-v-a5aadcf6 style="display:none;" data-v-7a6b3799><span class="percent" data-allow-mismatch data-v-7a6b3799>0%</span><span class="show icon vpi-back-to-top" data-v-7a6b3799></span><svg aria-hidden="true" data-v-7a6b3799><circle cx="50%" cy="50%" data-allow-mismatch style="stroke-dasharray:calc(0% - 12.566370614359172px) calc(314.1592653589793% - 12.566370614359172px);" data-v-7a6b3799></circle></svg></button><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true" data-v-a5aadcf6 style="display:none;" data-v-43069080><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" data-v-43069080><path d="m19 11l-7 6l-7-6" data-v-43069080></path><path d="m19 5l-7 6l-7-6" opacity="0.6" data-v-43069080></path></g></svg><footer class="vp-footer has-sidebar" vp-footer data-v-a5aadcf6 data-v-b83cc7e0><!--[--><div class="container" data-v-b83cc7e0><div class="message" data-v-b83cc7e0>Powered by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a></div><div class="copyright" data-v-b83cc7e0>Copyright © 2021-present pengzhanbo</div></div><!--]--></footer><!--[--><!--]--><!--]--></div><!----><!--]--><!--[--><!--]--><!--]--></div><script type="module" src="/assets/app-BD-J4YiG.js" defer></script></body></html>
Reference in New Issue View Git Blame Copy Permalink