Hexo博客私有部署Twikoo评论系统并迁移评论记录(自定义邮件回复模板)

news2024/11/15 13:01:37

部署

之前一直使用的artalk，现在想改用Twikoo，采用私有部署的方式。

私有部署 (Docker)

端口可以根据实际情况进行修改

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8100:8100 -v ${PWD}/data:/app/data -e TWIKOO_PORT=8100 -d imaegoo/twikoo

访问localhost:8100，结果如下则表示部署成功

{
    "code": 100,
    "message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置",
    "version": "1.6.39"
}

成功后，如果有域名，使用nginx配置反向代理即可。

Butterfly配置

打开butterfly的主题配置文件_config.yml，启用Twikoo

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Twikoo
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

配置环境Id，环境Id就是上一步你访问的地址。

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo.xxx.xxx
  region:
  visitor: false
  option:

如果Twikoo前端版本过低，打开themes/butterfly/plugins.yml配置文件，修改版本。

twikoo:
  name: twikoo
  file: dist/twikoo.all.min.js
  version: 1.6.39

然后Hexo一键三连

Twikoo配置

在你的评论区，点击右下角设置小图片，初始化密码后，就可以进行配置啦！
在这里插入图片描述

迁移评论

首先从原来的评论系统，将评论数据导出，artalk导出是artrans格式。
然后在Twikoo设置中，选择导入，导入数据。
在这里插入图片描述
详细配置可参照Twikoo 文档

自定义邮件样式

PC端和移动端效果

邮件模板代码

将网站图标更改为你自己网站图标图片的url地址。

<div class="page flex-col">
  <div class="box_3 flex-col" style="
  display: flex;
  position: relative;
  width: 100%;
  height: 206px;

  background: #49BDAD;
  color: #ffffff;
  border-radius: 10px 10px 0 0;
  background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
  background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
  top: 0;
  left: 0;
  justify-content: center;
"><div class="section_1 flex-col" style="
  background-image: url(&quot;网站图标&quot;);
  position: absolute;
  border-radius: 50%;
  width: 152px;
  height: 152px;
  display: flex;
  top: 130px;
  background-size: cover;
"></div></div>
  <div class="box_4 flex-col" style="
  margin-top: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
">
    <div class="text-group_5 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
">
      <span class="text_1" style="
  font-size: 26px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #000000;
  line-height: 37px;
  text-align: center;
">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span>
      <span class="text_2" style="
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #00000030;
  line-height: 22px;
  margin-top: 21px;
  text-align: center;
">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</span>
    </div>
    <div class="box_2 flex-row" style="
  margin: 0 20px;
  min-height: 128px;
  background: #F7F7F7;
  border-radius: 12px;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 16px;
  width: 80%;
">
      
      <div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-bottom: 16px;
">
        <span class="text_3" style="
  height: 22px;
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #C5343E;
  line-height: 22px;
">${PARENT_NICK}</span>
        <span class="text_4" style="
  margin-top: 6px;
  margin-right: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
">${PARENT_COMMENT}</span>
      </div><hr style="
    display: flex;
    position: relative;
    border: 1px dashed #ef859d2e;
    box-sizing: content-box;
    height: 0px;
    overflow: visible;
    width: 100%;
"><div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-top: 26px;
">
        <span class="text_3" style="
  height: 22px;
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #C5343E;
  line-height: 22px;
">${NICK}</span>
        <span class="text_4" style="
  margin-top: 6px;
  margin-right: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
">${COMMENT}</span>
      </div>
      
      <a class="text-wrapper_2 flex-col" style="
  min-width: 106px;
  height: 38px;
  background: #ef859d38;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: auto;
  margin-top: 32px;
" href="${POST_URL}">
        <span class="text_5" style="
  color: #DB214B;
">查看详情</span>
      </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 34px;
">
      <span class="text_6" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00000045;
  line-height: 17px;
">此邮件由评论服务自动发出，直接回复无效。</span>
<span class="text_6" style="
margin-top: 5px;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 17px;">欢迎再次光临 
  <a class="text_7" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4131d2;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
" href="${SITE_URL}">${SITE_NAME}</a>
</span>
    </div>
  </div>
</div>

Twikoo邮件模板配置

打开Twikoo管理面板，将代码复制到配置管理-邮件通知下的MAIL_TEMPLATE中
在这里插入图片描述

Twikoo邮件自定义字段

参数含义
${SITE_URL}网站链接
${SITE_NAME}网站名字
${PARENT_NICK}被回复人昵称
${PARENT_COMMENT}被回复人的评论内容
${NICK}回复人昵称
${COMMENT}回复人评论内容
${POST_URL}文章链接
${IMG}回复人头像
${PARENT_IMG}被回复人头像
${MAIL}回复人邮件
${IP}回复人 IP 地址

