Initial rearrangment of vuetom site source

2024-10-09 08:23:08 +00:00
parent dbd456a517
commit e9d08bd263
233 changed files with 22841 additions and 1 deletions
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/feedback/index.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/feedback/index.md
@@ -0,0 +1,17 @@
+--- 
+title: 留言反馈
+---
+
+# {{ $frontmatter.title }}
+
+> 该页面是在 Markdown 中引入 Vue 组件简单的展示
+
+页面文件: `.vitepress/views/vt/vt-feedback.vue`
+
+<ClientOnly>
+  <VtFeedback />
+</ClientOnly>
+
+::: tip
+正在开发中，你以后可以把想说的话写在这里
+:::
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/config.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/config.md
@@ -0,0 +1,182 @@
+--- 
+title: 主题配置
+head:
+  - - meta
+    - name: description
+      content: vuetom 主题配置项
+  - - meta
+    - name: keywords
+      content: vuetom theme config
+---
+
+# {{ $frontmatter.title }}
+
+主题的配置在 `.vitepress/config.ts` 文件中的 themeConfig 属性中配置
+
+下面是一些简要的配置项一览：
+
+其中 head、sidebar、nav 对应的分别是 head脚本、侧边栏菜单、头部导航栏都可以默认为 []
+
+<br>
+
+以下是版本号满足 `vitepress >= 1.x.x` `vuetom-theme >= 2.x.x` 的配置
+
+```js macos
+// .vitepress/config.ts
+export default defineConfigWithTheme<VuetomThemeConfig>({
+  lang: 'en-US',
+  base: '/vt',
+  title: 'Vuetom Theme',
+  description: 'Theme For Vitepress',
+  // head,
+  themeConfig: {
+    nav: nav(),
+    sidebar: {
+      'zh-CN/guide/': sidebarGuide(),
+      'zh-CN/mdshow/': sidebarMdShow()
+    },
+    socialLinks: [
+      { icon: 'github', link: pkg.repository }
+    ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2021-present Lauset'
+    },
+    logoImg: '/logo/vuetom-logo-m.png',
+    bgImg: '/imgs/homg-bg01.jpg',
+    bgColor: '0,0,0',
+    bgOpacity: 0.6,
+    flashEnable: true,
+    flashColor: ['238,17,17', '0,98,255'],
+    parallaxEnable: true,
+    pageBgEnable: true,
+    pageBgOpacity: 0.8,
+    featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
+
+  },
+  markdown: {
+    lineNumbers: false,
+    config: (md) => mdPlugin(md)
+  },
+  lastUpdated: false
+})
+```
+
+<br>
+
+以下是版本号满足 `vitepress = 0.x.x` `vuetom-theme = 1.x.x` 的配置
+
+```js macos
+import { defineConfigWithTheme } from 'vitepress'
+import type { VuetomThemeConfig } from 'vitepress-theme-vuetom'
+
+// .vitepress/config.ts
+// 部分配置项
+export default defineConfigWithTheme<VuetomThemeConfig>({
+  title: 'Vuetom',
+  base: '/',
+  head,
+  themeConfig: {
+    repo: 'GIT地址',
+    docsDir: 'docs',
+    sidebar,
+    nav,
+    bgImg: '/imgs/homg-bg01.jpg',
+    bgColor: '0,0,0',
+    bgOpacity: 0.6,
+    flashEnable: true,
+    flashColor: ['238,17,17', '0,98,255'],
+    pageBgEnable: true,
+    pageBgOpacity: 0.8,
+    featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
+  },
+
+  // ...
+})
+```
+
+以下是对配置项的简要说明
+
+## 首页LOGO
+
+**logoImg**
+
+- 类型：`string`
+- 默认值：`''`
+
+首页上方LOGO，路径中的首个 `/` 表示 `public` 目录
+
+例如：`'/logo/homg-logo.jpg'`
+
+## 首页背景图
+
+**bgImg**
+
+- 类型：`string`
+- 默认值：`undefined`
+
+首页全屏背景图，路径中的首个 `/` 表示 `public` 目录
+
+例如：`'/imgs/homg-bg01.jpg'` 等同于 `/public/imgs/home-bg01.jpg`
+
+**bgColor**
+
+- 类型：`string`
+- 默认值：`'0,0,0'`
+
+背景图边缘的覆盖颜色，值是 `rgb` 的颜色值 `rgb(0,0,0)` 则写为 `'0,0,0'`，默认为黑色
+
+**bgOpacity**
+
+- 类型：`0 - 1`
+- 默认值：`0.6`
+
+覆盖颜色的透明度，搭配上面的覆盖颜色使用，图片中间透明度要比图片边缘透明度要小
+
+图片中间透明度为 `当前bgOpacity - 0.3`，也就是说默认为 `0.3`
+
+## 文章页背景图
+
+注意：文章页背景图片与首页一致
+
+**pageBgEnable**
+
+- 类型：`boolean`
+- 默认值：`true`
+
+文章页面背景图是否开启，默认开启
+
+**pageBgOpacity**
+
+- 类型：`0 - 1`
+- 默认值：`0.8`
+
+文章页背景图透明度，1将看不到背景图，0能清晰看到背景图
+
+**featuresColor**
+
+- 类型：`string | Array`
+- 默认值：`rgba(255,255,255,0.8)`
+
+首页功能面板背景色，可以是单个颜色字符串，也可以是两个字符串组成的数组
+
+**flashEnable**
+
+- 类型：`boolean`
+- 默认值：`false`
+  
+是否开启首页背景图闪烁功能，效果类似于朋克风故障
+
+**flashColor**
+
+- 类型：`string | Array`
+- 默认值：`['0,0,0','0,0,0']`
+
+首页背景闪烁时附加的色彩，0: Top位置的颜色，1: Right位置的颜色，默认都是黑色
+
+**parallaxEnable**
+
+- 类型：`boolean`
+- 默认值：`false`
+  
+是否开启首页部分元素视觉差效果
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/dark.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/dark.md
@@ -0,0 +1,49 @@
+---
+title: 夜间模式
+lang: en-US
+---
+
+
+# {{ $frontmatter.title }}
+
+默认的话夜间模式切换按钮是一直有的，右上角那个太阳图标
+
+## 原理
+
+开关操作修改的是 HTML 根标签的样式，会加上 dark 样式
+
+```html
+<html class="dark" lang="zh-CN"></html>
+```
+
+我们可以事先定义一些 css变量来完成不同语言下或者不同模式下的样式变换
+
+## 主题色覆盖
+
+修改 theme/custom.scss 文件即可
+
+简单展示部分
+
+```css
+:root {
+  // 重写主题色
+
+  // 主色
+  --vp-c-brand: var(--vp-c-blue);
+  --vp-c-brand-light: var(--vp-c-blue-light);
+  --vp-c-brand-lighter: var(--vp-c-blue-lighter);
+  --vp-c-brand-dark: var(--vp-c-blue-dark);
+  --vp-c-brand-darker: var(--vp-c-blue-darker);
+
+  // 副色
+  --vp-c-second: var(--vp-c-pink);
+  --vp-c-second-light: var(--vp-c-pink-light);
+  --vp-c-second-lighter: var(--vp-c-pink-lighter);
+  --vp-c-second-dark: var(--vp-c-pink-dark);
+  --vp-c-second-darker: var(--vp-c-pink-darker); 
+}
+
+.dark {
+
+}
+```
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/index.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/index.md
@@ -0,0 +1,17 @@
+# 指引
+
+`info` : 介绍
+
+`start` : 快速开始
+
+`question` : 问题一览
+
+`prodir` : 主题项目结构
+
+`config` : 主题配置
+
+`lang` : 国际化配置
+
+::: tip
+这里展示的是指引菜单下所有的子菜单
+:::
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/info.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/info.md
@@ -0,0 +1,50 @@
+--- 
+title: 什么是Vitepress？
+head:
+  - - meta
+    - name: description
+      content: vuetom 介绍
+  - - meta
+    - name: keywords
+      content: vuetom theme 
+---
+
+# {{ $frontmatter.title }}
+
+VitePress 是 VuePress 的升级，以 Vite 为基础构建的。是一款快速搭建文档静态网站的框架。
+
+Vite（法语意为 "快速的"，发音 `/vit/` ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。它主要由两部分组成：
+
+- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
+
+- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
+
+## vuetom 呢？
+
+是的，是一款主题，因 vitepress 而诞生。建立在 Vue3 与 Vite 之上的一款文档框架的主题。含有 `文档` 与 `博客` 两种风格模板。其推出目的是为了让大家体验并使用到更多美丽而又有趣的 vitepress 主题，进而大家可以发挥想象展示出更多优美的文档。
+
+## 有什么特点
+
+使用现代扁平化的设计风格，部分 UI 尽量接近于 macos 界面风格
+
+该主题包含了以下相关技术
+
+- [nodejs](http://nodejs.cn/)
+- [vite](https://vitejs.cn/)
+- [vue3](https://v3.vuejs.org/)
+- [vitepress](https://vitejs.cn/vitepress/)
+- [tailwindcss](https://www.tailwindcss.cn/docs)
+
+该主题包含了一下功能模块
+
+**内置UI组件:** 扁平化数据组织，方便编写。含有按钮，弹框，卡片等基础组件
+
+**主题与样式:** 主要包含布局，间距，排版，颜色，边框
+
+**API与指令:** 可搭配组件使用，实现不同组件不同指令效果
+
+## 推荐开发工具？
+
+这就无所谓了吧哈哈。
+
+[vscode编辑器](https://code.visualstudio.com/) => [下载地址](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/lang.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/lang.md
@@ -0,0 +1,109 @@
+---
+title: 多国语言配置
+lang: en-US
+---
+
+# {{ $frontmatter.title }}
+
+:::warning
+适配于 vitepress 1.x.x 版本的功能正在制作，下面是 0.x.x 版本的国际化方案
+:::
+
+你也可以配置多国语言，以首页为例，先在配置文件里配置下 locales，然后创建对应的语言文件夹与文件
+
+
+## 改配置文件
+
+需要在 config.ts 中配置 locales，注意 themeConfig 属性里也要配，两个 locales 内容是不一样的
+
+themeConfig 中的 locales 配置是为了展示下拉菜单的展示内容
+
+根Config 中的 locales 配置是为了展示头部标题内容，description属性可有可无
+
+```js
+// .vitepress/config.ts
+export default defineConfigWithTheme<VuetomThemeConfig>({
+  // ...
+  themeConfig: {
+    // ...
+    locales: {
+      '/zh-CN/': {
+        label: '简体中文',
+        selectText: '多国语言'
+      },
+      '/en-US/': {
+        label: 'English',
+        selectText: 'Languages'
+      }
+    }
+  },
+  locales: {
+    '/zh-CN/': {
+      lang: 'zh-CN',
+      title: 'Vuetom 主题',
+      description: '为 Vitepress 提供的一款主题'
+    },
+    '/en-US/': {
+      lang: 'en-US',
+      title: 'Vuetom Theme',
+      description: 'Theme For Vitepress'
+    }
+  }
+})
+```
+
+**locales** 中的属性介绍
+
+<b>lang</b>: 会直接设置给 `<html>` 标签
+
+<b>title</b>: 不同语言时网站的标题，会替换之前定义的 title
+
+<b>description</b>: 不同语言时网站的描述
+
+<b>label</b>: 语言选择时展示出来的文本内容（例如：中文或English）
+
+<b>selectText</b>: 语言选择时下拉菜单的文本（例如：多国语言或者Languages）
+
+
+
+## 改首页
+
+在 .vitepress 同级目录新建 `zh-CN` 和 `en-US` 文件夹，然后在这个文件夹中分别创建一个 `index.md` 文件
+
+**zh-CN/index.md** 中写入 **中文首页** 要展示的内容
+
+**en-US/index.md** 中写入 **英文首页** 要展示的内容
+
+原来与 .vitepress 同级的 `index.md` 文件中可以改为转发至 `zh-CN/index` 或者 `en-US/index`
+
+例如下方的代码，会直接将 `/` 转发到 `/zh-CN/` 这样就会直接前往中文首页了
+
+```markdown
+---
+title: 'Vuetom Theme'
+lang: en-US
+page: true
+---
+
+<script setup>
+
+if (typeof window !== 'undefined') {
+  const preferredLang = 'zh-CN'
+  window.location.pathname = `/${preferredLang}/`
+}
+
+</script>
+```
+
+::: warning
+其实原理就是路径前加了一个语言标识，那么就在页面文件外加个语言文件夹就好了<br>
+需要处理的就是书写导航栏和菜单栏时记得要在 link 属性前加上语言标识
+:::
+
+下面试试访问一下：
+
+访问 localhost:3000/zh-CN/ 会前往中文首页
+
+访问 localhost:3000/en-US/ 会前往英文首页
+
+访问 localhost:3000 会前往 localhost:3000/zh-CN/
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/prodir.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/prodir.md
@@ -0,0 +1,57 @@
+--- 
+title: 框架目录
+head:
+  - - meta
+    - name: description
+      content: Vuetom 主题目录结构
+  - - meta
+    - name: keywords
+      content: project dir.
+---
+
+# 主题目录
+
+在使用一个框架，其实也要简单了解下该框架的项目文件结构，请向下看吧。
+
+```bash
+vuetom
+  ├─ blog              博客主题Vue组件      文件夹
+  ├─ doc               新版文档，适配vp1.x  文件夹 
+  ├─ docs              旧版文档主题组件      文件夹
+  │   ├─ components        主题Vue组件      文件夹
+  │   ├─ composables       组件脚本         文件夹
+  │   ├─ layouts           布局组件         文件夹
+  │   └─ index.ts          主题入口         文件 
+  ├─ icons             共用图标Vue组件       文件夹
+  ├─ styles            全局SCSS样式         文件夹
+  ├─ support           供支持脚本           文件夹
+  ├─ types             规范描述             文件夹
+  ├─ constant.ts       常量定义             文件
+  └─ index.ts          主题入口文件          文件
+```
+
+接下来介绍本文档**docs**文件夹
+
+```bash
+docs
+  ├─ .vitepress
+  │   └─ config.ts   主题主要配置文件
+  │ 
+  ├─ public          静态资源文件
+  │ 
+  ├─ zh-CN           中文页面
+  │    ├─ feedback   留言反馈
+  │    ├─ guide      指引
+  │    ├─ mdshow     Markdown示例
+  │    ├─ menu       UI组件
+  │    ├─ styl       主题与样式
+  │    └─ index.md   中文首页
+  │ 
+  ├─ crowdin.yml      多国语言配置
+  ├─ index.md         项目首页
+  ├─ CHANGELOG.md     更新日志
+  ├─ package.json     包配置
+  ├─ README.md        项目说明
+  ├─ tsconfig.json    ts配置
+  └─ vite.config.ts   vite配置
+```
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/question.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/question.md
@@ -0,0 +1,53 @@
+--- 
+title: 常见问题 
+head:
+  - - meta
+    - name: description
+      content: 常见问题汇总
+  - - meta
+    - name: keywords
+      content: question
+---
+
+# {{ $frontmatter.title }}
+
+是否经常卡在一些莫名其妙的问题上？让我们来汇总一下问题并给出相应的解决方案吧！
+
+## 问题列表
+
+- [版本多久更新一次？](#q01)
+- [我的样式没有起作用。](#q02)
+- [我不想要背景图咋办啊？](#q03)
+
+## 问题解答
+
+  以下是针对于近期问题所作的答复
+
+- <h3 id="q01">版本多久更新一次？</h3>
+
+  目前进度较慢，但是每周都会更新主要内容的
+
+- <h3 id="q02">我的样式没有起作用。</h3>
+
+  查看 `.vitepress/config.js` 文件进中 `theme` 项是否配置正确
+
+- <h3 id="q03">我不想要背景图咋办啊？</h3>
+
+  你可以用一张纯白色的图片作为背景图啊嘿嘿嘿
+
+## 开发进度
+
+| 功能组件 | 开发进度 | 预估   |
+| - | - | - |
+| 文档风格主题 vitepress 0.x.x | 开发中（80%） | 2022.5 |  
+| 文档风格主题 vitepress 1.x.x | 开发中（80%） | 2022.8 |  
+| 博客风格主题 vitepress 1.x.x | 开发中（50%） | 2022.11 |
+
+## 需要帮助？
+
+  可点击 [留言反馈](/zh-CN/feedback/) 前往问题反馈界面对问题进行简单的描述
+
+::: tip
+目前 vitepress 版本已进入 1.0.0 , vuetom-theme 版本已进入 2.0.0
+
+:::
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/start.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/guide/start.md
@@ -0,0 +1,158 @@
+--- 
+title: 快速使用
+head:
+  - - meta
+    - name: description
+      content: 教你如何掌握框架的工作流程，快速上手。
+  - - meta
+    - name: keywords
+      content: 开始使用
+---
+
+# {{ $frontmatter.title }}
+
+请确保你已经用过 Vitepress 框架，因为主题是建立在框架的基础上使用的。
+
+请确保你使用的 vue 版本是 3+ 且 vitepress 是 1.x 哦。
+
+## 最方便的方式
+
+直接拉取本项目至本地，packages/docs 和 packages/blog 目录下分别是文档和博客示例，修改内容打包编译即可
+
+## 其他方式
+
+### **1.** 脚手架初始化
+
+可以使用脚手架 vuetom-cli 脚手架来进行主题的初始化，会在你本地初始化一个项目
+
+网速慢可以再次尝试或者直接前往模版仓库拉取 [模版仓库](https://github.com/lauset/vuetom-cli)
+
+1. 首先安装脚手架，NPM安装前请确保开启管理员身份运行保证有权限
+
+```js light
+npm i -g vuetom-cli
+```
+
+2. 查看是否安装成功，黑窗口运行一下命令，返回版本号 x.x.x 则表示安装成功
+
+```js light
+vuetom-cli -v
+```
+
+1. 初始化模版，可以选择是否新建目录、仓息、作者、模版仓库等
+
+```js light
+vuetom-cli init
+```
+
+1. 然后便会下载模版，下载完成后，执行以下命令安装依赖并运行文档网站
+
+```js light
+pnpm i
+pnpm dev
+```
+
+::: warning
+模版是从 github 上拉取的，可能有时候会有网速的困惑，也可手动前往拉取下载本地启用
+
+文档模版：<https://github.com/lauset/vuetom-cli/tree/temp-docs>
+
+博客模版：<https://github.com/lauset/vuetom-cli/tree/temp-blog>
+:::
+
+<br/>
+
+### **2.** 通过NPM下载安装主题（已弃用）
+
+:::danger  ⚠️ 已弃用
+
+上传至远程仓库，作为三方依赖使用打包时会出现样式引入问题，暂时放弃使用
+
+从 vitepress-theme-vuetom v2.2.x 开始不再上传远程仓库而是作为目录加至模版项目中
+
+:::
+
+使用这个方式首先你要搭建一个 vitepress 项目，主题只是会覆盖默认样式而已，所以项目还是得搭起来的，可以前往下面 vitepress 官网链接查看并开始搭建
+
+[vitepress搭建文档](https://vitepress.vuejs.org/guide/getting-started.html)
+
+搭建完后最简单的样子就是项目目录里有个 index.md 文件，那么开始下一步
+
+1. 安装主题依赖
+
+使用 NPM 安装最新版本的 vitepress-theme-vuetom 主题依赖包，在你的 vitepress 项目下安装主题包，打开 `终端（DOS）` 输入
+
+```js light
+npm i -D vitepress-theme-vuetom
+```
+
+2. 开始引入主题
+  
+先在 .vitepress （这个文件夹和首页 index.md 是同级目录，没有的自己创建或者去 vitepress 官网看文档）中新建一个名为 theme 的文件夹，在该文件下新建一个 index.ts 文件，当然用 js 还是 ts 文件就看你自己项目的决定了。
+
+大致内容如下:
+
+`VuetomTheme` 是主要的主题布局
+
+`VuetomUI` 是内置的UI组件
+
+```javascript light
+// .vitepress/theme/index.ts
+// 默认导出文档类型的主题
+import VuetomTheme from 'vitepress-theme-vuetom' 
+
+export default {
+  ...VuetomTheme,
+  enhanceApp({ app, router, siteData }) {
+    // app.use(VuetomUI)
+  }
+}
+```
+
+引入了主题，然后你的 index.md 里写上一些内容应该就可以看出效果了
+
+```html light
+---
+home: true
+heroImage: /logo/vuetom-logo-m.png
+heroAlt: LOGO
+heroText: Vuetom
+tagline: vitepress flat theme 
+
+actionText: 快 速 开 始
+actionLink: /zh-CN/guide/info
+
+altActionText: 配 置
+altActionLink: /zh-CN/guide/config
+
+features:
+  - title: 📦 优化的构建
+    details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
+  - title: 🔩 通用的插件
+    details: 在开发和构建之间共享 Rollup-superset 插件接口。
+  - title: 🔑 完全类型化的API
+    details: 灵活的 API 和完整 TypeScript 类型。
+
+footer: MIT Licensed
+---
+
+<div class="frontpage sponsors">
+  <h2>{{ data.text }}</h2>
+</div>
+
+<script setup>
+import { onMounted, reactive } from 'vue'
+const data = reactive({
+    text: '自定义内容'
+})
+onMounted(() => {
+})
+</script>
+
+<style>
+</style>
+```
+
+运行项目后，在 [localhost:3000] 中进入首页
+
+至少到这里主题已经安装完成了，下一步就是主题的配置了，主题什么样还是要看你配的什么样子哦。
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/index.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/index.md
@@ -0,0 +1,160 @@
+---
+layout: home
+
+title: Vuetom
+titleTemplate: Vite & Vue Powered Static Site Generator
+
+hero:
+  name: Vuetom
+  text: 
+  tagline: vitepress flat theme 
+  actions:
+    - theme: brand big
+      text: 快 速 开 始
+      link: /zh-CN/guide/info
+    - theme: alt big
+      text: 配 置
+      link: /zh-CN/guide/config
+
+features:
+  - title: 📦 优化的构建
+    details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
+  - title: 🔩 通用的插件
+    details: 在开发和构建之间共享 Rollup-superset 插件接口。
+  - title: 🔑 完全类型化的API
+    details: 灵活的 API 和完整 TypeScript 类型。
+---
+
+<div class="frontpage sponsors">
+  <h2>感 谢</h2>
+  <div class="platinum-sponsors">
+    <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+      <img :src="src" :alt="name" :id="`sponsor-${id}`">
+      <p>{{ name }}</p>
+    </a>
+  </div>
+  <div class="gold-sponsors">
+    <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+      <img :src="src" :alt="name" :id="`sponsor-${id}`">
+      <p>{{ name }}</p>
+    </a>
+  </div>
+</div>
+
+<script setup>
+import { onMounted } from 'vue'
+import pk from 'vitepress-theme-vuetom/package.json'
+
+const sponsors = [
+  {
+    "id": "vue",
+    "name": "Vue",
+    "href": "https://v3.cn.vuejs.org/",
+    "src": "https://v3.cn.vuejs.org/logo.png",
+    "tier": "platinum"
+  },
+  {
+    "id": "vite",
+    "name": "Vite",
+    "href": "https://vitejs.cn/",
+    "src": "https://vitejs.cn/logo.svg"
+  },
+  {
+    "id": "vitepress",
+    "name": "Vitepress",
+    "href": "https://fttp.jjf-tech.cn/vitepress/",
+    "src": "https://v3.cn.vuejs.org/logo.png"
+  },
+  {
+    "id": "elementplus",
+    "name": "Element Plus",
+    "href": "https://element-plus.gitee.io/zh-CN/",
+    "src": "https://element-plus.gitee.io/images/element-plus-logo.svg"
+  }
+]
+
+function fetchReleaseTag() {
+  onMounted(() => {
+    const dom = document.getElementsByClassName('name')
+    const mainTitle = dom[0]
+    const docsReleaseTag = document.createElement('span')
+    docsReleaseTag.classList.add('release-tag')
+    const releaseTagName = `v${pk.version}`
+    docsReleaseTag.innerText = releaseTagName
+    if (releaseTagName !== undefined) {
+      mainTitle.appendChild(docsReleaseTag)
+    }
+    // fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
+    //   .then((res) => res.json())
+    //   .then((json) => {
+    //     const mainTitle = document.getElementById('main-title')
+    //     mainTitle.style.position = 'relative'
+
+    //     const docsReleaseTag = document.createElement('span')
+    //     docsReleaseTag.classList.add('release-tag')
+    //     const releaseTagName = json.tag_name
+    //     docsReleaseTag.innerText = releaseTagName
+
+    //     if (releaseTagName !== undefined) {
+    //       mainTitle.appendChild(docsReleaseTag)
+    //     }
+    //   })
+  })
+}
+
+fetchReleaseTag()
+</script>
+
+<style>
+.sponsors {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.sponsors a {
+  color: #999;
+  margin: 1em;
+  display: block;
+}
+
+.sponsors img {
+  max-width: 160px;
+  max-height: 40px;
+}
+
+.sponsors.frontpage {
+  text-align: center;
+}
+
+.sponsors.frontpage img {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.sponsors.frontpage h2 {
+  color: #999;
+  font-size: 1.2rem;
+  border: none;
+}
+
+.sponsors.sidebar a img {
+  max-height: 36px;
+}
+
+.platinum-sponsors {
+  margin-bottom: 1.5em;
+}
+
+.platinum-sponsors a img {
+  max-width: 240px;
+  max-height: 60px;
+}
+
+.gold-sponsors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+</style>
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/codeblock.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/codeblock.md
@@ -0,0 +1,102 @@
+---
+title: 代码块展示
+head:
+  - - meta
+    - name: description
+      content: 代码块展示
+  - - meta
+    - name: keywords
+      content: code
+---
+
+# {{ $frontmatter.title }}
+
+## MD语法展示
+
+使用三个 ` 符号将代码包裹其中便是展示代码块
+
+<br/>
+
+**亮/暗主题切换**
+
+根据文档主题模式切换
+
+**代码块主题 macos**
+
+可以在 language_key(语言标识) 后加入  `macos`
+
+输入内容：
+
+<div>
+```java macos
+</div>
+String language = "Java";
+<div>
+```
+</div>
+
+展示效果：
+
+```java macos
+String language = "Java";
+```
+
+<br/>
+
+**默认主题**
+
+默认主题是以暗色系为主的
+
+输入内容：
+
+<div>
+```js
+</div>
+String language = "JS";
+<div>
+```
+</div>
+
+输出内容：
+
+```java
+String language = "JS";
+```
+
+<br/>
+
+**示例展示**
+  
+- javascript ( js macos )
+
+```js macos
+function fun(){
+ echo "Hello, World!";
+}
+fun();
+```
+
+- Java ( java )
+
+```java
+System.out.print(1);
+```
+
+- Python ( py macos )
+
+```py macos
+#!/usr/bin/env python3
+print("Hello, World!");
+```
+
+- SQL ( sql )
+
+```sql
+select user_name from user_info
+```
+
+- Shell ( bash, shell )
+
+```bash
+echo '1'
+```
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/custom.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/custom.md
@@ -0,0 +1,58 @@
+---
+title: 自定义语法
+head:
+  - - meta
+    - name: description
+      content: 自定义 Markdown 语法
+  - - meta
+    - name: keywords
+      content: markdown custom 
+---
+
+# {{ $frontmatter.title }}
+
+## 信息框
+
+```md
+::: tip 使用TIPS代替
+提示信息
+:::
+
+::: info
+信息消息
+:::
+
+::: warning
+警告消息
+:::
+
+::: danger
+危险消息
+:::
+
+::: details Details
+详细信息
+:::
+```
+
+效果如下：
+
+::: tip 使用TIPS代替
+提示内容
+:::
+
+::: info
+INFO消息
+:::
+
+::: warning
+WARNING消息 <a>a链接</a>
+:::
+
+::: danger
+DANGER消息 [md链接](./example.md)
+:::
+
+::: details Details
+详细信息
+:::
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/example.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/example.md
@@ -0,0 +1,72 @@
+--- 
+title: 效果示例
+head:
+  - - meta
+    - name: description
+      content: 来看看 MD 会变成什么样子
+  - - meta
+    - name: keywords
+      content: markdown example
+---
+
+
+# Markdown 效果示例
+
+-------------------- 手动分割线 --------------------
+
+
+# This is an h1 tag
+## This is an h2 tag
+### This is an h3 tag
+#### This is an h4 tag
+##### This is an h5 tag
+###### This is an h6 tag
+
+
+*这是斜体*
+_这是斜体_
+**这是黑体**
+__这是黑体__
+*斜体里加**黑体***
+**黑体里加*斜体***
+
+
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+
+
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
+
+
+![Yaktocat的图片](/logo/vuetom-logo.png)
+
+
+http://github.com - automatic!
+[GitHub](http://github.com)
+
+
+As Kanye West said:
+> We're living the future so
+> the present is our past.
+
+
+I think you should use an
+`<addr>` element here instead.
+
+
+First Header | Second Header
+------------ | -------------
+Content from cell 1 | Content from cell 2
+Content in the first column | Content in the second column
+
+
+~~this~~
+
+
+😝🌟🐫✨🚶 
--- a/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/index.md
+++ b/packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/index.md
@@ -0,0 +1,31 @@
+---
+title: UI组件
+head:
+  - - meta
+    - name: description
+      content: 各种各样的扁平化UI组件
+  - - meta
+    - name: keywords
+      content: components 
+---
+
+# {{ $frontmatter.title }}
+
+### `Vuetom UI`
+
+[ui 文档](http://ui.tomhub.cn)
+
+[ui github](https://github.com/lauset/vuetom-ui)
+
+::: tip
+UI 文档正在不断完善中，请客观耐心等待一下吧T-T
+:::
+
+
+### Markdown 语法示例
+
+这里将会展示在该文档中markdown所呈现的效果
+
+`Example` : Markdown 语法示例
+
+`Custom md` : 自定义语法