discord components
v3.6.0
Webkomponenten, um gefälschte Discord -Nachrichten auf Ihren Webseiten einfach zu erstellen und anzuzeigen
Kernpaket
Reagieren Bindungen
Inhaltsverzeichnis
Discord -Nachrichtenkomponenten, um gefälschte Discord -Nachrichten auf Ihrer Webseite einfach zu erstellen und anzuzeigen.
Dies ist eine Anpassung von WC-Discord-Message von Dktuary
Der Quellcode und die Dokumentation dieses Pakets wurden für Version 4.x dieses Pakets aktualisiert. Weitere Informationen finden Sie unter V3.x auf v4.x, finden Sie im Upgrade -Handbuch
Die Syntax wird ziemlich einfach gehalten. Hier ist ein grundlegendes Beispiel für ein reguläres Gespräch:
< 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 > Wichtig
Weitere Beispiele zur Verwendung von Komponenten finden Sie in den unten verlinkten Stackblitz -Beispielen. Wählen Sie das Framework, das Sie verwenden, und klicken Sie auf die Schaltfläche "In Stackblitz öffnen", um den Code zu sehen und wie er im Browser rendert.
Diese Bibliothek kann die Discord -Schrift verwenden, wenn Sie sie in Ihr Projekt laden. Sie können dies tun, indem Sie die CSS unten einbeziehen:
@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 ;
} Sie müssen das CUSTOM_ELEMENTS_SCHEMA von @angular/core importieren und dem schemas Ihres Moduls oder Komponentendekors für das Modul oder die Komponente mit benutzerdefinierten Elementen hinzufügen. Dies soll sicherstellen, dass Angular kennt, dass in diesem Modul oder in dieser Komponente benutzerdefinierte Elemente verwendet werden.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } React ist derzeit die einzige Bibliothek unter den "großen" Bibliotheken für die Frontend -Entwicklung, die benutzerdefinierte Elemente / Webcomponenten noch nicht vollständig unterstützt (weitere Informationen finden Sie auf dieser Seite React -Dokumentation). Aus diesem Grund versenden wir das Paket @skyra/discord-components-react .
Wir hoffen aufrichtig, dass sich diese Situation in Zukunft verbessern wird, aber niemand weiß, was ihre Pläne sind.
Die React -App erstellen ist nicht mehr die empfohlene Möglichkeit, mit einer React -App gemäß React -Dokumentation zu beginnen. Wir empfehlen stattdessen sehr, VITE zu verwenden.
Alle React -Komponenten rendern nur den Kunden, sie werden mit dem 'use client'; Header, die NextJs für CSR nur Komponenten erwartet. Dies liegt daran, dass es derzeit keine gute Möglichkeit gibt, Webcomponenten auf dem Server zu rendern. Wenn @Lit-Labs/NextJs Unterstützung für das App-Verzeichnis hinzufügt, können wir diese Einschränkung erneut besuchen.
Wenn wir das App -Verzeichnis verwenden, können wir keine Profile zum Laufen bringen. Wir sind offen für Vorschläge, wie Sie dies beheben können, idealerweise durch eine Pull-Anfrage an [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].
Wenn Sie Vue 3 mit VITE verwenden, müssen Sie VITE einrichten, um die benutzerdefinierten Komponenten zu erkennen. Sie können dies mit dem folgenden Code in Ihrem vite.config.ts tun:
import vue from '@vitejs/plugin-vue' ;
import { defineConfig } from 'vite' ;
export default defineConfig ( {
plugins : [
vue ( {
template : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} )
]
} ) ; Bei Verwendung von Nuxt 3 müssen Sie vite einrichten, um die benutzerdefinierten Komponenten zu erkennen. Sie können dies mit dem folgenden Code in Ihrem nuxt.config.ts tun:
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Da es möglich ist, verschiedene Integrationen in ein Astro -Projekt zu verwenden, können Sie auch die anderen Beispiele hier verweisen. Die unten verlinkte Live -Demo verwendet die beleuchtete Integration für Astro sowie die React -Integration für Astro.
Beachten Sie, dass Sie zwar durchaus möglich sind, diese Bibliothek ohne Framework zu verwenden, Sie jedoch noch einen Bundler wie Vite benötigen. Dies liegt daran, dass diese Bibliothek ES -Module enthüllt, die in ein Format gebündelt werden müssen, das der Browser unterstützen kann. Die Live -Demo unten verwendet Vite.
Diese Bibliothek verwendet ein benutzerdefiniertes Objekt im window zur Konfiguration. Unter normalen Umständen, indem das Paket einfach importiert wird (mit import @skyra/discord-components-core ), sollten auch die Modulvergrößerungen geladen werden. Wenn dies aus irgendeinem Grund nicht passiert, können Sie sie selbst manuell definieren. Sie können dies mit dem folgenden Code -Snippet tun:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}Die aktuellen Avatar -Verknüpfungsketten sind "blau" (Standard), "grau", "grün", "orange" und "rot". Diese Verknüpfungen sind zu den folgenden Bildlinks geordnet:
{
"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 "
} Wenn Sie die Verknüpfungen hinzufügen oder überschreiben import { setConfig } from '@skyra/discord-components-core' , können Sie sie setConfig 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
}
} ) ; Manchmal möchten Sie dieselben Nachrichtendaten über mehrere Nachrichten hinweg verwenden. Sie können dies tun import { setConfig } from '@skyra/discord-components-core' indem setConfig ein Objekt von Profilen in 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'
}
}
} ) ;Und dann in Ihrem Code:
< 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 > Jede der Komponenten akzeptiert die Standard -HTML -Eigenschaften für das class von Stylen, z style
Sie können auch Ihre eigenen benutzerdefinierten HTML-Tags übergeben, z data-testid
Im Folgenden finden Sie Hinweise für einige spezifische Komponenten.
Dies ist ein Wrapper für jede <discord-message> . Es muss verwendet werden, damit Nachrichten ordnungsgemäß angezeigt werden.
Wenn der Standard -Slot leer bleibt, wird die Erwähnung je nach angegebenem type als 'User' , 'Role' oder 'channel " unterzogen.
Wenn Sie die Farbe eines role anpassen möchten, können Sie die Farbe als Sechskantcode in der style -Eigenschaft übergeben. Zum Beispiel:
< 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 > Eine Einbettung, die am Ende Ihrer Nachrichten angeschlossen werden kann. Der Standard -Slot wird für die Beschreibung des Einbetten verwendet. Der footer wird für den Fußzeilentext verwendet.
Um sicherzustellen, dass die Einbettung in Ihrer Nachricht korrekt angezeigt wird, geben Sie ihr das richtige slot -Attribut an.
< 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 > Eine Wrapper für jedes Kind <discord-embed-fields> Komponenten. Muss verwendet werden, damit Felder ordnungsgemäß angezeigt werden können. Um sicherzustellen, dass die Einbettungsfelder in Ihrem Einbett korrekt angezeigt werden, geben Sie ihr das richtige slot -Attribut an.
< 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 > Mindestens 2 aufeinanderfolgende Felder müssen als Inline markiert werden, damit sie tatsächlich nebeneinander angezeigt werden. Die maximale Menge an Inline -Feldern beträgt 3 und fällt auf 2, wenn ein Einbettungsstätte verwendet wird.
< 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 > Ein normales Gespräch
Kompaktmodus
Mit einer Einbettung
Ein normales Gespräch
Kompaktmodus
Mit einer Einbettung
Bitte lesen Sie den beitragenden Leitfaden, bevor Sie eine Pull -Anfrage stellen.
Vielen Dank an alle Personen, die bereits zu Discord -Komponenten beigetragen haben!
