各位老友们好,我是 Chlorine。Hello from ShenZhen.

本期唠唠闲磕,讲讲最近给园子装修的事情。

友链页面重写

起因是我看到了广树大佬小智大佬的友链页面,感觉很有意思。这个友链页面叫作「女子寮」(中文:女生宿舍)。

嗯,友链嘛,不就是赛博邻居吗?很合理啊(只是我很好奇,这样男生还能申请友链吗?)。

下面这张图是北熙大佬的友链页面申请须知的一部分,我看完觉得更有意思了。

An image to describe post

正好我这几天对于独博有了一些别的不成熟的感触(见[[Ephemeralis-Weekly(4):缝隙之间|我的上一期周报]]),于是我动了借(chāo)鉴(xí)的念头。

装修友链页面

我打算直接照抄大佬们的创意。当然不能叫女子寮(我自己就是男生 :D),既然我的博客叫「园子里的日光」,园子就是清华园,那么干脆就叫紫荆公寓好了。1

然后我在高铁上花了一点时间,写了一个新的友链界面须知。由于当时的精神状态也不是很健康,偶尔也会有一些《不是那么合理》的句子,比方说:

请勿将电动车电池、集束炸弹、氢氧化钠、火星、混凝土搅拌机、王水、数据结构、沈阳大街、3-甲基吲哚、钋 210、某些互联网大厂、蘑菇蛋、波尔布特等危险物品带入公寓。

大家可以在紫荆公寓的公示板(这里)查看完整的公示内容,另外,也欢迎老友们入住紫荆公寓 OωO

房间号

紫荆公寓的所有房间都是相同的,因此不存在房间种类的问题。不过房间号倒是可以搞一个。

目前列出来的老友们的房间号大都是随机写的,如果有老友希望换房间,请尽管留言。

此外我在想,等将来友链多了,是不是可以做一个页面,展示为一个楼层示意图,在每一个「房间」真的放上老友们的头像?我觉得是个不错的主意,但是目前友链还太少了。

申请

目前友链的申请依赖于 Twikoo 评论区(叫 Twikoo 娘也不是不行 OωO)或者直接发邮件。我在想能否做一个在线表单?直接填写即可,每收到一个就给我发邮件。

理论上完全可行,用 CloudFlare 一把梭(Pages+Workers+D1+R2+KV+Turnstile)应该不需要费很大力气。很不幸,我不会 JavaScript,也不熟悉前端。

那你还在这不需要费很大力气

配置域名邮箱

其实我一直对域名邮箱没什么大兴趣。主要原因是即使是域名邮箱,大部分都也是依靠免费的企业邮箱服务的,本质上除了彰显个性之外似乎也没什么好的地方。至于自建邮件服务器,我目前还没那个资源。

才不会告诉你们是因为我不知道前缀用哪个

事情的转机完全是因为一个毫不相干的事情:Twikoo 邮件通知模板。洪哥(张洪Heo大佬)分享了一个 Twikoo 评论的模板(看这里),于是我也动了 DIY 的念头。在 ChatGPT 的帮助下,我写了一个还算好看的模板。

写完模板之后我的思路开始活跃:那通知的口吻是不是也可以改一改?不用那么冰冷的口气?

于是在一顿 brainstorm 后,园子的提醒小助手——可爱的 Info 酱(Infochan)诞生了。之所以叫 Info 酱,是因为带清内网的信息聚合网站就叫清华信息门户(THU Info)薅母校的命名羊毛薅到底了属于

目前 Info 酱还没有一个准确完整的人设,欢迎各位喜欢 ACGN 的老友们提出您的高见(拜托了 qaq)。

