v2.2.8

Signed-off-by: qwqcode <qwqcode@gmail.com>

.github/workflows/npm.yml

@@ -66,6 +66,7 @@ jobs:
       - name: Update CDN links
         run: |
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/ArtalkCDN.json
+          perl -pi -e 's#"Artalk"(\W+)?:(\W+)?".*?"#"Artalk": "${{ steps.get_version.outputs.VERSION }}"#g' docs/code/ArtalkVersion.json
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/quick-start/cdn.html
 
       - uses: stefanzweifel/git-auto-commit-action@v4

README.md

@@ -6,6 +6,7 @@
 
 [![](https://img.shields.io/npm/v/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
 [![](https://img.shields.io/npm/dt/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
+[![](https://badgen.net/bundlephobia/minzip/artalk?style=flat-square)](https://bundlephobia.com/package/artalk)
 [![](https://img.shields.io/github/last-commit/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master)
 [![](https://img.shields.io/github/issues-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/issues)
 [![](https://img.shields.io/github/issues-pr-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/pulls)
@@ -20,7 +21,7 @@
 
 ---
 
-- 轻量级 (~30kB gzipped)
+- 轻量级 (~30kB)
 - 自托管 (数据安全)
 - 易上手 (防秃顶)
 - Golang 后端 (易部署 / 跨平台)
@@ -125,8 +126,16 @@ docker-compose up -d
 ## TODOs 
 
 - [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
-- [x] 多站点支持
 - [x] 多数据库支持
+  - [x] SQLite
+  - [x] MySQL
+  - [x] Postgres
+  - [x] SQLServer
+- [x] 多缓存支持
+  - [x] In-memory (内建缓存)
+  - [x] Redis
+  - [x] Memcache
+- [x] 多站点支持
 - [x] 评论获取分页
 - [x] 评论点赞投票
 - [x] 浏览量统计
@@ -144,15 +153,16 @@ docker-compose up -d
   - [x] 站点 (增/删/改)
   - [x] 数据分页
   - [ ] 配置 (GUI)
-- [x] 数据导入 ([Artransfer](https://github.com/ArtalkJS/Artransfer))
+- [x] 数据导入 ([Artransfer](https://artalk.js.org/guide/transfer.html))
   - [x] Artrans
-  - [x] Artalk v1 (PHP)
   - [x] WordPress
-  - [x] Typecho
+  - [x] Typecho ([插件](https://github.com/ArtalkJS/Artrans-Typecho) / [Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
   - [x] Valine
   - [x] Disqus
   - [x] Commento
+  - [x] Waline ([Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
   - [x] Twikoo
+  - [x] Artalk v1 (PHP)
 - [x] 数据导出
 - [ ] 数据备份同步
 - [x] 邮件异步队列发送

package.json

@@ -10,23 +10,23 @@
     "build:all": "pnpm build && pnpm build:sidebar"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
-    "@types/node": "^16.11.7",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "autoprefixer": "^10.4.0",
-    "eslint": "^8.2.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.3",
+    "@types/node": "^16.11.27",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "autoprefixer": "^10.4.4",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-airbnb-typescript": "^16.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-config-airbnb-typescript": "^16.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
     "less": "^4.1.2",
-    "postcss": "^8.1.0",
-    "prettier": "^2.4.1",
-    "rollup": "^2.59.0",
-    "typescript": "^4.5.2",
-    "vite": "^2.6.14",
-    "vite-tsconfig-paths": "^3.3.17"
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "rollup": "^2.70.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-tsconfig-paths": "^3.4.1"
   }
 }

packages/artalk-sidebar/index.html

@@ -21,7 +21,7 @@
 
     InitSidebar({
       el: '#ArtalkSidebar',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : '../',
       pageKey,
       site,
       darkMode,

packages/artalk-sidebar/src/admin/page-list.ts

@@ -26,14 +26,20 @@ export default class PageList extends Component {
   initPageList() {
     this.pages = []
 
+    this.$el.innerHTML = `<div class="atk-header-action-bar">
+    <span class="atk-update-all-title-btn"><i class="atk-icon atk-icon-sync"></i> <span class="atk-text">更新标题</span></span>
+    <span class="atk-cache-flush-all-btn"><span class="atk-text">缓存清除</span></span>
+    <span class="atk-cache-warm-up-btn"><span class="atk-text">缓存预热</span></span>
+    </div>`
+
+    // 缓存操作按钮
+    const $cacheFlushBtn = this.$el.querySelector<HTMLElement>('.atk-cache-flush-all-btn')!
+    $cacheFlushBtn.onclick = () => { new Api(this.ctx).cacheFlushAll().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+    const $cacheWarmBtn = this.$el.querySelector<HTMLElement>('.atk-cache-warm-up-btn')!
+    $cacheWarmBtn.onclick = () => { new Api(this.ctx).cacheWarmUp().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+
     // 更新全部页面标题按钮
     ;(async () => {
-      this.$el.innerHTML = `<div class="atk-header-action-bar">
-      <span class="atk-update-all-title-btn">
-        <i class="atk-icon atk-icon-sync"></i> <span class="atk-text">更新标题</span>
-      </span>
-      </div>`
-
       const $updateAllTitleBtn = this.$el.querySelector<HTMLElement>('.atk-update-all-title-btn')!
       const $updateAllTitleIcon = $updateAllTitleBtn.querySelector<HTMLElement>('i')!
       const $updateAllTitleText = $updateAllTitleBtn.querySelector<HTMLElement>('.atk-text')!

packages/artalk-sidebar/src/main.ts

@@ -5,7 +5,8 @@ import SidebarRoot from './sidebar-root'
 
 export default async function InitSidebar(conf: ArtalkConfig, user: LocalUser, view?: string) {
   // 初始化 Artalk 主程序
-  const artalk = new Artalk(conf)
+  conf.useBackendConf = true
+  const artalk = await (new Artalk(conf))
   artalk.$root.style.display = 'none'
 
   // 初始化用户数据

packages/artalk-sidebar/src/sidebar-views/transfer-view.ts

@@ -135,7 +135,7 @@ export default class TransferView extends SidebarView {
       formData.append('token', this.ctx.user.data.token)
 
       // 开始上传
-      xhr.open('post', `${this.ctx.conf.server}/admin/import-upload`)
+      xhr.open('post', `${this.ctx.conf.server}/api/admin/import-upload`)
       xhr.timeout = 2*60*1000 // 2min
       xhr.send(formData)
 
@@ -256,7 +256,7 @@ export default class TransferView extends SidebarView {
         const $formTmp = document.createElement('form')
         $formTmp.style.display = 'none'
         $formTmp.setAttribute('method', 'post')
-        $formTmp.setAttribute('action', `${this.ctx.conf.server}/admin/import`)
+        $formTmp.setAttribute('action', `${this.ctx.conf.server}/api/admin/import`)
         $formTmp.setAttribute("target", frameName)
 
         Object.entries(formParams).forEach(([key, val]) => {

packages/artalk/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <title>Artalk DEMO</title>
@@ -16,7 +16,8 @@
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
+    .desc { font-size:12px;color:#697182 }
+    body.dark-mode .desc { color:#848da3 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
     @media only screen and (max-width: 768px) {
@@ -26,7 +27,7 @@
     }
     .float-btn { user-select: none;bottom: 25px;display: block;cursor: pointer;text-align: center;width: 60px;height: 37px;line-height: 37px;font-size: 13px;color: #757e91;background: #fff;opacity: 0.8;border-radius: 4px;border: 1px solid #eceff2;position: fixed; }
     .to-night { z-index: 99999;left: 25px;background: #1e2223;color: #fff; }
-    body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
+    body.dark-mode .to-night { background: #006fd9;border: 1px solid #2d3235;color: #fff; }
     .to-top { right: 25px; }
   </style>
   <!--<link rel="stylesheet"
@@ -45,11 +46,11 @@
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
     <div class="desc">一款简洁的自托管评论系统 <span id="ArtalkPV"></span></div>
     <div class="social">
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package version" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package download number" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/commits/master" aria-label="last commit" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" aria-label="open source license" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk" aria-label="GitHub star number" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
   <div class="card atk-fade-in">
@@ -64,8 +65,9 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
+      //useBackendConf: true,
     });
 
     window.artalk = artalk;

packages/artalk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.5",
-  "backendMinVersion": "2.1.2",
+  "version": "2.2.8",
+  "backendMinVersion": "2.1.4",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

packages/artalk/src/api/index.ts

@@ -1,5 +1,6 @@
-import Context from '../context'
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 
@@ -9,7 +10,7 @@ export default class Api {
 
   constructor (ctx: Context) {
     this.ctx = ctx
-    this.baseURL = ctx.conf.server
+    this.baseURL = `${ctx.conf.server}/api`
   }
 
   // ============================
@@ -294,7 +295,22 @@ export default class Api {
 
     const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
     return ((json.data || {}) as any) as { img_file: string, img_url: string }
+  }
 
+  /** 获取配置 */
+  public async conf() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/conf`)
+    const conf = (data.frontend_conf || {}) as ArtalkConfig
+
+    // Patch: `emoticons` config string to json
+    if (conf.emoticons && typeof conf.emoticons === "string") {
+      conf.emoticons = conf.emoticons.trim()
+      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+        conf.emoticons = JSON.parse(conf.emoticons) // pase json
+      }
+    }
+
+    return conf
   }
 
   // ============================
@@ -318,4 +334,20 @@ export default class Api {
     const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/status`)
     return (data || { is_pass: false }) as { is_pass: boolean }
   }
+
+  // ============================
+  //  管理员缓存操作
+  // ============================
+
+  /** 缓存清除 */
+  public cacheFlushAll() {
+    const params: any = { flush_all: true }
+    return POST(this.ctx, `${this.baseURL}/admin/cache-flush`, params)
+  }
+
+  /** 缓存预热 */
+  public cacheWarmUp() {
+    const params: any = {}
+    return POST(this.ctx, `${this.baseURL}/admin/cache-warm`, params)
+  }
 }

packages/artalk/src/artalk.ts

@@ -1,7 +1,8 @@
 import './style/main.less'
 
-import Context from './context'
 import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Handler } from '~/types/event'
+import Context from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
@@ -10,9 +11,9 @@ import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
 import Layer, { GetLayerWrap } from './components/layer'
-import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
 import * as Utils from './lib/utils'
+import * as Ui from './lib/ui'
 
 /**
  * Artalk
@@ -21,34 +22,43 @@ import * as Utils from './lib/utils'
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
 
-  public ctx: Context
-  public conf: ArtalkConfig
-  public $root: HTMLElement
+  public ctx!: Context
+  public conf!: ArtalkConfig
+  public $root!: HTMLElement
 
-  public checkerLauncher: CheckerLauncher
-  public editor: Editor
-  public list: List
-  public sidebarLayer: SidebarLayer
+  public checkerLauncher!: CheckerLauncher
+  public editor!: Editor
+  public list!: List
+  public sidebarLayer!: SidebarLayer
 
   constructor (customConf: ArtalkConfig) {
     // 配置
-    this.conf = { ...Artalk.defaults, ...customConf }
-    this.conf.server = this.conf.server.replace(/\/$/, '')
+    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
+    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
       // @link http://bl.ocks.org/abernier/3070589
-      this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
+      this.conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!this.conf.pageTitle) {
+      this.conf.pageTitle = `${document.title}`
     }
 
     // 装载元素
-    try {
-      const $root = document.querySelector<HTMLElement>(this.conf.el)
-      if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
-      this.$root = $root
-    } catch (e) {
-      console.error(e)
-      throw new Error('Please check your Artalk `el` config.')
+    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
+      this.$root = this.conf.el
+    } else {
+      try {
+        const $root = document.querySelector<HTMLElement>(this.conf.el)
+        if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+        this.$root = $root
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
     }
 
     // Context 初始化
@@ -57,10 +67,25 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
+
+    // 初始化组件
+    if (this.conf.useBackendConf) {
+      // 复用后端的配置
+      // @ts-ignore
+      return (async () => {
+        await this.loadConfRemote()
+        this.initCore()
+        return this // Promise<Artalk>
+      })()
+    }
+
+    this.initCore()
+  }
+
+  private initCore() {
+    // 组件初始化
     this.initLayer()
     this.initDarkMode()
-
-    // 组件初始化
     this.checkerLauncher = new CheckerLauncher(this.ctx)
     Utils.initMarked(this.ctx) // 初始化 marked
 
@@ -93,6 +118,17 @@ export default class Artalk {
     })
   }
 
+  /** 获取远程配置 */
+  private async loadConfRemote() {
+    Ui.showLoading(this.$root)
+    let backendConf = {}
+    try {
+      backendConf = await (new Api(this.ctx)).conf()
+    } catch (err) { console.error("配置远程获取失败", err) }
+    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
+    Ui.hideLoading(this.$root)
+  }
+
   /** 事件绑定 · 初始化 */
   private initEventBind() {
     // 锚点快速跳转评论

packages/artalk/src/components/comment.ts

@@ -1,11 +1,11 @@
 import '../style/comment.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import UADetect from '../lib/detect'
-import { CommentData } from '~/types/artalk-data'
 import CommentHTML from './html/comment.html?raw'
 import Api from '../api'
 import ActionBtn from './action-btn'

packages/artalk/src/components/editor-plugs/emoticons-plug.ts

@@ -1,10 +1,10 @@
 import './emoticons-plug.less'
 
-import Editor from '../editor'
-import EditorPlug from './editor-plug'
 import * as Utils from '~/src/lib/utils'
 import * as Ui from '~/src/lib/ui'
 import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
+import EditorPlug from './editor-plug'
+import Editor from '../editor'
 
 type OwOFormatType = {
   [key: string] : {

packages/artalk/src/components/editor-plugs/preview-plug.ts

@@ -1,8 +1,8 @@
 import './preview-plug.less'
 
+import * as Utils from '~/src/lib/utils'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
-import * as Utils from '~/src/lib/utils'
 
 export default class PreviewPlug extends EditorPlug {
   $el!: HTMLElement

packages/artalk/src/components/editor.ts

@@ -1,5 +1,6 @@
 import '../style/editor.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
@@ -8,7 +9,6 @@ import EditorHTML from './html/editor.html?raw'
 
 import EmoticonsPlug from './editor-plugs/emoticons-plug'
 import PreviewPlug from './editor-plugs/preview-plug'
-import { CommentData } from '~/types/artalk-data'
 import Api from '../api'
 
 export default class Editor extends Component {

packages/artalk/src/components/list-lite.ts

@@ -1,10 +1,10 @@
+import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import Comment from './comment'
-import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
 import { backendMinVersion } from '../../package.json'
@@ -49,6 +49,9 @@ export default class ListLite extends Component {
     </div>`)
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
+    // 评论为空时显示字符
+    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
+
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {

packages/artalk/src/components/list.ts

@@ -1,12 +1,12 @@
 import '../style/list.less'
 
+import { ListData } from '~/types/artalk-data'
 import Context from '../context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import ListHTML from './html/list.html?raw'
 import ListLite from './list-lite'
-import { ListData } from '~/types/artalk-data'
 
 export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement

packages/artalk/src/components/pagination.ts

@@ -38,7 +38,7 @@ export default class Pagination {
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
           <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" />
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
           <div class="atk-btn atk-btn-next">Next</div>
         </div>
       </div>`)

packages/artalk/src/components/sidebar-layer.ts

@@ -3,11 +3,11 @@ import '../style/sidebar-layer.less'
 import Context from '@/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
-import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
+import { SidebarShowPayload } from '~/types/event'
+import SidebarHTML from './html/sidebar-layer.html?raw'
 import Layer from './layer'
 import Api from '../api'
-import { SidebarShowPayload } from '~/types/event'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -88,7 +88,7 @@ export default class SidebarLayer extends Component {
 
       // 准备 Iframe 参数
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
-        : Utils.getURLBasedOnApi(this.ctx, 'sidebar/')
+        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
 
       const query: any = {
         pageKey: this.conf.pageKey,

packages/artalk/src/context.ts

@@ -1,7 +1,7 @@
 import { marked as libMarked } from 'marked'
-import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+import User from './lib/user'
 
 /**
  * Artalk Context

packages/artalk/src/defaults.ts

@@ -40,6 +40,7 @@ const defaults: ArtalkConfig = {
   imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
+  useBackendConf: false,
 }
 
 export default defaults

packages/artalk/src/lib/checker/captcha-checker.ts

@@ -15,7 +15,7 @@ const CaptchaChecker: Checker = {
       const $iframe = Utils.createElement<HTMLIFrameElement>(`<iframe class="atk-fade-in"></iframe>`)
       $iframe.style.display = 'none'
       Ui.showLoading($iframeWrap, { transparentBg: true })
-      $iframe.src = `${that.ctx.conf.server}/captcha/get?t=${+new Date()}`
+      $iframe.src = `${that.ctx.conf.server}/api/captcha/get?t=${+new Date()}`
       $iframe.onload = () => {
         $iframe.style.display = ''
         Ui.hideLoading($iframeWrap)

packages/artalk/src/lib/checker/index.ts

@@ -1,9 +1,9 @@
 import Context from '@/context'
 import Layer from '@/components/layer'
 import Dialog from '@/components/dialog'
+import { CheckerPayload } from '~/types/event'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
-import { CheckerPayload } from '~/types/event'
 import CaptchaChecker from './captcha-checker'
 import AdminChecker from './admin-checker'
 

packages/artalk/src/lib/utils.ts

@@ -286,10 +286,40 @@ export function isValidURL(urlRaw: string) {
 
 /** 获取基于 conf.server 的 URL */
 export function getURLBasedOnApi(ctx: Context, path: string) {
-  return `${ctx.conf.server.replace(/\/api\/?$/, '')}/${path.replace(/^\//, '')}`
+  return getURLBasedOn(ctx.conf.server, path)
 }
 
 /** 获取基于某个 baseURL 的 URL */
 export function getURLBasedOn(baseURL: string, path: string) {
   return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
 }
+
+/**
+ * Performs a deep merge of `source` into `target`.
+ * Mutates `target` only but not its objects and arrays.
+ *
+ * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
+ * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
+ */
+export function mergeDeep(target: any, source: any) {
+  const isObject = (obj: any) => obj && typeof obj === 'object'
+
+  if (!isObject(target) || !isObject(source)) {
+    return source
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key]
+    const sourceValue = source[key]
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue)
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = mergeDeep({ ...targetValue}, sourceValue)
+    } else {
+      target[key] = sourceValue
+    }
+  })
+
+  return target
+}

packages/artalk/src/style/_color.less

@@ -2,8 +2,8 @@
   --at-color-font: #2a2e2e;
   --at-color-deep: #2a2e2e;
   --at-color-sub: #757575;
-  --at-color-grey: #999;
-  --at-color-meta: #757e91;
+  --at-color-grey: #747474;
+  --at-color-meta: #697182;
   --at-color-border: #eceff2;
   --at-color-light: #4285f4;
   --at-color-bg: #FFF;

packages/artalk/types/artalk-config.d.ts

@@ -1,6 +1,6 @@
 export default interface ArtalkConfig {
   /** 装载元素 */
-  el: string
+  el: string|HTMLElement
 
   /** 页面唯一标识（完整 URL） */
   pageKey: string
@@ -88,6 +88,9 @@ export default interface ArtalkConfig {
 
   /** 版本检测 */
   versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }
 
 export interface LocalUser {

packages/plugin-katex/README.md

@@ -1,41 +1,3 @@
 # @artalkjs/plugin-katex
 
-食用方法
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-
-  <!-- 引入 katex -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css">
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"></script>
-
-  <!-- 引入 Artalk -->
-  <link href="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.js"></script>
-
-  <!-- 引入 @artalkjs/plugin-katex -->
-  <script defer src="https://cdn.jsdelivr.net/npm/@artalkjs/plugin-katex/dist/artalk-plugin-katex.js"></script>
-</head>
-<body>
-  
-<!-- Artalk -->
-<div id="Comments"></div>
-<script>
-  new Artalk({
-    el:        '#Comments',
-    pageKey:   '<页面链接>',
-    pageTitle: '<页面标题>',
-    server:    '<后端地址>',
-    site:      '<站点名称>',
-  })
-</script>
-
-</body>
-</html>
-```
+食用方法参考：[官方文档](https://artalk.js.org/guide/frontend/latex.html)

packages/plugin-katex/index.d.ts

@@ -1 +0,0 @@
-import './main'

packages/plugin-katex/index.html

@@ -20,7 +20,7 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
     });
   </script>

packages/plugin-katex/package.json

@@ -14,7 +14,6 @@
   "unpkg": "./dist/artalk-plugin-katex.iife.js",
   "jsdelivr": "./dist/artalk-plugin-katex.iife.js",
   "module": "./dist/artalk-plugin-katex.es.js",
-  "types": "./index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

packages/plugin-katex/vite.config.ts

@@ -18,9 +18,6 @@ export default defineConfig({
       // 确保外部化处理那些你不想打包进库的依赖
       external: ['artalk', 'katex'],
       output: {
-        assetFileNames: assetInfo => {
-          return "[name].[ext]"
-        },
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
           artalk: 'Artalk',