主题

主页设计

vitepress 支持比较有限但够用的主页配置，包括 title、logo、action、feature 四个组件的配置，本博客用 action 跳转到功能页，用 feature 展示各个教程。

此外，本博客的主页参考了 vitepress 官方文档的样式，只需要复制到自己的博客中即可。

qrbtf 可以生成自定义的二维码，将这个作为博客 logo 是个不错的选择。

下面是本博客主页的相关配置：

index.md.vitepress/config.mts

markdown

---
layout: home

hero:
  name: 朝码朝拾
  text: Daily Code & Notes - 专注于分享实用技术
  tagline: 本站由 VitePress 驱动
  image:
    src: /logo.svg
  actions:
    - text: 关于我
      link: /about
    - theme: alt
      text: 反馈
      link: https://github.com/idnewnil/idnewnil.github.io/issues/1

features:
  - title: 博客教程
    details: 分享和博客相关的一些知识
    link: /blog/
---

export default defineConfig({
  head: [
    ["link", { rel: "icon", type: "image/svg+xml", href: "/logo.svg" }], 
  ],
  themeConfig: {
    logo: "/logo.svg", 
  },
});

备案号展示

由于 vitepress 的 footer 在有侧边栏的时候默认不显示，为了在每个页面都展示备案号，需要调整一下样式，该样式只影响有侧边栏的文章的 footer 的展示效果，让 footer 对齐文章的中间区域。

以下是本站备案号的配置，可供参考：

.vitepress/theme/style.css.vitepress/config.mts

css

.VPFooter.has-sidebar {
  display: block !important;
}

@media (min-width: 960px) {
  .VPFooter.has-sidebar {
    padding-left: calc(var(--vp-sidebar-width) + 32px);
  }
}

@media (min-width: 1280px) {
  .VPFooter.has-sidebar {
    width: calc(100% - 256px);
  }
}

@media (min-width: 1440px) {
  .VPFooter.has-sidebar {
    padding-left: calc(
      (100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) + 32px
    );
    width: calc(100% - (100% - var(--vp-layout-max-width)) / 2 - 256px);
  }
}

export default defineConfig({
  themeConfig: {
    footer: {
      message: `<a href="https://beian.miit.gov.cn/" rel="noreferrer" target="_blank">粤ICP备2025505295号-1</a>
<br>
<span style="display: inline-flex; align-items: center">
  <img src="/filing-icon.png" style="width: 16px; height: 16px; margin-right: .25rem">
  <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44010602014489" rel="noreferrer" target="_blank">粤公网安备44010602014489号</a>
</span>`,
    },
  },
});

TIP

当涉及到多个变种的构建时，有些可能不需要备案号，可以通过钩子删除资源中的公安备案图标。

界面翻译

界面翻译直接参考 vitepress 官方文档的中文翻译配置即可。

主题 ​

主页设计 ​

备案号展示 ​

界面翻译 ​

主题

主页设计

备案号展示

界面翻译