首页>编程相关>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组件做出贡献的人！

展开
附加信息
相关应用
为您推荐
相关资讯 全部