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 المرتبطة أدناه. اختر الإطار الذي تستخدمه وانقر فوق الزر "Open in 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 حاليًا المكتبة الوحيدة بين المكتبات "الكبيرة" لتطوير الواجهة الأمامية التي لا تدعم العناصر المخصصة / WebComponents تمامًا (انظر صفحة الوثائق React هذه لمزيد من المعلومات). لهذا السبب ، نشحن الحزمة @skyra/discord-components-react .
نأمل مخلصين أن يتحسن هذا الموقف في المستقبل ، لكن لا أحد يعرف ما هي خططهم.
لم يعد إنشاء تطبيق React هو الطريقة الموصى بها للبدء بتطبيق React وفقًا للوثائق الخاصة بـ React. نوصي بشدة باستخدام Vite بدلاً من ذلك.
لن يتم عرض جميع مكونات React إلا على العميل ، فهي مجمعة مع 'use client'; رأس أن NextJS يتوقع لمكونات المسؤولية الاجتماعية للشركات فقط. هذا لأنه لا توجد حاليًا طريقة جيدة لتقديم WebComponents على الخادم. عندما يضيف @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 for 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 ;
}سلاسل اختصار Avatar الحالية المتوفرة هي "Blue" (افتراضي) و "رمادي" و "أخضر" و "برتقالي" و "أحمر". هذه الاختصارات خريطة إلى روابط الصورة التالية:
{
"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 لتتمكن من الانتقال إلى المكون في اختبارات وحدتك / اختبارات الطرف إلى النهاية
فيما يلي ملاحظات لبعض المكونات المحددة.
هذا غلاف لأي طفل <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> embed>. يجب استخدامها من أجل عرض الحقول بشكل صحيح. لضمان عرض حقول التضمين بشكل صحيح داخل تضمينك ، تأكد من إعطائها سمة 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 > يجب تمييز ما لا يقل عن حقلتين متتاليتين على أنهما مضمّن لكي يتم عرضهما فعليًا بجوار بعضهما البعض. الحد الأقصى لمقدار الحقول المضمنة هو 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 > محادثة عادية
وضع مضغوط
مع تضمين
محادثة عادية
وضع مضغوط
مع تضمين
يرجى التأكد من قراءة الدليل المساهم قبل تقديم طلب سحب.
شكرا لجميع الأشخاص الذين ساهموا بالفعل في مكونات الخلاف!
