diff --git a/README.md b/README.md index e1122ea..83b4040 100644 --- a/README.md +++ b/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目录 +## 目录结构 -### demo目录结构 +```md +.vitepress + theme + index.ts + override.css + config.ts +pages + default.md +posts + 文件夹/.md文件 + .md文件 +public + favicon.ico +index.md +``` -#### .vitepress文件夹 +### .vitepress文件夹 config.ts - 配置自定义vitepress导航以及标题等 theme/override.css 重置样式 +theme/index.ts +#### .vitepress/config.ts + +```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描述',//描述 + }, + + 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() + +``` + +#### .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文件夹 + +配置二级目录页面(可自定义布局页面), -#### pages文件夹 +默认有 +- category.md【分类页面】 +- default.md 【默认页面】 +- default.md 【搜索页面】 +- archives.md 【归档页面】 -配置二级目录页面(可自定义布局页面),默认有 CategoryPage DefaultPage,如果需要自定义布局请在.vitepress/theme/index.ts定义 +如果需要自定义布局请定义组件并在.vitepress/theme/index.ts引用 -#### posts 文件夹 +在pages下页面中使用组件即可 -所有文档 -文档内容: +### posts 文件夹 【所有文档】 + +文档顶部: ```md --- title: default @@ -38,15 +132,50 @@ tags: --- ``` -title 为文档标题 -date 创建时间 -category 分类 -tags 标签 +- title 为文档标题 + + +- date 创建时间 + + +- category 分类 + + + +- tags 标签 + + #### public文件夹 -favicon.ico 网站图标 -img文件 公共图片文件夹 +- favicon.ico 网站图标 + + +- img文件 公共图片文件夹 + + +#### index.html文件 -#### index.html 文件 首页配置 +```html +--- +page: true +date: 2021-06-30 +title: 自定义标题 +sidebar: false +--- + + + + + + + + + +``` \ No newline at end of file