feat: update docs & add img components

.vitepress/components/ImgCenter.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="imgLayout">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+.imgLayout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

.vitepress/theme/custom.css

@@ -25,13 +25,12 @@ section > div.item > h2 {
 
 /* 文章图片圆角 */
 #VPContent img {
-  align-self: center;
   border-radius: 1rem;
 }
 
 /* 联系我们 */
 #VPSidebarNav > div:nth-child(5) > section > div > div > div > a > p {
-  color: #3c3c43;
+  color: var(--vp-c-text-1);
   margin-left: -1em;
   font-weight: 700;
 }

.vitepress/theme/index.js

@@ -1,4 +1,5 @@
 // .vitepress/theme/index.js
+import ImgCenter from "../components/ImgCenter.vue";
 import ImgDesc from "../components/ImgDesc.vue";
 import Link from "../components/Link.vue";
 import DefaultTheme from "vitepress/theme";
@@ -12,6 +13,7 @@ export default {
   ...DefaultTheme,
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    app.component("ImgCenter", ImgCenter);
     app.component("ImgDesc", ImgDesc);
     app.component("Link", Link);
   },

README.md

@@ -0,0 +1,18 @@
+## 内嵌视频
+
+```html
+<iframe src="https://lusun.com/embed/?id=芦笋视频ID" width="100%" height="500px" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+## 图片居中和描述
+
+```html
+<ImgCenter></ImgCenter>
+<ImgDesc></ImgDesc>
+```
+
+## 链接卡片
+
+```html
+<Link title="芦笋录屏官网——新一代极简视频录制工具" logo="https://lusun.com/logo.png" url="https://lusun.com"></Link>
+```

basic/create.md

@@ -47,8 +47,5 @@ description: 这里介绍了如何在芦笋提词器创建文稿
 
 欢迎加入芦笋提词器用户交流群，你可以在群内随时反馈使用问题以及功能建议，期待你的声音～
 
-<div align="center">
-  <img src="../public/.gitbook/assets/quncode.png" alt="" width="198">
-    <p align="center" style="font-size:12px; margin-top:0;" >芦笋用户交流群</p>
-</div>
-
+<ImgCenter><img src="../public/.gitbook/assets/quncode.png" alt="" width="200"></ImgCenter>
+<ImgDesc>芦笋用户交流群</ImgDesc>