瀏覽代碼

feat: 静态文件添加API配置

node 5 年之前
父節點
當前提交
bfccd04264
共有 3 個檔案被更改,包括 47 行新增24 行删除
  1. 21
    15
      README.md
  2. 5
    2
      assets/example.js
  3. 21
    7
      src/index.js

+ 21
- 15
README.md 查看文件

42
 
42
 
43
 ### 在非 React.js 项目中使用 ~~作为静态文件引入~~
43
 ### 在非 React.js 项目中使用 ~~作为静态文件引入~~
44
 
44
 
45
-1. 引入通用评论的 css 和 js 文件。在 `./assets/static` 目录。
45
+**使用`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)的静态文件**
46
+
47
+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)。
46
 2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表:
48
 2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表:
47
   - `id`: string, 必填, 渲染评论的节点的 ID
49
   - `id`: string, 必填, 渲染评论的节点的 ID
48
   - `type`: number, 必填, 评论的 type    
50
   - `type`: number, 必填, 评论的 type    
49
-  - `businessId`: string, 必填, 评论的 businessId    
51
+  - `businessId`: string, 选填, 评论的 businessId,默认 test
52
+  - `API`: string, 选填, 评论的 businessId,默认 http://api.links123.net/comment/v1
50
 
53
 
51
 具体可参考 `./assets/example.html`。
54
 具体可参考 `./assets/example.html`。
52
 
55
 
74
   <script type="text/javascript">
77
   <script type="text/javascript">
75
     // 调用 renderComment 这个方法,渲染通用评论
78
     // 调用 renderComment 这个方法,渲染通用评论
76
     window.renderComment({
79
     window.renderComment({
77
-      id: 'comment', // 渲染通用评论到 comment 这个节点,id 名称可 自定义
78
-      type: 1, // 评论的 type
79
-      businessId: 'test' // 评论的 businessId
80
-    })
80
+      id: 'comment', // required, 渲染通用评论到 comment 这个节点,id 名称可 自定义
81
+      type: 1, // required, 评论的 type
82
+      businessId: 'test' // 评论的 businessId, 默认 test
83
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
84
+    });
81
   </script>
85
   </script>
82
 </body>
86
 </body>
83
 </html>
87
 </html>
98
 
102
 
99
 ```html
103
 ```html
100
 <!-- ... -->
104
 <!-- ... -->
101
-  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
105
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/xxx.css" />
102
 <!-- ... -->
106
 <!-- ... -->
103
   <div id="RENDER_ELEMENT_WRAPPER"></div>
107
   <div id="RENDER_ELEMENT_WRAPPER"></div>
104
 <!-- ... -->
108
 <!-- ... -->
105
-  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
109
+  <script type="text/javascript" src="./static/js/xxx.js"></script>
106
 <!-- ... -->
110
 <!-- ... -->
107
 ```
111
 ```
108
 
112
 
143
     window.renderComment({
147
     window.renderComment({
144
       id: id,
148
       id: id,
145
       type: 1,
149
       type: 1,
146
-      businessId: 'test'
150
+      businessId: 'test',
151
+      API: 'http://api.links123.net/comment/v1',
147
     })
152
     })
148
   })
153
   })
149
   
154
   
154
     window.renderComment({
159
     window.renderComment({
155
       id: id,
160
       id: id,
156
       type: 1,
161
       type: 1,
157
-      businessId: 'test1'
162
+      businessId: 'test1',
163
+      API: 'http://api.links123.net/comment/v1',
158
     })
164
     })
159
   })
165
   })
160
-
161
 }
166
 }
162
 
167
 
163
 main();
168
 main();
164
 ```
