CFblog添加Waline

之前教大家创建 CFblog, 但是没有评论功能, 这次教大家如何建使用Waline 开启评论功能

打开注册链接进行注册, 然后打开邮箱进行邮箱验证

验证完成之后进行登陆, 点击创建应用,

点击设置, 找到应用凭证, 把 AppID, AppKey 和 MasterKey 复制下来

部署 Waline

点击按钮进行搭建

用 Github 登陆, 可能需要验证手机号

输入名字后进行部署,等待几分钟,安装完毕后是这样

设置变量

到管理面板, 点击 Settings->Environment Variables

变量名	变量值
LEAN_ID	你的 AppID
LEAN_KEY	你的 AppKey
LEAN_MASTER_KEY	你的 MasterKey

点击 Save

点击 Deployment->…->Redeploy

绑定域名

Settings->Domains, 将以 vercel.app 为结尾的域名复制下来

登陆 Cloudflare, 创建一个 workers, 把内容删除并粘贴下面的代码

addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
	let url = new URL(request.url);
	if(url.pathname.startsWith('/')){
		url.hostname="xxx.vercel.app"; // 修改成需要代理的网站地址 
		let new_request=new Request(url, request);
		return await fetch(new_request);
	}
	return await fetch(request);
}

添加 workers 路由,设置->触发器->添加路由

把路由添加为这样的形式 xxx.example.com/* 选择的区域必须是 example.com OK之后点击添加路由

添加 DNS 记录,为 CNAME 名称是添加路由时的 xxx.example.com 目标是 cloudflare.182682.xyz 代理状态关闭, 保存

会到 vercel 把自己设置的域名粘贴上去->add, 等一会就行了

接着浏览器访问: https://[你的域名]/ui/register, 注册用户(第一个注册的用户是管理员)

编辑 workers

回到 Cloudflare 之前创建的 CFblog workers ->编辑代码

在右侧小部件区域,添加一个小部件 div , 名为<最近评论>

"widgetOther":`
    <div id="linkcat-0" class="widget widget_links">
        <h3 class="widget-title">
            <span>最近评论</span></h3>
        <div id="waline-recent"></div>

    </div>
        `,

在评论区加一个 div ,来显示评论

1
2
3

"commentCode":`
        <div id="waline"  name="waline" class="comments-area"></div>
    `,

头部加上样式,和Waline的js

"codeBeforHead":`
    <style>
        #waline-recent img {max-width: 100%;}
        #waline-recent li {border: thick double #32a1ce;}
    </style>
    <script src='//gcore.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
    `,

底部加上Waline初始化代码,以及加载最近评论的代码

"codeBeforBody":`
        <script>
            //这一段是初始化Waline的,visitor: true记得开启
            new Waline({
                el:'#waline',
                serverURL: 'https://xxx.vercel.app',
                appId: 'eWrOzSzYP1Fm8QD96P0vKli-MdYXbMMI',
                appKey: 'jMF98EwbmKvdGnDLamPwAk1',
                avatar:'monsterid',
                recordIP:false,
                requiredFields:['nick'],
                visitor: true,
                //path:"/",
                placeholder:"整两句..."
            })
            //这一段是加载最近评论的
            window.addEventListener('load', function() {
              Waline.Widget.RecentComments({
                el: '#waline-recent',
                serverURL: 'https://xxx.vercel.app',
                count: 10
              });
            });
        </script>
    `,