Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions docs/src/cookbook/customize/emoji.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,92 @@ https://example.com/my-emoji/
```

这里,我们额外添加了 `folder` 属性来告知 Waline 图片的存放位置。

## 使用工厂函数

除了直接传入配置对象外,你还可以使用工厂函数来动态创建表情预设。工厂函数支持返回单个或多个 `WalineEmojiInfo` 对象。

### 返回单个预设

你可以通过工厂函数动态生成一个表情预设:

```js
emoji: [
() => ({
name: "动态表情",
folder: "https://example.com/my-emoji",
prefix: "my_",
type: "png",
icon: "cute",
items: ["laugh", "sob", "rage", "cute"],
}),
],
```

工厂函数可以是**同步的**,也可以是**异步的**。这在你需要从远程加载表情配置时非常有用:

```js
emoji: [
async () => {
const config = await fetch('https://example.com/emoji-config.json')
.then(res => res.json());

return {
name: '远程表情',
folder: 'https://example.com/emoji',
...config,
};
},
],
```

### 返回多个预设

一个工厂函数也可以一次返回多个表情预设列表:

```js
emoji: [
() => [
{
name: "预设 1",
folder: "https://example.com/pack1",
icon: "icon1",
items: ["a", "b", "c"],
},
{
name: "预设 2",
folder: "https://example.com/pack2",
icon: "icon2",
items: ["x", "y", "z"],
},
],
],
```

### 混用多种类型

你可以将工厂函数、预设地址和配置对象混合在同一个数组中:

```js
emoji: [
// 字符串预设地址
'https://unpkg.com/@waline/emojis@1.1.0/weibo',
// 工厂函数
async () => {
const config = await fetch('https://example.com/my-emoji/info.json')
.then(res => res.json());

return {
folder: 'https://example.com/my-emoji',
...config,
};
},
// 配置对象
{
name: '自定义',
folder: 'https://example.com/custom',
icon: 'smile',
items: ['laugh', 'sob'],
},
],
```
89 changes: 89 additions & 0 deletions docs/src/en/cookbook/customize/emoji.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,3 +125,92 @@ In addition to creating an `info.json` upload and using a link as a preset, you
```

Here, we additionally add the `folder` property to tell Waline where the images are stored.

## Using factory functions

In addition to config objects, you can also use factory functions to dynamically create emoji presets. Factory functions can return one or more `WalineEmojiInfo` objects.

### Return a single preset

You can dynamically generate an emoji preset through factory functions:

```js
emoji: [
() => ({
name: "Dynamic Emoji",
folder: "https://example.com/my-emoji",
prefix: "my_",
type: "png",
icon: "cute",
items: ["laugh", "sob", "rage", "cute"],
}),
],
```

Factory functions can be **sync** or **async**. This is useful when you need to load emoji configurations from a remote source:

```js
emoji: [
async () => {
const config = await fetch('https://example.com/emoji-config.json')
.then(res => res.json());

return {
name: 'Remote Emoji',
folder: 'https://example.com/emoji',
...config,
};
},
],
```

### Return multiple presets

A single factory function can also return multiple emoji preset lists at once:

```js
emoji: [
() => [
{
name: "Pack 1",
folder: "https://example.com/pack1",
icon: "icon1",
items: ["a", "b", "c"],
},
{
name: "Pack 2",
folder: "https://example.com/pack2",
icon: "icon2",
items: ["x", "y", "z"],
},
],
],
```

### Mixing types

You can mix factory functions, preset addresses, and config objects in the same array:

```js
emoji: [
// string preset address
'https://unpkg.com/@waline/emojis@1.1.0/weibo',
// factory function
async () => {
const config = await fetch('https://example.com/my-emoji/info.json')
.then(res => res.json());

return {
folder: 'https://example.com/my-emoji',
...config,
};
},
// config object
{
name: 'Custom',
folder: 'https://example.com/custom',
icon: 'smile',
items: ['laugh', 'sob'],
},
],
```
9 changes: 8 additions & 1 deletion docs/src/en/reference/client/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Waline Locales.

## emoji

- Type: `(string | WalineEmojiInfo)[] | boolean`
- Type: `WalineEmojiOptions | boolean`

```ts
type WalineEmojiPresets = `http://${string}` | `https://${string}`;
Expand Down Expand Up @@ -94,6 +94,13 @@ Waline Locales.
*/
items: string[];
}

type WalineEmojiFactory = () =>
| WalineEmojiInfo
| WalineEmojiInfo[]
| Promise<WalineEmojiInfo | WalineEmojiInfo[]>;

type WalineEmojiOptions = (WalineEmojiFactory | WalineEmojiInfo | WalineEmojiPresets)[];
```

- Default: `['//unpkg.com/@waline/emojis@1.1.0/weibo']`
Expand Down
9 changes: 8 additions & 1 deletion docs/src/reference/client/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Waline 多语言配置。

## emoji

- 类型: `(WalineEmojiInfo | WalineEmojiPresets)[] | boolean`
- 类型: `WalineEmojiOptions | boolean`

```ts
type WalineEmojiPresets = `http://${string}` | `https://${string}`;
Expand Down Expand Up @@ -94,6 +94,13 @@ Waline 多语言配置。
*/
items: string[];
}

type WalineEmojiFactory = () =>
| WalineEmojiInfo
| WalineEmojiInfo[]
| Promise<WalineEmojiInfo | WalineEmojiInfo[]>;

type WalineEmojiOptions = (WalineEmojiFactory | WalineEmojiInfo | WalineEmojiPresets)[];
```

- 默认值: `['//unpkg.com/@waline/emojis@1.1.0/weibo']`
Expand Down
Loading
Loading