artalk 2.1.5 → 2.1.6

package/index.html

@@ -33,7 +33,7 @@
 <body>
   <div class="card billboard artalk-fade-in">
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
-    <div class="desc">一款简洁的自托管评论系统</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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/api/index.ts

@@ -252,6 +252,18 @@ export default class Api {
     return POST(this.ctx, `${this.baseURL}/mark-read`, params)
   }
 
+  /** PV */
+  public async pv() {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      page_key: this.ctx.conf.pageKey || '',
+      page_title: this.ctx.conf.pageTitle || ''
+    }
+
+    const p = await POST<any>(this.ctx, `${this.baseURL}/pv`, params)
+    return p.pv as number
+  }
+
   // ============================
   //  验证码
   // ============================

package/src/artalk.ts

@@ -11,6 +11,7 @@ import SidebarLayer from './components/sidebar-layer'
 
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
+import Api from './api'
 
 /**
  * Artalk
@@ -76,6 +77,9 @@ export default class Artalk {
 
     // 事件绑定初始化
     this.initEventBind()
+
+    // 其他
+    this.initPV()
   }
 
   /** 事件绑定 · 初始化 */
@@ -93,8 +97,12 @@ export default class Artalk {
 
       // for layer
       const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
-      if ($layerWrap)
-        $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+      if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      // for sidebar
+      // TODO: 这个其实应该写在 packages/artalk-sidebar 里面的
+      const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
+      if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
 
       items.forEach(($item: HTMLElement) => {
         if (this.ctx.user.data.isAdmin)
@@ -143,6 +151,20 @@ export default class Artalk {
     this.initDarkMode()
   }
 
+  /** PV */
+  public async initPV() {
+    if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
+      return
+
+    const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
+    // $pv.innerText = '-' // 默认占位符
+    const pvNum = await new Api(this.ctx).pv()
+    if (Number.isNaN(Number(pvNum)))
+      return
+
+    $pv.innerText = String(pvNum)
+  }
+
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')

package/src/components/sidebar-layer.ts

@@ -106,7 +106,7 @@ export default class SidebarLayer extends Component {
       Ui.hideLoading(this.$iframeWrap)
     }
 
-    this.checkReqStatus(src)
+    // this.checkReqStatus(src) // 判不准，删了，没啥用
   }
 
   loadingTimer: number|null = null

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,
   gravatar: {

package/src/style/main.less

@@ -248,7 +248,7 @@ i.atk-icon {
     & > .atk-layer-dialog-content {
       .atk-captcha-img {
         cursor: pointer;
-        width: 100px;
+        width: 170px;
         height: auto;
         margin-right: 10px;
         padding-right: 10px;

package/src/style/sidebar-layer.less

@@ -32,6 +32,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    z-index: 99999;
 
     .atk-sidebar-close {
       display: flex;

package/types/artalk-config.d.ts

@@ -62,6 +62,9 @@ export default interface ArtalkConfig {
   /** 评论投票反对按钮 */
   voteDown?: boolean
 
+  /** PV 元素 Selector */
+  pvEl?: string
+
   /** 暗黑模式 */
   darkMode?: boolean