discord components
v3.6.0
Веб -компоненты легко создавать и отображать поддельные сообщения на веб -страницах
Основной пакет
Реагировать привязки
Оглавление
Компоненты сообщений Discord легко создавать и отображать поддельные сообщения о распределении на вашей веб -странице.
Это адаптация WC-Discord-Message от Danktuary
Исходный код и документация этого пакета были обновлены для версии 4.x этого пакета. Чтобы узнать, как обновить с V3.x до V4.X, пожалуйста, обратитесь к руководству по обновлению
Синтаксис сохраняется довольно просто. Вот основной пример регулярного разговора:
< discord-messages >
< discord-message
> Hey guys, I'm new here! Glad to be able to join you all! </ discord-message
>
< discord-message author =" Dawn " avatar =" red " >
Hi, I'm new here too!
</ discord-message >
< discord-message
author =" Favna "
avatar =" https://github.com/favna.png "
roleColor =" #ff0000 "
>
Hey, < discord-mention > User </ discord-mention > and
< discord-mention > Dawn </ discord-mention > . Welcome to our server!
</ discord-message >
</ discord-messages > Важный
Для получения дополнительных примеров того, как использовать компоненты, пожалуйста, обратитесь к примерам StackBlitz, связанным ниже. Выберите используемую фреймворк, и нажмите кнопку «Открыть в стеклебите», чтобы увидеть код и то, как он отображается в браузере.
Эта библиотека может использовать шрифт Discord, если вы загрузите его в свой проект. Вы можете сделать это, включив CSS ниже:
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Book.woff' ) format ( 'woff' );
font-weight : 400 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Medium.woff' ) format ( 'woff' );
font-weight : 500 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Semibold.woff' ) format ( 'woff' );
font-weight : 600 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Bold.woff' ) format ( 'woff' );
font-weight : 700 ;
} Вам необходимо импортировать CUSTOM_ELEMENTS_SCHEMA из @angular/core и добавить его в массив schemas вашего модуля или декоратора компонента для модуля или компонента с использованием пользовательских элементов. Это должно убедиться, что Angular знает пользовательские элементы в этом модуле или компоненте.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } React в настоящее время является единственной библиотекой среди «больших» библиотек для разработки фронта, которая пока не полностью поддерживает пользовательские элементы / веб -компоненты (см. На этой странице документации React для получения дополнительной информации). По этой причине мы отправляем посылку @skyra/discord-components-react .
Мы искренне надеемся, что эта ситуация улучшится в будущем, но никто не знает, каковы их планы.
Приложение Create React больше не является рекомендуемым способом начать с приложения React в соответствии с собственной документацией React. Вместо этого мы очень рекомендуем использовать VITE.
Все компоненты React будут отображаться только на клиенте, они связаны с 'use client'; Заголовок, который NextJS ожидает только компонентов CSR. Это связано с тем, что в настоящее время нет хорошего способа отображать веб -компоненты на сервере. Когда @lit-labs/nextjs добавляет поддержку каталога приложений, мы можем вернуться к этому ограничению.
При использовании каталога приложений мы не можем получить работу профилей. Мы открыты для предложений о том, как это исправить, в идеале с помощью запроса о притяжении [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].
При использовании VUE 3 с VITE вам нужно настроить VITE для распознавания пользовательских компонентов. Вы можете сделать это со следующим кодом в своем vite.config.ts :
import vue from '@vitejs/plugin-vue' ;
import { defineConfig } from 'vite' ;
export default defineConfig ( {
plugins : [
vue ( {
template : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} )
]
} ) ; При использовании Nuxt 3 вам нужно настроить VITE для распознавания пользовательских компонентов. Вы можете сделать это со следующим кодом в nuxt.config.ts :
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Поскольку можно использовать различные интеграции в проекте Astro, вы также можете ссылаться на другие примеры здесь. В живой демонстрации, связанной ниже, используется интеграция Lit для Astro, а также интеграцию React для Astro.
Обратите внимание, что, хотя вполне возможно использовать эту библиотеку без рамки, вам все равно понадобится пакет, такой как Vite. Это связано с тем, что эта библиотека раскрывает модули ES, которые необходимо объединить в формат, который может поддерживать браузер. В живой демонстрации ниже используется Vite.
Эта библиотека использует пользовательский объект в window браузера для настройки. При нормальных обстоятельствах путем простого импорта пакета (с import @skyra/discord-components-core ) также следует загружать увеличение модуля. Если по какой -либо причине этого не произойдет, то вы можете определить их вручную самостоятельно. Вы можете сделать это со следующим фрагментом кода:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}Текущие доступные струны аватара «синий» (по умолчанию), «серый», «зеленый», «оранжевый» и «красный». Эти ярлыки отображают следующие ссылки на изображение:
{
"blue" : " https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png " ,
"gray" : " https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png " ,
"green" : " https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png " ,
"orange" : " https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png " ,
"red" : " https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png "
} setConfig вы import { setConfig } from '@skyra/discord-components-core' добавить или переопределить ярлыки, вы можете установить их через globalThis.$discordMessage.avatars
globalThis . $discordMessage = {
avatars : {
default : 'blue' ,
skyra : 'https://github.com/NM-EEA-Y.png' ,
djs : require ( './assets/discord-avatar-djs.png' ) // You can use require syntax as well
}
} ; import { setConfig } from '@skyra/discord-components-core' ;
setConfig ( {
avatars : {
default : 'blue' ,
skyra : 'https://github.com/NM-EEA-Y.png' ,
djs : require ( './assets/discord-avatar-djs.png' ) // You can use require syntax as well
}
} ) ; Иногда вы захотите использовать одни и те же данные сообщений в нескольких сообщениях. Вы можете сделать это import { setConfig } from '@skyra/discord-components-core' предоставив объект профилей setConfig globalThis.$discordMessage.profiles
globalThis . $discordMessage = {
profiles : {
skyra : {
author : 'Skyra' ,
avatar : 'https://github.com/NM-EEA-Y.png' ,
bot : true ,
verified : true ,
roleColor : '#1e88e5'
} ,
favna : {
author : 'Favna' ,
avatar : 'https://github.com/favna.png' ,
roleColor : '#ff0000'
}
}
} ; import { setConfig } from '@skyra/discord-components-core' ;
setConfig ( {
profiles : {
skyra : {
author : 'Skyra' ,
avatar : 'https://github.com/NM-EEA-Y.png' ,
bot : true ,
verified : true ,
roleColor : '#1e88e5'
} ,
favna : {
author : 'Favna' ,
avatar : 'https://github.com/favna.png' ,
roleColor : '#ff0000'
}
}
} ) ;А потом в вашем коде:
< discord-messages >
< discord-message profile = "skyra" >
Welcome to our server, < discord-mention > Favna </ discord-mention > !
</ discord-message >
< discord-message profile = "favna" > Hey, glad to be here! </ discord-message >
</ discord-messages > Каждый из компонентов принимает стандартные HTML -свойства для прохождения стиля, таких как class для прохождения классов CSS (JSS / CSS / SCSS и т. Д.) Или style для прохождения встроенного стиля.
Вы также можете передать свои собственные пользовательские теги HTML, например, установить data-testid , чтобы иметь возможность перейти к компоненту в ваших модульных тестах / сквозных тестах
Ниже приведены примечания для нескольких конкретных компонентов.
Это обертка для любого ребенка <discord-message> компонента. Он должен использоваться для правильного отображения сообщений.
Если слот по умолчанию остается пустым, упоминание будет отображаться как 'User' , 'Role' или 'channel », в зависимости от указанной type .
Если вы хотите настроить цвет упоминания типа role , вы можете передать цвет в качестве шестигранного кода в свойстве style . Например:
< discord-message >
< discord-mention type =" role " style =" --discord-mention-color: #70f0b4; "
> Green </ discord-mention
>
< discord-mention type =" role " style =" --discord-mention-color: #ff0000; "
> Red </ discord-mention
>
</ discord-message > Встроенный, который может быть прикреплен к окончанию ваших сообщений. Слот по умолчанию используется для описания вставки. Слот footer используется для текста нижнего колонтитула.
Чтобы убедиться в правильном отображении вставки в вашем сообщении, обязательно дайте ему правильный атрибут slot .
< discord-message >
Hi, I'm part of the normal message content.
< discord-embed slot =" embeds " color =" #ff0000 " >
Hi, I'm part of the embed message content.
</ discord-embed >
</ discord-message > Обертка для любого ребенка <discord-embed-fields> компоненты. Должен использоваться для правильного отображения полей. Чтобы убедиться, что встроенные поля отображаются во вставке, обязательно дайте ему правильный атрибут slot .
< discord-message >
< discord-embed slot =" embeds " >
Hi, I'm part of the embed message content.
< discord-embed-fields slot =" fields " >
<!-- Embed fields go here -->
</ discord-embed-fields >
</ discord-embed >
</ discord-message > По крайней мере, 2 последовательных поля должны быть помечены как встроенные, чтобы они фактически отображались рядом друг с другом. Максимальное количество встроенных полей составляет 3, и падает до 2, если используется встроенная миниатюра.
< discord-message >
< discord-embed slot =" embeds " >
Hi, I'm part of the embed message content.
< discord-embed-fields slot =" fields " >
< discord-embed-field fieldTitle =" Inline field " inline >
Field content.
</ discord-embed-field >
< discord-embed-field fieldTitle =" Inline field " inline >
Field content.
</ discord-embed-field >
</ discord-embed-fields >
</ discord-embed >
</ discord-message > Нормальный разговор
Компактный режим
С встроенным
Нормальный разговор
Компактный режим
С встроенным
Пожалуйста, не забудьте прочитать руководство по применению, прежде чем сделать запрос на вытяжение.
Спасибо всем людям, которые уже внесли свой вклад в компоненты Discord!
