cover

Update Log

2023

09-16

更新提醒

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

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

提醒：Tinyletter会无理由封禁用户账户，我的账号已经被封了两次了，不建议使用。最近我会迁移邮件服务提供商并更新博客。在此之前，博客更新不会有邮件提醒（不过依然可以填写邮箱，我会迁移数据到新的服务商）

吐槽

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

思路

  1. 在Zapier使用Rss作为触发器，给Tinyletter发送邮件。
  2. Tinyletter分发邮件给填写过表单的访客。

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

Tinyletter

-> Tinyletter官网

注册过程不再赘述。

  1. 进入个人档案

image-20230824094043823

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

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

image-20230824095925176

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

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

Zapier

-> zapier官网

注册过程不再赘述。

  1. 进入仪表盘，新建zap

image-20230824092054322

image-20230824092212178

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

image-20230824092603376

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

image-20230824092641233

image-20230824092705303

image-20230824092830760
  1. 设置动作，按下图红框依次操作

image-20230824093013819

image-20230824093103530

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

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

\qquad Subject : 填你喜欢的名字

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

image-20230824093142158

image-20230824093647329

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

image-20230824093800196

附html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<div class="main">
	<div class="circle-cover" style="text-align: center;"><div class="circle"></div></div>
	<img class="main-img" src="https://cdn.luogu.com.cn/upload/image_hosting/0xd4prt2.png">	
	<h1>本站更新了</h1>
	<P>发送时间</P>
	<span id="time"></span>/*这里的标题和链接都要改成自己的（插入的数据）*/
	<div class="post"><p class="title">标题<br>{{205114825__title}}</p></div>
	<a href="{{205114825__link}}"><div class="link">跳转</div></a>
	<img class="footer" src="https://raw.gitmirror.com/genkaim/blog_img/main/data/line_s.png">
</div>
<style>
	.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%;
	}
</style>
<script>
fetch('http://quan.suning.com/getSysTime.do')
  .then(response => response.json())
  .then(data => {
    // 获取时间
    var timeString = data.sysTime2;
    // 将时间显示在页面上
    document.getElementById('time').textContent = timeString;
  });

</script>
</html>