Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit c1fafd7

Browse files
committed
docs: elaborate more on comment
1 parent d95c935 commit c1fafd7

File tree

4 files changed

+56
-2
lines changed

4 files changed

+56
-2
lines changed

docs/.vuepress/public/Disqus.png

125 KB
Loading

docs/.vuepress/public/Vssue.png

68.1 KB
Loading

docs/components/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,36 @@ export default {
6464
You can use `$accentColor` in [palette.styl](https://v1.vuepress.vuejs.org/config/#palette-styl) to adjust the
6565
default colors of this component.
6666
:::
67+
68+
## `<Comment>`
69+
70+
This component will automatically render the layout of comment service you pick. And if comment is not enabled, it'll render nothing.
71+
72+
- Source Code: [Comment.vue](https://github.com/ulivz/vuepress-plugin-blog/blob/master/src/client/components/Comment.vue)
73+
74+
- Usage:
75+
76+
```vue
77+
<template>
78+
<Comment />
79+
</template>
80+
81+
<script>
82+
import { Comment } from '@vuepress/plugin-blog/lib/client/components'
83+
export default {
84+
components: {
85+
Comment
86+
}
87+
}
88+
</script>
89+
```
90+
91+
- Output:
92+
- Disqus:
93+
<img src="/Disqus.png" />
94+
95+
- Vssue:
96+
97+
<img src="/Vssue.png" />
98+
99+

docs/guide/getting-started.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -340,8 +340,29 @@ module.exports = {
340340

341341
Comment is a great way to make your blog much more lively. We integrate client side comment services: [Vssue](https://vssue.js.org/) and [Disqus](https://disqus.com/) in this plugin. The former is a vue-powered and issue-based open source project which can enable comments for your static pages, while the latter is a networked platform that provides comment service used by hundreds of thousands of websites.
342342

343-
> A plugin can contain several plugins like a preset.
343+
We provide you a out-of-box component `<Comment>`. you can import it from `'@vuepress/plugin-blog/lib/client/components'`. It might be useful when you're creating layout component `Post` which handle all the layout of post pages:
344344

345+
```vue
346+
// layouts/Post.vue
347+
<template>
348+
<div>
349+
<Content />
350+
<Comment />
351+
</div>
352+
</template>
353+
354+
<script>
355+
import { Comment } from '@vuepress/plugin-blog/lib/client/components'
356+
357+
export default {
358+
components: {
359+
Comment,
360+
},
361+
}
362+
</script>
363+
```
364+
365+
You have to tell the plugin which service you're going to use.
345366
Since comment is implemented by other plugins, make sure you've read [vuepress-plugin-vssue](https://vssue.js.org/) or [vuepress-plugin-disqus-comment](https://vuepress-plugin-disqus.netlify.com) before using them:
346367
```js
347368
// .vuepress/config.js
@@ -390,7 +411,7 @@ module.exports = {
390411
```
391412

392413
::: tip
393-
Of course you can use whatever service you like or roll your own comment system. Just simply ignore the config.
414+
Of course you can use whatever service you like or roll your own comment system. You can simply ignore this config as you wish so that this build-in comment feature won't be enabled.
394415
:::
395416

396417
## Newsletter

0 commit comments

Comments
 (0)