feat: ppst-vitepress-theme

demo/.gitignore

@@ -0,0 +1,6 @@
+/coverage
+/node_modules
+dist
+TODOs.md
+.DS_Store
+demo/.vitepress/cache

demo/.vitepress/config.ts

@@ -0,0 +1,38 @@
+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()

demo/.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import { CustomTheme } from 'ppst-vitepress-theme'
+// import { h } from 'vue'
+
+import './override.css'
+
+export default {
+  ...CustomTheme,
+  // Layout() {
+  //   return h(CustomTheme.Layout, null, {
+  //   })
+  // }
+}

demo/.vitepress/theme/override.css

@@ -0,0 +1,97 @@
+:root {
+  --c-main-color:#80adff;
+}
+
+
+/* card */
+
+.news-box {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+.news-box .card-item {
+  flex-basis: 25%;
+  padding: 15px;
+  transition: all 0.3s ease;
+}
+.news-box .card-item .item-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 15px;
+  padding: 15px;
+  margin-bottom: 140px;
+  background: #f8f8fc;
+  transition: all 0.3s ease;
+}
+.news-box .card-item .item-box .icon {
+  font-size: 48px;
+  color: var(--c-main-color);
+}
+.news-box .card-item .item-box .title {
+  font-size: 18px;
+  line-height: 2;
+  font-weight: 500;
+  color: #020312;
+}
+.news-box .card-item .item-box .desc {
+  font-size: 16px;
+  line-height: 2;
+  color: #717e96;
+  overflow: hidden;
+}
+.news-box .card-item .item-box .desc {
+  font-size: 16px;
+  line-height: 2;
+  color: #717e96;
+}
+.news-box .card-item:hover .item-box {
+  background: var(--c-main-color);
+  transition: all 0.3s ease;
+}
+.news-box .card-item .item-box.active {
+  background: var(--c-main-color);
+  margin-bottom: 0;
+}
+
+.news-box .card-item:hover .item-box .icon,
+.news-box .card-item:hover .item-box .title,
+.news-box .card-item:hover .item-box .desc,
+.news-box .card-item .item-box.active .icon,
+.news-box .card-item .item-box.active .title,
+.news-box .card-item .item-box.active .desc {
+  color: #fff;
+}
+@media (max-width: 1200px) {
+  .banner .banner-left {
+    font-size: 14px;
+  }
+  .banner .banner-left .desc {
+    font-size: 12px;
+  }
+  .note-box {
+    flex-wrap: wrap;
+  }
+  .note-box .note-item {
+    flex-basis: 100%;
+  }
+  .news-box {
+    flex-wrap: wrap;
+  }
+  .news-box .card-item {
+    flex-basis: 100%;
+  }
+  .news-box .card-item .item-box {
+    margin-bottom: 0;
+  }
+
+  .news-box .card-item .item-box .title {
+    font-size: 14px;
+  }
+  .news-box .card-item .item-box .desc {
+    font-size: 12px;
+  }
+}

demo/index.md

