discord components
v3.6.0
웹 페이지에 가짜 불화 메시지를 쉽게 빌드하고 표시하는 웹 구성 요소
핵심 패키지
반응 바인딩
목차
Discrord 메시지 구성 요소 웹 페이지에 가짜 불화 메시지를 쉽게 빌드하고 표시합니다.
이것은 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 in Open"버튼을 클릭하여 코드와 브라우저의 렌더링 방법을 클릭하십시오.
이 라이브러리는 프로젝트에로드하면 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를 완전히 지원하지 않는 프론트 엔드 개발을위한 "대형"라이브러리 중 유일한 라이브러리입니다 (자세한 내용은이 React Documentation Page 참조). 이러한 이유로 우리는 @skyra/discord-components-react 패키지를 배송합니다.
우리는이 상황이 미래에 개선되기를 진심으로 희망하지만 아무도 그들의 계획이 무엇인지 모릅니다.
React 앱 작성은 더 이상 React의 자체 문서에 따라 React 앱으로 시작하는 권장되는 방법이 아닙니다. 대신 vite를 사용하는 것이 좋습니다.
모든 React 구성 요소는 클라이언트에만 렌더링되며 'use client'; 다음 JS가 CSR 전용 구성 요소에 대해 기대하는 헤더. 이는 현재 서버에서 WebComponents를 렌더링하는 좋은 방법이 없기 때문입니다. @lit-labs/nextjs가 앱 디렉토리에 대한 지원을 추가하면이 제한을 다시 방문 할 수 있습니다.
앱 디렉토리를 사용할 때 프로파일이 작동하지 않습니다. 우리는 [https://github.com/skyra-project/discord-components-memplementation/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의 조명 통합 및 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 함수 ( 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 클래스를 통과하기위한 class (JSS / CSS / SCSS 등) 또는 인라인 스타일을 통과하기위한 style 과 같은 스타일링을 통과하기위한 표준 HTML 속성을 허용합니다.
예를 들어 장치 테스트 / 엔드 투 엔드 테스트에서 구성 요소로 이동할 수 있도록 data-testid 설정하는 등 자신의 사용자 정의 HTML 태그를 전달할 수도 있습니다.
다음은 몇 가지 특정 구성 요소에 대한 참고 사항입니다.
이것은 모든 어린이 <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 > 정상적인 대화
소형 모드
임베드와 함께
정상적인 대화
소형 모드
임베드와 함께
풀 요청을하기 전에 기고 가이드를 읽으십시오.
이미 불화 구성 요소에 기여한 모든 사람들에게 감사합니다!
