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/hydrogen-js-sdk@2.2.51/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 中使用
不出意外的话应该不会出意外。