RSS+Tinyletter+Zapier实现博客更新邮件推送

查看原文

rss 很方便，但有人不会用（？

为了提供更多元的订阅方式 (？

吐槽

我查了很多网上的教程，包括 mailChimp，mailsender 还有 power automate 等等，但都不行，有各种各样的原因。。。不过最后还是找到了

思路

在 Zapier 使用 Rss 作为触发器，给 Tinyletter 发送邮件。

Tinyletter 分发邮件给填写过表单的访客。

思路来自于 Newsletter for Hugo Blog 在此基础上增加了一些细节并翻译成中文。

Tinyletter

-> Tinyletter 官网

注册过程不再赘述。

进入个人档案

填写表单，Newsletter 暂时不用管，随便填一些，填完记得保存。 如果出现跳转，那是有必填项目没填 （它这提示我当时不知道为什么就是没看到，卡了好久。。。

\qquad 把这里打马赛克的地方复制下来，下一阶段要用
\qquad 红色框出的网址是访客填邮箱用的，记得添加到博客，下一步会对其美化

个性化表单界面 (views 指不同情况下，报错、邮件格式错误.... 的界面)

Tinyletter 部分完成了。
注意，每次博客文章更新，你会在 Draft 一栏看到 Zapier 发送的邮件，你需要手动发送给订阅者（不过是一键的）

Zapier

-> zapier 官网

注册过程不再赘述。

进入仪表盘，新建 zap

设置触发器，按下图的红框依次操作

即当 RSS 更新时触发发送电子邮件

设置动作，按下图红框依次操作

下图的 1、2、3 依次填入：

\qquad To : 刚才获取的 tinyletter 的邮件地址

\qquad Subject : 填你喜欢的名字

\qquad Body : 填入发件内容，可以参考我附在末尾的 html 代码

最后在仪表盘看到这种效果就行了

附 html 代码：

Copy




本站更新了
发送时间
/*这里的标题和链接都要改成自己的（插入的数据）*/
标题 {{205114825__title}}
跳转



.post {
margin-top: 25px;
margin-left: 25px;
width: 300px;
height: 100px;
background: #d5d5d5;
border-radius: 8px;
}
.post p {
margin-top: 25px !important;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.title {
font-weight: bold;
}
a {
text-decoration: none; /* 去掉下划线 */
color: white;

}
#time {
background: linear-gradient(to right, #365262 0%, #1c6a54 50%, #254050 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#time {
display: block;
margin: 0 auto;
font-weight: bold;
text-align: center;
}
h1 {/*这里可以改成自己喜欢的渐变色*/
background: linear-gradient(to right, #365262 0%, #1c6a54 50%, #254050 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin-top: 20px;
}
p {/*这里可以改成自己喜欢的渐变色*/
background: linear-gradient(to right, #365262 0%, #1c6a54 50%, #254050 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.main-img {
width:100%;
overflow:hidden;
pointer-events:none;
margin-top: -120px;
border-radius: 8px;
width: 300px;
display: block;
margin: auto;
margin-top: 40px;
}
.main {
padding:40px 0px 20px;
margin:0px;
background-color: #f1e6e6;
width: 350px;
height: 700px;
border-radius: 8px;
}
.footer {
width: 350px;
margin-left: 10px;
}
.p {
display: flex;
top: 10px;
align-items: center;
justify-content: center;
height: 100%;
font-size: 10px !important;
}

.link {
font-size: 15px;
background: #b3b3b3;
border-radius: 8px;
margin: 40px auto; /* 设置左右外边距为 auto */
padding: 5px;
color: white;
width: 150px;
height: 50px;
display: block; /* 设置元素为块级元素 */
text-align: center;
font-weight: bold;
line-height: 50px;
}

.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
margin: auto;
box-shadow: inset 0 0 10px rgb(22, 22, 22);
background-image: url(https://cdn.luogu.com.cn/upload/image_hosting/py13qt58.png);
background-size: 95% 100%;
}


fetch('http://quan.suning.com/getSysTime.do')
.then(response => response.json())
.then(data => {
// 获取时间
var timeString = data.sysTime2;
// 将时间显示在页面上
document.getElementById('time').textContent = timeString;
});


