如何使用 NodeJS 建立博客

只想要程式碼？訪問倉庫

如果您想創建一個博客（或者如果您正在考慮重新設計您的博客，儘管您已經兩年沒有發布了），您會偶然發現很多選擇，這可能會令人難以置信；如果您無意中看到Josh 關於他的堆疊的最新帖子，很容易會對所顯示的堆疊感到不知所措。

但你不應該有這樣的感覺，從小事做起是永續發展的關鍵

我怎麼知道呢？因為我也有那種不知所措的感覺！
目前，該網站已使用 NextJS、Contentful 和 Markdown 完成，雖然向其添加帖子並不特別困難，但維護它卻很困難！

自 2021 年以來，我沒有添加任何與該網站相關的程式碼，此時我什至不知道是否能夠在本地運行它（而且我什至不願意嘗試）！

為了這個？特別的原因，我想宣講一個簡單的堆疊；經得起時間考驗的東西；一些「正常」的東西；那麼讓我們直接開始吧，好嗎？

開始那個專案吧！

請記住，這個項目將非常非常簡單，但它應該為您提供良好的基礎，讓您在此基礎上發展並達到天空。

我們將首先在選定的資料夾（對我來說是nodejs-blog）內初始化一個Node 項目，並安裝一些我認為會讓我們的生活更輕鬆的依賴項，例如Express、EJS、Marked 、好用的ol ' 身體解析器和灰質。

解釋依賴關係

我選擇添加 EJS 的原因是為了讓事情對我來說更容易一些，透過利用模板並只編寫更少的程式碼。如果您不熟悉，請稍等。太酷了！

對於標記和灰質，這非常簡單：markdown 規則，我希望我的帖子有適當的元數據，我計劃使用 frontmatter 創建這些元數據。

好吧，說回正事！

現在在您最喜歡的 IDE 中開啟您的專案並建立 main.js 檔案。我知道我們需要以下路由：/、/:post，並且我們需要在公共資料夾上有相關的內容，因此我們最初的 main.js 可以如下所示：

非常簡單，對吧？這個想法是在我的主頁（或/）上有一個帖子列表，並且只有我的帖子的單獨頁面。

是時候以前所未有的方式進行模板化了！

隨著基礎設定的完成，我們還需要一個基礎結構，EJS 將提供它。
首先建立一個名為views的資料夾；這將是您的pages 的根，可以這麼說，這意味著您可以在其中建立一個home.ejs 和一個post.ejs 只是為了標記我們將擁有的兩種類型的頁面。

在views內部建立一個資料夾，命名為partials；您可以將其視為我們的元件，並且您已經可以在此處建立3 個檔案：header.ejs、footer.ejs和head.ejs。

這是我們部落格的基本架構：2 個頁面和 3 個元件，僅此而已。其餘的將在 main.js 中處理

偏音

就像我提到的，模板允許我們不必像手動創建每個頁面那樣重複那麼多程式碼，並且我們的設定使我們在這方面完全放心。

基本上，常規的頭部位於頭部，頁腳的結束標籤和導覽列，以及頁眉的開始標籤。很簡單吧？

意見

現在我們有了元件我們可以讓頁面運作起來。

是的，它看起來很奇怪，但只要知道 include 將部分內容帶入我們的視圖中，並且有額外的語法使其工作（如果您對它的工作原理感興趣，請參閱文件）。

但是，慶幸的是，您現在已經與新工具進行了互動！ ？

部落格貼文！ ？

在專案的根目錄下建立一個 posts 資料夾，並在其中建立第一個 blog-post-1.md，其中包含以下內容：

裡面的---是我們的frontmatter，你馬上就能使用它！

是時候在螢幕上看到一些東西了！

回到我們的main.js，我們先處理 / 路由。正如我們所看到的，我們希望能夠獲取我們的帖子並循環它們以在螢幕上顯示有關它們的資訊。

為了簡化內容，我將在每個相關行旁邊留下註釋，而不是編寫大量文字來解釋內容！ ？

現在在終端機中執行 node main.js 並存取 localhost:3000。您應該會看到您的 / 路線填充了指向您創建的 Markdown 文件的連結！ ？

這裡有很多東西要消化，所以請自己嘗試每一行程式碼，看看它是否有意義。實際上，嘗試做不同的事情！取得貼文的摘要並找到在 home.ejs 檔案中顯示它的方法。為它瘋狂吧！附加圖像網址並嘗試顯示它們。玩吧！

現在，對於 /post 本身：

再次執行node main.js，並選擇主頁中的連結之一。您應該會看到您的 Markdown 文件呈現為 HTML！

像以前一樣，嘗試一些東西；將元素添加到 Markdown 並查看它們如何呈現；將新字段添加到 frontmatter 並讓它們顯示。

您現在是使用 Node 建立的部落格的自豪擁有者！ ？

就是這樣

我們還有很多事情要做，但這超出了我們的範圍，不是嗎？我們得到了一些工作，符合我們的意圖，這是完美的。現在輪到你了 ✨ 讓它發光 ✨
看看是否可以透過向 head.ejs 傳遞屬性來更改它的訊息！理想情況下，選項卡名稱將隨所選內容而變化。當我們在社群媒體上分享網站時，我們也應該擁有適當的元數據，因此我們也需要在頭部中加入 frontmatter 資訊。聽起來是個很好的挑戰，嗯？ ？

一如既往，如果您有任何疑問，請隨時透過 X 與我聯繫。

以上是如何使用 NodeJS 建立博客的詳細內容。更多資訊請關注PHP中文網其他相關文章！