Typecho接入Waline评论区并迁移数据

【原创作品】本站已经成功迁移，可去任意文章或页面下查看效果。超级完全的教程，配合GIF动图，一步到位！
前排提示：下文有非常多的图片，流量用户请注意！

前言

实际上，实现这个没什么困难的，只需要仔细阅读官方文档，然后注册相关账号并配置即可。
因为Waline是给Valine加了个后端，虽然后者我没有用过，但根据实际操作，发现Typecho到Valine的评论迁移插件可以直接使用，这也就方便了我们直接用现成的工具。
废话不多说，直接开始！

创建Waline应用

搭建过程十分简单，甚至都不需要敲代码。

点此查看官方文档

通过Vercel搭建服务端

1、首先登录或注册Vercel账号。这一步十分简单，因为它支持Github或Gitlab直接登录，不需要再登邮箱收验证码。点击此处跳转到登录页面。

一键登录Vercel
2、直接点这一键部署。然后输入仓库名，随便什么都可以。
输入仓库名
3、点击“create”开始创建，然后先到下一步，准备搭建数据库。
开始创建

创建Leancloud数据存储

1、点此跳转到国际版注册界面。然后按照要求填写信息注册，收邮箱验证码。能读上本文的开发者，相信你对注册账号肯定不陌生，所以不再赘述。
注意，国内版是.com域名，要求可能会更多，而且需要备案域名。国际版是.app域名，多了国外服务器的选项，也免去了备案的要求。
按要求注册（请无视右下角水印）
2、注册完，登录后，就该创建一个应用了。点击此链接，输入应用名称，再选择计价方式为“开发版”（即不需要付费，但限制用量）。
填写应用的信息
3、进入应用设置（上图页面中，可见项目下方有一排图标，点击最右侧小齿轮即可），再从侧边栏中依次点击设置->应用凭证。准备好AppID,AppKey和MasterKey。下图中，这些内容均已被打码，以防盗用。
准备好这两个Key和一个ID

完成Vercel的配置

1、回到上一部分，你的Vercel项目应该早已准备好了。如果不小心关了页面，可以通过访问https://vercel.com/{你的用户名}/{填写的仓库名}访问控制台。
然后根据下方GIF图，打开Environment Variables选项，准备配置。动图的最后一部分表示了如何保存。
根据上方动图，打开环境变量，并准备配置
2、根据下面的图示，填入刚刚在Leancloud获得的内容。然后保存。
填入相关环境变量数据
3、根据下方动图，重构Vercel项目。此操作是为了应用刚刚的环境变量配置。
配置完后重构Vercel项目
4、根据下图，绑定CNAME，网址为https://vercel.com/{你的用户名}/{填写的仓库名}。因为vercel.app已经被墙，所以需要绑定自己的域名。绑定方法不再说，相信能看到这的开发者，此操作肯定是轻而易举。
国内专用CNAME地址：cname-china.vercel-dns.com。官方给出的地址在部分地区可能已经被DNS污染，即无法正常访问。
添加自定义域名，并绑定CNAME地址
5、记住你的自定义域名，马上就会用到！

Typecho部分

更换新评论区

1、进入主题修改界面，并打开comments.php准备编辑。地址会是https://{你的Typecho博客域名}/admin/theme-editor.php?theme={你的主题名称}&file=comments.php。
然后将按照主题样式并谨慎的移除掉原本的评论区代码！最后换上下方的代码。注意，有些内容需要你去填写！

1
2
3
4
5
6
7
8
9
10
<link href="https://cdn.bootcdn.net/ajax/libs/waline/2.14.7/waline.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/waline/2.14.7/legacy.umd.min.js"></script>
<!--上面的两行引入代码，可以放到head内部。具体方法请自行按照主题分析-->
<div id="waline"></div>
<script>
    Waline({
        el: '# waline',
        serverURL: '此处填写你在Vercel绑定的自定义域名',
    });
</script>

2、打开随便一个文章，刷新看看，是不是换上了新评论区？先别高兴得太早，接下来就是迁移了！

迁移旧评论