169
 ```
165
 
170
 
166
-#### class 样式冲突
171
+#### ~~class 样式冲突~~
172
+
173
+> assets 分支已修复。
167
 
174
 
168
-`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改,改为了 `comment-image-preview-container`。
175
+~~`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改,改为了 `comment-image-preview-container`。~~
169
 
176
 
170
 解决办法就是使用 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支中的静态文件:
177
 解决办法就是使用 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支中的静态文件:
171
 
178
 
172
-- css:
173
-- js:
179
+- [https://git.links123.net/node/npmcomment/src/branch/fix/classname](https://git.links123.net/node/npmcomment/src/branch/fix/classname)
174
 
180
 
175
 尝试过使用 CSS Module 进行修改,不过改造量较大,改动的过程中影响了其他样式,所以暂时放弃了。
181
 尝试过使用 CSS Module 进行修改,不过改造量较大,改动的过程中影响了其他样式,所以暂时放弃了。
176
 
182
 

+ 5
- 2
assets/example.js 查看文件

36
     window.renderComment({
36
     window.renderComment({
37
       id: id,
37
       id: id,
38
       type: 1,
38
       type: 1,
39
-      businessId: 'test'
39
+      businessId: 'test',
40
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
40
     })
41
     })
41
   })
42
   })
42
   
43
   
47
     window.renderComment({
48
     window.renderComment({
48
       id: id,
49
       id: id,
49
       type: 1,
50
       type: 1,
50
-      businessId: 'test1'
51
+      businessId: 'test1',
52
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
51
     })
53
     })
52
   })
54
   })
53
   
55
   
54
 }
56
 }
55
 
57
 
56
 
58
 
59
+
57
 main();
60
 main();

+ 21
- 7
src/index.js 查看文件

1
 import React from "react";
1
 import React from "react";
2
 import ReactDOM from "react-dom";
2
 import ReactDOM from "react-dom";
3
 import App, { Editor } from "./App";
3
 import App, { Editor } from "./App";
4
-import registerServiceWorker from "./registerServiceWorker";
4
+// import registerServiceWorker from "./registerServiceWorker";
5
 
5
 
6
 const Index = props => (
6
 const Index = props => (
7
   <App showAlertComment showAlertReply showAlertFavor showError {...props}>
7
   <App showAlertComment showAlertReply showAlertFavor showError {...props}>
15
  *  - {string} id 渲染评论的DOM的 ID
15
  *  - {string} id 渲染评论的DOM的 ID
16
  *  - {number} type 评论的 type
16
  *  - {number} type 评论的 type
17
  *  - {string} businessId 评论的 businessId
17
  *  - {string} businessId 评论的 businessId
18
+ *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
18
  */
19
  */
19
 function renderComment(config) {
20
 function renderComment(config) {
20
   if (!config.id) {
21
   if (!config.id) {
21
     throw new Error("id is required");
22
     throw new Error("id is required");
22
   }
23
   }
23
-  if (!config.id) {
24
+  if (!config.type) {
24
     throw new Error("type is required");
25
     throw new Error("type is required");
25
   }
26
   }
26
-  if (!config.id) {
27
-    throw new Error("businessId is required");
27
+  if (!config.businessId) {
28
+    // throw new Error("businessId is required");
29
+    console.warn("没有传入 businessId 参数,默认使用: test");
30
+  }
31
+  if (!config.API) {
32
+    // throw new Error("API is required");
33
+    console.warn(
34
+      "没有传入 API 参数,默认使用: http://api.links123.net/comment/v1"
35
+    );
28
   }
36
   }
29
-  const { id, type = 1, businessId = "test" } = config;
37
+  const {
38
+    id,
39
+    type = 1,
40
+    businessId = "test",
41
+    API = "http://api.links123.net/comment/v1"
42
+  } = config;
30
 
43
 
31
   ReactDOM.render(
44
   ReactDOM.render(
32
-    <Index type={type} businessId={businessId} />,
45
+    <Index type={type} businessId={businessId} API={API} />,
33
     document.getElementById(id)
46
     document.getElementById(id)
34
   );
47
   );
35
   // registerServiceWorker();
48
   // registerServiceWorker();
40
 // renderComment({
53
 // renderComment({
41
 //   id: "root-comment",
54
 //   id: "root-comment",
42
 //   type: 1,
55
 //   type: 1,
43
-//   businessId: "test"
56
+//   businessId: "test",
57
+//   API: 'http://api.links123.net/comment/v1',
44
 // });
58
 // });