From 6dba71b535d617c34355e8f429f28110f40f112a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=91=E8=8B=8D=E7=8B=97?= <admin@imalun.com>
Date: Wed, 20 Mar 2024 16:50:27 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/_config.async.yml          | 12 ++++-
 demo/source/demo.js             | 20 ++++++++
 docs/.vitepress/assets/log.json | 14 ++++++
 docs/guide/config.md            | 82 +++++++++++++++++++++++++++++++++
 4 files changed, 127 insertions(+), 1 deletion(-)

diff --git a/demo/_config.async.yml b/demo/_config.async.yml
index 04c919c..102fc01 100644
--- a/demo/_config.async.yml
+++ b/demo/_config.async.yml
@@ -15,6 +15,9 @@ top_bars:
     url: /customize_page/
   - title: 相册
     url: /gallery/
+	- title: 日志
+		url: https://hexo-theme-async.imalun.com/guide/change-log
+		noswup: true
 
 sidebar:
   typedTextPrefix: I`m
@@ -141,4 +144,11 @@ layout:
   page_loading: async/page-loading
   post_card: async/post-card
   fixed_btn: async/fixed-btn
-  # header_search: async/empty
\ No newline at end of file
+  # header_search: async/empty
+
+banner:
+	danmu: 
+		enable: true
+		avatar: true
+		delayRange: 5000
+		speed: 80
\ No newline at end of file
diff --git a/demo/source/demo.js b/demo/source/demo.js
index 985bfec..424dee3 100644
--- a/demo/source/demo.js
+++ b/demo/source/demo.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 (() => {
 	// eslint-disable-next-line no-undef
 	console.log(
@@ -5,4 +6,23 @@
 		'color: white; background: #0078E7; padding:5px 0;margin: 0 0 2px 0;border-radius: 4px 0 0 4px;',
 		'padding: 4px;border:1px solid #0078E7;border-radius: 0 4px 4px 0; background: linear-gradient(70deg, #e3f9eb, #d1dbff);',
 	);
+
+	danMu(() =>
+		[
+			'举杯邀明月，对影成三人',
+			'会当凌绝顶，一览众山小',
+			'云想衣裳花想容，春风拂槛露华浓',
+			'二十四桥明月夜，玉人何处教吹箫？',
+			'月落乌啼霜满天，江枫渔火对愁眠。',
+			'两岸猿声啼不住，轻舟已过万重山。',
+			'泠泠七弦上，静听松风寒。',
+			'举杯邀明月，对影成三人',
+			'会当凌绝顶，一览众山小',
+			'云想衣裳花想容，春风拂槛露华浓',
+			'二十四桥明月夜，玉人何处教吹箫？',
+			'月落乌啼霜满天，江枫渔火对愁眠。',
+			'两岸猿声啼不住，轻舟已过万重山。',
+			'泠泠七弦上，静听松风寒。',
+		].map((text, id) => ({ id, text, avatar: '/demosite/img/avatar.jpg' })),
+	);
 })();
diff --git a/docs/.vitepress/assets/log.json b/docs/.vitepress/assets/log.json
index d903e46..178fac5 100644
--- a/docs/.vitepress/assets/log.json
+++ b/docs/.vitepress/assets/log.json
@@ -2,6 +2,20 @@
 	{
 		"large_version": "v2.1.x",
 		"children": [
+			{
+				"version": "2.1.13",
+				"date": "2024-03-20",
+				"logs": [
+					{
+						"type": "feat",
+						"text": "添加 banner 弹幕动画"
+					},
+					{
+						"type": "style",
+						"text": "最小字体由 11px 调整为 12px"
+					}
+				]
+			},
 			{
 				"version": "2.1.12",
 				"date": "2024-03-18",
diff --git a/docs/guide/config.md b/docs/guide/config.md
index d0aebe9..2e183c8 100644
--- a/docs/guide/config.md
+++ b/docs/guide/config.md
@@ -410,6 +410,88 @@ banner:
 
 :::
 
+### 弹幕动画
+
+- `danmu`
+	- `enable`：是否开启弹幕动画插件
+  - `el`：弹幕填充区域，默认 banner 元素
+  - `avatar`：是否显示头像，默认 false 
+  - `speed`：弹幕每秒滚动距离，默认每秒滚动 20px
+  - `height`：弹幕高度，默认 36px
+  - `gapWidth`：弹幕前后间隔，默认 20px
+  - `gapHeight`：弹幕上下间隔，默认 20px
+  - `delayRange`：延时范围时间，默认 5000 ms
+  - `align`：弹幕对齐方式，参考 align-items
+  - `mode`：弹幕区域大小，'half' | 'top' | 'full'
+	
+开启弹幕示例：
+
+``` yaml
+banner:
+	danmu: 
+		enable: true
+		avatar: true
+		delayRange: 5000
+		speed: 80
+```
+
+开启后会在 window 挂载一个 danMu 方法，danMu 接收一个函数作为入参，函数调用返回需要加载弹幕数据
+
+``` ts
+declare type DanMuFun = ()=> Promise<DanMuData | DanMuData[]>;
+
+declare type DanMuData = {
+	id: string | number;
+	text: string;
+	url?: string;
+	avatar?: string;
+};
+
+```
+
+使用示例：
+
+``` js
+danMu(
+	() => [
+		'举杯邀明月，对影成三人',
+		'会当凌绝顶，一览众山小',
+		'云想衣裳花想容，春风拂槛露华浓',
+		'二十四桥明月夜，玉人何处教吹箫？',
+		'月落乌啼霜满天，江枫渔火对愁眠。',
+		'两岸猿声啼不住，轻舟已过万重山。',
+		'泠泠七弦上，静听松风寒。',
+		'举杯邀明月，对影成三人',
+		'会当凌绝顶，一览众山小',
+		'云想衣裳花想容，春风拂槛露华浓',
+		'二十四桥明月夜，玉人何处教吹箫？',
+		'月落乌啼霜满天，江枫渔火对愁眠。',
+		'两岸猿声啼不住，轻舟已过万重山。',
+		'泠泠七弦上，静听松风寒。'
+	].map((text, id) => ({ id, text }))
+)
+```
+
+加载 twikoo 评论示例：
+
+``` js
+twikoo && danMu(
+	() => twikoo.getRecentComments({
+		envId: 'id',
+		urls: [location.pathname].filter(i => i !== '/'),
+		pageSize: 30,
+		includeReply: false
+	}).then(function (res) {
+		return res.map((item, i) => ({
+			id: item.id,
+			url: item.url,
+			text: item.commentText,
+			avatar: item.avatar,
+		}))
+	})
+)
+```
+
 ## 页脚 Footer
 
 此配置在 `v1.1.7+` 新增，以前版本在 [用户信息-user](#用户信息-user) 配置。