discord components
v3.6.0
Komponen web untuk dengan mudah membangun dan menampilkan pesan perselisihan palsu di halaman web Anda
Paket Inti
Bereaksi binding
Daftar isi
Komponen pesan perselisihan untuk dengan mudah membangun dan menampilkan pesan perselisihan palsu di halaman web Anda.
Ini adalah adaptasi dari wc-discord-message dari DankTuary
Kode sumber dan dokumentasi paket ini telah diperbarui untuk versi 4.x dari paket ini. Untuk mengetahui cara memutakhirkan dari V3.x ke V4.x, silakan merujuk ke Panduan Peningkatan
Sintaksnya dijaga cukup sederhana. Berikut adalah contoh dasar dari percakapan reguler:
< 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 > Penting
Untuk contoh lebih lanjut tentang cara menggunakan komponen, silakan merujuk ke contoh StackBlitz yang ditautkan di bawah ini. Pilih kerangka kerja yang Anda gunakan dan klik pada tombol "Buka di StackBlitz" untuk melihat kode dan bagaimana hal itu diterjemahkan di browser.
Perpustakaan ini dapat menggunakan font Discord jika Anda memuatnya ke dalam proyek Anda. Anda dapat melakukannya dengan memasukkan CSS di bawah ini:
@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 ;
} Anda perlu mengimpor CUSTOM_ELEMENTS_SCHEMA dari @angular/core dan menambahkannya ke array schemas modul atau dekorator komponen Anda untuk modul atau komponen menggunakan elemen khusus. Ini untuk memastikan bahwa Angular mengetahui elemen khusus digunakan dalam modul atau komponen ini.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } React saat ini adalah satu -satunya perpustakaan di antara perpustakaan "besar" untuk pengembangan frontend yang belum sepenuhnya mendukung elemen kustom / komponen web (lihat halaman dokumentasi React ini untuk info lebih lanjut). Untuk alasan ini kami mengirimkan paket @skyra/discord-components-react .
Kami dengan tulus berharap bahwa situasi ini akan membaik di masa depan, tetapi tidak ada yang tahu apa rencana mereka.
Buat aplikasi React bukan lagi cara yang disarankan untuk memulai dengan aplikasi React sesuai dokumentasi React sendiri. Kami sangat merekomendasikan menggunakan Vite sebagai gantinya.
Semua komponen React hanya akan memberikan klien, mereka dibundel dengan 'use client'; header yang diharapkan oleh NextJS untuk komponen CSR saja. Ini karena saat ini tidak ada cara yang baik untuk membuat komponen web di server. Ketika @lit-labs/nextJS menambahkan dukungan untuk direktori aplikasi, kami dapat meninjau kembali batasan ini.
Saat menggunakan direktori aplikasi, kami tidak dapat membuat profil berfungsi. Kami terbuka untuk saran tentang cara memperbaikinya, idealnya melalui permintaan tarik ke [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].
Saat menggunakan Vue 3 dengan Vite, Anda perlu mengatur vite untuk mengenali komponen khusus. Anda dapat melakukannya dengan kode berikut di vite.config.ts Anda:
import vue from '@vitejs/plugin-vue' ;
import { defineConfig } from 'vite' ;
export default defineConfig ( {
plugins : [
vue ( {
template : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} )
]
} ) ; Saat menggunakan Nuxt 3, Anda perlu mengatur vite untuk mengenali komponen khusus. Anda dapat melakukannya dengan kode berikut di nuxt.config.ts Anda:
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Karena dimungkinkan untuk menggunakan integrasi yang berbeda dalam proyek Astro, Anda juga dapat merujuk contoh -contoh lain di sini. Demo langsung yang ditautkan di bawah ini menggunakan integrasi yang menyala untuk Astro serta integrasi reaksi untuk Astro.
Perhatikan bahwa meskipun sangat mungkin untuk menggunakan perpustakaan ini tanpa kerangka kerja, Anda masih akan membutuhkan bundler seperti Vite. Ini karena perpustakaan ini memperlihatkan modul ES yang perlu dibundel ke dalam format yang dapat didukung oleh browser. Demo langsung di bawah ini menggunakan vite.
Perpustakaan ini menggunakan objek khusus pada window browser untuk konfigurasi. Dalam keadaan normal hanya dengan mengimpor paket (dengan import @skyra/discord-components-core ) Augmentasi modul juga harus dimuat. Jika karena alasan apa pun ini tidak terjadi, maka Anda dapat mendefinisikannya sendiri secara manual. Anda dapat melakukannya dengan cuplikan kode berikut:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}String pintasan Avatar saat ini yang tersedia adalah "biru" (default), "abu -abu", "hijau", "oranye", dan "merah". Pintasan peta ini ke tautan gambar berikut:
{
"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 "
} Jika Anda ingin menambahkan atau mengganti pintasan, Anda dapat mengaturnya melalui globalThis.$discordMessage.avatars atau dengan menggunakan fungsi 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
}
} ) ; Terkadang Anda ingin menggunakan data pesan yang sama di beberapa pesan. Anda dapat melakukannya dengan memberikan objek profil di globalThis.$discordMessage.profiles atau dengan menggunakan fungsi setConfig ( 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'
}
}
} ) ;Dan kemudian dalam kode Anda:
< 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 > Masing -masing komponen menerima properti HTML standar untuk melewati gaya, seperti class untuk lulus kelas CSS (JSS / CSS / SCS dll.) Atau style untuk lulus gaya inline.
Anda juga dapat meneruskan tag HTML khusus Anda sendiri, misalnya mengatur data-testid untuk dapat menavigasi ke komponen dalam tes unit Anda / tes ujung ke ujung
Di bawah ini adalah catatan untuk beberapa komponen tertentu.
Ini adalah pembungkus untuk setiap anak <discord-message> komponen. Itu harus digunakan agar pesan dapat ditampilkan dengan benar.
Jika slot default dibiarkan kosong, penyebutan akan diterjemahkan sebagai 'User' , 'Role' , atau 'channel ', tergantung pada type prop yang diberikan.
Jika Anda ingin menyesuaikan warna jenis role yang disebutkan maka Anda dapat meneruskan warna sebagai kode hex di properti style . Misalnya:
< 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 yang dapat dilampirkan pada akhir pesan Anda. Slot default digunakan untuk deskripsi embed. Slot footer digunakan untuk teks footer.
Untuk memastikan embed ditampilkan dengan benar di dalam pesan Anda, pastikan untuk memberikan atribut slot yang tepat.
< 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 > Pembungkus untuk setiap anak <discord-embed-fields> komponen. Harus digunakan agar bidang dapat ditampilkan dengan benar. Untuk memastikan bidang embed ditampilkan dengan benar di dalam embed Anda, pastikan untuk memberikan atribut slot yang tepat.
< 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 > Setidaknya 2 bidang berturut -turut perlu ditandai sebagai inline agar mereka dapat benar -benar ditampilkan di sebelah satu sama lain. Jumlah maksimum bidang inline adalah 3, dan turun menjadi 2 jika thumbnail sematan digunakan.
< 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 > Percakapan normal
Mode kompak
Dengan embed
Percakapan normal
Mode kompak
Dengan embed
Pastikan untuk membaca panduan yang berkontribusi sebelum membuat permintaan tarik.
Terima kasih untuk semua orang yang sudah berkontribusi pada komponen perselisihan!
