From e1177d1c96cea45e974e6ecd65fe5fa3eba26899 Mon Sep 17 00:00:00 2001 From: ppst Date: Thu, 15 Jun 2023 12:45:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..926e0d6 --- /dev/null +++ b/README.md @@ -0,0 +1,200 @@ +# vitepress 自定义主题 +可以直接克隆,也可以使用下面方法一步步自定义实现 + +## 展示 +![首页](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/1.png) +![归档](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/2.png) +![搜索](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/3.png) +![分类](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/4.png) +![黑夜模式](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/5.png) +## 克隆 +克隆地址 + ```shell + http://git.ppst.top/pp/custom-vitepress-theme-demo + ``` + +## 目录结构 + +```md +.vitepress + theme + index.ts + override.css + config.ts +pages + default.md +posts + 文件夹/.md文件 + .md文件 +public + favicon.ico +index.md +``` + +### .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 'custom-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 +date: 2018-09-14 13:57:02 +category: default +tags: + - default +--- +``` + +- title 为文档标题 + + +- date 创建时间 + + +- category 分类 + + + +- tags 标签 + + +### public文件夹 + +- favicon.ico 网站图标 + + +- img文件 公共图片文件夹 + + +### index.html文件 + +首页配置 + +```html +--- +page: true +date: 2021-06-30 +title: 自定义标题 +sidebar: false +--- + + + + + + + + + +``` +## package.json + +```json +{ + "name": "demo", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "dev": "vitepress dev --host 0.0.0.0", + "build": "vitepress build " + }, + "dependencies": { + "@types/node": "^18.15.11", + "markdown-from-posts": "^1.0.5", + "vitepress": "1.0.0-alpha.64", + "custom-vitepress-theme": "^0.0.2" + } +} +``` \ No newline at end of file