231 lines
10 KiB
Markdown
231 lines
10 KiB
Markdown
---
|
||
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)的友链页面申请须知的一部分，我看完觉得更有意思了。
|
||
|
||
|
||
|
||
正好我这几天对于独博有了一些别的不成熟的感触（见[我的上一期周报]({{< 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>
|
||
```
|
||
|
||
效果大概是：
|
||
|
||
|
||
|
||
然后我就想：那是不是应该给可爱的 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）。
|
||
|
||
## 结语
|
||
|
||
兜兜转转也算是简单把园子装修了一下。以后再继续慢慢装，反正我离敲不动键盘还剩好多年呢。
|