feat: 添加readme

2023-06-15 12:45:42 +08:00
parent cb44babbab
commit e1177d1c96
1 changed files with 200 additions and 0 deletions
--- a/README.md
+++ 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
+---
+<script setup>
+</script>
+<Home>
+
+<template #banner>
+<img src="/img/page.png" /> 
+</template>
+
+<template #description>
+<!-- 一些其他描述 -->
+</template>
+
+  
+</Home>
+```
+## 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"
+  }
+}
+```