草梅友仁的后花园

如何迁移 Newsletter 到 phplist

—

由

CaoMeiYouRen
于
阅读数: 49

参考链接：

phplist：https://github.com/phpList/phplist3

前言

最近突然收到 Tinyletter 发的邮件，说是 Tinyletter 将在 2024 年 2 月 29 日后关闭，这可让我虎躯一震，毕竟前不久（去年）才刚写过一篇博客来推荐 Tinyletter 呢！（详见：2023-09-24 如何通过 Tinyletter 订阅 RSS）

于是就问了下万能的 ChatGPT，有没有开源的邮件订阅系统（Newsletter），毕竟我可不想第二次迁移了。

ChatGPT 也是不负众望，给我推荐了几个开源的邮件订阅系统。

经过一番调研，感觉phplist还是蛮不错的，既有开源版本，也可以直接使用他们部署的版本，故特此记录。

img

正文

注册

废话不多说，先注册个账号再说，前往官网注册即可。

第一步是叫你取个名字，这个名字会用来当子域名，随便取即可，自己记得住就行了。

image-20240109221444475

第二步就是填邮箱和密码了，和 Tinyletter 一样，还是推荐用国外的邮箱，比如谷歌邮箱。但国内的邮箱应该也是可以用的，只要不被误认为垃圾邮件就好了。

image-20240109221620758

第三步这里就不截图了，主要是补充信息，可以不填。

完成之后就可以点击确定了，之后在邮箱里点下确认邮件，然后再等待一小会儿，就可以进入你的主页了。

主页

image-20240109221838946

【PS：这里如果你仔细观察的话，就可以注意到当前域名是之前取的名称+hosted.phplist.com，例如xxxx.hosted.phplist.com】

主页默认进来是全英文的，虽然有中文选项，但翻译烂的一批，还不如英文版看的舒服。

如果真的像我一样是个英语苦手的话，可以借助翻译工具使用，反正只需要知道各个页面是干什么用的就行了。

到了这里，各位读者最关心的就是 phplist 要怎么实现订阅页面（就像下面的 Tinyletter 这样），下面就来说明这个问题

image-20230924212351552

订阅页面

phplist 有关的内容位于 My account下面的AJAX Integration，参考上面的内容即可做出差不多的效果。

image-20240109222913785

第一步是创建一个订阅页面，在subscribe 页面操作即可。

然后就是记下 id，我这里是 1。

image-20240109224014638

<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>

image-20240109223702945

然后就可以看到订阅按钮了。

怎么说呢，没加样式的情况下确实简单的有些过分了。

话说如此，你就说不能不用吧！

image-20240109223218737

点开之后就可以开看到订阅页面，呃，怎么说呢，虽然相较于 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>

image-20240109234105414

样式上还是采用了原来的方案，如果要自己用的话请修改 action 字段中的链接！

可以前往本文底部查看效果。

美化邮件订阅页面

该部分暂时还未美化，但填充了一点内容。

image-20240109235423043

总结

本文介绍了如何迁移邮件订阅系统（Newsletter）到 phplist。博客首先提到了 Tinyletter 将在 2024 年 2 月 29 日关闭的消息，引发了作者的关注。作者经过调研后选择了 phplist 作为替代方案，并详细介绍了 phplist 的注册流程和主页界面。博客还提供了如何创建订阅页面的步骤，并附上了相应的代码。最后，博客指出虽然 phplist 的界面相对较简单，但可以通过美化订阅按钮和邮件订阅页面来改善用户体验。整体而言，该博客提供了一个详细的指南，帮助读者了解如何迁移 Newsletter 到 phplist，并提供了一些美化的建议。

【由 Chat LangChain 生成】

欢迎关注我的其它发布渠道

评论

发表回复