1.0.1 • Published 2 years ago
tc-comment v1.0.1
tc-comment
A comment component that supports markdowm and emoji, without any configuration, no need to apply for any account, it can be used immediately
Features
- One line of code introduction without any configuration
- No need to apply for any account, just use it
- Support markdowm and emoji comment components
- Support real-time preview
- Support insert link of code message
- Support dark mode, adapt to the original dark mode of the website
- Support custom services and url
- Support for inserting pictures
1. Quick use
import {initComment} from 'tc-comment';
initComment({
appName: 'xxx', // create your own app name
});
cdn use
<script src="https://cdn.jsdelivr.net/npm/tc-comment/tc-comment.min.js"></script>
<script>
TComment.initComment({
appName: 'xxx', // create your own app name
});
</script>
2. Vue component introduction
// ...
import {Comment} from 'tc-comment';
Comment.init({appName: 'xxx'}); // Create your own app name
export default {
components: {Comment},
// ...
}
3. Configuration parameters
initComment({
appName: string;
el?: HTMLElement | string; // Comment.init passed this parameter is invalid
theme?: 'dark' | 'light';
darkSelector?: string;
services?: {
insertComment: InsertComment;
getComment: GetComment;
insertReply: InsertReply;
};
urlConfig?: {
host: string;
get?: string;
insert?: string;
reply?: string;
};
dataHandler?: {
get?: (data: IGetOption) => any;
insert?: (data: IComment) => any;
reply?: (data: IReply) => any;
};
})
// Comment.init parameters are consistent with the above parameters
- appName: An application name is required, a combination of numbers and letters is recommended, and it supports the use of / to divide directories such as appName = blog/2022/hello
- The container rendered by el will append an element to the body by default
- theme color
- darkSelector Fill in a dark theme color selector, generally used to adapt to the dark theme of the main website
- Services, urlConfig, dataHandler will be introduced in detail later
4. Custom services
tc-comment supports custom methods to implement your own request methods
import {initComment} from 'tc-comment';
initComment({
el: '#app',
services: { // Please inject three requests by yourself, insert comment, insert reply and get comment
insertComment(){
},
getComment(){
},
getComment(){
}
}
});
insertComment and getComment ts statement
interface InsertComment {
(data: {
name: string;
contact: string;
content: string;
}): Promise<boolean>;
}
interface InsertReply {
(data: {
name: string;
contact: string;
content: string;
commentId: number;
}): Promise<boolean>;
}
interface GetComment {
(query: {
index?: number;
size?: number;
all?: boolean;
condition?: object;
}): Promise<Array<{
createTime: number;
name: string;
content: string;
}>>;
}
5. Custom interface urlConfig
tc-comment supports custom interface by configuring urlConfig
The urlConfig parameter has lower precedence than the services parameter
import {initComment} from 'tc-comment';
initComment({
el: '#app',
urlConfig: {
host:'www.example.com',
get:'/api/comment/get',
insert:'/api/comment/insert',
reply: '/api/reply/insert'
},
});
If you use the urlConfig parameter, tc-comment will call the three interfaces under the domain name, please deploy it yourself
- get request for pulling comments
- path: urlConfig.get
- method: get
- Parameters: index, size, all, condition, app
- Return: {data: {code: 0, data: CommentObject}} 0 means success
- responseType: json
CommentObject
{
id: number;
name: string;
contact: string;
content: string;
createTime: number; // timestamp
reply: Array<{
name: string;
contact: string;
content: string;
createTime: number; // timestamp
}>;
}
- insert request for uploading comments
- path: urlConfig.insert
- method: post
- Parameters: name, contact, content, app
- Return: {data: {code: 0}} 0 means success
- responseType: json
- The reply request is used to upload the reply
- path: urlConfig.insert
- method: post
- Parameters: name, contact, content, commentId, app
- Return: {data: {code: 0}} 0 means success
- responseType: json
6. dataHandler
When using a custom urlConfig, you can modify the request data with dataHandle
Use as follows
import {initComment} from 'tc-comment';
initComment({
el: '#app',
urlConfig: {
host:'www.example.com',
get:'/api/comment/get',
insert:'/api/comment/insert',
reply: '/api/reply/insert'
},
dataHandler: {
get: (data) => {return data},
insert: (data) => {return data},
reply: (data) => {return data},
}
});