discord components
v3.6.0
ส่วนประกอบเว็บเพื่อสร้างและแสดงข้อความความไม่ลงรอยกันปลอมบนหน้าเว็บของคุณได้อย่างง่ายดาย
แพ็คเกจหลัก
ตอบสนอง
สารบัญ
ส่วนประกอบข้อความ Discord เพื่อสร้างและแสดงข้อความ 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 ที่เชื่อมโยงด้านล่าง เลือกเฟรมเวิร์กที่คุณใช้และคลิกที่ปุ่ม "Open in Stackblitz" เพื่อดูรหัสและวิธีการแสดงผลในเบราว์เซอร์
ไลบรารีนี้สามารถใช้แบบอักษรที่ไม่ลงรอยกันหากคุณโหลดลงในโครงการของคุณ คุณสามารถทำได้โดยรวม 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 ปัจจุบันเป็นห้องสมุดเดียวในบรรดาห้องสมุด "ใหญ่" สำหรับการพัฒนาส่วนหน้าซึ่งไม่สนับสนุนองค์ประกอบ / เว็บคอมโพสิตที่กำหนดเองอย่างเต็มที่ (ดูหน้าเอกสารตอบสนองนี้สำหรับข้อมูลเพิ่มเติม) ด้วยเหตุนี้เราจึงจัดส่งแพ็คเกจ @skyra/discord-components-react
เราหวังเป็นอย่างยิ่งว่าสถานการณ์นี้จะดีขึ้นในอนาคต แต่ไม่มีใครรู้ว่าแผนของพวกเขาคืออะไร
สร้างแอป React ไม่ใช่วิธีที่แนะนำในการเริ่มต้นด้วยแอป React ตามเอกสารของ React เราขอแนะนำอย่างยิ่งให้ใช้ VITE แทน
ส่วนประกอบที่ตอบสนองทั้งหมดจะแสดงผลกับลูกค้าเท่านั้นพวกเขาจะรวมกับ '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 รวมถึงการรวมปฏิกิริยาสำหรับ 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 "
} หากคุณต้องการเพิ่มหรือแทนที่ทางลัดคุณสามารถตั้งค่าผ่าน 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 ( 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 > แต่ละส่วนประกอบยอมรับคุณสมบัติ HTML มาตรฐานสำหรับการผ่านสไตล์เช่น class สำหรับการผ่านคลาส CSS (JSS / CSS / SCSS ฯลฯ ) หรือ style ที่จะผ่านสไตล์อินไลน์
นอกจากนี้คุณยังสามารถส่งผ่านแท็ก HTML ที่กำหนดเองของคุณเองเช่นตั้ง data-testid เพื่อให้สามารถนำทางไปยังส่วนประกอบในการทดสอบหน่วย / การทดสอบแบบ end-to-end ของคุณ
ด้านล่างนี้เป็นหมายเหตุสำหรับองค์ประกอบเฉพาะสองสามส่วน
นี่คือ wrapper สำหรับเด็ก <discord-message> ส่วนประกอบ จะต้องใช้เพื่อให้ข้อความแสดงอย่างถูกต้อง
หากสล็อตเริ่มต้นว่างเปล่าการกล่าวถึงจะแสดงเป็น 'User' , 'Role' หรือ 'channel ' ขึ้นอยู่กับ type ของเสาที่ให้ไว้
หากคุณต้องการปรับแต่งสีของประเภท role ที่กล่าวถึงคุณสามารถส่งสีเป็นรหัส hex ในคุณสมบัติ 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 > wrapper สำหรับเด็ก <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 > การสนทนาปกติ
โหมดกะทัดรัด
ด้วยการฝัง
การสนทนาปกติ
โหมดกะทัดรัด
ด้วยการฝัง
โปรดตรวจสอบให้แน่ใจว่าได้อ่านคู่มือที่มีส่วนร่วมก่อนทำการขอดึง
ขอบคุณทุกคนที่มีส่วนร่วมในส่วนประกอบที่ไม่ลงรอยกัน!
