docs: supplement and refine fe-api.md

conf/artalk.example.zh-CN.yml

@@ -278,7 +278,7 @@ admin_notify:
       - "USER_ID_1"
       - "GROUP_ID_1"
 
-# 前端配置
+# 界面配置
 frontend:
   # 评论框占位文字
   placeholder: ""

docs/docs/develop/fe-api.md

@@ -26,14 +26,16 @@ const artalk = Artalk.init({
 })
 ```
 
-调用该函数会向后端发起请求：
+调用该函数会异步地向后端发起请求：
 
 1. 获取前端配置
 2. 获取评论列表
 
-配置和评论加载完毕后会分别触发 `conf-loaded` 和 `list-loaded` 事件。
+配置和插件加载完毕后会触发 `mounted` 事件。
 
-注：前端配置可能会被覆盖，详情见：[在后端控制前端](../guide/backend/fe-control.md)。
+评论列表加载完毕后会触发 `list-loaded` 事件。
+
+注：前端界面配置可能会被覆盖，详情见：[在后端控制前端](../guide/backend/fe-control.md)。
 
 ## 释放资源 `destroy`
 
@@ -45,7 +47,7 @@ const artalk = Artalk.init({ ... })
 artalk.destroy()
 ```
 
-释放资源将执行 Artalk 挂载的 DOM 节点删除，以及解除 Artalk 事件监听等操作。
+调用该函数时，将触发 `unmounted` 事件。释放资源将执行 Artalk 挂载的 DOM 节点删除，以及解除 Artalk 事件监听等操作。当该函数执行完毕后，Artalk 实例将不再可用。
 
 在 Vue / React 等框架中，务必在组件销毁时调用该函数，否则会造成内存泄漏：
 
@@ -69,11 +71,11 @@ artalk.update({
 })
 ```
 
-调用该函数将触发 `conf-loaded` 事件。
+调用该函数将触发 `updated` 事件。
 
 更新配置不会自动刷新评论列表，可按需继续执行 `artalk.reload()` 函数。
 
-请注意，该函数是一个实例化对象中的方法，并非全局函数。
+请注意，该函数是一个实例化对象中的成员方法，并非全局函数。
 
 前端配置参考：[前端配置](../guide/frontend/config.md)
 
@@ -96,8 +98,9 @@ artalk.reload()
 ```js
 const artalk = Artalk.init({ ... })
 
