Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terwer/vuepress-plugin-vdoing-comment
Comment plugin in vuepress vdoing theme, supports Gitalk, Valine, Artalk...
https://github.com/terwer/vuepress-plugin-vdoing-comment
Last synced: 3 months ago
JSON representation
Comment plugin in vuepress vdoing theme, supports Gitalk, Valine, Artalk...
- Host: GitHub
- URL: https://github.com/terwer/vuepress-plugin-vdoing-comment
- Owner: terwer
- License: mit
- Created: 2022-11-24T07:06:45.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T07:09:38.000Z (5 months ago)
- Last Synced: 2024-07-13T16:23:20.160Z (4 months ago)
- Language: JavaScript
- Size: 187 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-vdoing-comment
[](https://terwer.space/post/hello-world.html)
[](https://vuepress.vuejs.org/)
Support popular comment plugins in Vuepress, supports Gitalk, Valine, Artalk...
It is well-tested via [vuepress-vdoing-theme](https://github.com/xugaoyi/vuepress-theme-vdoing)
- [vuepress-plugin-vdoing-comment](#vuepress-plugin-vdoing-comment)
- [Copyright](#copyright)
- [FAQ](#faq)
- [Features](#features)
- [Usage](#usage)
- [Install](#install)
- [⚠️Route object properties](#️route-object-properties)
- [Use in Gitalk](#use-in-gitalk)
- [Use in Valine](#use-in-valine)
- [Use in Artalk](#use-in-artalk)
- [How to hide page comment](#how-to-hide-page-comment)
## Copyright
This project is a enhance version
of [https://github.com/dongyuanxin/vuepress-plugin-comment](https://github.com/dongyuanxin/vuepress-plugin-comment)
## FAQ
1. Artalk server crash after post a comment?
it is a bug, already fixed in 1.0.2 .
2. Some times comment component not load?
Clear browser cache and reload page again.
3. Does dark mode or read mode look well?
Yes. After 1.0.4 it auto-fits and bundled , You DO NOT need to add any css code.
If you have other questions, please mail to [email protected] or open an issue
## Features
- Support Gitalk, Valine, Artalk
- Dynamic Import
- Response router change and refresh automatic
- User can use passage's `$frontmatter`
## Usage
### Install
With `npm`:
```bash
npm install --save vuepress-plugin-vdoing-comment
```
With `yarn`:
```bash
yarn add vuepress-plugin-vdoing-comment -D
```
With `cnpm`:
```bash
cnpm i --save vuepress-plugin-vdoing-comment
```
### ⚠️Route object properties
**Don't use `window` object directly to get route information**.
Plugin has registered correct route information in `frontmatter.to` object and `frontmatter.from` object. Their
properties are the same as [vue-router's route object](https://router.vuejs.org/api/#route-object-properties).
### Use in Gitalk
The `options` is exactly the same as `Gitalk` configuration.
```javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'gitalk',
options: {
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
distractionFreeMode: false
}
}
]
]
}
```
If you want to access variables, such as `$frontmatter` and `window`, please use **EJS** syntax.
```javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'gitalk',
options: {
id: '<%- frontmatter.commentid || frontmatter.permalink %>',
title: '「Comment」<%- frontmatter.title %>',
body: '<%- frontmatter.title %>：<%-window.location.origin %><%- frontmatter.to.path || window.location.pathname %>',
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
distractionFreeMode: false,
}
}
]
]
}
```
**Note**: Never use callback function in plugin configuration, that will be filtered by vuepress. So I have to support
EJS syntax.
### Use in Valine
The `options` is exactly the same as `Valine` configuration.
```javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'valine',
options: {
el: '#valine-vuepress-comment',
appId: 'Your own appId',
appKey: 'Your own appKey'
}
}
]
]
}
```
If you want to access variables, such as `$frontmatter` and `window`, please use **EJS** syntax.
```javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'valine',
options: {
el: '#valine-vuepress-comment',
appId: 'Your own appId',
appKey: 'Your own appKey',
path: '<%- frontmatter.commentid || frontmatter.permalink %>'
}
}
]
]
}
```
### Use in Artalk
The `options` is **different** from `Gitalk` configuration.
```javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'artalk',
options: {
server: 'https://my-artalk-server', // （必填）
site: '站点名称', // （必填）
// disableEmotion: false, // 是否禁用表情（可选）
// disablePicture: true, // 是否禁用图片（可选）
// disablePreview: false // 是否禁用预览（可选）
}
}
]
]
}
```
### How to hide page comment
If you want to hide comment plugin in specified page, set `$frontmatter.comment` or `$frontmatter.comments` to `false`.
For example:
```yml
---
comment: false
# comments: false
---
```
Comment won't appear in the page of this passage.