artalkjs/docs/develop/fe-api.md

Frontend API

安装依赖

用你喜欢的包管理器安装 Artalk：

pnpm add artalk
# 或者使用 npm
npm install artalk

创建实例 init

调用该函数将创建并得到一个 Artalk 的实例化对象，可用于后续操作。

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 事件。

注：前端配置可能会被覆盖，详情见：在后端控制前端。

释放资源 destroy

销毁 Artalk 实例，用于资源释放。

const artalk = Artalk.init({ ... })

artalk.destroy()

释放资源将执行 Artalk 挂载的 DOM 节点删除，以及解除 Artalk 事件监听等操作。

在 Vue / React 等框架中，务必在组件销毁时调用该函数，否则会造成内存泄漏：

import { onUnmounted } from 'vue'

onUnmounted(() => {
  artalk.destroy()
})

更新配置 update

修改 Artalk 当前配置。

const artalk = Artalk.init({ ... })

artalk.update({
  // 新的配置...
})

调用该函数将触发 conf-loaded 事件。

更新配置不会自动刷新评论列表，可按需继续执行 artalk.reload() 函数。

请注意，该函数是一个实例化对象中的方法，并非全局函数。

前端配置参考：前端配置

重新加载 reload

重新从后端加载 Artalk 评论列表数据。

const artalk = Artalk.init({ ... })

artalk.reload()

列表加载前将触发 list-load 事件，加载完毕后将触发 list-loaded 事件。

监听事件 on

添加 Artalk 事件监听。

const artalk = Artalk.init({ ... })

artalk.on('list-loaded', () => {
  alert('评论列表加载完毕')
})

可参考：前端 Event。

解除监听 off

解除 Artalk 事件监听。

const artalk = Artalk.init({ ... })

const handler = () => {
  alert('评论列表加载完毕')
}

artalk.on('list-loaded', handler)
artalk.off('list-loaded', handler)

触发事件 trigger

触发 Artalk 事件。

const artalk = Artalk.init({ ... })

artalk.trigger('list-loaded')

加载插件 use

通过 Artalk.use 函数加载插件。请注意，该函数是一个全局函数，并非实例化对象中的方法。通过该函数加载的插件将对所有 Artalk 实例生效。

import Artalk from 'artalk'

Artalk.use((ctx) => {
  ctx.editor.setContent("Hello World")
})

const artalk = Artalk.init({ ... })

详情见：插件开发

夜间模式 setDarkMode

修改夜间模式，可以配合博客主题调用，例如当用户点击夜间模式切换按钮。

const artalk = Artalk.init({ ... })

artalk.setDarkMode(true)

浏览量组件 loadCountWidget

详情见：浏览量统计