-artalk.on('list-loaded', () => {
-  alert('评论列表加载完毕')
+artalk.on('list-loaded', (comments) => {
+  // comments 包含当前页面所有评论数据 (而非仅本次请求获取的部分评论)
+  console.log('评论列表加载完毕: ', comments)
 })
 ```
 
@@ -125,7 +128,7 @@ artalk.off('list-loaded', handler)
 ```js
 const artalk = Artalk.init({ ... })
 
-artalk.trigger('list-loaded')
+artalk.trigger('list-loaded', [...])
 ```
 
 ## 加载插件 `use`
@@ -154,6 +157,15 @@ const artalk = Artalk.init({ ... })
 artalk.setDarkMode(true)
 ```
 
+也可以通过调用 `Artalk.init` 时，通过 `darkMode` 参数设置初始夜间模式。
+
+```js
+const artalk = Artalk.init({
+  // ...其他配置
+  darkMode:  'auto',
+})
+```
+
 ## 浏览量组件 `loadCountWidget`
 
 详情见：[浏览量统计](../guide/frontend/pv.md)

docs/docs/develop/plugs.md

@@ -6,12 +6,26 @@
 import Artalk from 'artalk'
 
 Artalk.use((ctx) => {
+  ctx.on('list-loaded', () => {
+    console.log('评论列表加载完毕')
+    ctx.getCommentNodes().forEach((node) => {
+      node.getEl().style.background = 'red'
+    })
+  })
+})
+
+Artalk.use((ctx) => {
+  let el = null
+
   ctx.on('mounted', () => {
-    ctx.get('editor').setContent("Hello World")
+    el = document.createElement('div')
+    document.body.appendChild(el)
+    console.log('Artalk 实例被挂载')
   })
 
-  ctx.on('list-loaded', () => {
-    console.log('评论列表加载完毕')
+  ctx.on('unmounted', () => {
+    el.remove()
+    console.log('Artalk 实例被销毁')
   })
 })
 
@@ -20,35 +34,47 @@ const artalk = Artalk.init({ ... })
 
 请注意：
 
-- `Artalk.use` 必须在 `Artalk.init` 之前调用。
+- `Artalk.use` 必须在 `Artalk.init` 之前调用才生效。
 - 请勿依赖插件的加载顺序，请监听事件来执行插件逻辑。
-- 当所有的插件加载完毕后，会触发 `inited` 事件。
+- 当所有的插件加载完毕后，会触发 `created` 事件。
+- 当插件和配置加载完毕后，会触发 `mounted` 事件。
+- 当 Artalk 实例被销毁时，会触发 `unmounted` 事件。
+- 当配置发生变化时，会触发 `updated` 事件。
 
-在 use 函数中，你可以通过 `ctx` 来访问 Artalk 的上下文。
+在 use 函数中，你可以通过 `ctx` 来访问 Artalk 的 Context 对象。
 
 ## Context
 
 Context 对象包含了 Artalk 的上下文信息。
 
 | 成员 | 说明 |
 | --- | --- |
-| `ctx.$root` | Artalk 容器元素 |
-| `ctx.conf` | Artalk 配置 |
-| `ctx.fetch` | 加载数据数据 |
+| `ctx.getEl` | 获取容器元素 |
+| `ctx.getConf` | 获取配置 |
+| `ctx.updateConf` | 更新配置 |
+| `ctx.watchConf` | 监听配置 |
+| `ctx.setDarkMode` | 设置夜间模式 |
+| `ctx.getApi` | 获取 API 客户端对象 |
+|--|--|
+| `ctx.fetch` | 获取评论数据 |
 | `ctx.reload` | 重载评论列表 |
+| `ctx.getComments` | 获取所有评论数据对象 |
+| `ctx.getCommentNodes` | 获取所有评论节点对象 |
+|--|--|
 | `ctx.on` | 添加事件监听 |
 | `ctx.off` | 解除事件监听 |
 | `ctx.trigger` | 触发事件 |
-| `ctx.inject` | 依赖注入 |
+|--|--|
 | `ctx.get` | 获取依赖 |
+| `ctx.inject` | 注入依赖 |
 
 ::: warning
 Context API 目前仍不稳定，开发可能会有变动，升级请关注 CHANGELOG。
 :::
 
 参考：[@artalk/src/types/context.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/types/context.ts)
 
-Artalk 拥有完整的 TypeScript 类型定义，你可以通过编辑器的自动补全来查看 API。
+Artalk 包含完整的 TypeScript 类型定义，你可以通过编辑器的自动补全来查看 API。
 
 ## 示例插件
 

docs/docs/guide/backend/fe-control.md

@@ -1,10 +1,10 @@
 # 在后端控制前端
 
-你可以在后端完全控制前端界面的行为（包括设定[前端的配置](/guide/frontend/config)），我们推荐使用这种方式部署 Artalk，并且这个特性「默认开启」。
+你可以在后端完全控制前端界面的行为（包括设定几乎所有[前端配置项](/guide/frontend/config)），我们推荐使用这种方式配置 Artalk 界面，并且这个特性「默认开启」。
 
-## 如何修改前端配置
+## 如何修改前端界面配置
 
-在侧边栏的[控制中心](/guide/frontend/sidebar.md#控制中心)提供了图形设置界面，你能快速轻松地对前端配置进行修改。
+在侧边栏的[控制中心](/guide/frontend/sidebar.md#控制中心)提供了图形设置界面，你能快速轻松地对前端界面配置进行修改。
 
 <img src="../../images/sidebar/fe-setting.png" width="400px">
 

docs/docs/guide/frontend/emoticons.md

@@ -57,7 +57,7 @@ Artalk 除了支持 OwO 格式外，还内置支持一种标准的表情包列
 
 ::: warning
 
-前端的配置将默认被后端覆盖，详情参考：[在后端控制前端](/guide/backend/fe-control.html)
+前端的配置可能会被后端所覆盖，详情参考：[在后端控制前端](/guide/backend/fe-control.html)
 
 :::
 

ui/artalk/src/lib/component.ts

@@ -9,4 +9,8 @@ export default abstract class Component {
   public constructor(
     public ctx: ContextApi
   ) {}
+
+  getEl() {
+    return this.$el
+  }
 }