外观
备案信息
约 213 字小于 1 分钟
2025-08-30
为基于Plume主题Plume 主题的VuePress添加网站备案信息。
备案信息需要在网站底部展示备案号,并可跳转备案网站beian.miit.gov.cn。 但目前网上并没有介绍添加的方法。
深入研究源代码可发现,plumeTheme配置的footer中,message与copyright的最终渲染组件为VPFooter.vue,渲染逻辑均使用v-html渲染:
VPFooter.vue
<template>
  <footer
    v-if="theme.footer"
    ref="footer"
    class="vp-footer"
    :class="{ 'has-sidebar': hasSidebar }"
    vp-footer
  >
    <slot name="footer-content">
      <div class="container">
        <p
          v-if="theme.footer.message"
          class="message"
          v-html="theme.footer.message"
        />
        <p
          v-if="theme.footer.copyright"
          class="copyright"
          v-html="theme.footer.copyright"
        />
      </div>
    </slot>
  </footer>
</template>因此可以直接传入html代码来实现
docs/.vuepress/plume.config.ts
export default defineUserConfig({
  theme: plumeTheme({
    footer: {
      message: "<a href='https://beian.miit.gov.cn/'>京ICP备xxxxxxxx号</a>",
      copyright: "© 2025 XXXXX",
    },
  }),
});