160 lines
3.1 KiB
Markdown
160 lines
3.1 KiB
Markdown
# Frontend API
|
|
|
|
## 安装依赖
|
|
|
|
用你喜欢的包管理器安装 Artalk：
|
|
|
|
```bash
|
|
pnpm add artalk
|
|
# 或者使用 npm
|
|
npm install artalk
|
|
```
|
|
|
|
## 创建实例 `init`
|
|
|
|
调用该函数将创建并得到一个 Artalk 的实例化对象，可用于后续操作。
|
|
|
|
```js
|
|
import Artalk from 'artalk'
|
|
|
|
const artalk = Artalk.init({
|
|
el: '#Comments',
|
|
pageKey: '/post/1',
|
|
pageTitle: '关于引入 Artalk 的这档子事',
|
|
server: 'http://your_domain:8080',
|
|
site: 'Artalk 的博客',
|
|
})
|
|
```
|
|
|
|
调用该函数会向后端发起请求：
|
|
|
|
1. 获取前端配置
|
|
2. 获取评论列表
|
|
|
|
配置和评论加载完毕后会分别触发 `conf-loaded` 和 `list-loaded` 事件。
|
|
|
|
注：前端配置可能会被覆盖，详情见：[在后端控制前端](../guide/backend/fe-control.md)。
|
|
|
|
## 释放资源 `destroy`
|
|
|
|
销毁 Artalk 实例，用于资源释放。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.destroy()
|
|
```
|
|
|
|
释放资源将执行 Artalk 挂载的 DOM 节点删除，以及解除 Artalk 事件监听等操作。
|
|
|
|
在 Vue / React 等框架中，务必在组件销毁时调用该函数，否则会造成内存泄漏：
|
|
|
|
```ts
|
|
import { onUnmounted } from 'vue'
|
|
|
|
onUnmounted(() => {
|
|
artalk.destroy()
|
|
})
|
|
```
|
|
|
|
## 更新配置 `update`
|
|
|
|
修改 Artalk 当前配置。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.update({
|
|
// 新的配置...
|
|
})
|
|
```
|
|
|
|
调用该函数将触发 `conf-loaded` 事件。
|
|
|
|
更新配置不会自动刷新评论列表，可按需继续执行 `artalk.reload()` 函数。
|
|
|
|
请注意，该函数是一个实例化对象中的方法，并非全局函数。
|
|
|
|
前端配置参考：[前端配置](../guide/frontend/config.md)
|
|
|
|
## 重新加载 `reload`
|
|
|
|
重新从后端加载 Artalk 评论列表数据。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.reload()
|
|
```
|
|
|
|
列表加载前将触发 `list-load` 事件，加载完毕后将触发 `list-loaded` 事件。
|
|
|
|
## 监听事件 `on`
|
|
|
|
添加 Artalk 事件监听。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.on('list-loaded', () => {
|
|
alert('评论列表加载完毕')
|
|
})
|
|
```
|
|
|
|
可参考：[前端 Event](./event.md)。
|
|
|
|
## 解除监听 `off`
|
|
|
|
解除 Artalk 事件监听。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
const handler = () => {
|
|
alert('评论列表加载完毕')
|
|
}
|
|
|
|
artalk.on('list-loaded', handler)
|
|
artalk.off('list-loaded', handler)
|
|
```
|
|
|
|
## 触发事件 `trigger`
|
|
|
|
触发 Artalk 事件。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.trigger('list-loaded')
|
|
```
|
|
|
|
## 加载插件 `use`
|
|
|
|
通过 `Artalk.use` 函数加载插件。请注意，该函数是一个全局函数，并非实例化对象中的方法。通过该函数加载的插件将对所有 Artalk 实例生效。
|
|
|
|
```js
|
|
import Artalk from 'artalk'
|
|
|
|
Artalk.use((ctx) => {
|
|
ctx.editor.setContent("Hello World")
|
|
})
|
|
|
|
const artalk = Artalk.init({ ... })
|
|
```
|
|
|
|
详情见：[插件开发](./plugs.md)
|
|
|
|
## 夜间模式 `setDarkMode`
|
|
|
|
修改夜间模式，可以配合博客主题调用，例如当用户点击夜间模式切换按钮。
|
|
|
|
```js
|
|
const artalk = Artalk.init({ ... })
|
|
|
|
artalk.setDarkMode(true)
|
|
```
|
|
|
|
## 浏览量组件 `loadCountWidget`
|
|
|
|
详情见：[浏览量统计](../guide/frontend/pv.md)
|