---
slug: yuanzi-decorating

summary: 不知新装修的效果，各位老友是否满意呢？OωO
tags:
  - 博客
  - 邮箱
  - 折腾
  - Info酱

title: 园子装修日志
date: 2024-08-05
description: 本文讲述了作者对博客进行的一系列创意改进，包括友链页面的重塑、设计有趣的入住须知、配置域名邮箱、创建名为Info酱的评论通知小助手等。作者以轻松幽默的口吻分享了装修过程中的思考和经验,展现了对博客优化的热情，同时也为读者提供了一些有关博客个性化的实用建议和灵感。
categories: ["百草园"]
featuredImage: https://img.viento.cc/yuanzi-decorating.webp
draft: false
---

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

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

## 友链页面重写

起因是我看到了[广树大佬](https://www.wikimoe.com)和[小智大佬](https://www.chitudexiaozhi.com/)的友链页面，感觉很有意思。这个友链页面叫作「女子寮」（中文：女生宿舍）。

> 更正：事实上应该是从广树大佬的友链一路看过去的，感谢广树大佬的更正 OωO

嗯，友链嘛，不就是赛博邻居吗？很合理啊（只是我很好奇，这样男生还能申请友链吗？）。

下面这张图是[北熙大佬](https://blog.beixibaobao.com/page/link)的友链页面申请须知的一部分，我看完觉得更有意思了。

![|578](https://img.viento.cc/IMG-20240804230255.avif "还有房间类型")

正好我这几天对于独博有了一些别的不成熟的感触（见[我的上一期周报]({{< relref "Ephemeralis-Weekly（4）：缝隙之间.md" >}})），于是我动了借（chāo）鉴（xí）的念头。

## 装修友链页面

我打算直接照抄大佬们的创意。当然不能叫女子寮，小氯喜欢起一些比较莫名其妙的名字，于是随手看着自己算出的题目结果，起了一个「Residencia 0x001B」。

我在高铁上花了一点时间，写了一个新的友链界面须知。大家可以在公寓的公示板（[这里](/links)）查看完整的公示内容，另外，也欢迎老友们入住 OωO

### 房间号

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

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

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

### 申请

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

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

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

## 配置域名邮箱

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

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

事情的转机完全是因为一个毫不相干的事情：Twikoo 邮件通知模板。洪哥（[张洪Heo大佬](https://zhheo.com)）分享了一个 Twikoo 评论的模板（看[这里](https://blog.zhheo.com/p/169a1abb.html)），于是我也动了 DIY 的念头。在 ChatGPT 的帮助下，我写了一个还算好看的模板。

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

于是在一顿 brainstorm 后，园子的提醒小助手——可爱的 Info 酱（Infochan）诞生了。目前 Info 酱还没有一个准确完整的人设，欢迎各位喜欢 ACGN 的老友们提出您的高见（拜托了 qaq）。

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

```html
<!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://your.img.link" 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>
```

效果大概是：

![|425](https://img.viento.cc/IMG-20240804234219.avif)

然后我就想：那是不是应该给可爱的 Info 酱一个有标识性的邮箱？（`无止境的折腾.avif`）

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

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

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

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

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

然后我只能放弃。毕竟我现在还在深圳实地调研，也没时间和这个东西硬刚。

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

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

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

## 结语

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