RSS+Tinyletter+Zapier實現部落格更新郵件推送

cover
查看原文

~~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 代碼：

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