docs: 新增vitepress使用

simply-none · Oct 17, 2023 · 5fcc7f1 · 5fcc7f1
1 parent 6166bd7
commit 5fcc7f1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
@@ -8,6 +8,7 @@ import { sidebar } from "./sibar";
 
 export default defineConfig({
   markdown: {
+    lineNumbers: true,
     theme: {
       light: 'github-dark-dimmed',
       dark: 'material-theme-darker'
@@ -21,6 +22,7 @@ export default defineConfig({
   lastUpdated: true,
   themeConfig: {
     editLink: {
+      text: '编辑此页面',
       pattern: 'https://github.com/simply-none/latest-blogs/edit/master/docs/:path'
     },
     logo: "/icon.svg",

diff --git a/docs/.vitepress/sibar.js b/docs/.vitepress/sibar.js
@@ -301,6 +301,10 @@ export function sidebarUsageWorkTool() {
           text: "使用docsify plugin",
           link: "/usage-work-tool/其他工具/usage-docsify-plugin",
         },
+        {
+          text: "使用viteprss",
+          link: "/usage-work-tool/其他工具/usage-vitepress",
+        },
       ],
     },
   ];

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -39,3 +39,23 @@ html.dark .vp-doc [class*="language-"] pre {
   padding-left: 3px;
   margin: 4px 0;
 }
+
+html:not(.dark) .vp-doc .line-numbers-wrapper {
+  background: #292b30;
+  color: #9b9b9b;
+  border-right: #575757 1px solid;
+}
+
+html:not(.dark) .vp-doc [class*='language-'] > button.copy {
+  border: 1px solid #72798b;
+  background-color: #292b30;
+  background-image: var(--vp-icon-copy);
+}
+
+html:not(.dark) .vp-doc [class*='language-'] > button.copy.copied, .vp-doc [class*='language-'] > button.copy:hover.copied {
+  background-color: #292b30;
+}
+
+html:not(.dark) .vp-doc [class*='language-'] > span.lang {
+  color: rgb(166 166 189 / 56%);
+}
diff --git a/docs/usage-work-tool/其他工具/usage-vitepress.md b/docs/usage-work-tool/其他工具/usage-vitepress.md
@@ -0,0 +1,46 @@
+# usage-vitepress
+
+## 信息提示、块折叠、多tab
+
+::: code-group
+
+```text [提示]
+# ::: [info | tip | warning | danger | details] 标题名
+info box
+# :::
+```
+
+```text [块折叠]
+# ::: details 标题名
+内部可以展示任何markdown语法
+# :::
+```
+
+```text [块折叠]
+# ::: code-group
+
+#```js [标题名]
+<!-- code -->
+#```
+
+# :::
+```
+
+:::
+
+## 引入其他md文件
+
+使用`<!-- @include: file-path -->`即可
+
+## 在md中使用vue组件
+
+> 对于style预处理器，需要先安装，比如sass、less、stylus
+
+**直接使用**：
+
+可直接使用vue的`script`、`style`标签，而模板则不需要template标签包裹
+
+**引入组件**：
+
+
+先通过`script`标签import导入组件，然后直接使用该组件即可，和vue一样