Skip to content

Commit d794f84

Browse files
authored
Merge pull request #204 from DeepSea09/main
增加消息预览库文档,增加部分图片资源文档,补全kmd说明文档
2 parents dda5a99 + 7b61a37 commit d794f84

File tree

3 files changed

+227
-0
lines changed

3 files changed

+227
-0
lines changed

docs/zh-cn/design-resources.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# 设计资源
2+
3+
一些图片资源
4+
5+
![](https://img.kookapp.cn/attachments/2023-01/05/63b644fe8d730.svg)
6+
7+
![](https://img.kookapp.cn/attachments/2023-01/05/63b6457f40caa.svg)
8+
9+
![](https://img.kookapp.cn/attachments/2023-01/05/63b645851ff19.svg)
10+
11+
![](https://img.kookapp.cn/attachments/2023-01/05/63b6458c884f4.svg)
12+
13+
![](https://img.kookapp.cn/attachments/2023-01/05/63b645920c0dd.svg)
14+
15+

docs/zh-cn/kmarkdown-desc.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# KMarkdown 详细解析
2+
3+
在发送聊天消息时,为了支持用户的复杂的消息需求,以及有更好的用户体验,我们引入了 markdown,同时,基于 markdown 的标准规范,我们加入了自己的一些适配和扩展。为了与 markdown 进行区分,在本文档中,我们统一称之为 KMarkdown。
4+
5+
我们仅支持在文档中的一些语法,如果某个语法在 markdown 中,但是却没在文档中提及,那么它属于我们目前不支持的语法,建议用户不要使用。
6+
7+
我们还提供了 kmarkdown 消息编辑器,方便可视化编辑:[点击使用](https://kookapp.cn/tools/message-builder.html#/kmarkdown)
8+
9+
## 主要格式规范
10+
11+
1. 语法来源大部分来自于默认的 markdown 语法。如果无特殊说明,用户只需遵守 markdown 语法即可。
12+
2. 自定义的语法大部分会保证这样的格式:`(tagName)value(tagName)[attributes]`, 如果这个标签没有属性,那么 `[attributes]` 会被省略。
13+
3. 大部分标签都支持换行。
14+
15+
| 格式 | 语法来源 | 说明 |
16+
| -------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
17+
| `**加粗文字**` | markdown | 加粗 |
18+
| `*斜体文字*` | markdown | 斜体 |
19+
| `***加粗斜体***` | markdown | 加粗斜体 |
20+
| `~~删除线~~` | markdown | 删除线 |
21+
| `[链接文字](链接地址)` | markdown | 链接,仅允许 http, https 的链接。如果我们希望链接在下面显示缩略图(即链接解析),需要保证链接文字与链接地址完全一致才可以 |
22+
| `---` | markdown | 分隔线 |
23+
| `> hello world` | markdown | 引用:换行会一直作用,直到遇见两个换行(\n\n),这两个换行实际不会显示换行 |
24+
| `(ins)下划线内容(ins)` | 自定义 | 下划线 |
25+
| `(spl)剧透(spl)` | 自定义 | 内容默认是遮住的,只有用户点击才会显示 |
26+
| `:emoji:` | emoji | 基本与 emoji 的 [shortcode](https://www.webfx.com/tools/emoji-cheat-sheet/) 写法保持一致, [KOOK 表情 json 文件](https://img.kookapp.cn/assets/emoji.json) |
27+
| `(emj)服务器表情名(emj)[服务器表情id]` | 自定义 | 服务器表情,需要有服务器发送服务器表情的权限 |
28+
| `(chn)频道ID(chn)` | 自定义 | 频道,提及频道 |
29+
| `(met)用户id/here/all(met)` | 自定义 | @用户,all 代表 @所有用户,here 代表 @所有在线用户 |
30+
| `(rol)角色ID(rol)` | 自定义 | @某角色所有用户 |
31+
| `` `行内代码` `` | markdown | 行内代码 |
32+
| ` ```语言\n ``` ` | markdown | 代码块 |
33+
| `\特殊字符` | markdown | 转义,比如将命中语法的特殊字符原样显示 |

docs/zh-cn/message-preview.md

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# 消息预览
2+
3+
我们针对卡片消息和 KMarkdown 消息封装了一套消息预览开发工具:[点击使用](https://github.com/laiyuzenb/kook_message_preview)
4+
5+
## 加载 wasm scripts
6+
7+
有以下两种加载方式
8+
9+
1. 下载 https://cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js 复制代码 至 html 文件中 的 script 标签中
10+
11+
```html
12+
<html>
13+
<head>
14+
<meta charset="UTF-8" />
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
16+
<title>Document</title>
17+
</head>
18+
19+
<body>
20+
<script>
21+
//cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js
22+
https: 里面的代码
23+
</script>
24+
</body>
25+
</html>
26+
```
27+
28+
2. 使用组件时 传入参数 `external=cdn地址`
29+
例如以下代码示例都使用 external https://cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js
30+
31+
```js
32+
import { MessagePreview } from '@kookapp/kook-message-preview'
33+
34+
export default () => (
35+
<MessagePreview external="https://cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js" />
36+
)
37+
```
38+
39+
## 卡片消息基本使用
40+
41+
这是一个简单的卡片消息例子
42+
43+
```jsx
44+
import { MessagePreview } from '@kookapp/kook-message-preview'
45+
46+
const content = [
47+
{
48+
type: 'card',
49+
size: 'lg',
50+
theme: 'warning',
51+
modules: [
52+
{
53+
type: 'header',
54+
text: {
55+
type: 'plain-text',
56+
content: '近期活动公告',
57+
},
58+
},
59+
{
60+
type: 'divider',
61+
},
62+
{
63+
type: 'section',
64+
mode: 'left',
65+
accessory: {
66+
type: 'image',
67+
src: 'https://img.kaiheila.cn/assets/2021-01/FckX3MDe6S02i020.png',
68+
circle: true,
69+
},
70+
text: {
71+
type: 'plain-text',
72+
content:
73+
'社区将在1月20日开启副本速通挑战,参与本次活动的小伙伴均有礼品相送!',
74+
},
75+
},
76+
{
77+
type: 'section',
78+
text: {
79+
type: 'kmarkdown',
80+
content: '**报名方法**',
81+
},
82+
},
83+
{
84+
type: 'section',
85+
mode: 'right',
86+
accessory: {
87+
type: 'button',
88+
theme: 'primary',
89+
value: '123',
90+
text: {
91+
type: 'plain-text',
92+
content: '报名',
93+
},
94+
},
95+
text: {
96+
type: 'kmarkdown',
97+
content: '点击右侧“报名”按钮,即可完成报名。',
98+
},
99+
},
100+
{
101+
type: 'section',
102+
text: {
103+
type: 'kmarkdown',
104+
content: '**挑战奖励**\n',
105+
},
106+
},
107+
{
108+
type: 'section',
109+
accessory: {},
110+
text: {
111+
type: 'paragraph',
112+
cols: 3,
113+
fields: [
114+
{
115+
type: 'kmarkdown',
116+
content: '第一名',
117+
},
118+
{
119+
type: 'kmarkdown',
120+
content: '第二名',
121+
},
122+
{
123+
type: 'kmarkdown',
124+
content: '参与奖',
125+
},
126+
{
127+
type: 'kmarkdown',
128+
content: '游戏加速器年卡',
129+
},
130+
{
131+
type: 'kmarkdown',
132+
content: '游戏加速器季卡',
133+
},
134+
{
135+
type: 'kmarkdown',
136+
content: '游戏加速器月卡',
137+
},
138+
],
139+
},
140+
},
141+
],
142+
},
143+
]
144+
145+
export default () => (
146+
<MessagePreview
147+
type="card"
148+
content={content}
149+
external="https://cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js"
150+
/>
151+
)
152+
```
153+
154+
## KMarkDown 消息基本使用
155+
156+
这是一个简单的 kmarkdown 消息例子
157+
158+
```jsx
159+
import { MessagePreview } from '@kookapp/kook-message-preview'
160+
161+
const content = `~~删除线~~`
162+
163+
export default () => (
164+
<MessagePreview
165+
type="kmd"
166+
content={content}
167+
external="https://cdn.jsdelivr.net/npm/@kookapp/kook-message-preview@0.0.3/dist/markdown-parse.0.0.10.js"
168+
/>
169+
)
170+
```
171+
172+
## API
173+
174+
| 属性名 | 描述 | 类型 | 默认值 |
175+
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | --------- |
176+
| type | 消息类型 `'card'`(卡片消息) `'kmd'`(KMarkDown 消息) | `string` | `'card'` |
177+
| theme | 主题色 `'light' 或 'dark'` | `string` | `'light'` |
178+
| content | 消息内容:具体可查看[消息编辑器](https://tttt-www.dev.chuanyuapp.com/tools/message-builder.html#/card) 或者 [卡片消息说明](/card_desc)[KMarkDown 消息说明](/kmd_desc) | `string 或 array` | `[]` |
179+
| external | wasm 资源地址 | `string` | `''` |

0 commit comments

Comments
 (0)