建立和維護(hù)個人網(wǎng)站具有許多優(yōu)勢，包括您的平臺所有權(quán)以及探索網(wǎng)絡(luò)技術(shù)的機(jī)會。最近，我從自己的網(wǎng)站開始研究無服務(wù)器功能。本文分享了我的經(jīng)驗(yàn)和學(xué)習(xí)，使您能夠建立自己的經(jīng)驗(yàn)和學(xué)習(xí)！

快速介紹無服務(wù)器功能

無服務(wù)器功能（也稱為lambda功能或云功能）是您可以獨(dú)立編寫，主機(jī)執(zhí)行和執(zhí)行的獨(dú)立代碼段，獨(dú)立於您的網(wǎng)站，應(yīng)用程序或其他代碼。當(dāng)它們在服務(wù)器上運(yùn)行時，您不管理服務(wù)器基礎(chǔ)架構(gòu)。這簡化了強(qiáng)大的可擴(kuò)展應(yīng)用程序的開發(fā)。

為了獲得更深入的理解，CSS-Tricks的指南“無服務(wù)器前端開發(fā)人員的力量”是一個很好的資源。

項(xiàng)目目標(biāo)：簡單的電子郵件註冊表格

我的項(xiàng)目專注於創(chuàng)建具有特定約束的電子郵件註冊表格：

• 無JavaScript功能：表單應(yīng)僅使用CSS和HTML功能，從而允許進(jìn)行漸進(jìn)的增強(qiáng)功能。
• 沒有外部依賴性：目標(biāo)是自己編寫所有代碼。
• 無服務(wù)器功能集成：電子郵件數(shù)據(jù)處理將發(fā)生服務(wù)器端，而不是客戶端。

技術(shù)堆棧：11ty，Netlify和Buttondown

我的網(wǎng)站使用11ty，這是一個靜態(tài)站點(diǎn)生成器，允許創(chuàng)建HTML模板。 NetLify處理部署，對於無服務(wù)器功能至關(guān)重要，提供：

• 自動化的GitHub部署：簡化開發(fā)工作流程。
• NetLify表格：管理表單提交，而沒有自定義代碼。
• NetLify函數(shù)：基於表單數(shù)據(jù)啟用服務(wù)器端操作。

Buttondown用作電子郵件列表管理服務(wù)。重要的是，對於個人站點(diǎn)，這三個服務(wù)都提供免費(fèi)層。

表格的HTML

我的電子郵件訂閱表的HTML簡潔，利用NetLify表單屬性：

data-netlify="true"指示NetLify處理表單。 bot-field輸入充當(dāng)蜜罐來檢測機(jī)器人，自動從用戶隱藏。 Netlify的Akismet集成進(jìn)一步保護(hù)了垃圾郵件。 email輸入使用瀏覽器驗(yàn)證來增強(qiáng)用戶體驗(yàn)。

JavaScript進(jìn)行逐步增強(qiáng)

雖然Netlify表單提供自動重定向，但我更喜歡將用戶保留在頁面上。 JavaScript函數(shù)增強(qiáng)了表單的功能：

 const processForm = form => {
  // ...（提取API代碼而不重定向提交表單）...
};

該功能是由提交事件偵聽器觸發(fā)的，可以逐步增強(qiáng)表單，即使禁用JavaScript，也可以確保功能。

無服務(wù)器功能

NETLIFY函數(shù)位於functions/submission-created.js中，進(jìn)程表格提交：

 // ...（使用Node-fetch和環(huán)境變量來將數(shù)據(jù)發(fā)送到buttondown）... ...

該函數(shù)檢索電子郵件地址，使用node-fetch通過其API將其發(fā)送到Buttondown，並記錄調(diào)試結(jié)果。環(huán)境變量安全地存儲了Buttondown API鍵。

部署和本地測試

編寫函數(shù)，配置netlify.toml和設(shè)置環(huán)境變量後，通過NetLify的GitHub集成，部署是簡單的?？梢允褂肗etLify Dev（ npm i netlify -g ，然後是netlify dev ）進(jìn)行本地測試，儘管表單提交測試需要預(yù)覽構(gòu)建。

未來的改進(jìn)

未來的增強(qiáng)功能可能包括向用戶提供實(shí)時反饋，例如指示是否已經(jīng)訂閱了電子郵件地址。

結(jié)論

使用大約50行代碼，我創(chuàng)建了一個功能齊全的電子郵件註冊表格。 HTML，CSS，JavaScript和NetLify的無服務(wù)器功能的組合導(dǎo)致了抗垃圾郵件，用戶友好的表單，無論JavaScript可用性如何，都可以使用。

以上是使用NetLify表單和NetLify功能來構(gòu)建電子郵件註冊小部件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！