From a9bb8c8f1840aa589604ca19d0d312cb695eb96a Mon Sep 17 00:00:00 2001
From: Guoqi Sun <sun412926@gmail.com>
Date: Thu, 11 Apr 2024 10:41:40 +0800
Subject: [PATCH] feat: update docs & add img components

---
 .vitepress/components/ImgCenter.vue | 17 +++++++++++++++++
 .vitepress/theme/custom.css         |  3 +--
 .vitepress/theme/index.js           |  2 ++
 README.md                           | 18 ++++++++++++++++++
 basic/create.md                     |  7 ++-----
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 .vitepress/components/ImgCenter.vue
 create mode 100644 README.md

diff --git a/.vitepress/components/ImgCenter.vue b/.vitepress/components/ImgCenter.vue
new file mode 100644
index 0000000..7967c3d
--- /dev/null
+++ b/.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>
\ No newline at end of file
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index 0780e79..ccf7a21 100644
--- a/.vitepress/theme/custom.css
+++ b/.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;
 }
\ No newline at end of file
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 59eda72..e459620 100644
--- a/.vitepress/theme/index.js
+++ b/.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);
   },
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a597018
--- /dev/null
+++ b/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>
+```
\ No newline at end of file
diff --git a/basic/create.md b/basic/create.md
index a90382c..44ac8ea 100644
--- a/basic/create.md
+++ b/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>