📃 docs: 文档更新

docs/.vitepress/components/DemoSites.vue

@@ -11,7 +11,7 @@ const numOfRow = ref(6);
 		<tr v-for="row in Math.ceil(siteUseThemes.length / numOfRow)" :key="row" align="center">
 			<template v-for="col in numOfRow">
 				<td v-if="siteUseThemes[(row - 1) * numOfRow + col - 1]" :key="col" class="px-1 py-2">
-					<demo-site :site="sites[(row - 1) * numOfRow + col - 1]" />
+					<demo-site :site="siteUseThemes[(row - 1) * numOfRow + col - 1]" />
 				</td>
 			</template>
 		</tr>

docs/.vitepress/config.ts

@@ -1,41 +1,28 @@
-import { defineConfig } from "vitepress";
+import { defineConfig } from "vitepress"
 
 export default defineConfig({
 	lang: "zh-CN",
 	title: "Hexo-Theme-Async",
 	description: "🎈 A simple, lightweight Hexo theme",
 	lastUpdated: true,
 	head: [["link", { rel: "icon", href: "/favicon.svg" }]],
-
 	locales: {
 		"/en/": {
 			lang: "en-US",
 			label: "English",
 			description: "A simple & lightweight theme for Hexo.",
-			selectText: "English",
 		},
 		"/": {
 			lang: "zh-CN",
 			label: "简体中文",
 			description: "A simple & lightweight theme for Hexo.",
-			selectText: "简体中文",
 		},
 	},
-
 	themeConfig: {
 		logo: "/logo.svg",
 		search: {
 			provider: 'local'
 		},
-		/* algolia: {
-			appId: "GER60TPC08",
-			apiKey: "993137f59d71d252c8bafbce33bda9c2",
-			indexName: "hexo_theme_async_docs",
-		}, */
-		editLink: {
-			pattern: "https://github.com/Maluns/hexo-theme-async/edit/master/docs/:path",
-			text: "帮助改善此页面！( ￣□￣)/",
-		},
 		socialLinks: [
 			{
 				icon: "github",
@@ -48,22 +35,29 @@ export default defineConfig({
 				link: "https://gitee.com/ml13/hexo-theme-async",
 			},
 		],
+		editLink: {
+			pattern: "https://github.com/Maluns/hexo-theme-async/edit/master/docs/:path",
+			text: "帮助改善此页面！( ￣□￣)/",
+		},
 		nav: [
-			{ text: "Guide", link: "/guide/" },
+			{ text: "Guide", link: "/en/guide/" },
 			{ text: "DemoSites", link: "/demo/" },
-			{ text: "HexoEditor", link: "https://web-hexo-editor.imalun.com/" },
 			{ text: "Sponsors", link: "/sponsors/" },
+			{
+				text: "Languages",
+				items: [
+					{ text: "简体中文", link: "/guide/" },
+					{ text: "English", link: "/en/guide/" },
+				],
+			},
 			{
 				text: "Docs",
 				items: [
-					{
-						items: [
-							{ text: "Preview", link: "http://hexo-theme-async.imalun.com/" },
-							{ text: "Laster", link: "http://async-docs.imalun.com/" },
-						],
-					},
+					{ text: "Preview", link: "http://hexo-theme-async.imalun.com/" },
+					{ text: "Laster", link: "http://async-docs.imalun.com/" },
 				],
 			},
+			{ text: "HexoEditor", link: "https://web-hexo-editor.imalun.com/" },
 		],
 		sidebar: {
 			"/": [
@@ -163,16 +157,9 @@ export default defineConfig({
 				},
 			],
 		},
-		localeLinks: {
-			text: "language",
-			items: [
-				{ text: "简体中文", link: "/guide/" },
-				{ text: "English", link: "/en/guide/" },
-			],
-		},
 		footer: {
 			message: "Released under the SATA | MIT License.",
 			copyright: "Copyright © 2020-PRESENT MaLuns",
 		},
 	},
-});
+})

docs/en/guide/index.md

@@ -24,7 +24,7 @@ yarn add -D hexo-renderer-less hexo-renderer-ejs
 
 ## Install
 
--   npm install (recommended)
+- npm install (recommended)
 
 ![npm (tag)](https://img.shields.io/npm/v/hexo-theme-async/latest?color=red&label=hexo-theme-async%40latest&logo=npm&style=for-the-badge)
 
@@ -34,7 +34,7 @@ Go to your Hexo blog root and do:
 npm i hexo-theme-async@latest
 ```
 
--   Install through Clone repository (not recommended)
+- Install through Clone repository (not recommended)
 
 ::: danger
 It is not recommended to install the theme in this way. The theme version number will not be displayed by pulling the theme version (you can also manually complete the version of package.json), which will cause trouble in locating the bug version and subsequent upgrade. Install this way only if you need to modify the source files and no longer need to upgrade.
@@ -67,7 +67,7 @@ Your project structure should look like this
 
 :::
 
--   Install the preview via npm
+- Install the preview via npm
 
 ![npm (tag)](https://img.shields.io/npm/v/hexo-theme-async/beta?color=red&label=hexo-theme-async%40beta&logo=npm&style=for-the-badge)
 
@@ -104,17 +104,31 @@ The complete configuration of the theme schema is as follows
 
 ```yaml
 theme:
-    switch: true
-    default: style-light # style-light style-dark
+  switch: true
+  default: style-light # style-light style-dark
 ```
 
 You can define only in `_config.async.yml` (of course, it is possible to override all of them).
 
 ```yaml
 theme:
-    default: style-dark
+  default: style-dark
 ```
 
 :::
 
 See [here](./config) for more theme configurations
+
+## Demo Video
+
+- installation
+  - [npm installation demo](https://www.bilibili.com/video/BV1Cs4y1J7vv/)
+  - [download the themes catalog demo](https://www.bilibili.com/video/BV1mg4y137Zi/)
+- configuration
+  - [common configuration demonstrations](https://www.bilibili.com/video/BV1cm4y1z7tQ/)
+  - [theme custom icons custom code highlighting demonstration](https://www.bilibili.com/video/BV1Da4y1M7UF/)
+  - [random cover link page album page configuration demonstration](https://www.bilibili.com/video/BV1cs4y1m7RT/)
+- run the source code
+  - [hexo theme async source code runs the demo](https://www.bilibili.com/video/BV19L41127LH/)
+- online experience
+  - [stackblitz](https://stackblitz.com/edit/node-tshsxq?embed=1&file=README.md)

docs/en/index.md

@@ -1,5 +1,5 @@
 ---
-title: 主页
+title: Home
 layout: home
 
 hero:
@@ -10,8 +10,8 @@ hero:
   actions:
     - text: 🚀 Get Started
       link: /en/guide/
-    - text: 💻 Demo Sites
-      link: /demo/
+    - text: 💻 Online demo
+      link: https://stackblitz.com/edit/node-tshsxq?embed=1&theme=dark&view=editor
       theme: alt
 
 features:
@@ -31,4 +31,6 @@ footer:
   author:
     name: MaLuns
     url: https://www.imalun.com
----
+---
+
+<DemoSitesLine title="📢 Sites that use themes" />