如何用 Netlify CMS 製作電子報生成器

/

本篇要解決的問題

去年寫過一篇〈用 Vue.js 製作圖片版 EDM 生成器〉,有效解決了每次要製作 EDM 都來找工程師的問題。但最近又有一個問題,就是若一份 EDM 的版型每次都一樣,只有文字的部份要改,如果要先請設計出圖後再用生成器製作,會很耗設計師的時間。而且,如果做成文字版的 EDM,簡單的版型還可以支援 RWD。

剛好前陣子看了一下 Netlify CMS,想看能不能當成一個模板生成器,後來發現不太適合就沒再研究,這次拿來當作電子報生成器卻是恰恰好合用,就做了一個給維運的人去使用。

本篇就是整理實作一個用 Netlify CMS 為電子報生成器的筆記文。


製作一份電子報模板

因為本篇的生成器是替換電子報文字的部份,因此必須要先製作出一份電子報出來。

這邊直接用 MJML 這套工具來做,MJML 的使用方式可看這篇:

製作 RWD email 工具:MJML

完成的電子報長這個樣子:

電子報模板範例
電子報模板範例

文字的部份就是準備從 Netlify CMS 上輸入標題、內文後替換的。


一鍵安裝 Netlify CMS

安裝 Netlify CMS 很方便,官方就有提供一鍵安裝。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

首先進到官網一鍵安裝的頁面:https://www.netlifycms.org/docs/start-with-a-template/

可以看到能夠安裝的模板有很多:

Netlify CMS 可以一鍵安裝的清單
Netlify CMS 可以一鍵安裝的清單

Augustus 用過的有 Hugo、Middleman Site、Eleventy,Gatsby 要安裝一直出現問題,就沒試過。

這邊最推薦的是 Eleventy,因為它產生的檔案最簡單,不會到太複雜讓人眼花撩亂,我們就按下 Eleventy Starter 下的「Deploy to Netlify」的按鈕,點擊後會看見以下畫面:

Deploy to Netlify
Deploy to Netlify

我們要有一個 GitHub 或 GitLab 的帳號,之後由 CMS 產出的靜態頁面,都會存在我們帳號的專案裡。

點擊「Connect to GitHub」後,會先要我們登入 GitHub 的帳號,接著進到下一步:

輸入專案名稱
輸入專案名稱

第二步就是輸入存放在 GitHub 上的專案名稱,如果懶得想,Netlify 也會給一個預設的如上圖。

確定好名稱,按下「Save & Deploy」就會開始安裝所有需要的檔案,安裝完後會看到像這樣的畫面:

一鍵安裝 Netlify CMS 完成後畫面
一鍵安裝 Netlify CMS 完成後畫面

網址 點擊後就可以看到一鍵生成的網站,之後生成出的電子報頁面也是在這個站裡。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Site settings 就是對這個專案、網站的設定,像是如果想要改變使用者的權限也是在設定頁中。

Deploy 結果 是每一次部署上 GitHub 的結果,Published 就是部署成功並發佈成頁面。


開通管理員帳號

Netlify CMS 安裝完成後,就會有前台跟後台,上圖中顯示的網址是前台的網址,還有一個後台,網址就是在前台網址後面加上:admin

比方本範例中的網址是:

https://loving-lovelace-90e020.netlify.app/

那後台網址就是:

https://loving-lovelace-90e020.netlify.app/admin

必須要有管理員的權限才能進到後台。

在上一步我們按下「Save & Deploy」後,在 Netlify 安裝 CMS 的同時,我們 GitHub 帳號的 email 裡也會收到幾封信,其中一封主旨開頭是「You’ve been invited to join……」的信件中,會看到如以下訊息:

開通權限信內容
開通權限信內容

點擊「Accept the invite」,會開啟我們網站的頁面,並出現一個輸入密碼的框:

輸入密碼
輸入密碼

輸入好登入密碼,按下「Sign up」,就會再次出現是用哪個帳號登入:

顯示登入帳號
顯示登入帳號

看到這個畫面就代表開通管理者的帳號了,之後輸入帳密便可以登入後台。

新增其他管理者

如果想要新增其他管理員,在 Netlify 的後台中按下「Identity」,接著按下「Invite users」,輸入對方的 email 後按下「Send」即可。

邀請新管理員
邀請新管理員

免費版總共可以有五位管理員。

開放所有人皆可為管理員

管理員的設定也可以設為全開放的,知道網址的人都可以註冊為管理員。

本篇最後實作出的 Demo,為了可以給大家看到後台的使用狀況,因此有設定所有人皆可註冊。

Identity 頁點擊「Settings and usage」,頁面往下滑一點,會看見「Registration preferences」這個區塊,把這邊的設定改為「Open」就可以:

開放所有人都可以註冊
開放所有人都可以註冊

開啟第三方登入功能

除了一般的輸入帳密登入,也可以開啟第三方登入功能。

Identity 的頁面點擊「Settings and usage」,頁面往下拉,會看見一個「External providers」的區塊:

