Velonor

Appearance

功能增强 ​

这里是一些常用的博客功能增强需求配置/使用方法,其中有部分在本主题已经集成完毕,有部分则没有

没有的原因大抵如下几点:

  • 相关功能配置已经足够简单便捷,无需再套入主题中
  • 相关功能可能有一定 bug
  • 相关功能过于笨重,引入增加负担
  • 默认主题已经实现

基本配置 ​

推荐使用类型安全方式配置：

ts
// .vitepress/config.ts
import type { ThemeConfig } from '@velonor/theme/config'
import { defineConfigWithTheme } from 'vitepress'

export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    // ...你的配置
  }
})

详见默认配置

背景图片设置 ​

通过全局或单页 frontmatter 设置 bgImage：

md
---
bgImage: '/bg.jpg'
# 或
bgImage:
  light: '/bg.jpg'
  dark: '/bg_dark.jpg'
---

详见背景图片配置

Markdown 引入 ​

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

使用参考这里

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

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

这里是博客的更新公告

---

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

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

:::

## v1.3.5(2025-08-11)

### Performance Improvements

- 重构代码,美化主题
- 优化博客详情页
- 完善分页功能
- 优化标签功能
- 增加分类功能



## v1.3.0-beta.1(2024-11-09)

### Performance Improvements

- 重构代码,美化主题
- 支持配置时TS类型提示
- 优化&统一配置名格式与类型
- 增加用户自定义主题配色的精细度
- 重构Tag页面和归档页面


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

### Performance Improvements
- 分页
- 大屏显示


## 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.ts 中配置站点域名即可,例如:

ts
import { defineConfigWithTheme } from 'vitepress'
export default defineConfigWithTheme({
  sitemap: {
    hostname: 'https://www.open17.vip'
  }
})

数学公式支持 ​

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

ts
import { defineConfigWithTheme } from 'vitepress'
export default defineConfigWithTheme({
  markdown: {
    math: true
  }
})

自定义容器 ​

详见 VitePress 官方文档。

导入代码片段 ​

详见import-code-snippets

置顶博客文章 ​

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

自定义首页组件 ​

详见这里

自动侧边栏 ​

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

个人相关配置如下:

js
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
      }
    })
  ]
}

幻灯片 ​

可以参考这篇博客: