参考链接：
前言
最近突然收到 Tinyletter 发的邮件，说是 Tinyletter 将在 2024 年 2 月 29 日后关闭，这可让我虎躯一震，毕竟前不久（去年）才刚写过一篇博客来推荐 Tinyletter 呢！（详见：2023-09-24 如何通过 Tinyletter 订阅 RSS）
于是就问了下万能的 ChatGPT，有没有开源的邮件订阅系统（Newsletter），毕竟我可不想第二次迁移了。
ChatGPT 也是不负众望，给我推荐了几个开源的邮件订阅系统。
经过一番调研，感觉phplist还是蛮不错的，既有开源版本，也可以直接使用他们部署的版本，故特此记录。
正文
注册
废话不多说，先注册个账号再说，前往官网注册即可。
第一步是叫你取个名字，这个名字会用来当子域名，随便取即可，自己记得住就行了。
第二步就是填邮箱和密码了，和 Tinyletter 一样，还是推荐用国外的邮箱，比如谷歌邮箱。但国内的邮箱应该也是可以用的，只要不被误认为垃圾邮件就好了。
第三步这里就不截图了，主要是补充信息，可以不填。
完成之后就可以点击确定了，之后在邮箱里点下确认邮件，然后再等待一小会儿，就可以进入你的主页了。
主页
【PS：这里如果你仔细观察的话，就可以注意到当前域名是之前取的名称+hosted.phplist.com，例如xxxx.hosted.phplist.com】
主页默认进来是全英文的，虽然有中文选项，但翻译烂的一批，还不如英文版看的舒服。
如果真的像我一样是个英语苦手的话，可以借助翻译工具使用，反正只需要知道各个页面是干什么用的就行了。
到了这里，各位读者最关心的就是 phplist 要怎么实现订阅页面（就像下面的 Tinyletter 这样），下面就来说明这个问题
订阅页面
phplist 有关的内容位于 My account下面的AJAX Integration，参考上面的内容即可做出差不多的效果。
第一步是创建一个订阅页面，在subscribe 页面操作即可。
然后就是记下 id，我这里是 1。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/phplist/phplist-subscribe-0.2.min.js"></script>
<div id="phplistsubscriberesult"></div>
<form action="https://caomeiyouren.hosted.phplist.com/lists/?p=subscribe&id=1" method="post" id="phplistsubscribeform">
<input type="text" name="email" value="" id="emailaddress" />
<button type="submit" id="phplistsubscribe">Subscribe to our newsletters</button>
</form>
然后就可以看到订阅按钮了。
怎么说呢，没加样式的情况下确实简单的有些过分了。
话说如此，你就说不能不用吧！
点开之后就可以开看到订阅页面，呃，怎么说呢，虽然相较于 Tinyletter 确实丑了点，但也不是不能用，现阶段还是能用就行了，美化的事之后再考虑。
到此为止，就已经初步实现了邮件订阅功能，如果只是能用就行的话，可以到此结束了
美化
不过，作为一个多年老前端，对于如此丑陋的前端页面是无法容忍的，所以需要狠狠的美化一下！把以前的代码拿过来抄一下！
美化的部分主要是两个，一个是邮件订阅按钮，毕竟长得那么丑，读者看了就不想订阅了；另一个是邮件订阅页面，长得太丑也很劝退读者！
美化订阅按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/phplist/phplist-subscribe-0.2.min.js"></script>
<style>
/*
邮件订阅样式
*/
.sub_box {
display: block;
box-sizing: border-box;
}
#sub-form,
#phplistsubscribeform {
border: 0;
padding: 3px;
text-align: center;
display: flex;
justify-content: center;
}
p#subscribe-email,
p#subscribe-submit {
margin: 0;
box-sizing: inherit;
display: block;
}
p#subscribe-email {
flex-grow: 1;
max-width: 400px;
}
.sub-input {
font-size: 16px;
padding: 15px 23px 15px 23px;
margin: 0px;
border-radius: 0px;
border-width: 1px;
line-height: 1.3;
box-shadow: none;
}
.input-email {
margin: 0;
width: 100%;
color: #666;
border: 1px solid #ccc;
max-width: 100%;
}
.input-submit {
margin: 0px;
margin-left: 10px;
border-color: transparent;
border-style: solid;
background-color: #222;
color: #fff;
box-sizing: border-box;
min-width: auto !important;
}
</style>
</head>
<body>
<div class="pagination">
<div class="pagination__title">
<span class="pagination__title-h">📮邮件订阅</span>
<hr />
</div>
<p style="text-align: center;">想我每次发布新东西时都收到电子邮件吗？</p>
<div class="sub_box">
<div id="phplistsubscriberesult"></div>
<!-- 修改此处的 action -->
<form id="phplistsubscribeform" action="https://caomeiyouren.hosted.phplist.com/lists?p=subscribe&id=1"
method="post">
<p id="subscribe-email">
<input type="email" name="email" value="" id="emailaddress" placeholder="输入你的邮箱地址..." required
class="sub-input input-email" />
</p>
<p id="subscribe-submit"> <button type="submit" id="phplistsubscribe"
class="sub-input input-submit">订阅</button></p>
</form>
</div>
</div>
</body>
</html>
样式上还是采用了原来的方案，如果要自己用的话请修改 action 字段中的链接！
可以前往本文底部查看效果。
美化邮件订阅页面
该部分暂时还未美化，但填充了一点内容。
总结
本文介绍了如何迁移邮件订阅系统（Newsletter）到 phplist。博客首先提到了 Tinyletter 将在 2024 年 2 月 29 日关闭的消息，引发了作者的关注。作者经过调研后选择了 phplist 作为替代方案，并详细介绍了 phplist 的注册流程和主页界面。博客还提供了如何创建订阅页面的步骤，并附上了相应的代码。最后，博客指出虽然 phplist 的界面相对较简单，但可以通过美化订阅按钮和邮件订阅页面来改善用户体验。整体而言，该博客提供了一个详细的指南，帮助读者了解如何迁移 Newsletter 到 phplist，并提供了一些美化的建议。
【由 Chat LangChain 生成】
本文作者：草梅友仁
本文地址：https://blog.cmyr.ltd/archives/92ad8b7d.html
版权声明：转载请注明出处！
