discord components
v3.6.0
あなたのウェブページに偽の不一致メッセージを簡単に構築および表示するWebコンポーネント
コアパッケージ
バインディングを反応させます
目次
Webページに偽のDiscordメッセージを簡単に構築および表示するためのDiscordメッセージコンポーネント。
これは、DanktuaryからのWC Discord-Messageの適応です
このパッケージのソースコードとドキュメントは、このパッケージのバージョン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の例を参照してください。使用しているフレームワークを選択し、[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 ;
}@angular/coreからCUSTOM_ELEMENTS_SCHEMAをインポートし、カスタム要素を使用してモジュールまたはコンポーネントのモジュールまたはコンポーネントデコレータのschemas配列に追加する必要があります。これは、Angularがこのモジュールまたはコンポーネントでカスタム要素を知っていることを確認するためです。
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } 現在、Reactは、カスタム要素 / WebComponentsをまだ完全にはサポートしていないFrontEnd開発の「大きな」ライブラリの中で唯一のライブラリです（詳細については、このReactドキュメントページを参照）。このため、Package @skyra/discord-components-reactを発送します。
この状況が将来改善されることを心から願っていますが、彼らの計画が何であるかは誰も知りません。
Create Reactアプリは、React独自のドキュメントに従って、Reactアプリから開始するための推奨される方法ではなくなりました。代わりにViteを使用することを非常に強くお勧めします。
すべてのReactコンポーネントはクライアントにのみレンダリングされ、 'use client'; NextJSがCSRのみコンポーネントに期待するヘッダー。これは、サーバー上にWebComponentsをレンダリングする良い方法が現在ないためです。 @lit-labs/nextjsがアプリディレクトリのサポートを追加すると、この制限を再検討できます。
アプリディレクトリを使用する場合、プロファイルを機能させることができません。理想的には[https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts]へのプルリクエストを通じて、これを修正する方法についての提案を受け入れています。
ViteでVUE 3を使用する場合、カスタムコンポーネントを認識するために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プロジェクトで異なる統合を使用することが可能であるため、ここで他の例を参照することもできます。以下にリンクされているライブデモでは、AstroのLIT統合とAstroのReact統合を使用しています。
フレームワークなしでこのライブラリを使用することは完全に可能ですが、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 "
}ショートカットを追加またはオーバーライドする場合は、 globalThis.$discordMessage.avatarsまたはsetConfig関数（ import { setConfig } from '@skyra/discord-components-core' ）を使用して設定できます。
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
}
} ) ;複数のメッセージで同じメッセージデータを使用する場合があります。 globalThis.$discordMessage.profilesまたはsetConfig function（ import { setConfig } from '@skyra/discord-components-core' ）を使用することにより、プロファイルのオブジェクトを提供することにより、これを行うことができます。
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 >各コンポーネントは、CSSクラス（JSS / CSS / SCSなど）を通過するclassなど、スタイリングをstyleするための標準のHTMLプロパティを受け入れます。
また、独自のカスタムHTMLタグを渡すこともできます。たとえばdata-testidを設定して、ユニットテスト /エンドツーエンドテストでコンポーネントに移動できるようになります。
以下は、いくつかの特定のコンポーネントのメモです。
これは、子供の<discord-message>コンポーネントのラッパーです。メッセージを適切に表示するには、使用する必要があります。
デフォルトのスロットが空のままである場合、指定されたtypeプロップに応じて'User' 、 'Role' 、または'channel 」として言及されます。
roleタイプの色の色をカスタマイズする場合は、 styleプロパティの16進コードとして色を渡すことができます。例えば：
< 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 > メッセージの最後に添付できる埋め込み。デフォルトのスロットは、Embedの説明に使用されます。 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コンポーネントに貢献してくれたすべての人々に感謝します！
