Better independence of Artalk instance & Add some examples.

ArtalkJS · May 2, 2020 · a0aab71 · a0aab71
1 parent 0224910
commit a0aab71
Show file tree

Hide file tree

Showing 26 changed files with 336 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@
 
 ## 食用
 
-> 生产环境版下载：[Artalk.js](https://raw.githubusercontent.com/qwqcode/Artalk/master/dist/Artalk.js) | [Artalk.css](https://raw.githubusercontent.com/qwqcode/Artalk/master/dist/Artalk.css)
+> 前端资源下载：[Artalk.js](./dist/Artalk.js) | [Artalk.css](./dist/Artalk.css)
 
 1. 部署 Artalk 的后端，传送门：[PHP API](https://github.com/qwqcode/Artalk-API-PHP) / Go API / Node API / Python API
 2. 前端页面配置 Artalk 如下：
@@ -43,19 +43,20 @@
 <head>
   <!-- ... -->
   <link href="dist/Artalk.css" rel="stylesheet">
-  <script type="text/javascript" src="dist/Artalk.js"></script>
 </head>
 <body>
   <div id="ArtalkComments"></div>
+  <!-- ... -->
+  <script src="dist/Artalk.js"></script>
   <script>
   new Artalk({
-    el: '#ArtalkComments',
-    placeholder: '来啊，快活啊 (/ω＼)',
-    noComment: '快来成为第一个评论的人吧~',
-    defaultAvatar: 'mp',
+    el: '#ArtalkComments', // 元素选择
+    placeholder: '来啊，快活啊 ( ゜- ゜)', // 占位符
+    noComment: '快来成为第一个评论的人吧~', // 无评论时显示
+    defaultAvatar: 'mp', // 参考 https://cn.gravatar.com/site/implement/images/#default-image
     pageKey: '[页面唯一标识]',
     serverUrl: '[后端程序URL]',
-    readMore: {
+    readMore: { // 阅读更多配置
       pageSize: 15, // 每次请求获取评论数
       autoLoad: true // 滚动到底部自动加载
     }
@@ -65,7 +66,9 @@
 </html>
 ```
 
-更多配置项详见 [types/artalk-config.d.ts](./types/artalk-config.d.ts)
+前端更多栗子，请参考 [/example/](./example/) 目录
+
+前端更多配置项详见 [/types/artalk-config.d.ts](./types/artalk-config.d.ts)
 
 ## 开发
 

diff --git a/dist/Artalk.css b/dist/Artalk.css
diff --git a/dist/Artalk.js b/dist/Artalk.js
diff --git a/example/multiple-on-one-page/index.html b/example/multiple-on-one-page/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Multiple Artalk On One Page Example</title>
+  <!-- 1. 引入 Artalk.css -->
+  <link rel="stylesheet" href="/dist/Artalk.css">
+</head>
+<body>
+
+  <h1>Multiple Artalk On One Page Example</h1>
+
+  <div class="main">
+    <h2>Artalk One</h2>
+    <div id="ArtalkComments-1"></div>
+
+    <h2>Artalk Two</h2>
+    <div id="ArtalkComments-2"></div>
+  </div>
+
+  <!-- 2. 引入 Artalk.js -->
+  <script src="/dist/Artalk.js"></script>
+  <!-- 3. 配置 Artalk -->
+  <script>
+  (function () {
+    // 公用配置
+    const commonConf = {
+      placeholder: '来啊，快活啊 ( ゜- ゜)',
+      noComment: '快来成为第一个评论的人吧~',
+      defaultAvatar: 'mp',
+      serverUrl: 'http://localhost:23366/',
+      readMore: {
+        pageSize: 15,
+        autoLoad: true
+      }
+    }
+
+    // 第一个评论
+    new Artalk({
+      el: '#ArtalkComments-1',
+      pageKey: 'multiple-on-one-page-1',
+      ...commonConf
+    })
+
+    // 第二个评论
+    new Artalk({
+      el: '#ArtalkComments-2',
+      pageKey: 'multiple-on-one-page-2',
+      ...commonConf
+    })
+  })();
+  </script>
+</body>
+</html>
diff --git a/example/normal/index.html b/example/normal/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Artalk Normal Example</title>
+  <!-- 1. 引入 Artalk.css -->
+  <link rel="stylesheet" href="/dist/Artalk.css">
+</head>
+<body>
+
+  <h1>Artalk Normal Example</h1>
+
+  <div class="main">
+    <div id="ArtalkComments"></div>
+  </div>
+
+  <!-- 2. 引入 Artalk.js -->
+  <script src="/dist/Artalk.js"></script>
+  <!-- 3. 配置 Artalk -->
+  <script>
+  var artalk = new Artalk({
+    el: '#ArtalkComments', // 元素选择
+    placeholder: '来啊，快活啊 ( ゜- ゜)', // 占位符
+    noComment: '快来成为第一个评论的人吧~', // 无评论时显示
+    defaultAvatar: 'mp', // 参考 https://cn.gravatar.com/site/implement/images/#default-image
+    pageKey: 'Artalk Normal Example',
+    serverUrl: 'http://localhost:23366/',
+    readMore: { // 阅读更多配置
+      pageSize: 15, // 每次请求获取评论数
+      autoLoad: true // 滚动到底部自动加载
+    }
+  })
+  </script>
+</body>
+</html>
diff --git a/example/pjax/index.html b/example/pjax/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Artalk Pjax Example</title>
+  <!-- 1. 引入 Artalk.css -->
+  <link rel="stylesheet" href="/dist/Artalk.css">
+</head>
+<body>
+  <h1>Artalk Pjax Example</h1>
+  <div>
+    Go to <a href="./res1.html">第一页</a> | <a href="./res2.html">第二页</a>
+  </div>
+  <div id="container"></div>
+</body>
+
+<!-- 2. 引入 Artalk.js -->
+<script src="/dist/Artalk.js"></script>
+
+<!-- Pjax 配置 -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.pjax.min.js"></script>
+<script type="text/javascript">
+$(document).pjax('a', '#container', {
+  fragment: '.main' // △ 提取 AJAX 响应内容中指定的元素内容片段；参考：http://bsify.admui.com/jquery-pjax/
+})
+</script>
+
+</html>
diff --git a/example/pjax/res1.html b/example/pjax/res1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Res</title>
+  <!-- 1. 引入 Artalk.css -->
+  <link rel="stylesheet" href="/dist/Artalk.css">
+</head>
+<body>
+
+<div class="main"> <!-- △ fragment: .main -->
+  <section id="comments">
+    <div id="ArtalkComments"></div>
+  </section>
+
+  <!-- 2. 引入 Artalk.js -->
+  <script src="/dist/Artalk.js"></script>
+  <!-- 3. 配置 Artalk -->
+  <script>
+  window.artalk = new Artalk({
+    el: '#ArtalkComments',
+    placeholder: '来啊，快活啊 ( ゜- ゜)',
+    noComment: '快来成为第一个评论的人吧~',
+    defaultAvatar: 'mp',
+    pageKey: 'pjax-example-page1',
+    serverUrl: 'http://localhost:23366/index.php',
+    readMore: {
+      pageSize: 15,
+      autoLoad: true
+    }
+  });
+  </script>
+
+</div>
+
+<!-- Pjax 配置 -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.pjax.min.js"></script>
+
+</body>
+</html>
diff --git a/example/pjax/res2.html b/example/pjax/res2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Res</title>
+  <!-- 1. 引入 Artalk.css -->
+  <link rel="stylesheet" href="/dist/Artalk.css">
+</head>
+<body>
+
+<div class="main"> <!-- △ fragment: .main -->
+  <section id="comments">
+    <div id="ArtalkComments"></div>
+  </section>
+
+  <!-- 2. 引入 Artalk.js -->
+  <script src="/dist/Artalk.js"></script>
+  <!-- 3. 配置 Artalk -->
+  <script>
+  window.artalk = new Artalk({
+    el: '#ArtalkComments',
+    placeholder: '来啊，快活啊 ( ゜- ゜)',
+    noComment: '快来成为第一个评论的人吧~',
+    defaultAvatar: 'mp',
+    pageKey: 'pjax-example-page2',
+    serverUrl: 'http://localhost:23366/index.php',
+    readMore: {
+      pageSize: 15,
+      autoLoad: true
+    }
+  });
+  </script>
+
+</div>
+
+<!-- Pjax 配置 -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.pjax.min.js"></script>
+
+</body>
+</html>
diff --git a/index-tpl.ejs b/index-tpl.ejs
@@ -37,7 +37,7 @@
   <script>
     var artalk = new Artalk({
       el: '#comments',
-      placeholder: '来啊，快活啊 (/ω＼)',
+      placeholder: '来啊，快活啊 ( ゜- ゜)',
       defaultAvatar: 'mp',
       pageKey: 'https://artalk.js.org/',
       serverUrl: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/' : 'https://qwqaq.com/Artalk/index.php',

diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
   </style>
-<link href="dist/Artalk.css?692bfeaab2862008e1f6" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?692bfeaab2862008e1f6"></script></head>
+<link href="dist/Artalk.css?a5ea79944862d0fc7c61" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?a5ea79944862d0fc7c61"></script></head>
 <body>
   <div class="card billboard">
     <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>
@@ -37,7 +37,7 @@
   <script>
     var artalk = new Artalk({
       el: '#comments',
-      placeholder: '来啊，快活啊 (/ω＼)',
+      placeholder: '来啊，快活啊 ( ゜- ゜)',
       defaultAvatar: 'mp',
       pageKey: 'https://artalk.js.org/',
       serverUrl: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/' : 'https://qwqaq.com/Artalk/index.php',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "一款简洁有趣的自托管评论系统",
   "author": "qwqcode <[email protected]> (https://github.com/qwqcode)",
   "keywords": [
@@ -55,6 +55,7 @@
     "eslint-plugin-prettier": "^3.1.0",
     "gh-pages": "^2.1.1",
     "hanabi": "^0.4.0",
+    "html-webpack-harddisk-plugin": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.11.1",
     "less-loader": "^6.0.0",

diff --git a/src/Artalk.ts b/src/Artalk.ts
@@ -2,6 +2,7 @@ import './css/main.less'
 import marked from 'marked'
 import hanabi from 'hanabi'
 import User from './components/User'
+import Checker from './components/Checker'
 import Editor from './components/Editor'
 import List from './components/List'
 import Comment from './components/Comment'
@@ -26,21 +27,21 @@ const defaultOpts: ArtalkConfig = {
   }
 }
 
-// eslint-disable-next-line
-export let ArtalkInstance: Artalk = null
-
 export default class Artalk {
+  public conf: ArtalkConfig
   public el: HTMLElement
+  public readonly runId: number = new Date().getTime() // 实例唯一 ID
 
   public ui: Ui
   public user: User
+  public checker: Checker
   public editor: Editor
   public list: List
   public sidebar: Sidebar
 
   public comments: Comment[] = []
 
-  constructor (public conf: ArtalkConfig) {
+  constructor (conf: ArtalkConfig) {
     // Version Information
     console.log(`\n %c `
       + `Artalk v${ARTALK_VERSION} %c 一款简洁有趣的自托管评论系统 \n\n%c`
@@ -49,10 +50,8 @@ export default class Artalk {
       + `> https://qwqaq.com\n`,
       'color: #FFF; background: #1DAAFF; padding:5px 0;', 'color: #FFF; background: #656565; padding:5px 0;', '')
 
-    ArtalkInstance = this
-
     // Options
-    this.conf = Object.assign(defaultOpts, this.conf)
+    this.conf = { ...defaultOpts, ...conf }
 
     // Main Element
     try {
@@ -66,14 +65,19 @@ export default class Artalk {
     }
 
     this.el.classList.add('artalk')
+    this.el.setAttribute('artalk-run-id', this.runId.toString())
+
+    // 若该元素中 artalk 已装载
+    if (this.el.innerHTML.trim() !== '') this.el.innerHTML = ''
 
     // Components
-    this.ui = new Ui()
-    this.user = new User()
+    this.ui = new Ui(this)
+    this.user = new User(this)
+    this.checker = new Checker(this)
     this.initMarked()
-    this.editor = new Editor()
-    this.list = new List()
-    this.sidebar = new Sidebar()
+    this.editor = new Editor(this)
+    this.list = new List(this)
+    this.sidebar = new Sidebar(this)
 
     // 请求获取评论
     this.list.reqComments()

diff --git a/src/ArtalkContext.ts b/src/ArtalkContext.ts
@@ -1,5 +1,9 @@
-import Artalk, { ArtalkInstance } from './Artalk'
+import Artalk from './Artalk'
 
 export default class ArtalkContext {
-  protected artalk: Artalk = ArtalkInstance
+  public artalk: Artalk
+
+  public constructor (artalk: Artalk) {
+    this.artalk = artalk
+  }
 }