twikoo配置教程

Twikoo 部署教程

前言

Twikoo 是一个简洁、安全、免费的静态网站评论系统，基于腾讯云开发。下面是 Twikoo 的部署教程，你可以根据自己的需求选择合适的部署方式。

一、腾讯云手动部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1. 进入云开发CloudBase活动页面，购买基础版1套餐，创建环境
# 2. 进入云开发控制台
# 3. 启用匿名登录
# 4. 将网站域名添加到 WEB 安全域名
# 5. 新建云函数 twikoo，选择空白函数和 Node.js 16.13 运行环境
# 6. 清空示例代码，复制以下代码到函数代码输入框
exports.main = require('twikoo-func').main
# 7. 创建 package.json 文件，复制以下代码并保存
{
  "dependencies": {
    "twikoo-func": "1.6.42"
  }
}
# 8. 保存并安装依赖

二、腾讯云命令行部署

1
2
3
4
5
6
7
8
9
10
11
12
13
# 1. 进入云开发CloudBase活动页面，购买基础版1套餐，创建环境
# 2. 进入云开发控制台
# 3. 启用匿名登录
# 4. 将网站域名添加到 WEB 安全域名
# 5. 克隆仓库
git clone https://github.com/twikoojs/twikoo.git
cd twikoo
# 6. 安装依赖项
npm install -g yarn
yarn install
# 7. 授权云开发环境
# 8. 自动部署
yarn deploy

三、Vercel 部署

1
2
3
4
5
6
7
# 1. 点击链接导入 Vercel
# 2. 输入仓库名，点击 Create 创建
# 3. 选择代码托管位置，填写仓库名，点击 Continue
# 4. 点击 Deploy 一键部署
# 5. 进入 Settings - Environment Variables，添加 MONGODB_URI 环境变量
# 6. 进入 Deployments，重新部署
# 7. 进入 Overview，获取环境 ID

四、宝塔面板部署

1
2
3
4
# 1. 安装宝塔面板并登录
# 2. 安装 Docker 服务
# 3. 在应用商店中找到 Twikoo 并安装，配置域名、端口等信息
# 4. 通过浏览器访问设置的域名或 IP + 端口

五、Railway 部署

1
2
3
4
5
6
7
# 1. 在 Railway 申请账号，点击 New Project - Provision MongoDB
# 2. fork twikoojs/twikoo-zeabur 仓库到自己的账号
# 3. 回到 Railway，点击 New - GitHub Repo，授权 GitHub，选择 fork 的仓库
# 4. 点开环境卡片 - Variables，添加 PORT 环境变量为 8080
# 5. 添加 MongoDB 相关环境变量
# 6. 绑定域名
# 7. 配置博客 envId

六、Zeabur 部署

1
2
3
4
5
# 1. 在 Zeabur 申请账号，部署 MongoDB
# 2. fork twikoojs/twikoo-zeabur 仓库到自己的账号
# 3. 回到 Zeabur，部署源代码，授权 GitHub，选择 fork 的仓库
# 4. 部署完成后绑定域名
# 5. 配置博客 envId

七、Netlify 部署

1
2
3
4
5
6
7
# 1. 申请 MongoDB Atlas 账号，获取连接字符串
# 2. 申请 Netlify 账号，创建 Team
# 3. fork twikoojs/twikoo-netlify 仓库到自己的账号
# 4. 回到 Netlify，点击 Add new site - Import an existing project
# 5. 点击 Deploy with GitHub，选择 fork 的项目
# 6. 添加 MONGODB_URI 环境变量
# 7. 部署完成后，设置站点名获取环境 ID

八、Hugging Face 部署

1
2
3
4
5
6
7
8
9
# 1. 申请 MongoDB Atlas 账号，获取连接字符串
# 2. 申请 Hugging Face 账号
# 3. 创建 Space，设置 SDK 为 Docker，选择 Blank 模板
# 4. 在 Settings 中添加 MONGODB_URI 环境变量
# 5. 创建 Dockerfile 文件，内容如下
FROM imaegoo/twikoo
ENV TWIKOO_PORT 7860
EXPOSE 7860
# 6. 提交文件，获取环境 ID

九、私有部署

1
2
3
4
5
6
7
8
# 1. 服务端安装 Node.js
# 2. 安装 Twikoo server
npm i -g tkserver
# 3. 根据需要配置环境变量
# 4. 启动 Twikoo server
tkserver
# 5. 访问 http://服务端IP:8080 测试服务
# 6. 配置前置代理实现 HTTPS 访问

Twikoo 的基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>Twikoo 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.0/dist/twikoo.min.js"></script>
</head>
<body>
    <div id="tcomment"></div>
    <script>
        twikoo.init({
            envId: '你的环境ID',
            el: '#tcomment'
        });
    </script> #引入 Twikoo 的 JavaScript 文件。
</body>
</html>

twikoo评论区图片优化代码

在…/css/xxx.css文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 输入框动态背景过渡效果 */
.twikoo .el-input__inner,
.twikoo .el-textarea__inner {
    transition: background-position-y 0.3s ease-in-out !important;
    background-repeat: no-repeat;
}

/* 焦点状态背景位移 */
.twikoo .el-input__inner:focus,
.twikoo .el-textarea__inner:focus {
    background-position-y: 100% !important; /* 更灵活的百分比定位 */
}

/* 文本域背景适配 */
.tk-input .el-textarea__inner {
    background-size: contain;
    background-position: right bottom; /* 建议添加定位 */
}

然后在主题文件中引用该CSS文件。