大功告成

此模版参考于「Twikoo评论回复邮件模板：Acrylic Mail 粉」。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2151958.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

英集芯IP5912：集成开关充电功能的低功耗8位POWER MCU芯片

英集芯IP5912：集成开关充电功能的低功耗8位POWER MCU芯片

英集芯IP5912是一款功能丰富的、集成了降压充电管理功能的8位MCU芯片&#xff0c;它内置了一个5V输入的同步降压充电DC-DC&#xff0c;功率管也是内置的&#xff0c;同时提供最大1.5A的充电电流。封装方式采用SOP16&#xff0c;方案应用时只需要很少的外围器件&#xff0c;就可…
阅读更多...
Java面试篇基础部分-ReentrantLock详解（二）

Java面试篇基础部分-ReentrantLock详解（二）

Lock 接口的主要方法 void lock()：给对象加锁，如果锁没有被其他线程使用，则当前线程获取到这个锁；如果锁正在被其他线程持有，则将禁用当前线程，直到当前线程获取到锁。boolean tryLock()：试图给对象进行加锁操作，如果锁没有被其他线程使用，则将获取到这个锁并且返回tr…
阅读更多...
基于JAVA+SpringBoot+Vue的智能无人仓库管理

基于JAVA+SpringBoot+Vue的智能无人仓库管理

基于JAVASpringBootVue的智能无人仓库管理 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345; 哈…
阅读更多...
单样本Cellchat(V2)细胞通讯分析学习和整理

单样本Cellchat(V2)细胞通讯分析学习和整理

细胞通讯分析是一种研究不同细胞类型之间如何通过信号分子&#xff08;如配体和受体&#xff09;进行相互交流和调控的分析方法。它在揭示细胞间相互作用的机制&#xff0c;理解组织和器官如何协调运作方面具有重要意义。 细胞通讯分析的主要内容如下&#xff1a; 配体-受体相…
阅读更多...
新品亮相｜美格智能SLM530/SLM530P智能模组，助力金融新零售智慧升级

新品亮相｜美格智能SLM530/SLM530P智能模组，助力金融新零售智慧升级

随着金融支付产业数字化与智能化不断推进&#xff0c;泛支付场景一体化解决方案成为行业发展的新趋势&#xff0c;从手持POS机到智能收款机&#xff0c;金融支付领域需要更快速、更精准、更安全的解决方案&#xff0c;加快推进数字化升级进程。 近期&#xff0c;美格智能正式发…
阅读更多...
Github 2024-09-21Rust开源项目日报 Top10

Github 2024-09-21Rust开源项目日报 Top10

