feat: add the switch for enable or disable the comments.
This commit is contained in:
parent
2903026ab4
commit
cb95e90d97
GPG Key ID:
DEB186763C308C31
37
README.md
37
README.md
@ -108,6 +108,18 @@ This weblog uses artalk as its backend comment service. But since artalk didn't
|
||||
We decide to query it directly from the Postgres database. So the comments and fav clicks are living in the same
|
||||
database.
|
||||
|
||||
If you don't want the astro integration, change the switch in `options.ts` to `false`.
|
||||
|
||||
```json
|
||||
{
|
||||
settings: {
|
||||
comments: {
|
||||
enable: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### S3 Compatible Storage Integration
|
||||
|
||||
This blog will upload all the built resources at build stage. You can remove this feature by removing the
|
||||
@ -135,8 +147,8 @@ date: 2013/7/13 20:46:25
|
||||
|
||||
| Setting | Description | Required | Default |
|
||||
|-------------|--------------------------------------|----------|----------------------|
|
||||
| `slug` | ID (unique), used as the permalink | true | Filename |
|
||||
| `title` | Title | true | Filename |
|
||||
| `slug` | ID (unique), used as the permalink | true | |
|
||||
| `title` | Title | true | |
|
||||
| `date` | Published date | true | |
|
||||
| `updated` | Updated date | false | Published date |
|
||||
| `comments` | Enables comment feature for the post | false | `true` |
|
||||
@ -150,16 +162,17 @@ date: 2013/7/13 20:46:25
|
||||
|
||||
### Pages Front Matter Settings
|
||||
|
||||
| Setting | Description | Required | Default |
|
||||
|-------------|--------------------------------------|----------|----------------|
|
||||
| `slug` | ID (unique), used as the permalink | true | Filename |
|
||||
| `title` | Title | true | Filename |
|
||||
| `date` | Published date | true | |
|
||||
| `updated` | Updated date | false | Published date |
|
||||
| `comments` | Enables comment feature for the post | false | `true` |
|
||||
| `cover` | The cover image | false | `null` |
|
||||
| `published` | Whether the post should be published | false | `true` |
|
||||
| `toc` | Display the Table of Contents | false | `false` |
|
||||
| Setting | Description | Required | Default |
|
||||
|-------------|--------------------------------------|----------|----------------------|
|
||||
| `slug` | ID (unique), used as the permalink | true | |
|
||||
| `title` | Title | true | |
|
||||
| `date` | Published date | true | |
|
||||
| `updated` | Updated date | false | Published date |
|
||||
| `comments` | Enables comment feature for the page | false | `true` |
|
||||
| `summary` | Page summary in plain text | false | First 140 characters |
|
||||
| `cover` | The cover image | false | `null` |
|
||||
| `published` | Whether the page should be published | false | `true` |
|
||||
| `toc` | Display the Table of Contents | false | `false` |
|
||||
|
||||
## Weblog Design
|
||||
|
||||
|
||||
@ -67,6 +67,7 @@ const Options = z
|
||||
calendar: z.boolean().default(false),
|
||||
}),
|
||||
comments: z.object({
|
||||
enable: z.boolean().optional().default(true),
|
||||
size: z.number().default(10).readonly(),
|
||||
avatar: z.object({
|
||||
mirror: z.string().url().readonly(),
|
||||
@ -190,6 +191,7 @@ const options: z.input<typeof Options> = {
|
||||
calendar: true,
|
||||
},
|
||||
comments: {
|
||||
enable: true,
|
||||
size: 10,
|
||||
avatar: {
|
||||
mirror: 'https://weavatar.com/avatar',
|
||||
|
||||
@ -15,7 +15,7 @@ const CommentConnectError = new ActionError({
|
||||
message: "couldn't connect to comment server",
|
||||
});
|
||||
|
||||
export const server = {
|
||||
const normalActions = {
|
||||
like: defineAction({
|
||||
accept: 'json',
|
||||
input: z
|
||||
@ -53,6 +53,9 @@ export const server = {
|
||||
return { avatar: urlJoin(import.meta.env.SITE, 'avatar', `${hash}.webp`) };
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const commentActions = {
|
||||
comment: defineAction({
|
||||
accept: 'json',
|
||||
input: z.object({
|
||||
@ -98,3 +101,5 @@ export const server = {
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export const server = options.settings.comments.enable ? { ...normalActions, ...commentActions } : { ...normalActions };
|
||||
|
||||
@ -11,77 +11,86 @@ interface Props {
|
||||
}
|
||||
|
||||
const { commentKey, title } = Astro.props;
|
||||
const comments = await loadComments(commentKey, title, 0);
|
||||
const comments = options.settings.comments.enable ? await loadComments(commentKey, title, 0) : null;
|
||||
|
||||
// Increase the PV in production environment.
|
||||
if (options.isProd()) {
|
||||
if (options.settings.comments.enable && options.isProd()) {
|
||||
await increaseViews(commentKey, title);
|
||||
}
|
||||
---
|
||||
|
||||
<div id="comments" class="comments pt-5">
|
||||
{
|
||||
comments != null ? (
|
||||
<>
|
||||
<div class="h5 mb-4 comment-total-count">
|
||||
评论 <small class="font-theme text-sm">({comments.count})</small>
|
||||
</div>
|
||||
<div id="respond" class="comment-respond mb-3 mb-md-4">
|
||||
<form method="post" action="/comments/new" id="commentForm" class="comment-form">
|
||||
<div class="comment-from-avatar flex-avatar">
|
||||
<img
|
||||
alt="头像"
|
||||
src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
|
||||
data-src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
|
||||
class="avatar avatar-40 photo avatar-default"
|
||||
height="40"
|
||||
width="40"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="comment-from-input flex-fill">
|
||||
<div class="comment-form-text mb-3">
|
||||
<textarea id="content" name="content" class="form-control" rows="3" required />
|
||||
</div>
|
||||
<div class="comment-form-info row g-2 g-md-3 mb-3">
|
||||
<div class="col">
|
||||
<input class="form-control" placeholder="昵称" name="name" type="text" required="required" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input class="form-control" name="email" placeholder="邮箱" type="email" required="required" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<input hidden name="page_key" type="text" value={commentKey} />
|
||||
<input hidden name="rid" type="text" value="0" />
|
||||
<input class="form-control" placeholder="网址" name="link" type="url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit text-end">
|
||||
<input type="button" id="cancel-comment-reply-link" class="btn btn-light me-1" value="再想想" hidden />
|
||||
<input name="submit" type="submit" id="submit" class="btn btn-primary" value="发表评论" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ul class="comment-list">
|
||||
<Comment comments={comments} />
|
||||
</ul>
|
||||
{options.settings.comments.size < comments.roots_count && (
|
||||
<div class="text-center mt-3 mt-md-4">
|
||||
<button
|
||||
id="comments-next-button"
|
||||
data-key={commentKey}
|
||||
data-size={options.settings.comments.size}
|
||||
data-offset={options.settings.comments.size}
|
||||
class="btn btn-light"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
{
|
||||
options.settings.comments.enable && (
|
||||
<div id="comments" class="comments pt-5">
|
||||
{comments != null ? (
|
||||
<>
|
||||
<div class="h5 mb-4 comment-total-count">
|
||||
评论 <small class="font-theme text-sm">({comments.count})</small>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
'评论加载失败 ❌'
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div id="respond" class="comment-respond mb-3 mb-md-4">
|
||||
<form method="post" action="/comments/new" id="commentForm" class="comment-form">
|
||||
<div class="comment-from-avatar flex-avatar">
|
||||
<img
|
||||
alt="头像"
|
||||
src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
|
||||
data-src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
|
||||
class="avatar avatar-40 photo avatar-default"
|
||||
height="40"
|
||||
width="40"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="comment-from-input flex-fill">
|
||||
<div class="comment-form-text mb-3">
|
||||
<textarea id="content" name="content" class="form-control" rows="3" required />
|
||||
</div>
|
||||
<div class="comment-form-info row g-2 g-md-3 mb-3">
|
||||
<div class="col">
|
||||
<input class="form-control" placeholder="昵称" name="name" type="text" required="required" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input class="form-control" name="email" placeholder="邮箱" type="email" required="required" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<input hidden name="page_key" type="text" value={commentKey} />
|
||||
<input hidden name="rid" type="text" value="0" />
|
||||
<input class="form-control" placeholder="网址" name="link" type="url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit text-end">
|
||||
<input
|
||||
type="button"
|
||||
id="cancel-comment-reply-link"
|
||||
class="btn btn-light me-1"
|
||||
value="再想想"
|
||||
hidden
|
||||
/>
|
||||
<input name="submit" type="submit" id="submit" class="btn btn-primary" value="发表评论" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ul class="comment-list">
|
||||
<Comment comments={comments} />
|
||||
</ul>
|
||||
{options.settings.comments.size < comments.roots_count && (
|
||||
<div class="text-center mt-3 mt-md-4">
|
||||
<button
|
||||
id="comments-next-button"
|
||||
data-key={commentKey}
|
||||
data-size={options.settings.comments.size}
|
||||
data-offset={options.settings.comments.size}
|
||||
type="button"
|
||||
class="btn btn-light"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
'评论加载失败 ❌'
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import options from '@/options';
|
||||
---
|
||||
|
||||
{
|
||||
options.settings.sidebar.comment > 0 && (
|
||||
options.settings.comments.enable && options.settings.sidebar.comment > 0 && (
|
||||
<div id="recent-comments" class="widget widget-recent-comments">
|
||||
<div class="widget-title">近期评论</div>
|
||||
<ul id="recent-comments">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user