fix: 更新说明
This commit is contained in:
163
README.md
163
README.md
@@ -1,33 +1,127 @@
|
||||
# vitepress 自定义主题
|
||||
|
||||
## 安装 vitepress
|
||||
```shell
|
||||
pnpm install vitepress
|
||||
```
|
||||
## 安装主题
|
||||
|
||||
```shell
|
||||
pnpm install ppst-vitepress-theme
|
||||
```
|
||||
## 安装读取文档插件
|
||||
```shell
|
||||
pnpm install markdown-from-posts
|
||||
```
|
||||
|
||||
## demo项目
|
||||
## 目录结构
|
||||
|
||||
直接运行demo目录
|
||||
```md
|
||||
.vitepress
|
||||
theme
|
||||
index.ts
|
||||
override.css
|
||||
config.ts
|
||||
pages
|
||||
default.md
|
||||
posts
|
||||
文件夹/.md文件
|
||||
.md文件
|
||||
public
|
||||
favicon.ico
|
||||
index.md
|
||||
```
|
||||
|
||||
### demo目录结构
|
||||
|
||||
#### .vitepress文件夹
|
||||
### .vitepress文件夹
|
||||
|
||||
config.ts - 配置自定义vitepress导航以及标题等
|
||||
|
||||
theme/override.css 重置样式
|
||||
|
||||
theme/index.ts
|
||||
#### .vitepress/config.ts
|
||||
|
||||
#### pages文件夹
|
||||
```js
|
||||
const { getPosts } = require('markdown-from-posts')
|
||||
async function config() {
|
||||
return {
|
||||
extends: {
|
||||
markdown: {
|
||||
headers: {
|
||||
level: [2, 3]
|
||||
}
|
||||
},
|
||||
},
|
||||
themeConfig: {
|
||||
posts: await getPosts(),
|
||||
title: 'BBBB',
|
||||
description: '自定义主题BBBB',
|
||||
docRoot: '',
|
||||
hasDarkSwitch: true,
|
||||
homeConfig: {
|
||||
headline: 'BBBB大标题',//大标题
|
||||
headlineHeight: 'BBBB高亮',//大标题高亮
|
||||
subheading: 'BBBB小标题',//小标题
|
||||
subheadingHeight: '小标题高亮',//小标题高亮
|
||||
description: '自定义主题,简短banner描述',//描述
|
||||
},
|
||||
|
||||
配置二级目录页面(可自定义布局页面),默认有 CategoryPage DefaultPage,如果需要自定义布局请在.vitepress/theme/index.ts定义
|
||||
nav: [
|
||||
{ text: '首页', link: '/', icon: '' },
|
||||
{ text: '归档', link: '/pages/archives', icon: '' },
|
||||
{ text: '默认', link: '/pages/default', icon: '' },
|
||||
{ text: '分类', link: '/pages/category', icon: '' },
|
||||
{ text: '搜索', link: '/pages/search', icon: '' },
|
||||
],
|
||||
footer: {
|
||||
copyright: '湘ICP备aaaaaaaa-1'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = config()
|
||||
|
||||
#### posts 文件夹
|
||||
```
|
||||
|
||||
所有文档
|
||||
#### .vitepress/theme/override.css 样式
|
||||
|
||||
文档内容:
|
||||
```css
|
||||
:root {
|
||||
--c-main-color:#80adff;/* 主色调 */
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
#### .vitepress/theme/index.ts 【vitepress 引入主题】
|
||||
|
||||
```js
|
||||
import { CustomTheme } from 'ppst-vitepress-theme'
|
||||
|
||||
import './override.css'
|
||||
|
||||
export default {
|
||||
...CustomTheme,
|
||||
}
|
||||
|
||||
```
|
||||
### pages文件夹
|
||||
|
||||
配置二级目录页面(可自定义布局页面),
|
||||
|
||||
默认有
|
||||
- category.md【分类页面】
|
||||
- default.md 【默认页面】
|
||||
- default.md 【搜索页面】
|
||||
- archives.md 【归档页面】
|
||||
|
||||
如果需要自定义布局请定义组件并在.vitepress/theme/index.ts引用
|
||||
|
||||
在pages下页面中使用组件即可
|
||||
|
||||
|
||||
### posts 文件夹 【所有文档】
|
||||
|
||||
文档顶部:
|
||||
```md
|
||||
---
|
||||
title: default
|
||||
@@ -38,15 +132,50 @@ tags:
|
||||
---
|
||||
```
|
||||
|
||||
title 为文档标题
|
||||
date 创建时间
|
||||
category 分类
|
||||
tags 标签
|
||||
- title 为文档标题
|
||||
|
||||
|
||||
- date 创建时间
|
||||
|
||||
|
||||
- category 分类
|
||||
|
||||
|
||||
|
||||
- tags 标签
|
||||
|
||||
|
||||
#### public文件夹
|
||||
favicon.ico 网站图标
|
||||
img文件 公共图片文件夹
|
||||
|
||||
- favicon.ico 网站图标
|
||||
|
||||
|
||||
#### index.html 文件
|
||||
- img文件 公共图片文件夹
|
||||
|
||||
|
||||
#### index.html文件
|
||||
|
||||
首页配置
|
||||
|
||||
```html
|
||||
---
|
||||
page: true
|
||||
date: 2021-06-30
|
||||
title: 自定义标题
|
||||
sidebar: false
|
||||
---
|
||||
<script setup>
|
||||
</script>
|
||||
<Home>
|
||||
|
||||
<template #banner>
|
||||
<img src="/img/page.png" />
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<!-- 一些其他描述 -->
|
||||
</template>
|
||||
|
||||
|
||||
</Home>
|
||||
```
|
Reference in New Issue
Block a user