根据Github Trendings的统计，今日(2024-09-21统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Rust项目10Move项目1JavaScript项目1Deno: 现代JavaScript和TypeScript运行时 创建周期：2118 天开发语言：Rust, JavaScript协议类型：MIT Lic…
阅读更多...
【面试宝典】面试基础指导

【面试宝典】面试基础指导

目录 &#x1f354; 简历怎么写 &#x1f354; ⾯试前针对项⽬撰写完成项⽬⽂档 &#x1f354; ⾯试前 &#x1f354; ⾯试中 4.1 投递简历当天没有收到⾯试邀约 4.2 讲解项⽬ 4.3 讲解知识 4.4 ⾯试中关于技术选型的演变 &#x1f354; ⾯试后 &#x1f354; 小结 &…
阅读更多...
openssl-AES-128-CTR加解密结构体

openssl-AES-128-CTR加解密结构体

源码 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <openssl/aes.h> #include <openssl/evp.h> #include <openssl/rand.h>#define length 1024typedef struct {char id[length];char pwd[length];int age;int …
阅读更多...
Kubelet 核心指标监控

Kubelet 核心指标监控

How to Monitor the Kubelet | Sysdig Kubernetes / Kubelet | Grafana Labs https://github.com/flashcatcloud/categraf/blob/main/inputs/kubelet/dashboard-by-ident.json 在生产环境中运行 Kubernetes 时&#xff0c;监控 Kubelet 至关重要。Kubelet 是 Kubernetes 集群…
阅读更多...
自制网络连接工具（支持tcpudp,客户端服务端）

自制网络连接工具（支持tcpudp,客户端服务端）

自制网络连接工具&#xff08;支持tcp/udp,客户端/服务端&#xff09; 将网络连接工具制作成共享库 network.h #ifndef NETWORK_H #define NETWORK_H#include<netinet/in.h> #include<sys/socket.h> #include<stdbool.h> typedef struct Network {int type…
阅读更多...
AI是否会带来一场认知革命？Reid Hoffman 的独特见解

AI是否会带来一场认知革命？Reid Hoffman 的独特见解

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;关于AI对人类社会及认知的影响&#xff0c;已经成为了学术界和业界热议的话题。硅谷著名投资人、LinkedIn联合创始人Reid Hoffman&#xff0c;在斯坦福大学的演讲中分享了他对AI的深刻看法。他认为&#xff0…
阅读更多...
系统优化工具 | Windows Manager v2.0.5 便携版

系统优化工具 | Windows Manager v2.0.5 便携版

Windows Manager 是一款专为Microsoft Windows 10/11设计的系统优化和管理软件。它集成了多种实用程序&#xff0c;旨在帮助用户更好地管理和优化Windows操作系统。该软件的功能包括系统清理、系统优化、系统修复、硬件信息查看和系统设置调整等。 系统清理&#xff1a;Window…
阅读更多...
队列基础概念

队列基础概念

文章目录 &#x1f34a;自我介绍&#x1f34a;现实生活中的例子&#x1f34a;队列的介绍&#x1f34a;循环队列&#x1f34a;小结 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34a;自我介…
阅读更多...
简明linux系统编程--互斥锁--TCP--UDP初识

简明linux系统编程--互斥锁--TCP--UDP初识

目录 1.互斥锁 2.信号 2.1介绍 2.2信号的内核机制 3.linux网络编程概述 3.1一览七层协议 3.2一览数据传输过程 3.3四层网络模型 3.4服务端和客户端的数据交互 4.TCP服务端编程 5.TCP客户端编程 6.UDP服务端编程 7.UDP客户端编程 1.互斥锁 互斥锁也是和信号量一样&a…
阅读更多...
我与Linux的爱恋：命令行参数|环境变量

我与Linux的爱恋：命令行参数|环境变量

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;Linux的学习 文章目录 一.命令行参数二.环境变量1.环境变量的基本概念2.查看环境变量的方法3.环境变量相关命令 一.命令行参数 【示例1】main函数也是函数&#xff0c;main函数可以带参…
阅读更多...
Paragon NTFS for Mac和Tuxera NTFS for Mac，那么两种工具有什么区别呢？

Paragon NTFS for Mac和Tuxera NTFS for Mac，那么两种工具有什么区别呢？

我们在使用Mac系统读取U盘的过程中往往会遇到一个问题&#xff0c;那就是U盘插进电脑无法显示&#xff0c;或者只能读取不能编辑。出现这种情况的原因就一般是格式错误。 很多小伙伴在解决这种问题的时候会选择使用U盘读写工具&#xff0c;那么哪一种读写工具比较好呢&#xf…
阅读更多...
Windows下利用MSYS2和VS的nmake编译nginx源码

Windows下利用MSYS2和VS的nmake编译nginx源码

目录 一、使用说明 二、安装软件 2.1 下载依赖库 2.3 下载并安装 StrawberryPerl 2.4 下载并安装 MSYS 2 2.5 nginx源代码下载 三、编译配置 3.1 设置NGX_MSVC_VER 3.2 配置 Makefile 3.3 编译代码 3.4 整理Nginx发布环境 四、错误处理 一、使用说明 本文章主要记…
阅读更多...
Hash入门

Hash入门

unordered_set void test_unordered_set() {unordered_set<int> us;us.insert(4);us.insert(2);us.insert(1);us.insert(5);us.insert(6);us.insert(2);us.insert(2);//去重unordered_set<int>::iterator it us.begin();while (it ! us.end()){cout << *it…
阅读更多...
​OpenAI最强模型o1系列：开启人工智能推理新时代

​OpenAI最强模型o1系列：开启人工智能推理新时代

前不久OpenAI发布全新模型——o1模型&#xff0c;也就是业界说的“草莓模型”&#xff0c;包含三款型号&#xff1a;OpenAI o1、OpenAI o1-preview和OpenAI o1-mini。 其中&#xff0c;OpenAI o1-mini和 o1-preview已经对用户开放使用&#xff1a; OpenAI o1&#xff1a;高级推…
阅读更多...
mysql笔记—sql性能分析

mysql笔记—sql性能分析

1.查看数据库各个语句的执行频次 show global/session status like ‘com__’ 2.慢查询 默认没有开启&#xff0c;需要手动开启&#xff08;在/etc/my.cnf中开启&#xff09; 开启后在localhost-slow.log中可以查询到慢查询的语句的相关信息&#xff1a; 3.explain 用法&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023