0.1.0 • Published 2 years ago
@nx-space/nx-comments-wc v0.1.0
NEXT Comments WC. WIP
一个为 NEXT 前端主题打造的评论区 web component
A Comment Web Component for NEXT web
Usage
# pnpm manager (recommended)
pnpm i @nx-space/nx-comments-wc
# npm manager
npm i @nx-space/nx-comments-wc
# yarn manager
yarn add @nx-space/nx-comments-wcBy CDN
See demo/index.html
<!-- jsDelivr CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@nx-space/nx-comments-wc@latest"></script>
<nx-comments></nx-comments>By npm
// main.ts
import '@nx-space/nx-comments-wc';<nx-comments></nx-comments>API
Example
<nx-comments owo=true apiUrl="https://api.example.com/api/v1/comments" pageSize=10 page=1 postId=".."></nx-comments>src/nx-comments.ts:
class: NxComments
Superclass
| Name | Module | Package |
|---|---|---|
LitElement | lit |
Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
postId | string | "62d5235ff357ec0d12b68ea6" | 评论当前文章或页面的id | ||
pageSize | number | 10 | 每页显示的评论数量 | ||
owoSelectorState | Boolean \| undefined | true | 是否开启 OwO 选择器 | ||
emojiSelectorState | Boolean \| undefined | true | 是否开启 Emoji 选择器 | ||
owoUrl | string \| undefined | OwO 表情配置文件链接 | |||
visitorAvatarUrl | string \| undefined | `https://cravatar.cn/avatar/${this.email}?s=86&d=mm&r=g` | 游客默认头像链接 | ||
apiUrl | string | 'http://127.0.0.1:3333' | 服务端 API 链接 | ||
needCaptcha | Boolean \| undefined | false | 是否需要算数验证（仅前端方面验证） | ||
captchaRange | number | 100 | 算数验证范围（默认 从0到100） | ||
page | number | 1 | 当前评论列表的页码 | ||
parent | null | 当前回复评论的父级评论 |
Events
| Name | Type | Description | Inherited From |
|---|---|---|---|
change-comment-list-page | CustomEvent |
Develop
pnpm ci # it can install dependencies with lock fileCustom Styles
全部类名与ID几乎都以 nx-comments- 开头，防止和其他组件冲突。
Stack
Reference
This Project refered to:
- Inspire -- A WordPress Theme
- wc-github-corners -- By YunYouJun
License
此项目 AGPLv3 授权开源，使用此项目进行的二次创作或者衍生项目也必须开源。
Author
nx-space © Wibus, Released under the AGPL-3.0 License. Created on 2022-7-27
Personal Website · Blog · GitHub @wibus-wee · Telegram @wibus✪