artalk 2.4.1 → 2.4.3

package/dist/i18n/jp.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).jp=n()}(this,(function(){"use strict";var e,n,o;return e="jp",n={placeholder:"コメントを残す",noComment:"コメントなし",send:"送信",save:"保存",nick:"ニックネーム",email:"メール",link:"ウェブサイト",emoticon:"絵文字",preview:"プレビュー",image:"画像",uploadFail:"アップロードに失敗しました",commentFail:"コメントに失敗しました",restoredMsg:"コンテンツが復元されました",onlyAdminCanReply:"管理者のみが返信できます",uploadLoginMsg:"アップロードするには、名前とメールアドレスを入力してください",counter:"{count} コメント",sortLatest:"最新のもの",sortOldest:"最も古い",sortBest:"ベスト",sortAuthor:"著者",openComment:"コメントを開く",closeComment:"コメントを閉じる",listLoadFailMsg:"コメントの読み込みに失敗しました",listRetry:"クリックで再試行",loadMore:"もっと読み込む",admin:"管理者",reply:"返信",voteUp:"アップ",voteDown:"ダウン",voteFail:"投票に失敗しました",readMore:"続きを読む",actionConfirm:"確認",collapse:"折りたたむ",collapsed:"折りたたまれた",collapsedMsg:"このコメントは折りたたまれました",expand:"展開",approved:"承認されました",pending:"保留中",pendingMsg:"保留中、コメント投稿者にのみ表示されます",edit:"編集",editCancel:"編集をキャンセル",delete:"削除",deleteConfirm:"確認",pin:"ピン",unpin:"ピン外し",seconds:"秒前",minutes:"分前",hours:"時間前",days:"数日前",now:"たった今",adminCheck:"管理者パスワードを入力してください:",captchaCheck:"続けるにはCAPTCHAを入力してください:",confirm:"確認",cancel:"取消",msgCenter:"メッセージ",ctrlCenter:"コンソール",frontend:"フロントエンド",backend:"バックエンド",loading:"読み込み中",loadFail:"読み込みに失敗しました",editing:"編集中",editFail:"編集に失敗しました",deleting:"削除中",deleteFail:"削除に失敗しました",reqGot:"リクエストを取得しました",reqAborted:"リクエストがタイムアウトしたか、予期せず終了した"},o=["jp-JP"],window.ArtalkI18n||(window.ArtalkI18n={}),window.ArtalkI18n[e]=n,o&&o.forEach((e=>{window.ArtalkI18n[e]=n})),n}));

package/dist/i18n/zh-TW.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self)["zh-TW"]=n()}(this,(function(){"use strict";var e,n,o;return e="zh-TW",n={placeholder:"鍵入內容...",noComment:"「此時無聲勝有聲」",send:"發送評論",save:"保存評論",nick:"昵稱",email:"郵箱",link:"網址",emoticon:"表情",preview:"預覽",image:"圖片",uploadFail:"上傳失敗",commentFail:"評論失敗",restoredMsg:"內容已自動恢復",onlyAdminCanReply:"僅管理員可評論",uploadLoginMsg:"填入你的名字郵箱才能上傳哦",counter:"{count} 條評論",sortLatest:"最新",sortOldest:"最早",sortBest:"最熱",sortAuthor:"作者",openComment:"打開評論",closeComment:"關閉評論",listLoadFailMsg:"無法獲取評論列表數據",listRetry:"點擊重新獲取",loadMore:"加載更多",admin:"管理員",reply:"回覆",voteUp:"贊同",voteDown:"反對",voteFail:"投票失敗",readMore:"閱讀更多",actionConfirm:"確認操作",collapse:"摺疊",collapsed:"已摺疊",collapsedMsg:"該評論已被系統或管理員摺疊",expand:"展開",approved:"已審",pending:"待審",pendingMsg:"審核中，僅本人可見。",edit:"編輯",editCancel:"取消編輯",delete:"刪除",deleteConfirm:"確認刪除",pin:"置頂",unpin:"取消置頂",seconds:"秒前",minutes:"分鐘前",hours:"小時前",days:"天前",now:"剛剛",adminCheck:"鍵入密碼來驗證管理員身份：",captchaCheck:"鍵入驗證碼繼續：",confirm:"確認",cancel:"取消",msgCenter:"通知中心",ctrlCenter:"控制中心",frontend:"前端",backend:"後端",loading:"加載中",loadFail:"加載失敗",editing:"修改中",editFail:"修改失敗",deleting:"刪除中",deleteFail:"刪除失敗",reqGot:"請求響應",reqAborted:"請求超時或意外終止"},window.ArtalkI18n||(window.ArtalkI18n={}),window.ArtalkI18n[e]=n,o&&o.forEach((e=>{window.ArtalkI18n[e]=n})),n}));