新增第三方登入功能
新增第三方登入功能

第三方登入功能,像是 Google,免費版的 Google app 就只能用 Netlify 他們家的,無法自己建立一個來用。

免費版只能用 Netlify 的 app
免費版只能用 Netlify 的 app

開通第三方登入功能後,之後要登入進 admin 時,就會看見第三方登入的按鈕可以使用:

成功新增第三方登入功能
成功新增第三方登入功能

下載、更新程式碼

Netlify CMS 安裝完成,就會有一個前後台皆俱備的網站,原始碼會存在我們的 GitHub 中。

clone GitHub 的專案到本機,便可以把網站改成我們要的樣子。

資料夾裡面,需要修改的都在「src」裡,裡面可以看到有以下資料夾及檔案:

_data

後台「Settings」中的結果,除非我們在後台設定時刪掉東西想補回,不然不用理它。

posts

後台建立文章後,所有產出的頁面會收在這個資料夾中,不用理它。

statics

靜態檔案 CSS、圖檔會收在這邊,因為Eleventy 這個模板用的是 Tailwind CSS,基本上我們不太需要自己手刻 style,直接用 Tailwind CSS 的 class name 就可以。

以上三個是我們不必去理會的資料夾,以下的三個則是重要的,我們會不斷修改的檔案都放在裡面。

admin/*

後台的檔案就放在這。

index.html 這個檔不用理它,除非我們自己想在後台頁上增加其他的程式碼。

conifg.yaml 這個檔案就是我們後台的配置設定,我們後台需要哪些欄位都是寫在這份檔案中。

官方的文件有提供 config 的說明,因為可以設定的東西蠻多的,請各位棒油直接看文件來修改。

Configuration Options

Collection Types

Widgets

_includes/*

前台頁面的所有檔案就在這個資料夾中。

default.html

所有頁面的模板檔,把它當成是 Pug 的 Template 就比較好理解。其他頁面不一定要使用這個模板,改掉 layout: defaultdefault 值就可以使用其他自己寫的模板。

posts.html

列表頁中,每一個文章迴圈的檔案。

partials/content.html

首頁中,那四個方塊的迴圈檔案。

partials/footer.html、partials/navbar.html

footer 跟導覽列的檔案。

blog.html:

這個檔案就是單文頁,我們把我們製作好的 EDM,它的 HTML 程式碼直接複製後貼上,取代原有的 HTML。

取代掉以後,因為我們的 EDM 要抓後台寫的值,因此要改抓後台值的部份就不能寫死,要寫成參數讓頁面去抓。

寫參數的方式跟 Vue.js 一樣:{{ 參數屬性 }}

參數屬性要看 adim/configy.yaml 上寫的是什麼,比方我們寫的是以下:

參數屬性就是看 name 值,比方我們我們某一行要寫入的是後台的「標題」,它的 nametitle,那我們就在那行寫:{{ title }}

比較特別的是放入 Markdown 的部份,我們在 config 寫的:

{ label: "內文", name: "body", widget: "markdown" }

要寫進 HTML 時,不能寫 {{ body }},要寫:

{{ content | safe }}

而且,Augustus 還找不到可以放多個 Markdown 的方法,如果有知道怎麼使用多個 Markdown 的棒油們請留言提供。

blog/index.html

列表頁的檔案。

src/index.html

首頁的檔案。

檔案改成自己要的以後,在 push 到 GitHub 上,等 Netlify 後台顯示成 Published,前台的頁面重整,就可以看到修改後的結果。

因為 Augustus 所在的公司有發報系統,用網址就可以進行發報,因此只需要把最後生成的頁面給發報的部門即可使用。

如果大家的發報系統需要原始碼,那就只要在生成的頁面中檢視原始碼,整個複製貼上後即可。


Demo、原始檔

本篇最後實作出的 Demo 網站在這,有開放所有人都可以註冊使用,Demo 主要是示範用,給各位棒油看一下 Netlify CMS 的後台以及產出的頁面,Augustus 會不定時上去刪除。

Demo:https://amazing-wescoff-242584.netlify.app/

原始碼也整理在 GitHub 上,取用前請點個星星,或是請 Augustus 喝杯咖啡也行:

https://github.com/letswritetw/letswrite-netlify-cms-edm

Summary
如何用 Netlify CMS 製作電子報生成器
Article Name
如何用 Netlify CMS 製作電子報生成器
Description
本篇大綱:本篇要解決的問題。製作一份電子報模板。一鍵安裝 Netlify CMS。開通管理員帳號、新增其他管理者、開放所有人皆可為管理員。本篇就是整理實作一個用 Netlify CMS 為電子報生成器的筆記文。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

PWA

PWA 學習筆記-1:Cache、Workbox 基本使用

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

Front-End

不會寫程式,也能自己架一個免費網站:Publii + GitHub Pages

Front-End

如何使用 Vivus.js 製作輕量快速 SVG 動畫

Google Others

用 reCAPTCHA v3 來做非機器人驗證

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

API

接氣象局 API、跨網域 AJAX 資料

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言