简单介绍一下vitepress与本博客主题的常用功能与配置

基本配置

在config.js中可以继承本主题提供基本配置:

// .vitepress/config.js
import { defineConfig } from 'vitepress'
import baseConfig from 'vitepress-theme-open17/config'

export default defineConfig({
  extends: baseConfig,
})

详见默认配置

背景图片设置

前提是开启了装饰样式,即在config中设置ornateStyle:true

我们便可以通过配置对应的markdown文件来指定背景图片

---
bgImg:"xxxx" 
bgImgDark:"xxxx"
---

详见装饰模式配置

Markdown引入

很多时候比如我们希望README和博客的某篇内容是完全同步的,但是我们不想每次修改一边还需要再修改另一边,我们可以直接引入对应的markodwn文件,会直接渲染成页面

使用参考这里

比如本博客的更新公告就是引入CHANGELOG的

---
tags:
    - theme
    - 更新
title: 更新公告
pin: true
---

这里是博客的更新公告

---

:::info
内容同步自[CHANGELOG](https://github.com/open17/vitepress-theme-open17/blob/template/CHANGELOG.md)

最新同步时间: {{ Date()}}

:::

## v1.2.0(2024-10-03)

### Performance Improvements
- 美化主题
- 移动端优化
- 支持博客图片
- 支持修改侧边栏布局位置

### Bug Fixes
- 修复评论区刷新问题

## v1.1.1(2024-05-08)
### Performance Improvements
- 支持在博客布局中渲染markdown

## v1.1.0(2024-05-08)

### Performance Improvements
- 优化博客样式
- 增加自定义组件功能

## v1.0.2(2024-04-18)

### Performance Improvements
- 优化标签页与归档页
- 更新博客主页的标签功能

## v1.0.1(2024-04-06)

### Bug Fixes
- 修复初次加载时的明暗问题


## v1.0.0(2024-04-06)

### Performance Improvements
- 优化更新博客主页
- 支持博客头像

### Bug Fixes
- 修复博客文章使用引入文件时可能发生错误的问题

RSS配置

本主题支持RSS,配置如下,会在build的时候生成路径为baseUrl+feed.rss

详见RSS

Sitemap

vitepress本身即支持sitemap，只需要在config.js中配置站点域名即可,例如:

export default defineConfig({
    sitemap: {
        hostname: 'https://www.open17.vip'
      },
})

数学公式支持

vitepress本身支持mathjax，只需要在config.js中配置即可，例如:

export default defineConfig({
    markdown: {
    math: true
  },
})

自定义容器

输入

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

输出

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

导入代码片段

我的算法仓库基本上依赖于这个功能

详见import-code-snippets

置顶博客文章

在对应md文件中的frontmatter设置pin: true即可置顶博客

自定义首页组件

详见这里

自动侧边栏

已有封装好的vite插件vite-plugin-vitepress-auto-sidebar

个人相关配置如下:

vite: {
    plugins: [
      AutoSidebar({
        ignoreList: ['page', 'posts', 'public'],
        titleFromFile: true,
        beforeCreateSideBarItems: (data) => {
          const indexIndex = data.indexOf("index.md");
          if (indexIndex !== -1) {
            const indexValue = data[indexIndex];
            data.splice(indexIndex, 1);
            data.unshift(indexValue);
          }
          return data;
        }
      })
    ]
  },