package/dist/src/api/index.d.ts

@@ -19,7 +19,7 @@ declare const ApiComponents: {
 };
 declare class Api {
     protected ctx: Context;
-    baseURL: string;
+    get baseURL(): string;
     constructor(ctx: Context);
 }
 declare type TC = typeof ApiComponents;

package/dist/src/api/system.d.ts

@@ -10,4 +10,11 @@ export default class SystemApi extends ApiBase {
     getSettings(): Promise<string>;
     /** 保存配置数据 */
     saveSettings(yamlStr: string): Promise<boolean>;
+    /** 获取 API 版本信息 */
+    version(): Promise<{
+        app: string;
+        version: string;
+        commit_hash: string;
+        fe_min_version: string;
+    }>;
 }

package/dist/src/api/user.d.ts

@@ -1,11 +1,14 @@
-import { UserData, NotifyData } from '../../types/artalk-data';
+import { UserData, NotifyData, UserDataForAdmin } from '../../types/artalk-data';
 import ApiBase from './api-base';
 /**
  * 用户 API
  */
 export default class UserApi extends ApiBase {
     /** 用户 · 登录 */
-    login(name: string, email: string, password: string): Promise<string>;
+    login(name: string, email: string, password: string): Promise<{
+        token: string;
+        user: UserData;
+    }>;
     /** 用户 · 获取  */
     userGet(name: string, email: string): {
         req: Promise<{
@@ -25,4 +28,15 @@ export default class UserApi extends ApiBase {
     logout(): Promise<unknown>;
     /** 已读标记 */
     markRead(notifyKey: string, readAll?: boolean): Promise<unknown>;
+    /** 用户 · 列表 */
+    userList(offset?: number, limit?: number, type?: 'all' | 'admin' | 'in_conf'): Promise<{
+        users: UserDataForAdmin[];
+        total: number;
+    }>;
+    /** 用户 · 新增 */
+    userAdd(user: Partial<UserDataForAdmin>, password?: string): Promise<UserDataForAdmin>;
+    /** 用户 · 修改 */
+    userEdit(user: Partial<UserDataForAdmin>, password?: string): Promise<UserDataForAdmin>;
+    /** 用户 · 删除 */
+    userDel(userID: number): Promise<unknown>;
 }

package/dist/src/artalk.d.ts

@@ -25,18 +25,12 @@ export default class Artalk {
     private initComponents;
     /** 基本配置初始化 */
     static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig;
-    /** 初始化组件根据远程加载的配置 */
-    private loadConfRemoteAndInitComponents;
-    /** 远程加载配置 */
-    private loadConfRemote;
     /** 事件绑定初始化 */
     private initEventBind;
     /** 语言初始化 */
     private initLocale;
     /** Layer 初始化 */
     private initLayer;
-    /** 暗黑模式初始化 */
-    private initDarkMode;
     /** 监听事件 */
     on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>): void;
     /** 解除监听事件 */

package/dist/src/context.d.ts

@@ -69,4 +69,8 @@ export default class Context implements ContextApi {
         [key: string]: string;
     }): string;
     setDarkMode(darkMode: boolean): void;
+    private darkModeMedia;
+    private darkModeAutoFunc?;
+    private refreshDarkModeConf;
+    updateConf(conf: Partial<ArtalkConfig>): void;
 }

package/dist/src/i18n/index.d.ts

@@ -206,79 +206,73 @@ export declare const internal: {
         reqAborted: string;
     };
 };
