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✪