顺便放一下我的代码,大家自行取用,想看详细 DIY 信息的可以去看洪哥的博文。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Info!「${SITE_NAME}」 评论通知</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #e1e5e9;
        }
        .header img {
            width: 100px;
            height: auto;
            border-radius: 50%;
            border: 2px solid #007bff;
            padding: 5px;
            background: #ffffff;
        }
        .header h1 {
            font-size: 28px;
            color: #333;
            margin: 15px 0;
            font-weight: 600;
        }
        .content {
            padding: 20px;
        }
        .content h2 {
            font-size: 20px;
            color: #007bff;
            margin: 0;
            font-weight: 600;
        }
        .content p {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin: 15px 0;
        }
        .comment-section {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border: 1px solid #e1e5e9;
        }
        .comment-section h3 {
            font-size: 18px;
            color: #333;
            margin: 0 0 10px;
            font-weight: 500;
        }
        .comment-section p {
            font-size: 15px;
            color: #666;
            margin: 5px 0;
        }
        .button {
            display: inline-block;
            padding: 12px 25px;
            font-size: 16px;
            color: #ffffff;
            background: #007bff;
            border-radius: 25px;
            text-decoration: none;
            text-align: center;
            font-weight: 600;
            margin-top: 20px;
        }
        .button:hover {
            background: #0056b3;
        }
        .footer {
            text-align: center;
            padding-top: 20px;
            font-size: 14px;
            color: #888;
        }
        .footer a {
            color: #007bff;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="https://r2.2776655.xyz/avatar.webp" alt="Site Logo">
            <h1>「${SITE_NAME}」 评论通知</h1>
        </div>
        <div class="content">
            <h2>Hi there!</h2>
            <p>这里是 「${SITE_NAME}」 的小助手 Info 酱。您在园子里的评论收到了新的回复!下面是一些细节:</p>
            <div class="comment-section">
                <h3>${PARENT_NICK} 说:</h3>
                <p>${PARENT_COMMENT}</p>
                <hr style="border: 1px solid #e1e5e9; margin: 15px 0;">
                <h3>${NICK} 回复:</h3>
                <p>${COMMENT}</p>
            </div>
            <a href="${POST_URL}" class="button">查看评论</a>
        </div>
        <div class="footer">
            <p>本邮件由 Info 酱自动发送,请勿进行回复!</p>
            <p><a href="${SITE_URL}" target="_blank">去园子里看看</a></p>
        </div>
    </div>
</body>
</html>

效果大概是:

An image to describe post

然后我就想:那是不是应该给可爱的 Info 酱一个有标识性的邮箱?(无止境的折腾.avif

行。我觉得,infochan 这个前缀应该不会很抢手,我只需要又双叒叕注册一个邮箱就可以了。

但是我不想了。我觉得,是时候给这个园子一个真正的域名邮箱了。

我首先相中的是 Lark(飞书国际版)。没有发现成员数目限制(也有说是 50 人的,反正是肯定够了),每天邮件上限 450 封/人,成员共享 200G 的邮箱空间。最重要的,我对这个软件的印象还可以。

注册过程还算顺利,注意配置全局网络就可以。然后按部就班地加 DNS 记录就可以了。不过邮箱设置需要下载飞书客户端,有点难绷,毕竟一个软件就有 1.2G(macOS)。

然后这个故事就不出意外地出意外了。我的 Twikoo 邮件通知始终无法配置,一直显示 535,非常难绷。

然后我只能放弃。毕竟我现在还在神圣清华帝国深圳自治领(bushi)实地调研,也没时间和这个东西硬刚。

后来我又试了下阿里云的免费企业邮箱,支持 50 个用户,每个用户 5G 空间。没想到套路云还有这种羊毛可以薅这次的体验倒是很好,没有出任何岔子。只需要注意一点:在配置 Twikoo 评论的时候,「用户名」一定要把后缀也带上,不然又会报错。(不知道之前飞书的报错能不能用这个方法解决)

现在我用阿里云的企业邮箱注册了我的个人邮箱(me)、Info 酱的邮箱(infochan)和一个 Git 提交邮箱(git),由于服务器在国内,速度非常可观。cons 可能就是需要绑定手机号,以及国内大厂对于用户隐私的良好尊重了。

反正目前我用着还行,这个羊毛能薅一天是一天,实在不行转战飞书+Mailgun 或者 Mail Ru,天下这么大,总会有白嫖怪的容身之地的(bushi)。

以后大家就可以使用 me#yoghurtlee.com(请把 # 替换为 @)联系我了。我的 GPG 公钥是 96359FF161D5E8BC,已上传至 MIT 公钥服务器

此外,多说一句,之前我用的是 clmoe.top,结果在 Mail Tester 检测满分的情况下在我测试的时候被认定为垃圾邮件了 qaq 就欺负 .top 钓鱼邮件多呗Info 酱那么可爱你是怎么舍得的啊

结语

兜兜转转也算是简单把园子装修了一下。以后再继续慢慢装,反正我离敲不动键盘还剩好多年呢。


  1. 紫荆公寓是带清的一个宿舍区,也是我常住的地方。尽管说紫荆的条件也就那样 ↩︎