xiaobo
/
comment
複製自 npm/comment
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

doc: 更新文档

node 6 年之前
父節點
6e9b001d5f
當前提交
861de4ba5f
共有 1 個文件被更改，包括 77 次插入 和 78 次删除
分割檢視 顯示文件統計
  1. 77
    78
      README.md

+ 77
- 78
README.md 查看文件 

@@ -8,10 +8,86 @@
8 8 
 import Comment, { Editor, RenderText } from 'comment';
9 9 
 ```
10 10
11 
-- 标记了`deprecated`的配置项表示不推荐使用，并且可能在将来版本中不再受支持。
11 
+
12 
+## 使用
13 
+
14 
+
15 
+### 作为组件使用
16 
+
17 
+```
18 
+# npm 安装
19 
+$ npm install git+https://git.links123.net/npm/comment.git --save
20 
+# yarn 安装
21 
+$ yarn add git+https://git.links123.net/npm/comment.git
22 
+```
23 
+
24 
+然后在代码里面引入 `comment` 组件：
25 
+
26 
+```jsx
27 
+import Comment, { Editor } from 'comment'
28 
+
29 
+// ...
30 
+
31 
+render() {
32 
+  return (
33 
+    <Comment type={1} businessId="test">
34 
+      <Editor />
35 
+    </Comment>
36 
+  )
37 
+}
38 
+```
39 
+
40 
+**注意：最后，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
41 
+
42 
+
43 
+### 在非 React.js 项目中使用 ~~作为静态文件引入~~
44 
+
45 
+1. 引入通用评论的 css 和 js 文件。在 `./assets/static` 目录。
46 
+2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表：
47 
+  - `id`: string, 必填, 渲染评论的节点的 ID
48 
+  - `type`: number, 必填, 评论的 type
49 
+  - `businessId`: string, 必填, 评论的 businessId
50 
+
51 
+具体可参考 `./assets/example.html`。
52 
+
53 
+例子如下：
54 
+
55 
+```html
56 
+<!DOCTYPE html>
57 
+<html>
58 
+<head>
59 
+  <meta charset="utf-8" />
60 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
61 
+  <title>通用评论 demo</title>
62 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
63 
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
64 
+</head>
65 
+<body>
66 
+  <div>
67 
+    <h1>在非 React.js 项目中使用通用评论</h1>
68 
+    <p>将其渲染到 id 为 `comment` 的节点上</p>
69 
+    <div id="comment"></div>
70 
+  </div>
71 
+
72 
+  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
73 
+  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
74 
+  <script type="text/javascript">
75 
+    // 调用 renderComment 这个方法，渲染通用评论
76 
+    window.renderComment({
77 
+      id: 'comment', // 渲染通用评论到 comment 这个节点，id 名称可 自定义
78 
+      type: 1, // 评论的 type
79 
+      businessId: 'test' // 评论的 businessId
80 
+    })
81 
+  </script>
82 
+</body>
83 
+</html>
84 
+```
85 
+
12 86
13 87 
 ## Comment
14 88
89 
+- 标记了`deprecated`的配置项表示不推荐使用，并且可能在将来版本中不再受支持。
90 
+
15 91
16 92 
 | props            | type           | default                            | required | description                                                                       |
17 93 
 | ---------------- | -------------- | ---------------------------------- | -------- | --------------------------------------------------------------------------------- |
 
@@ -169,83 +245,6 @@ render() {
169 245 
 }
170 246 
 ```
171 247
172 
-
173 
-## 使用
174 
-
175 
-
176 
-### 作为组件使用
177 
-
178 
-```
179 
-# npm 安装
180 
-$ npm install git+https://git.links123.net/npm/comment.git --save
181 
-# yarn 安装
182 
-$ yarn add git+https://git.links123.net/npm/comment.git
183 
-```
184 
-
185 
-然后在代码里面引入 `comment` 组件：
186 
-
187 
-```jsx
188 
-import Comment, { Editor } from 'comment'
189 
-
190 
-// ...
191 
-
192 
-render() {
193 
-  return (
194 
-    <Comment type={1} businessId="test">
195 
-      <Editor />
196 
-    </Comment>
197 
-  )
198 
-}
199 
-```
200 
-
201 
-**注意：最后，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
202 
-
203 
-
204 
-### 作为静态文件引入
205 
-
206 
-作为静态文件使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：
207 
-
208 
-```js
209 
-// ...
210 
-<App type={1} businessId="test">
211 
-    <Editor />
212 
-</App>
213 
-```
214 
-
215 
-然后再进行打包：
216 
-
217 
-```
218 
-$ yarn build
219 
-```
220 
-
221 
-打包后会得到静态文件，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
222 
-
223 
-
224 
-接下来还需要引入 OSS SDK，用于直传文件到 OSS。
225 
-
226 
-
227 
-最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
228 
-
229 
-如下所示：
230 
-
231 
-```html
232 
-<!DOCTYPE html>
233 
-<html>
234 
-<head>
235 
-  <meta charset="utf-8" />
236 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
237 
-  <title>Page Title</title>
238 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
239 
-  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
240 
-</head>
241 
-<body>
242 
-  <div id="root-comment" style="width: 700px"></div>
243 
-  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
244 
-  <script src="./static/js/main.eac872df.js"></script>
245 
-</body>
246 
-</html>
247 
-```
248 
-
249 248 
 ## 开发
250 249
251 250 
 ```