@@ -0,0 +1,95 @@
+---
+page: true
+date: 2021-06-30
+title: 自定义标题
+sidebar: false
+---
+<script setup>
+</script>
+<Home>
+
+<template #banner>
+<img src="/img/page.png" /> 
+</template>
+
+<template #description>
+<!-- 一些其他描述 -->
+</template>
+
+  <div class="card-header max-width">
+    <div class="title">手册</div>
+    <div class="desc">基础知识手册(学习基础笔记)</div>
+  </div>
+  <div class="note-box max-width">
+    <div class="note-item">
+      <div class="item-box">
+        <div class="title">💡CSS手册</div>
+        <div class="go">
+          <span class="button-box"
+            ><a href="https://css.web.ppst.top/">💡CSS手册</a></span
+          >
+        </div>
+      </div>
+    </div>
+    <div class="note-item">
+      <div class="item-box">
+        <div class="title">💡JS手册</div>
+        <div class="go">
+          <span class="button-box"><a href="https://js.web.ppst.top/">💡JS手册</a></span>
+        </div>
+      </div>
+    </div>
+    <div class="note-item">
+      <div class="item-box">
+        <div class="title">💡博客</div>
+        <div class="go">
+          <span class="button-box"><a href="https://blog.web.ppst.top/">💡博客</a></span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card-header max-width">
+    <div class="title">随笔</div>
+    <div class="desc">最常用随笔分类</div>
+  </div>
+
+  <div class="news-box max-width">
+    <div class="card-item">
+      <div class="item-box">
+        <div class="icon">?</div>
+        <div class="title">JS笔记</div>
+        <div class="desc">
+          我就是记录一些笔记，以及异常处理经验记录，工作中遇到问题记录解决方案
+        </div>
+      </div>
+    </div>
+    <div class="card-item">
+      <div class="item-box active">
+        <div class="icon">?</div>
+        <div class="title">vue笔记</div>
+        <div class="desc">
+          我就是记录一些笔记，以及异常处理经验记录，工作中遇到问题记录解决方案
+        </div>
+      </div>
+    </div>
+    <div class="card-item">
+      <div class="item-box">
+        <div class="icon">?</div>
+        <div class="title">服务器笔记</div>
+        <div class="desc">
+          我就是记录一些笔记，以及异常处理经验记录，工作中遇到问题记录解决方案
+        </div>
+      </div>
+    </div>
+    <div class="card-item">
+      <div class="item-box active">
+        <div class="icon">?</div>
+        <div class="title">浏览器笔记</div>
+        <div class="desc">
+          我就是记录一些笔记，以及异常处理经验记录，工作中遇到问题记录解决方案
+        </div>
+      </div>
+    </div>
+  </div>
+</Home>

demo/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vitepress dev  --host 0.0.0.0",
+    "build": "vitepress build "
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^18.15.11",
+    "markdown-from-posts": "^1.0.4",
+    "vitepress": "1.0.0-alpha.64",
+    "ppst-vitepress-theme": "^1.0.1"
+  }
+}

demo/pages/archives.md

@@ -0,0 +1,13 @@
+---
+page: true
+title: Archive
+description: Archive
+sidebar: false
+---
+<Archives>
+
+<template #banner>
+<img src="/img/banner.png" />
+</template>
+
+</Archives>

demo/pages/category.md

@@ -0,0 +1,13 @@
+---
+page: true
+title: 分类
+description: 分类
+sidebar: false
+---
+<CategoryPage title='分类'  category='demo' description="分类">
+
+<template #banner>
+<img src="/img/banner.png" />
+</template>
+
+</CategoryPage>

demo/pages/default.md

@@ -0,0 +1,13 @@
+---
+page: true
+title: 默认
+description: 默认
+sidebar: false
+---
+<DefaultPage title='默认'  category='default' description="默认">
+<template #banner>
+<img src="/img/banner.png" />
+</template>
+
+</DefaultPage>
+

demo/pages/search.md

@@ -0,0 +1,11 @@
+---
+page: true
+title: 搜索
+description: 全文检索
+sidebar: false
+---
+<Search>
+<template #banner>
+<img src="/img/banner.png" /> 
+</template>
+</Search>

demo/posts/default/default.md

@@ -0,0 +1,63 @@
+---
+title: default
+date: 2018-09-14 13:57:02
+category: default
+tags:
+  - default
+---
+# 主标题AAAA
+
+## 副标题
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.default{
+  color:red;
+}
+```
+
+```shell
+npm install default
+```
+
+### 副标题1
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.default{
+  color:red;
+}
+```
+
+```shell
+npm install default
+```
+
+
+#### 副标题111
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.default{
+  color:red;
+}
+```
+
+```shell
+npm install default
+```

demo/posts/demo/demo.md

@@ -0,0 +1,63 @@
+---
+title: demo
+date: 2018-09-14 13:57:02
+category: demo
+tags:
+  - demo
+---
+# 主标题BBBB
+
+## 副标题
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.demo{
+  color:red;
+}
+```
+
+```shell
+npm install demo
+```
+
+### 副标题1
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.demo{
+  color:red;
+}
+```
+
+```shell
+npm install demo
+```
+
+
+#### 副标题111
+
+我是内容
+
+```js
+let a = '我是js代码'
+```
+
+```css
+.demo{
+  color:red;
+}
+```
+
+```shell
+npm install demo
+```