Parsley

Demo

是不是很丑

config

export const defaultConfig = {
	id: '#parsley',
	title: 'Parsley 评论系统',
	enableMarkdown: true,
	themeColor: '#2cc9f6',
	themeBorderRadius: '4px',
	themeTransition: '.2s',
	platform: {
		type: 'bmob',
		apiCode: '',
		secretKey: '',
		cdnPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/Bmob-2.2.51.min.js',
	},
	alert: '',
	textareaRow: 8,
	textareaCol: 60,
} as const;

• id: 挂载节点
• title: 展示名称，若使用 react / preact 可以动态修改
• enableMarkdown: 忘了加了，所以不支持设置(也就是强制 markdown)
• themeColor: 主题色
• themeBorderRadius: 圆角大小
• themeTransition: 动画持续时间(感觉作用不大？)
• platform: 目前仅支持 bmob，100 年之后应该会支持其他的平台
• • bmob:
  • • type: 目前只能为 bmob
  • • apiCode: 设置 - 安全验证 - API 安全码(根据 Bmob 的要求，在 web 使用时，必须提供 api 安全码)
  • • cdnPath: 在运行时会动态插入 sdk 到 document.body，可以自己部署 sdk 文件
  • • alert: 提示信息，显示在评论框上方，评论列表下方，但是样式极丑。
  • • textareaRow: 评论的输入框显示行数，不影响上传
  • • textareaCol: 评论的输入框显示列数，不影响上传

使用方法

首先引入 dist 目录下的 style.css

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/parsley-comment@latest/dist/style.css" />

或者可以自己写一套主题，不过不建议，毕竟还是 beta 版，鬼知道以后会不会变更结构。

原生 js

引入 <script src="https://cdn.jsdelivr.net/npm/parsley-comment@latest/dist/minified/parsley.es.js"></script> ，然后也许就可以 new Parsley(yourConfig) 操作了，出错了再说。

另外不介意包大小的话可以引用 <script src="https://cdn.jsdelivr.net/npm/parsley-comment@latest/dist/parsley.es.js"></script>，这是 esbuild 压缩前的。

如果不会修改 markdown 的默认配置（即开启，且使用 marked 来渲染），则可以使用 <script src="https://cdn.jsdelivr.net/npm/parsley-comment@latest/dist/single/parsley.es.js"></script>，只用导入一次。

js-bundler

import Parsley from 'parsley-comment'; //引入的是 Parsley Class，也就是需要 new Parsley(yourConfig)
import { Parsley } from 'parsley-comment'; //引入的也是 Parsley Class
import { ParsleyComponent } from 'parsley-comment'; //引入的是 react component，可以直接在 react / preact 中使用

不出意外的话应该不会出意外。