artalk 2.8.2 → 2.8.4

package/dist/Artalk.mjs

@@ -481,6 +481,21 @@ let Api$1 = class Api extends HttpClient {
         path: `/conf`,
         method: "GET",
         format: "json"
+      }, params)),
+      /**
+       * @description Get Domain Info
+       *
+       * @tags System
+       * @name GetDomain
+       * @summary Get Domain Info
+       * @request GET:/conf/domain
+       * @response `200` `HandlerResponseConfDomain` OK
+       */
+      getDomain: (query, params = {}) => this.request(__spreadValues({
+        path: `/conf/domain`,
+        method: "GET",
+        query,
+        format: "json"
       }, params))
     });
     __publicField(this, "notifies", {
@@ -1049,7 +1064,7 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Get user info to prepare for login or check current user status
        *
-       * @tags Account
+       * @tags Auth
        * @name GetUser
        * @summary Get User Info
        * @request GET:/user
@@ -1070,23 +1085,23 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Login user by name or email
        *
-       * @tags Account
+       * @tags Auth
        * @name Login
        * @summary Get Access Token
        * @request POST:/user/access_token
        * @response `200` `HandlerResponseUserLogin` OK
        * @response `400` `(HandlerMap & {
-          " data"?: {
+          data?: {
           need_name_select?: (string)[],
       
       },
           msg?: string,
       
       })` Multiple users with the same email address are matched
-       * @response `403` `(HandlerMap & {
+       * @response `401` `(HandlerMap & {
           msg?: string,
       
-      })` Forbidden
+      })` Unauthorized
        * @response `500` `(HandlerMap & {
           msg?: string,
       
@@ -1102,7 +1117,7 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Get user login status by header Authorization
        *
-       * @tags Account
+       * @tags Auth
        * @name GetUserStatus
        * @summary Get Login Status
        * @request GET:/user/status
@@ -1714,16 +1729,16 @@ const Fetch$1 = (opts, input, init2) => __async(void 0, null, function* () {
   if (!resp.ok) {
     const json = (yield resp.json().catch(() => {
     })) || {};
-    if (json.need_captcha) {
-      opts.onNeedCheckCaptcha && (yield opts.onNeedCheckCaptcha({
-        data: { imgData: json.img_data, iframe: json.iframe }
-      }));
+    let retry = false;
+    opts.handlers && (yield opts.handlers.get().reduce((promise, item) => __async(void 0, null, function* () {
+      yield promise;
+      if (json[item.action] === true) {
+        yield item.handler(json);
+        retry = true;
+      }
+    }), Promise.resolve()));
+    if (retry)
       return Fetch$1(opts, input, init2);
-    }
-    if (json.need_login) {
-      opts.onNeedCheckAdmin && (yield opts.onNeedCheckAdmin({}));
-      return Fetch$1(opts, input, init2);
-    }
     throw createError(resp.status, json);
   }
   return resp;
@@ -1744,6 +1759,15 @@ function createError(code, data) {
   console.error(err);
   return err;
 }
+function createApiHandlers() {
+  const handlers = [];
+  return {
+    add: (action, handler) => {
+      handlers.push({ action, handler });
+    },
+    get: () => handlers
+  };
+}
 class Api2 extends Api$1 {
   constructor(opts) {
     super({
@@ -2574,14 +2598,14 @@ const fences = /^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\
 const hr = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;
 const heading = /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/;
 const bullet = /(?:[*+-]|\d{1,9}[.)])/;
-const lheading = edit(/^(?!bull )((?:.|\n(?!\s*?\n|bull ))+?)\n {0,3}(=+|-+) *(?:\n+|$)/).replace(/bull/g, bullet).getRegex();
+const lheading = edit(/^(?!bull |blockCode|fences|blockquote|heading|html)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html))+?)\n {0,3}(=+|-+) *(?:\n+|$)/).replace(/bull/g, bullet).replace(/blockCode/g, / {4}/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).getRegex();
 const _paragraph = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/;
 const blockText = /^[^\n]+/;
 const _blockLabel = /(?!\s*\])(?:\\.|[^\[\]\\])+/;
 const def = edit(/^ {0,3}\[(label)\]: *(?:\n *)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n *)?| *\n *)(title))? *(?:\n+|$)/).replace("label", _blockLabel).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex();
 const list = edit(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g, bullet).getRegex();
-const _tag = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul";
-const _comment = /<!--(?!-?>)[\s\S]*?(?:-->|$)/;
+const _tag = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul";
+const _comment = /<!--(?:-?>|[\s\S]*?(?:-->|$))/;
 const html = edit("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n *)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$))", "i").replace("comment", _comment).replace("tag", _tag).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
 const paragraph = edit(_paragraph).replace("hr", hr).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", _tag).getRegex();
 const blockquote = edit(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", paragraph).getRegex();
@@ -2618,7 +2642,7 @@ const escape = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
 const inlineCode = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
 const br = /^( {2,}|\\)\n(?!\s*$)/;
 const inlineText = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/;
-const _punctuation = "\\p{P}$+<=>`^|~";
+const _punctuation = "\\p{P}\\p{S}";
 const punctuation = edit(/^((?![*_])[\spunctuation])/, "u").replace(/punctuation/g, _punctuation).getRegex();
 const blockSkip = /\[[^[\]]*?\]\([^\(\)]*?\)|`[^`]*?`|<[^<>]*?>/g;
 const emStrongLDelim = edit(/^(?:\*+(?:((?!\*)[punct])|[^\s*]))|^_+(?:((?!_)[punct])|([^\s_]))/, "u").replace(/punct/g, _punctuation).getRegex();
@@ -4545,6 +4569,7 @@ const en = {
   /* Sidebar */
   msgCenter: "Messages",
   ctrlCenter: "Admin",
+  emailVerified: "Email has been verified",
   /* General */
   frontend: "Frontend",
   backend: "Backend",
@@ -4625,6 +4650,7 @@ const zhCN = {
   /* Sidebar */
   msgCenter: "通知中心",
   ctrlCenter: "控制中心",
+  emailVerified: "邮箱已验证",
   /* General */
   frontend: "前端",
   backend: "后端",
@@ -4975,21 +5001,15 @@ function convertApiOptions(conf, ctx) {
       name: ctx == null ? void 0 : ctx.get("user").getData().nick,
       email: ctx == null ? void 0 : ctx.get("user").getData().email
     } : void 0,
-    onNeedCheckAdmin: (payload) => {
-      if (!ctx)
-        throw new Error("`ctx` is required when `onNeedCheckAdmin` is called.");
-      return ctx.checkAdmin({});
-    },
-    onNeedCheckCaptcha: (payload) => {
-      if (!ctx)
-        throw new Error("`ctx` is required when `onNeedCheckCaptcha` is called.");
-      return ctx.checkCaptcha({
-        imgData: payload.data.imgData,
-        iframe: payload.data.iframe
-      });
-    }
+    handlers: ctx == null ? void 0 : ctx.getApiHandlers()
   };
 }
+function createNewApiHandlers(ctx) {
+  const h = createApiHandlers();
+  h.add("need_captcha", (res) => ctx.checkCaptcha(res));
+  h.add("need_login", () => ctx.checkAdmin({}));
+  return h;
+}
 function watchConf(ctx, keys, effect) {
   const deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
   const val = () => {
@@ -5021,6 +5041,7 @@ class Context {
     /* Event Manager */
     __publicField(this, "events", new EventManager());
     __publicField(this, "mounted", false);
+    __publicField(this, "apiHandlers", null);
     __publicField(this, "getCommentList", this.getCommentNodes);
     __publicField(this, "getCommentDataList", this.getComments);
     this.conf = conf;
@@ -5041,6 +5062,11 @@ class Context {
   getApi() {
     return new Api2(convertApiOptions(this.conf, this));
   }
+  getApiHandlers() {
+    if (!this.apiHandlers)
+      this.apiHandlers = createNewApiHandlers(this);
+    return this.apiHandlers;
+  }
   getData() {
     return this.data;
   }
@@ -5433,7 +5459,7 @@ class CheckerLauncher {
   constructor(opts) {
     __publicField(this, "checkCaptcha", wrapPromise((p) => {
       this.fire(CaptchaChecker, p, (ctx) => {
-        ctx.set("img_data", p.imgData);
+        ctx.set("img_data", p.img_data);
         ctx.set("iframe", p.iframe);
       });
     }));
@@ -5511,7 +5537,7 @@ class CheckerLauncher {
         if (payload.onSuccess)
           payload.onSuccess();
       }).catch((err) => {
-        btnTextSet(String(err.msg || String(err)));
+        btnTextSet(String(err.message || String(err)));
         if (checker.onError)
           checker.onError(checkerCtx, err, inputVal, formEl);
         const tf = setTimeout(() => btnTextRestore(), 3e3);
@@ -5759,10 +5785,15 @@ class Editor extends Component {
     hideLoading(this.ui.$el);
   }
   submit() {
-    this.ctx.trigger("editor-submit");
+    const next = () => this.ctx.trigger("editor-submit");
+    if (this.ctx.conf.beforeSubmit) {
+      this.ctx.conf.beforeSubmit(this, next);
+    } else {
+      next();
+    }
   }
 }
-const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
+const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close-slim"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
 class SidebarLayer extends Component {
   constructor(ctx) {
     super(ctx);
@@ -6317,6 +6348,9 @@ function renderVerifyBadge(ctx) {
     $badge.innerText = badgeText.replace("管理员", t("admin"));
     $badge.style.backgroundColor = badgeColor || "";
     ctx.$headerBadgeWrap.append($badge);
+  } else if (ctx.data.is_verified) {
+    const $verifiedBadge = createElement(`<span class="atk-verified-icon" title="${t("emailVerified")}"></span>`);
+    ctx.$headerBadgeWrap.append($verifiedBadge);
   }
   if (ctx.data.is_pinned) {
     const $pinnedBadge = createElement(`<span class="atk-pinned-badge">${t("pin")}</span>`);
@@ -7571,18 +7605,8 @@ class LayerWrap {
     if (this.items.map((l) => l.getEl()).filter((e) => e !== $el && e.isConnected && e.style.display !== "none").length > 0) {
       return;
     }
-    const onHide = () => {
-      this.$wrap.style.display = "none";
-      this.$wrap.classList.remove("atk-fade-out");
-      getScrollbarHelper().unlock();
-      this.$wrap.onanimationend = null;
-    };
-    this.$wrap.classList.add("atk-fade-out");
-    if (window.getComputedStyle(this.$wrap)["animation-name"] !== "none") {
-      this.$wrap.onanimationend = () => onHide();
-    } else {
-      onHide();
-    }
+    this.$wrap.style.display = "none";
+    getScrollbarHelper().unlock();
   }
 }
 class LayerManager {
@@ -7701,6 +7725,70 @@ const services = {
     return void 0;
   }
 };
+const PvCountWidget = (ctx) => {
+  ctx.watchConf([
+    "site",
+    "pageKey",
+    "pageTitle",
+    "countEl",
+    "pvEl"
+  ], (conf) => {
+    initCountWidget({
+      getApi: () => ctx.getApi(),
+      siteName: conf.site,
+      pageKey: conf.pageKey,
+      pageTitle: conf.pageTitle,
+      countEl: conf.countEl,
+      pvEl: conf.pvEl,
+      pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
+    });
+  });
+};
+function initCountWidget(opt) {
+  return __async(this, null, function* () {
+    if (opt.countEl && document.querySelector(opt.countEl)) {
+      refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
+    }
+    const initialData = opt.pvAdd && opt.pageKey ? {
+      [opt.pageKey]: (yield opt.getApi().pages.logPv({
+        page_key: opt.pageKey,
+        page_title: opt.pageTitle,
+        site_name: opt.siteName
+      })).data.pv
+      // pv+1 and get pv count
+    } : void 0;
+    if (opt.pvEl && document.querySelector(opt.pvEl)) {
+      refreshStatCount(opt, {
+        query: "page_pv",
+        numEl: opt.pvEl,
+        data: initialData
+      });
+    }
+  });
+}
+function refreshStatCount(opt, args) {
+  return __async(this, null, function* () {
+    let data = args.data || {};
+    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => k && typeof data[k] !== "number");
+    queryPageKeys = [...new Set(queryPageKeys)];
+    if (queryPageKeys.length > 0) {
+      const res = (yield opt.getApi().stats.getStats(args.query, {
+        page_keys: queryPageKeys.join(","),
+        site_name: opt.siteName
+      })).data.data;
+      data = __spreadValues(__spreadValues({}, data), res);
+    }
+    const defaultCount = opt.pageKey ? data[opt.pageKey] : 0;
+    applyCountData(args.numEl, data, defaultCount);
+  });
+}
+function applyCountData(selector, data, defaultCount) {
+  document.querySelectorAll(selector).forEach((el) => {
+    const pageKey = el.getAttribute("data-page-key");
+    const count = Number(pageKey ? data[pageKey] : defaultCount);
+    el.innerHTML = `${count}`;
+  });
+}
 function showErrorDialog(opts) {
   const errEl = createElement(`<span><span class="error-message"></span><br/><br/></span>`);
   errEl.querySelector(".error-message").innerText = `${t("listLoadFailMsg")}
@@ -7717,58 +7805,6 @@ ${opts.errMsg}`;
   }
   setError(opts.$err, errEl);
 }
-const ConfRemoter = (ctx) => {
-  ctx.on("created", () => {
-    if (ctx.conf.immediateFetch !== false)
-      ctx.trigger("conf-fetch");
-  });
-  ctx.on("conf-fetch", () => {
-    loadConf(ctx);
-  });
-};
-function loadConf(ctx) {
-  ctx.getApi().conf.conf().then((res) => {
-    var _a;
-    let conf = {
-      apiVersion: (_a = res.data.version) == null ? void 0 : _a.version
-      // version info
-    };
-    if (ctx.conf.useBackendConf) {
-      if (!res.data.frontend_conf)
-        throw new Error("The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled");
-      conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(res.data.frontend_conf));
-    }
-    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
-    ctx.updateConf(conf);
-  }).catch((err) => {
-    var _a;
-    ctx.updateConf({});
-    let sidebarOpenView = "";
-    if ((_a = err.data) == null ? void 0 : _a.err_no_site) {
-      const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` };
-      sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`;
-    }
-    showErrorDialog({
-      $err: ctx.get("list").$el,
-      errMsg: err.msg || String(err),
-      errData: err.data,
-      retryFn: () => loadConf(ctx),
-      onOpenSidebar: ctx.get("user").getData().isAdmin ? () => ctx.showSidebar({
-        view: sidebarOpenView
-      }) : void 0
-      // only show open sidebar button when user is admin
-    });
-    console.error(err);
-    throw err;
-  }).then(() => {
-    ctx.trigger("mounted");
-  }).then(() => {
-    if (ctx.conf.remoteConfModifier)
-      return;
-    ctx.fetch({ offset: 0 });
-  }).catch(() => {
-  });
-}
 const Markdown = (ctx) => {
   initMarked();
   ctx.on("updated", (conf) => {
@@ -7924,7 +7960,7 @@ class Submit extends EditorPlug {
           this.defaultPreset.postSubmitAdd(nComment);
       } catch (err) {
         console.error(err);
-        this.kit.useEditor().showNotify(`${t("commentFail")}: ${err.msg || String(err)}`, "e");
+        this.kit.useEditor().showNotify(`${t("commentFail")}: ${err.message || String(err)}`, "e");
         return;
       } finally {
         this.kit.useEditor().hideLoading();
@@ -7977,7 +8013,7 @@ class StateReply extends EditorPlug {
     const ui = this.kit.useUI();
     if (!ui.$sendReplyBtn) {
       const $btn = createElement(
-        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("reply")} <span class="atk-text"></span></span><span class="atk-cancel">×</span></span>`
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("reply")} <span class="atk-text"></span></span><span class="atk-cancel atk-icon-close atk-icon"></span></span>`
       );
       $btn.querySelector(".atk-text").innerText = `@${commentData.nick}`;
       $btn.addEventListener("click", () => {
@@ -8042,7 +8078,7 @@ class StateEdit extends EditorPlug {
     const ui = this.kit.useUI();
     if (!ui.$editCancelBtn) {
       const $btn = createElement(
-        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("editCancel")}</span><span class="atk-cancel">×</span></span>`
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("editCancel")}</span><span class="atk-cancel atk-icon-close atk-icon"></span></span>`
       );
       $btn.onclick = () => {
         this.kit.useEditor().resetState();
@@ -8577,7 +8613,7 @@ class Upload extends EditorPlug {
         }
       } catch (err) {
         console.error(err);
-        this.kit.useEditor().showNotify(`${t("uploadFail")}: ${err.msg}`, "e");
+        this.kit.useEditor().showNotify(`${t("uploadFail")}: ${err.message}`, "e");
       }
       if (!!resp && resp.public_url) {
         let imgURL = resp.public_url;
@@ -8740,9 +8776,6 @@ class PlugManager {
     this.editor.getUI().$plugPanelWrap.innerHTML = "";
     this.editor.getUI().$plugPanelWrap.style.display = "none";
     this.editor.getUI().$plugBtnWrap.innerHTML = "";
-    this.editor.getUI().$el.addEventListener("click", (e) => {
-      e.stopPropagation();
-    });
     this.plugs.forEach((plug) => this.loadPluginItem(plug));
   }
   /** Load the plug btn and plug panel on editor ui */
@@ -8838,7 +8871,7 @@ function adminPageEditSave(ctx, page) {
   ctx.getApi().pages.updatePage(page.id, page).then(({ data }) => {
     ctx.getData().updatePage(data);
   }).catch((err) => {
-    ctx.editorShowNotify(`${t("editFail")}: ${err.msg || String(err)}`, "e");
+    ctx.editorShowNotify(`${t("editFail")}: ${err.message || String(err)}`, "e");
   }).finally(() => {
     ctx.editorHideLoading();
   });
@@ -8984,7 +9017,7 @@ const GotoFocus = (ctx) => {
     comment.focus();
   }));
 };
-const version = "2.8.2";
+const version = "2.8.4";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list2 = ctx.get("list");
@@ -9268,70 +9301,6 @@ const Notifies = (ctx) => {
     });
   });
 };
-const PvCountWidget = (ctx) => {
-  ctx.watchConf([
-    "site",
-    "pageKey",
-    "pageTitle",
-    "countEl",
-    "pvEl"
-  ], (conf) => {
-    initCountWidget({
-      getApi: () => ctx.getApi(),
-      siteName: conf.site,
-      pageKey: conf.pageKey,
-      pageTitle: conf.pageTitle,
-      countEl: conf.countEl,
-      pvEl: conf.pvEl,
-      pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
-    });
-  });
-};
-function initCountWidget(opt) {
-  return __async(this, null, function* () {
-    if (opt.countEl && document.querySelector(opt.countEl)) {
-      refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
-    }
-    const initialData = opt.pvAdd && opt.pageKey ? {
-      [opt.pageKey]: (yield opt.getApi().pages.logPv({
-        page_key: opt.pageKey,
-        page_title: opt.pageTitle,
-        site_name: opt.siteName
-      })).data.pv
-      // pv+1 and get pv count
-    } : void 0;
-    if (opt.pvEl && document.querySelector(opt.pvEl)) {
-      refreshStatCount(opt, {
-        query: "page_pv",
-        numEl: opt.pvEl,
-        data: initialData
-      });
-    }
-  });
-}
-function refreshStatCount(opt, args) {
-  return __async(this, null, function* () {
-    let data = args.data || {};
-    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => k && typeof data[k] !== "number");
-    queryPageKeys = [...new Set(queryPageKeys)];
-    if (queryPageKeys.length > 0) {
-      const res = (yield opt.getApi().stats.getStats(args.query, {
-        page_keys: queryPageKeys.join(","),
-        site_name: opt.siteName
-      })).data.data;
-      data = __spreadValues(__spreadValues({}, data), res);
-    }
-    const defaultCount = opt.pageKey ? data[opt.pageKey] : 0;
-    applyCountData(args.numEl, data, defaultCount);
-  });
-}
-function applyCountData(selector, data, defaultCount) {
-  document.querySelectorAll(selector).forEach((el) => {
-    const pageKey = el.getAttribute("data-page-key");
-    const count = Number(pageKey ? data[pageKey] : defaultCount);
-    el.innerHTML = `${count}`;
-  });
-}
 let IgnoreVersionCheck = false;
 const VersionCheck = (ctx) => {
   ctx.watchConf(["apiVersion", "versionCheck"], (conf) => {
@@ -9425,7 +9394,6 @@ const DarkMode = (ctx) => {
   });
 };
 const DefaultPlugins = [
-  ConfRemoter,
   Markdown,
   EditorKit,
   AdminOnlyElem,
@@ -9436,23 +9404,100 @@ const DefaultPlugins = [
   DarkMode
 ];
 const GlobalPlugins = [...DefaultPlugins];
+function load(ctx) {
+  return __async(this, null, function* () {
+    var _a;
+    const loadedPlugins = [];
+    const loadPlugins = (plugins) => {
+      plugins.forEach((plugin) => {
+        if (typeof plugin === "function" && !loadedPlugins.includes(plugin)) {
+          plugin(ctx);
+          loadedPlugins.push(plugin);
+        }
+      });
+    };
+    loadPlugins(GlobalPlugins);
+    const { data } = yield ctx.getApi().conf.conf().catch((err) => {
+      onLoadErr(ctx, err);
+      throw err;
+    });
+    let conf = {
+      apiVersion: (_a = data.version) == null ? void 0 : _a.version
+      // version info
+    };
+    if (ctx.conf.useBackendConf) {
+      if (!data.frontend_conf)
+        throw new Error("The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled");
+      conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(data.frontend_conf));
+    }
+    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
+    conf.pluginURLs && (yield loadNetworkPlugins(conf.pluginURLs, ctx.conf.server).then((plugins) => {
+      loadPlugins(plugins);
+    }).catch((err) => {
+      console.error("Failed to load plugin", err);
+    }));
+    ctx.trigger("created");
+    ctx.updateConf(conf);
+    ctx.trigger("mounted");
+    if (!ctx.conf.remoteConfModifier) {
+      ctx.fetch({ offset: 0 });
+    }
+  });
+}
+function loadNetworkPlugins(scripts, apiBase) {
+  return __async(this, null, function* () {
+    if (!scripts || !Array.isArray(scripts))
+      return [];
+    const tasks = [];
+    scripts.forEach((url) => {
+      if (!/^(http|https):\/\//.test(url))
+        url = `${apiBase.replace(/\/$/, "")}/${url.replace(/^\//, "")}`;
+      tasks.push(new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${url}"]`)) {
+          resolve();
+          return;
+        }
+        const script = document.createElement("script");
+        script.src = url;
+        document.head.appendChild(script);
+        script.onload = () => resolve();
+        script.onerror = (err) => reject(err);
+      }));
+    });
+    yield Promise.all(tasks);
+    return Object.values(window.ArtalkPlugins || {});
+  });
+}
+function onLoadErr(ctx, err) {
+  var _a;
+  let sidebarOpenView = "";
+  if ((_a = err.data) == null ? void 0 : _a.err_no_site) {
+    const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` };
+    sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`;
+  }
+  showErrorDialog({
+    $err: ctx.get("list").$el,
+    errMsg: err.msg || String(err),
+    errData: err.data,
+    retryFn: () => load(ctx),
+    onOpenSidebar: ctx.get("user").getData().isAdmin ? () => ctx.showSidebar({
+      view: sidebarOpenView
+    }) : void 0
+    // only show open sidebar button when user is admin
+  });
+}
 class Artalk {
   constructor(conf) {
     __publicField(this, "ctx");
-    /** Plugins */
-    __publicField(this, "plugins", [...GlobalPlugins]);
     const handledConf = handelCustomConf(conf, true);
     this.ctx = new Context(handledConf);
     Object.entries(services).forEach(([name, initService]) => {
       const obj = initService(this.ctx);
-      if (obj)
-        this.ctx.inject(name, obj);
+      obj && this.ctx.inject(name, obj);
     });
-    this.plugins.forEach((plugin) => {
-      if (typeof plugin === "function")
-        plugin(this.ctx);
-    });
-    this.ctx.trigger("created");
+    {
+      load(this.ctx);
+    }
   }
   /** Get the config of Artalk */
   getConf() {
@@ -9474,7 +9519,9 @@ class Artalk {
   /** Destroy instance of Artalk */
   destroy() {
     this.ctx.trigger("unmounted");
-    this.ctx.$root.remove();
+    while (this.ctx.$root.firstChild) {
+      this.ctx.$root.removeChild(this.ctx.$root.firstChild);
+    }
   }
   /** Add an event listener */
   on(name, handler) {