功能增强
这里是一些常用的博客功能增强需求配置/使用方法,其中有部分在本主题已经集成完毕,有部分则没有
没有的原因大抵如下几点:
- 相关功能配置已经足够简单便捷,无需再套入主题中
- 相关功能可能有一定bug
- 相关功能过于笨重,引入增加负担
- 默认主题已经实现
基本配置
在config.js中可以继承本主题提供基本配置:
js
// .vitepress/config.js
import { defineConfig } from 'vitepress'
import baseConfig from 'vitepress-theme-open17/config'
export default defineConfig({
extends: baseConfig,
})详见默认配置
背景图片设置
前提是开启了装饰样式,即在config中设置ornateStyle:true
我们便可以通过配置对应的markdown文件来指定背景图片
md
---
bgImg:"xxxx"
bgImgDark:"xxxx"
---详见装饰模式配置
Markdown引入
很多时候比如我们希望README和博客的某篇内容是完全同步的,但是我们不想每次修改一边还需要再修改另一边,我们可以直接引入对应的markodwn文件,会直接渲染成页面
使用参考这里
比如本博客的更新公告就是引入CHANGELOG的
md
---
tags:
- theme
- 更新
title: 更新公告
pin: true
---
这里是博客的更新公告
---
:::info
内容同步自[CHANGELOG](https://github.com/open17/vitepress-theme-open17/blob/template/CHANGELOG.md)
最新同步时间: {{ Date()}}
:::
## 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.js中配置站点域名即可,例如:
js
export default defineConfig({
sitemap: {
hostname: 'https://www.open17.vip'
},
})数学公式支持
vitepress本身支持mathjax，只需要在config.js中配置即可，例如:
js
export default defineConfig({
markdown: {
math: true
},
})自定义容器
输入
md
::: 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.
导入代码片段
置顶博客文章
在对应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;
}
})
]
},幻灯片
可以参考这篇博客: