Emoticons
You can modify this configuration in the settings interface of the Dashboard, or through configuration files and environment variables.
In the configuration file, you can fill in the URL of the emoticon list under frontend.emoticons:
frontend:
emoticons: https://raw.githubusercontent.com/ArtalkJS/Emoticons/master/grps/default.jsonEmoticon Presets
The Artalk community offers many emoticon presets. You can choose a few favorite sets and easily add them to your comment system with simple configurations. Visit the repository: @ArtalkJS/Emoticons.
Supported Formats
OwO Format
OwO is an open-source JS plugin developed by @DIYgod that allows quick insertion of emoticons into the input box.
Artalk's emoticon feature draws inspiration from its excellent design and natively supports and is compatible with OwO format emoticon data files, as shown below:
frontend:
emoticons: https://raw.githubusercontent.com/DIYgod/OwO/master/demo/OwO.json
# Directly use OwO format emoticons ↑↑The community also has many OwO format emoticon resources that can be used directly, for example: @2X-ercha/Twikoo-Magic.
Artalk Emoticon List File Standard Format
In addition to supporting the OwO format, Artalk also natively supports a standard format for emoticon list files:
[
{
name: 'Emoji',
type: 'emoticon', // Text type
items: [
{ key: 'Hi', val: '|´・ω・)ノ' },
{ key: 'Happy', val: 'ヾ(≧∇≦*)ゝ' },
//...
],
},
{
name: 'Funny',
type: 'image', // Image type
items: [
{
key: 'Original Funny',
val: '<Image URL>',
},
//...
],
},
]Front-end Configuration
To configure emoticon lists on the front end, for example:
Artalk.init({
// Default emoticon list, dynamically imported ↓↓
emoticons:
'https://raw.githubusercontent.com/ArtalkJS/Emoticons/master/grps/default.json',
})TIP
Configuration file and dashboard emoticon settings have a higher priority than front-end configuration.
Disabling Emoticons
You can disable the emoticon feature by setting emoticons to false:
Artalk.init({
emoticons: false,
})Loading Methods
Dynamic Loading
Set the emoticons attribute to the URL of the emoticon data file. When the emoticon list is opened, Artalk will dynamically import it.
Artalk.init({
emoticons: '<Emoticon Data File URL>',
})Remote emoticon files support both Artalk and OwO formats, and support nested and mixed loading.
Static Loading
Compared to dynamic importing, you can statically save the emoticon list object in the JS code of the page to avoid dynamic loading:
Artalk.init({
emoticons: [
{
name: 'Emoji',
type: 'emoticon', // Text type
items: [
{ key: 'Hi', val: '|´・ω・)ノ' },
{ key: 'Happy', val: 'ヾ(≧∇≦*)ゝ' },
//...
],
},
{
name: 'Funny',
type: 'image', // Image type
items: [
{
key: 'Original Funny',
val: '<Image URL>',
},
//...
],
},
],
})Mixed Loading
Artalk supports a mix of dynamic and static loading, for example:
Artalk.init({
emoticons: [
// Dynamic loading
'https://raw.githubusercontent.com/DIYgod/OwO/master/demo/OwO.json', // OwO format emoticons
'https://raw.githubusercontent.com/qwqcode/huaji/master/huaji.json',
// Static loading
{
name: 'Emoticon Name',
type: 'emoticon', // Text type
items: [
{ key: 'Go Master Ball', val: '(╯°A°)╯︵○○○' },
//...
],
},
],
})Nested Import
Artalk supports nested import of other emoticon resources within remote emoticon resources, for example:
Artalk.init({
emoticons: ['https://example.org/emoticons.json'],
})Data in emoticons.json:
[
"https://example.org/other-emoticons.json",
//...
{
// Artalk format, OwO format
//...
}
]This allows you to efficiently manage and load multiple emoticon sets with minimal configuration.
qwqcode