Skip to content

Commit

Permalink
fix(docs): refine docs and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
imaegoo committed Sep 13, 2020
1 parent e7ed2cf commit 9888e23
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 49 deletions.
24 changes: 17 additions & 7 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,23 @@ A simple, safe, serverless comment system based on Tencent CloudBase (tcb).

[https://www.imaegoo.com/2020/hello-twikoo/](https://www.imaegoo.com/2020/hello-twikoo/)

## 快速上手

请查看[快速上手](https://twikoo.js.org/quick-start.html)

> 文档尚未完善,请关注后续更新;<br>
> 如果你想获取更新动态、建言献策、参与内测,欢迎加入内测群:<br>
> <img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />
## 交流群

如果你想获取更新动态、建言献策、参与内测,欢迎加入内测群:<br>
<img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />

## 开发计划

| 状态 | 优先级 | 计划 |
| ---- | ---- | ---- |
| DONE | P0 | 文档撰写 |
| TODO | P1 | 评论管理 |
| TODO | P2 | 人工审核 |
| TODO | P2 | AKISMET 审核 |
| TODO | P2 | 完整 Markdown 适配 |
| TODO | P3 | Emoji 表情 |
| TODO | P3 | 图片表情 |
| TODO | P3 | 评论框粘贴图片 |

<!-- ## 贡献者 | Contributors -->

Expand Down
69 changes: 39 additions & 30 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,92 +7,101 @@ Twikoo 的配置保存在数据库中,目前修改配置需进入控制台。
不过放心,默认权限是安全的,您不需要更改。
:::

## AKISMET_KEY
## 通用

### SITE_NAME

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: 8651783ed123
示例: 虹墨空间站

反垃圾评论 API key
博客、站点名称

## BLOGGER_EMAIL
### SITE_URL

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: 12345@qq.com
示例: https://www.imaegoo.com

博主的邮箱地址,用于邮件通知、博主标识
博客、站点地址

## SC_SENDKEY
### BLOGGER_EMAIL

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: SCT1364TKdsiGjGvyAZNYDVnuHW12345
示例: [email protected]

[Server酱](https://sc.ftqq.com/3.version)微信推送的 `SCKEY`
博主的邮箱地址,用于邮件通知、博主标识。

## SENDER_EMAIL
## 反垃圾

### AKISMET_KEY

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: [email protected]
示例: 8651783ed123

反垃圾评论 API key。

邮件通知,邮箱地址。
## 微信通知

## SENDER_NAME
### SC_SENDKEY

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: 虹墨空间站评论提醒
示例: SCT1364TKdsiGjGvyAZNYDVnuHW12345

[Server酱](https://sc.ftqq.com/3.version)微信推送的 `SCKEY`

邮件通知,邮件标题。
## 邮件通知

## SITE_NAME
### SENDER_EMAIL

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: 虹墨空间站
示例: [email protected]

博客、站点名称
邮件通知邮箱地址

## SITE_URL
### SENDER_NAME

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: https://www.imaegoo.com
示例: 虹墨空间站评论提醒

博客、站点地址
邮件通知标题

## SMTP_PASS
### SMTP_SERVICE

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: password
示例: qiye.aliyun

邮件通知,邮箱密码,QQ邮箱请填写授权码。
邮件通知邮箱服务商。<br>
完整列表请参考:[Supported services](https://nodemailer.com/smtp/well-known/#supported-services)

## SMTP_SERVICE
### SMTP_USER

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: qiye.aliyun
示例: [email protected]

邮件通知,邮箱服务商
邮件通知邮箱用户名

## SMTP_USER
### SMTP_PASS

类型: `String`<br>
默认值: `null`<br>
必要性: `false`<br>
示例: [email protected]
示例: password

邮件通知,邮箱用户名
邮件通知邮箱密码,QQ邮箱请填写授权码
14 changes: 9 additions & 5 deletions docs/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@
Twikoo 使用云开发作为评论后台,每个云开发用户均长期享受1个免费的标准型基础版1资源套餐。如果您已经拥有了一个免费版云开发环境,在环境配置符合要求的情况下,Twikoo 理论可以与其他项目共用一个环境。

1. [注册云开发CloudBase](https://curl.qcloud.com/KnnJtUom)
2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/),新建环境,请按个人需要配置环境,推荐选择计费方式`包年包月`,套餐版本`基础班 1`
2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/),新建环境,请按个人需要配置环境<br>
::: tip 提示
* 推荐选择计费方式`包年包月`,套餐版本`基础班 1`
* 如果提示“选择部署应用”,请选择“不创建环境”
:::
3. 进入[环境-登录授权](https://console.cloud.tencent.com/tcb/env/login),启用“匿名登录”
4. 进入[环境-安全配置](https://console.cloud.tencent.com/tcb/env/safety)将网站地址添加到“WEB安全域名”
4. 进入[环境-安全配置](https://console.cloud.tencent.com/tcb/env/safety)将网站域名添加到“WEB安全域名”
5. 复制环境Id备用

## 环境部署

::: warning 注意
请将命令、代码中“您的环境id”替换为您自己的环境id
* 请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)
* 请将命令、代码中“您的环境id”替换为您自己的环境id
* 请不要使用 Windows 自带的记事本编辑 envId.txt,否则会部署失败,后续会修复该问题
:::

请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)

1. 克隆本仓库
``` sh
git clone https://github.com/imaegoo/twikoo.git
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "twikoo",
"version": "0.1.8",
"version": "0.1.9",
"description": "A simple comment system based on Tencent CloudBase (tcb).",
"author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
"license": "MIT",
Expand Down
4 changes: 2 additions & 2 deletions src/view/components/TkAction.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ export default {
},
computed: {
likeCountStr () {
return this.likeCount > 0 ? `(${this.likeCount})` : ''
return this.likeCount > 0 ? `${this.likeCount}` : ''
},
repliesCountStr () {
return this.repliesCount > 0 ? `(${this.repliesCount})` : ''
return this.repliesCount > 0 ? `${this.repliesCount}` : ''
}
},
methods: {
Expand Down
69 changes: 67 additions & 2 deletions src/view/components/TkComment.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
</a>
<span class="tk-tag tk-tag-green" v-if="comment.master">博主</span>
<small class="tk-time">{{ displayCreated }}</small>
<div class="tk-tag">{{ comment.os }}</div>
<div class="tk-tag">{{ comment.browser }}</div>
</div>
<tk-action :liked="comment.liked"
:like-count="comment.like"
Expand All @@ -23,6 +21,10 @@
<span v-if="comment.pid">回复 <a :href="`#${comment.pid}`">@{{ comment.ruser }}</a> :</span>
<span v-html="comment.comment"></span>
</div>
<div class="tk-extras">
<div class="tk-extra"><span class="tk-icon" v-html="iconOs"></span>&nbsp;{{ comment.os }}</div>
<div class="tk-extra"><span class="tk-icon" v-html="iconBrowser"></span>&nbsp;{{ comment.browser }}</div>
</div>
<!-- 回复列表 -->
<div class="tk-replies" :class="{ 'tk-replies-expand': isExpanded }" ref="tk-replies">
<tk-comment v-for="reply in comment.replies"
Expand All @@ -47,6 +49,37 @@ import { timeago } from '../../js/utils'
import TkAction from './TkAction.vue'
import TkAvatar from './TkAvatar.vue'
import TkSubmit from './TkSubmit.vue'
import iconWindows from '@fortawesome/fontawesome-free/svgs/brands/windows.svg'
import iconApple from '@fortawesome/fontawesome-free/svgs/brands/apple.svg'
import iconAndroid from '@fortawesome/fontawesome-free/svgs/brands/android.svg'
import iconLinux from '@fortawesome/fontawesome-free/svgs/brands/linux.svg'
import iconUbuntu from '@fortawesome/fontawesome-free/svgs/brands/ubuntu.svg'
import iconChrome from '@fortawesome/fontawesome-free/svgs/brands/chrome.svg'
import iconFirefox from '@fortawesome/fontawesome-free/svgs/brands/firefox-browser.svg'
import iconSafari from '@fortawesome/fontawesome-free/svgs/brands/safari.svg'
import iconIe from '@fortawesome/fontawesome-free/svgs/brands/internet-explorer.svg'
import iconEdge from '@fortawesome/fontawesome-free/svgs/brands/edge.svg'
import iconOther from '@fortawesome/fontawesome-free/svgs/regular/window-maximize.svg'
const osList = {
win: iconWindows,
mac: iconApple,
ipad: iconApple,
iphone: iconApple,
android: iconAndroid,
ubuntu: iconUbuntu,
linux: iconLinux
}
const browserList = {
edge: iconEdge,
chrome: iconChrome,
firefox: iconFirefox,
safari: iconSafari,
explorer: iconIe,
ie: iconIe
}
export default {
name: 'tk-comment', // 允许组件模板递归地调用自身
Expand All @@ -70,11 +103,24 @@ export default {
displayCreated () {
return timeago(this.comment.created)
},
iconOs () {
return this.getIconBy(this.comment.os, osList)
},
iconBrowser () {
return this.getIconBy(this.comment.browser, browserList)
},
showExpand () {
return this.hasExpand && !this.isExpanded
}
},
methods: {
getIconBy (name, list) {
const lowerCaseName = name.toLowerCase()
for (let key in list) {
if (lowerCaseName.indexOf(key) !== -1) return list[key]
}
return iconOther
},
showExpandIfNeed () {
if (this.comment.replies && this.comment.replies.length > 0 && this.$refs['tk-replies']) {
this.hasExpand = this.$refs['tk-replies'].scrollHeight > 200
Expand Down Expand Up @@ -141,6 +187,25 @@ export default {
.tk-nick-link:hover {
color: #409eff;
}
.tk-extras {
color: #999999;
font-size: 0.875em;
display: flex;
margin-top: 0.5rem;
}
.tk-extra {
margin-right: 0.75rem;
}
.tk-icon {
display: inline-block;
height: 1em;
width: 1em;
line-height: 0;
vertical-align: text-top;
}
.tk-icon /deep/ svg {
fill: currentColor;
}
.tk-tag {
display: inline-block;
padding: 0 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion src/view/components/TkFooter.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="tk-footer">
Powered by <a href="https://github.com/imaegoo/twikoo" target="_blank">Twikoo</a>
v {{ version }}
v{{ version }}
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion src/view/components/TkSubmit.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
v-model="comment"
placeholder="请输入内容"
:autosize="{ minRows: 3 }"
@change="updatePreview" />
@input="updatePreview" />
</div>
</div>
<div class="tk-row actions">
Expand Down

0 comments on commit 9888e23

Please sign in to comment.