feat: ppst-vitepress-theme

test/.vitepress/config.ts

@@ -0,0 +1,44 @@
+
+import path from 'path'
+import baseConfig from '../../src/vitepress/config/baseConfig'
+
+async function config() {
+  return {
+    extends: baseConfig,
+    vite: {
+      build: {
+        minify: false
+      },
+      resolve: {
+        alias: {
+          'ppst-vitepress-theme': path.join(__dirname, '../../src')
+        }
+      }
+    },
+    themeConfig: {
+      title: 'AAAAA',
+      description: '自定义主题AAAA',
+      docRoot:'test',
+      hasDarkSwitch:true,
+      homeConfig:{
+        headline:'AAAA大标题',//大标题
+        headlineHeight:'AAAA高亮',//大标题高亮
+        subheading:'AAAA小标题',//小标题
+        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()

test/.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, {
+    })
+  }
+}

test/.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;
+  }
+}

test/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>

test/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>

test/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>

test/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>
+

test/pages/search.md

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

test/posts/default/default.md

@@ -0,0 +1,63 @@
+---
+title: default
+date: 2018-09-14 13:57:02
+category: default
+tags:
+  - default
+---
+# 主标题
+
+## 副标题
+
+我是内容
+
+```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
+```

test/posts/demo/demo.md

@@ -0,0 +1,63 @@
+---
+title: demo
+date: 2018-09-14 13:57:02
+category: demo
+tags:
+  - demo
+---
+# 主标题
+
+## 副标题
+
+我是内容
+
+```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
+```