1、打开Github项目：https://github.com/lizheming/typecho-export-valine ，按照里面的教程下载、安装插件。
2、修复一个小BUG。打开插件目录下的Action.php文件，找到第74和第76行的\n，将他们替换成PHP_EOL。如下所示：

1
2
3
4
5
6
7
8
/*这是代码片段，为你呈现上下文用于参考*/
    echo '# filetype:JSON-streaming {"type":"Class","class":"Comment"}';
    echo PHP_EOL; //!!!修改此处
    foreach($results as $item) {
      echo PHP_EOL; //!!!修改此处
      echo json_encode($item);
    }
  }

3、自定义导出方式。注意，你的博客可能设置了伪静态，这将导致文章页面和独立页面的URL显示方式不同！举个例子，当前文章的地址就是www.yuanzj.top/article/439.html，而后面的URI部分/article/[数值].html就是一种显示方式；本站的留言板地址是www.yuanzj.top/PublicComments.html，后面的URI变成了/[名称].html。这就与插件的默认导出方式不同，从而导致评论无法读取。下面将给出一段专门为本站修改的public function doExport()代码片段，你可以参考着来改。别慌张，代码中的注释会帮你理解：
片段1：

1
2
3
4
5
6
7
8
9
10
//获取到所有的文章，并创建文章 id => url 的哈希表
 $contentHash = array();
 $contentHash_slug = array(); //!!! 以slug版本再存一份
 $sql = "SELECT * FROM {$content_table} WHERE `type` in ('post','page')";
 $tpContents = $db->fetchAll($db->query($sql));
 foreach($tpContents as $content) {
   $contentHash[$content["cid"]] = $content["cid"];
   $contentHash_slug[$content["cid"]] = $content["slug"]; //!!!新加入的代码
//新加入的代码：另外保存一份slug值，以便匹配评论所属[文章或页面]的[链接]。
 }

片段2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    $results = array();
    foreach($tpComments as $comment) {
      $cid = $contentHash[$comment["cid"]];
      $slug = $contentHash_slug[$comment["cid"]];
      $time = date("Y-m-d\TH:i:s.000\Z", $comment["created"]);

if(is_numeric($slug)) { //如果slug值为数字，就代表此评论位于文章而非独立页面。
	$arr = array(
	"objectId" => md5($comment["coid"]),
	/*"QQAvatar" => "",*/
	"comment" => $comment["text"],
	"insertedAt" => array(
	"__type" => "Date",
	"iso" => $time
	),
	"createdAt" => $time,
	"updatedAt" => $time,
	"ip" => $comment["ip"],
	"link" => $comment["url"],
	"mail" => $comment["mail"],
	"nick" => $comment["author"],
	"ua" => $comment["agent"],
	"url" => "/article/{$cid}.html"//注意此处！
	);
} else { //反之，如果slug值不是数字，则评论位于独立页面，需要更换输出格式。
	$arr = array(
	"objectId" => md5($comment["coid"]),
	/*"QQAvatar" => "",*/
	"comment" => $comment["text"],
	"insertedAt" => array(
	"__type" => "Date",
	"iso" => $time
	),
	"createdAt" => $time,
	"updatedAt" => $time,
	"ip" => $comment["ip"],
	"link" => $comment["url"],
	"mail" => $comment["mail"],
	"nick" => $comment["author"],
	"ua" => $comment["agent"],
	"url" => "/{$slug}.html"//注意此处！
	);

修改完了吗？别着急，慢慢来。
3、根据下图，下载下来一个.jsonl文件。然后打开Leancloud应用设置。根据插件的提示，进行导入操作。
注意class名称应该是Comment！导入操作不会覆盖原数据。
导出一个jsonl文件
导入到Leancloud中

完成！

恭喜！你已经完成了全部操作！
如果你需要更多的自定义，可以去https://waline.js.org/guide/ 查看官方文档！
作者手已经打麻了，赶紧收工了~

网络
#typecho #教程 #推荐
Typecho接入Waline评论区并迁移数据
https://www.yuanzj.top/posts/37c96d38.html
作者
yzl3014
发布于
2023年2月10日
许可协议