-export declare const external: {
-    'jp-JP': {};
-    'zh-TW': {
-        placeholder: string;
-        noComment: string;
-        send: string;
-        save: string;
-        nick: string;
-        email: string;
-        link: string;
-        emoticon: string;
-        preview: string;
-        image: string;
-        uploadFail: string;
-        commentFail: string;
-        restoredMsg: string;
-        onlyAdminCanReply: string;
-        uploadLoginMsg: string;
-        counter: string;
-        sortLatest: string;
-        sortOldest: string;
-        sortBest: string;
-        sortAuthor: string;
-        openComment: string;
-        closeComment: string;
-        listLoadFailMsg: string;
-        listRetry: string;
-        loadMore: string;
-        admin: string;
-        reply: string;
-        voteUp: string;
-        voteDown: string;
-        voteFail: string;
-        readMore: string;
-        actionConfirm: string;
-        collapse: string;
-        collapsed: string;
-        collapsedMsg: string;
-        expand: string;
-        approved: string;
-        pending: string;
-        pendingMsg: string;
-        edit: string;
-        editCancel: string;
-        delete: string;
-        deleteConfirm: string;
-        pin: string;
-        unpin: string;
-        seconds: string;
-        minutes: string;
-        hours: string;
-        days: string;
-        now: string;
-        adminCheck: string;
-        captchaCheck: string;
-        confirm: string;
-        cancel: string;
-        msgCenter: string;
-        ctrlCenter: string;
-        frontend: string;
-        backend: string;
-        loading: string;
-        loadFail: string;
-        editing: string;
-        editFail: string;
-        deleting: string;
-        deleteFail: string;
-        reqGot: string;
-        reqAborted: string;
-    };
-    'fr-FR': {};
-    'de-DE': {};
-    'bn-IN': {};
+export declare function defineLocaleExternal(lang: string, locale: I18n, aliases?: string[]): {
+    placeholder: string;
+    noComment: string;
+    send: string;
+    save: string;
+    nick: string;
+    email: string;
+    link: string;
+    emoticon: string;
+    preview: string;
+    image: string;
+    uploadFail: string;
+    commentFail: string;
+    restoredMsg: string;
+    onlyAdminCanReply: string;
+    uploadLoginMsg: string;
+    counter: string;
+    sortLatest: string;
+    sortOldest: string;
+    sortBest: string;
+    sortAuthor: string;
+    openComment: string;
+    closeComment: string;
+    listLoadFailMsg: string;
+    listRetry: string;
+    loadMore: string;
+    admin: string;
+    reply: string;
+    voteUp: string;
+    voteDown: string;
+    voteFail: string;
+    readMore: string;
+    actionConfirm: string;
+    collapse: string;
+    collapsed: string;
+    collapsedMsg: string;
+    expand: string;
+    approved: string;
+    pending: string;
+    pendingMsg: string;
+    edit: string;
+    editCancel: string;
+    delete: string;
+    deleteConfirm: string;
+    pin: string;
+    unpin: string;
+    seconds: string;
+    minutes: string;
+    hours: string;
+    days: string;
+    now: string;
+    adminCheck: string;
+    captchaCheck: string;
+    confirm: string;
+    cancel: string;
+    msgCenter: string;
+    ctrlCenter: string;
+    frontend: string;
+    backend: string;
+    loading: string;
+    loadFail: string;
+    editing: string;
+    editFail: string;
+    deleting: string;
+    deleteFail: string;
+    reqGot: string;
+    reqAborted: string;
 };
 /**
  * get a locale object by language name
@@ -290,5 +284,5 @@ declare function getLocaleSet(lang: string): I18n;
 declare function getI18n(locale: I18n | string, key: keyof I18n, args?: {
     [key: string]: string;
 }): string;
-export { getLocaleSet, getI18n };
+export { getLocaleSet };
 export default getI18n;

package/dist/src/list/list-lite.d.ts

@@ -9,14 +9,23 @@ export default class ListLite extends Component {
     protected $commentsWrap: HTMLElement;
     protected data?: ListData;
     protected isLoading: boolean;
-    noCommentText: string;
+    noCommentText?: string;
+    /** 嵌套模式下的排序方式 */
+    private _nestSortBy?;
+    get nestSortBy(): ListNest.SortByType;
+    set nestSortBy(val: ListNest.SortByType);
     /** 平铺模式 */
-    flatMode: boolean;
-    /** 嵌套模式 */
-    nestSortBy: ListNest.SortByType;
-    /** 分页 */
-    pageMode: 'pagination' | 'read-more';
-    pageSize: number;
+    private _flatMode?;
+    get flatMode(): boolean;
+    set flatMode(val: boolean);
+    /** 分页方式 */
+    _pageMode?: 'pagination' | 'read-more';
+    get pageMode(): 'pagination' | 'read-more';
+    set pageMode(val: 'pagination' | 'read-more');
+    /** 每页数量 (每次请求获取量) */
+    private _pageSize?;
+    get pageSize(): number;
+    set pageSize(val: number);
     scrollListenerAt?: HTMLElement;
     repositionAt?: HTMLElement;
     protected pagination?: Pagination;
@@ -35,6 +44,7 @@ export default class ListLite extends Component {
     setLoading(val: boolean, isFirstLoad?: boolean): void;
     /** 评论获取 */
     fetchComments(offset: number): Promise<void>;
+    private confLoaded;
     protected onLoad(data: ListData, offset: number): void;
     /** 分页模式 */
     private refreshPagination;

package/dist/src/list/list.d.ts

@@ -20,6 +20,7 @@ export default class List extends ListLite {
     /** 管理员设置页面信息 */
     adminPageEditSave(): void;
     showUnreadBadge(count: number): void;
+    private dropdownLoaded;
     /** 初始化选择下拉层 */
     protected initDropdown(): void;
     updateUnread(notifies: NotifyData[]): void;

package/dist/types/artalk-config.d.ts

@@ -1,4 +1,5 @@
 import { I18n } from '../src/i18n'
+import { CommentData } from './artalk-data'
 
 export default interface ArtalkConfig {
   /** 装载元素 */
@@ -39,6 +40,9 @@ export default interface ArtalkConfig {
     default: string
   }
 
+  /** 头像链接生成器 */
+  avatarURLBuilder?: (comment: CommentData) => string,
+
   /** 分页配置 */
   pagination: {
     /** 每次请求获取数量 */
@@ -103,7 +107,7 @@ export default interface ArtalkConfig {
   /** 版本检测 */
   versionCheck: boolean
 
-  /** 应用后端配置 */
+  /** 引用后端配置 */
   useBackendConf: boolean
 
   /** 语言本地化 */

package/dist/types/artalk-data.d.ts

@@ -159,6 +159,29 @@ export interface UserData {
 
   /** 是否属于管理员 */
   is_admin: boolean
+
+  /** 所属站点名 */
+  site_names: string[]
+
+  /** 所属站点名 (字符串) */
+  site_names_raw: string,
+
+  /** 是否允许接收邮件通知 */
+  receive_email: boolean
+}
+
+export interface UserDataForAdmin extends UserData {
+  /** 最后一次操作 IP */
+  last_ip: string
+
+  /** 最后一次操作 UA */
+  last_ua: string
+
+  /** 是否存在于配置文件中 */
+  is_in_conf: boolean
+
+  /** 评论数 */
+  comment_count: number
 }
 
 export interface NotifyData {

package/dist/types/context.d.ts

@@ -143,4 +143,7 @@ export default interface ContextApi {
 
   /** 设置暗黑模式 */
   setDarkMode(darkMode: boolean): void
+
+  /** 更新配置 */
+  updateConf(conf: Partial<ArtalkConfig>): void
 }

package/dist/types/event.d.ts

@@ -9,7 +9,7 @@ export interface EventPayloadMap {
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
-  'conf-updated': undefined        // Artalk 配置变更时
+  'conf-loaded': undefined         // Artalk 配置变更时
   'sidebar-show': undefined        // 侧边栏显示
   'sidebar-hide': undefined        // 侧边栏隐藏
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.4.1",
-  "backendMinVersion": "2.2.0",
+  "version": "2.4.3",
+  "backendMinVersion": "2.3.0",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -34,8 +34,9 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "pnpm lint && vite build && pnpm build:lite",
+    "build": "pnpm lint && vite build && pnpm build:lite && pnpm build:i18n",
     "build:lite": "vite build --config vite-lite.config.ts",
+    "build:i18n": "node scripts/build-i18n.mjs",
     "build:demo": "vite build --config vite-demo.config.ts",
     "serve": "vite preview",
     "deploy": "gh-pages -d deploy",

package/scripts/build-i18n.mjs

@@ -0,0 +1,46 @@
+import fs from 'fs'
+import path from 'path'
+import { build } from 'vite'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const i18nPath = path.join(__dirname, '../src/i18n/')
+const outDir = path.resolve(__dirname, '../dist/i18n')
+
+// empty outDir before build
+fs.rmSync(outDir, { recursive: true, force: true })
+
+const libraries = []
+
+fs.readdirSync(i18nPath).forEach(f => {
+  if (['index.ts'].includes(f)) return
+
+  const filename = path.join(i18nPath, f)
+  const lang = path.parse(filename).name
+  const content = fs.readFileSync(filename);
+
+  // only compile the external locale
+  if (!content.toString().includes('defineLocaleExternal')) return
+
+  libraries.push({
+    entry: filename,
+    name: lang,
+    fileName: (format) => ((format == "umd") ? `${lang}.js` : `${lang}.${format}.js`),
+  })
+})
+
+libraries.forEach(async (lib) => {
+  await build({
+    build: {
+      target: 'es2015',
+      outDir: outDir,
+      minify: 'terser',
+      emptyOutDir: false,
+      lib: {
+        ...lib,
+        formats: ['umd'],
+      },
+    },
+    configFile: false, // prevent load any vite config file
+  })
+})

package/src/api/index.ts

@@ -18,11 +18,12 @@ const ApiComponents = {
 
 class Api {
   protected ctx: Context
-  public baseURL: string
+  public get baseURL() {
+    return `${this.ctx.conf.server}/api`
+  }
 
   constructor (ctx: Context) {
     this.ctx = ctx
-    this.baseURL = `${ctx.conf.server}/api`
 
     Object.entries(ApiComponents).forEach(([key, ApiComponent]) => {
       this[key] = new ApiComponent(this, this.ctx)

package/src/api/system.ts

@@ -36,4 +36,11 @@ export default class SystemApi extends ApiBase {
     })
     return data
   }
+
+  /** 获取 API 版本信息 */
+  public async version() {
+    const resp = await fetch(`${this.api.baseURL}/version`, { method: 'POST' })
+    const data = await resp.json()
+    return data as { app: string, version: string, commit_hash: string, fe_min_version: string }
+  }
 }

package/src/api/user.ts

@@ -1,4 +1,4 @@
-import { UserData, NotifyData } from '~/types/artalk-data'
+import { UserData, NotifyData, UserDataForAdmin } from '~/types/artalk-data'
 import ApiBase from './api-base'
 import { ToFormData } from './request'
 
@@ -15,7 +15,7 @@ export default class UserApi extends ApiBase {
     if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
 
     const data = await this.POST<any>('/login', params)
-    return (data.token as string)
+    return data as { token: string, user: UserData }
   }
 
   /** 用户 · 获取  */
@@ -72,4 +72,61 @@ export default class UserApi extends ApiBase {
 
     return this.POST(`/mark-read`, params)
   }
+
+  /** 用户 · 列表 */
+  public async userList(offset?: number, limit?: number, type?: 'all'|'admin'|'in_conf') {
+    const params: any = {
+      offset: offset || 0,
+      limit: limit || 15,
+    }
+
+    if (type) params.type = type
+
+    const d = await this.POST<any>('/admin/user-get', params)
+    return (d as { users: UserDataForAdmin[], total: number })
+  }
+
+  /** 用户 · 新增 */
+  public async userAdd(user: Partial<UserDataForAdmin>, password?: string) {
+    const params: any = {
+      name: user.name || '',
+      email: user.email || '',
+      password: password || '',
+      link: user.link || '',
+      is_admin: user.is_admin || false,
+      site_names: user.site_names_raw || '',
+      receive_email: user.receive_email || true,
+      badge_name: user.badge_name || '',
+      badge_color: user.badge_color || '',
+    }
+
+    const d = await this.POST<any>('/admin/user-add', params)
+    return (d.user as UserDataForAdmin)
+  }
+
+  /** 用户 · 修改 */
+  public async userEdit(user: Partial<UserDataForAdmin>, password?: string) {
+    const params: any = {
+      id: user.id,
+      name: user.name || '',
+      email: user.email || '',
+      password: password || '',
+      link: user.link || '',
+      is_admin: user.is_admin || false,
+      site_names: user.site_names_raw || '',
+      receive_email: user.receive_email || true,
+      badge_name: user.badge_name || '',
+      badge_color: user.badge_color || '',
+    }
+
+    const d = await this.POST<any>('/admin/user-edit', params)
+    return (d.user as UserDataForAdmin)
+  }
+
+  /** 用户 · 删除 */
+  public userDel(userID: number) {
+    return this.POST('/admin/user-del', {
+      id: String(userID)
+    })
+  }
 }

package/src/artalk.ts

@@ -48,9 +48,6 @@ export default class Artalk {
     /* 初始化 Context */
     this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    // @ts-ignore 远程加载引用后端的配置
-    if (this.conf.useBackendConf) return this.loadConfRemoteAndInitComponents()
-
     /* 初始化组件 */
     this.initComponents()
   }
@@ -59,7 +56,6 @@ export default class Artalk {
   private initComponents() {
     this.initLocale()
     this.initLayer()
-    this.initDarkMode()
     Utils.initMarked(this.ctx)
 
     const Components: { [name: string]: () => void } = {
@@ -91,7 +87,6 @@ export default class Artalk {
       sidebarLayer: () => {
         const sidebarLayer = new SidebarLayer(this.ctx)
         this.ctx.setSidebarLayer(sidebarLayer)
-        this.$root.appendChild(sidebarLayer.$el)
       },
 
       // 默认事件绑定
@@ -148,24 +143,6 @@ export default class Artalk {
     return conf
   }
 
-  /** 初始化组件根据远程加载的配置 */
-  private async loadConfRemoteAndInitComponents() {
-    await this.loadConfRemote()
-    this.initComponents()
-    return this
-  }
-
-  /** 远程加载配置 */
-  private async loadConfRemote() {
-    Ui.showLoading(this.$root)
-    let backendConf = {}
-    try {
-      backendConf = await this.ctx.getApi().system.conf()
-    } catch (err) { console.error("Load config from remote err", err) }
-    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
-    Ui.hideLoading(this.$root)
-  }
-
   /** 事件绑定初始化 */
   private initEventBind() {
     // 锚点快速跳转评论
@@ -194,18 +171,6 @@ export default class Artalk {
     Layer.BodyOrgPaddingRight = document.body.style.paddingRight
   }
 
-  /** 暗黑模式初始化 */
-  private initDarkMode() {
-    if (this.conf.darkMode === 'auto') {
-      // 自动切换暗黑模式，事件监听
-      const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
-      darkModeMedia.addEventListener('change', (e) => { this.setDarkMode(e.matches) })
-      this.setDarkMode(darkModeMedia.matches)
-    } else {
-      this.setDarkMode(this.conf.darkMode || false)
-    }
-  }
-
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')

package/src/comment/render.ts

@@ -58,7 +58,8 @@ export default class CommentRender {
   private renderAvatar() {
     const $avatar = this.$el.querySelector<HTMLElement>('.atk-avatar')!
     const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
-    $avatarImg.src = this.comment.getGravatarURL()
+    const avatarURLBuilder = this.ctx.conf.avatarURLBuilder
+    $avatarImg.src = avatarURLBuilder ? avatarURLBuilder(this.data) : this.comment.getGravatarURL()
     if (this.data.link) {
       const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
       $avatarA.href = Utils.isValidURL(this.data.link) ? this.data.link : `https://${this.data.link}`