@nx-space/nx-comments-wc

v0.1.0

Published

3 years ago

> 一个为 NEXT 前端主题打造的评论区 web component > > A Comment Web Component for NEXT web

0High
0Medium
0Low

wibus

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-wc

By 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 file

Custom Styles

全部类名与ID几乎都以 nx-comments- 开头，防止和其他组件冲突。

Stack

Reference

This Project refered to:

Inspire -- A WordPress Theme
wc-github-corners -- By YunYouJun

License

此项目 AGPLv3 授权开源，使用此项目进行的二次创作或者衍生项目也必须开源。

Author

Personal Website · Blog · GitHub @wibus-wee · Telegram @wibus✪

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NEXT Comments WC. WIP