在typecho插入waline评论系统(保姆级教程)

yuze 发布于 2024-08-15 24 次阅读


前言:

由于typecho的评论系统不支持邮件提醒,且众多邮件提醒的插件因年代久远无法使用,因此,带有后端的waline是更好的选择

!请仔细阅读本片文章,更换评论系统可能会导致主题的部分功能无法使用

部署waline

waline的官方网站有十分详细的教程,请可前往官网查看,建议部暑到vercel或deta
waline官方网站

由于vercel被dns污染,所以要绑定自已的域名,以下是免费域名注册流程,deta的dns没被污染,国内可以正常访问,若你不需要自定义样式,可以使用deta

域名注册

首先需要一个美国人信息生成器

!!!请截图保存信息生成器生成的信息,下面要用
使用假证生成器生成一个学生证

假证生成器要填写下面信息 学生姓名: 【美国人信息生成器】生成的全名(如:Martha J. Herrera)

学生ID 随便填一些数字吧,如:15898988

学校名称: Baylor University

学校标志网址
https://s.rmimg.com/2024/05/29/3a7b5b993d8aede065bfbd242364a3ca.jpg

学校地址: Waco, TX, 76798

学校电话: 02547101011

填完上面信息点生成,并截图保存

开始注册US.KG账号并申请域名

注册地址
在注册页面、填写邮箱注册、登录密码、姓名(人信息生成器的全名),然后点注册(最好用gmail邮箱或大厂邮箱)
上面注册成功后,在邮箱里会收到一封邮箱(有可能在垃圾邮箱里),然后点邮箱里的激活帐号连接
打开激活帐号连接后,要填下面信息注册域名

填US.KG的登录用户名

填为什么要注册US.KG域名? 随便写给理由,比如:”我是学生我在学习网站搭建,需要一个域名“然后去翻译成英文填上去,如下面 I am a
student and I am learning how to build a website. I need a domain
name.

文件类型我们填写 Student ID

学生姓名 填刚刚在US.KG写的全名(人信息生成器的全名)

上传KYC文件正面 用刚才的[假证生成器]生成的学生证存储的图片,上传KYC文件正面.反面不用上传

点”Submit”进行验证,出现成功页面就注册成功

注册域名

在us.kg面板,找到Dashboard -> Domain name registration -> 填写域名根据提示注册
(到ns地址页面先别动,看下一步操作)

注册cloudflare账号并把域名托管到cloudflare

进入cloudflare官方网站,注册账号
登录账号并进入仪表盘,点击网站→输入刚刚注册的域名→根据提示复制两个ns地址,回到us.kg把两个地址输入到ns1,ns2并点击下方的注册,再返回cloudflare,点下一步,等验证通过

把域名解析到vercel

请控照waline官网把waline部署到vercel并官网
教程在vercel的domains页面添加域名
添加完后会弹出解析地址,回到cloudflare面板,点左边dns,并添加vercel的解析地址

把waline添加到typecho

添加到typecho需要修改主题的comments.php(在typecho后台→控制台→外观→编辑外观处修改),我使用的是butterfly主题,以下是修改的示例

<div id="comments"></div><h3 id="response"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论(waline加载较慢请耐心等待)</span></div></div></h3>
<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: '你的域名',
    });
  </script>
</body>

上文代码中的

<h3 id="response"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论(waline加载较慢请耐心等待)</span></div></div></h3>

是主题中的评论栏,别的主题应该有,修改时建议保留
也就是这个

如果你使用的是别的主题,请参考上面修改你的主题文件
把以下代码放入主题合适位置,然后删除主题多于代码

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: '你的域名',
    });
  </script>
</body>

当然,你也可以删除comments.php原有的代码,并把这段代码直接添加到comments.php中
之后保存,回到你的博客,没问题的话waline就会正常显示了

此作者没有提供个人介绍
最后更新于 2024-08-15