feat: 静态文件添加API配置

README.md

@@ -42,11 +42,14 @@ render() {
 
 ### 在非 React.js 项目中使用 ~~作为静态文件引入~~
 
-1. 引入通用评论的 css 和 js 文件。在 `./assets/static` 目录。
+**使用`assets` 分支的 `./assets/static` 目录[https://git.links123.net/npm/comment/src/branch/assets/assets/static](https://git.links123.net/npm/comment/src/branch/assets/assets/static)的静态文件**
+
+1. 引入通用评论的 css 和 js 文件。在 `assets` 分支的 `./assets/static` 目录: [https://git.links123.net/npm/comment/src/branch/assets/assets/static](https://git.links123.net/npm/comment/src/branch/assets/assets/static)。
 2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表：
   - `id`: string, 必填, 渲染评论的节点的 ID
   - `type`: number, 必填, 评论的 type    
-  - `businessId`: string, 必填, 评论的 businessId    
+  - `businessId`: string, 选填, 评论的 businessId，默认 test
+  - `API`: string, 选填, 评论的 businessId，默认 http://api.links123.net/comment/v1
 
 具体可参考 `./assets/example.html`。
 
@@ -74,10 +77,11 @@ render() {
   <script type="text/javascript">
     // 调用 renderComment 这个方法，渲染通用评论
     window.renderComment({
-      id: 'comment', // 渲染通用评论到 comment 这个节点，id 名称可 自定义
-      type: 1, // 评论的 type
-      businessId: 'test' // 评论的 businessId
-    })
+      id: 'comment', // required, 渲染通用评论到 comment 这个节点，id 名称可 自定义
+      type: 1, // required, 评论的 type
+      businessId: 'test' // 评论的 businessId, 默认 test
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
+    });
   </script>
 </body>
 </html>
@@ -98,11 +102,11 @@ render() {
 
 ```html
 <!-- ... -->
-  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/xxx.css" />
 <!-- ... -->
   <div id="RENDER_ELEMENT_WRAPPER"></div>
 <!-- ... -->
-  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
+  <script type="text/javascript" src="./static/js/xxx.js"></script>
 <!-- ... -->
 ```
 
@@ -143,7 +147,8 @@ function main() {
     window.renderComment({
       id: id,
       type: 1,
-      businessId: 'test'
+      businessId: 'test',
+      API: 'http://api.links123.net/comment/v1',
     })
   })
   
@@ -154,23 +159,24 @@ function main() {
     window.renderComment({
       id: id,
       type: 1,
-      businessId: 'test1'
+      businessId: 'test1',
+      API: 'http://api.links123.net/comment/v1',
     })
   })
-
 }
 
 main();
 ```
 
-#### class 样式冲突
+#### ~~class 样式冲突~~
+
+> assets 分支已修复。
 
-`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改，改为了 `comment-image-preview-container`。
+~~`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改，改为了 `comment-image-preview-container`。~~
 
 解决办法就是使用 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支中的静态文件：
 
-- css:
-- js:
+- [https://git.links123.net/node/npmcomment/src/branch/fix/classname](https://git.links123.net/node/npmcomment/src/branch/fix/classname)
 
 尝试过使用 CSS Module 进行修改，不过改造量较大，改动的过程中影响了其他样式，所以暂时放弃了。
 

assets/example.js

@@ -36,7 +36,8 @@ function main() {
     window.renderComment({
       id: id,
       type: 1,
-      businessId: 'test'
+      businessId: 'test',
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
     })
   })
   
@@ -47,11 +48,13 @@ function main() {
     window.renderComment({
       id: id,
       type: 1,
-      businessId: 'test1'
+      businessId: 'test1',
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
     })
   })
   
 }
 
 
+
 main();

src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App, { Editor } from "./App";
-import registerServiceWorker from "./registerServiceWorker";
+// import registerServiceWorker from "./registerServiceWorker";
 
 const Index = props => (
   <App showAlertComment showAlertReply showAlertFavor showError {...props}>
@@ -15,21 +15,34 @@ const Index = props => (
  *  - {string} id 渲染评论的DOM的 ID
  *  - {number} type 评论的 type
  *  - {string} businessId 评论的 businessId
+ *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
  */
 function renderComment(config) {
   if (!config.id) {
     throw new Error("id is required");
   }
-  if (!config.id) {
+  if (!config.type) {
     throw new Error("type is required");
   }
-  if (!config.id) {
-    throw new Error("businessId is required");
+  if (!config.businessId) {
+    // throw new Error("businessId is required");
+    console.warn("没有传入 businessId 参数，默认使用: test");
+  }
+  if (!config.API) {
+    // throw new Error("API is required");
+    console.warn(
+      "没有传入 API 参数，默认使用: http://api.links123.net/comment/v1"
+    );
   }
-  const { id, type = 1, businessId = "test" } = config;
+  const {
+    id,
+    type = 1,
+    businessId = "test",
+    API = "http://api.links123.net/comment/v1"
+  } = config;
 
   ReactDOM.render(
-    <Index type={type} businessId={businessId} />,
+    <Index type={type} businessId={businessId} API={API} />,
     document.getElementById(id)
   );
   // registerServiceWorker();
@@ -40,5 +53,6 @@ window.renderComment = renderComment;
 // renderComment({
 //   id: "root-comment",
 //   type: 1,
-//   businessId: "test"
+//   businessId: "test",
+//   API: 'http://api.links123.net/comment/v1',
 // });