首頁>編程相關>Ai源碼
下載

不和諧組件

Web組件可以輕鬆構建和顯示在網頁上

核心包

反應結合

目錄

  • 不和諧組件
    • 描述
      • 升級指南
    • 特徵
    • 用法
      • 使用Discord字體
      • 集成
        • 角
          • 重要說明
          • 現場演示
        • 反應
          • 重要說明
          • Vite
            • 現場演示
          • 創建React App
            • 重要說明
          • nextjs
            • 實時演示頁目錄
            • 實時演示應用程序目錄
            • 已知限制
          • Docusaurus
            • 現場演示
        • Vue
          • Vite
            • 現場演示
            • 配置
          • nuxt
            • 現場演示
            • 配置
        • 太空人
          • 重要說明
          • 現場演示
        • 堅硬的
          • 現場演示
        • 苗條
          • Vite
            • 現場演示
          • Sveltekit
            • 現場演示
        • Qwik
          • 現場演示
        • 預先反應
          • 現場演示
        • htmx
          • 現場演示
        • 沒有框架
          • 重要說明
          • 現場演示
    • 筆記
      • 打字稿模塊增強
      • 阿凡達捷徑
      • 配置文件快捷方式
      • 主題
      • 組件註釋
        • 不和諧傳發組件
        • 不和諧組件
        • 不和諧成分
        • 不和諧的磁場組件
        • 不和諧 - 型場組件
    • 屏幕截圖
      • 黑暗模式
      • 光模式
    • 貢獻者

描述

Discord消息組件可以輕鬆地在網頁上構建和顯示虛假的DISORD消息。

這是對Danktuary的WC-Discord-Message的改編

升級指南

此軟件包的源代碼和文檔已針對此軟件包的4.x版本進行了更新。要了解如何從v3.x升級到v4.x，請參閱升級指南

特徵

  • 以不和諧本身建模的設計
  • 舒適和緊湊的模式支持
  • 黑暗主題支持
  • 設置消息作者的用戶名Avatar（使用默認值或提供您自己的角色顏色和“ bot”標籤狀態
  • 顯示假用戶，角色和渠道提及
  • 完整的嵌入支持
  • 使用點亮元素來支持所有瀏覽器和環境
  • 簡單的語法！

用法

語法保持相當簡單。這是定期對話的基本示例： 

 < 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字體

如果將其加載到項目中，則該庫可以使用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目前是前端開發的“大”庫中唯一的庫，該庫尚未完全支持自定義元素 / Web Components（有關更多信息，請參見此React文檔頁面）。因此，我們將軟件包@skyra/discord-components-react運送。

我們衷心希望將來這種情況會有所改善，但是沒人知道他們的計劃是什麼。

Vite
現場演示
創建React App
重要說明

根據React自己的文檔，創建React App不再是從React應用程序開始的推薦方法。我們非常強烈建議使用Vite。

nextjs
實時演示頁目錄
實時演示應用程序目錄
已知限制

  1. 所有的React組件只能在客戶端上渲染，它們與'use client'; NextJS僅針對CSR組件的標題。這是因為目前沒有很好的方法可以在服務器上渲染WebComponents。當 @lit-labs/nextJ添加對應用程序目錄的支持時，我們可以重新訪問此限制。

  2. 使用應用程序目錄時，我們無法使配置文件正常工作。我們對如何解決此問題的建議開放，理想情況下，通過拉動請求到[https://github.com/skyra-project/discord-components-implements/tree/main/main/main/templates/nextjs-ts]。

Docusaurus
現場演示

Vue

Vite
現場演示
配置

與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
現場演示
配置

使用NUXT 3時，您需要設置Vite以識別自定義組件。您可以在nuxt.config.ts中使用以下代碼來執行此操作： 

 export default defineNuxtConfig ( {
  devtools : { enabled : true } ,
  vue : {
    compilerOptions : {
      isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
    }
  }
} ) ;

太空人

重要說明

由於可以在Astro項目中使用不同的集成，因此您也可以在此處引用其他示例。下面鏈接的實時演示使用了Astro的點亮集成以及Astro的React集成。

現場演示

堅硬的

現場演示

苗條

Vite
現場演示
Sveltekit
現場演示

Qwik

現場演示

預先反應

現場演示

htmx

現場演示

沒有框架

重要說明

請注意，雖然完全可以在沒有框架的情況下使用此庫，但您仍然需要一個像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或使用import { setConfig } from '@skyra/discord-components-core' setConfig設置它們。 

 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中提供配置文件的對象，或者通過使用import { setConfig } from '@skyra/discord-components-core' setConfig文件。 

 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屬性，例如用於通過CSS類（JSS / CSS / SCS等）的class或style傳遞內聯樣式。

您也可以傳遞自己的自定義HTML標籤，例如設置data-testid ，以便能夠導航到單元測試 /端到端測試中的組件

組件註釋

以下是一些特定組件的註釋。

不和諧傳發組件

這是任何兒童<discord-message>組件的包裝器。必須使用它以使消息正確顯示。

不和諧組件

  1. 如果將默認插槽留為空，則提及將作為'User' ， 'Role'或'channel ”呈現，具體取決於給出的type道具。

  2. 如果要自定義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>組件。必須使用以使字段正確顯示。為確保嵌入字段在嵌入式內部正確顯示，請確保將其提供適當的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組件做出貢獻的人！

展開
附加信息
相關應用
爲您推薦
相關資訊 全部