使用Nunjucks構建包含組件的靜態站點
即使您根本不使用任何客戶端JavaScript來構建站點，也不意味著您必須放棄使用組件構建的方式。了解如何藉助HTML預處理器構建靜態站點。
用組件構建網站我敢說是一個很好的注意，並且現在非常流行。我們不是逐個構建整個頁面，而是構建一個組件系統（想想：搜索表單，文章卡片，菜單，頁腳），然後用這些組件將網站拼湊起來。
像React和Vue這樣的JavaScript框架非常強調這種方式。但即使您根本不使用任何客戶端JavaScript來構建網站，也並不意味著您必須放棄構建組件的方式！通過使用HTML預處理器，我們可以構建一個靜態站點，並且仍然可以將我們的站點及其內容抽象為可重用的組件。
靜態網站現在風靡一時，理所當然，因為它們快速，安全且便宜。甚至Smashing Magazine也是一個靜態網站，信不信由你！
讓我們來看看我最近使用這種技術建立的網站。我使用CodePen項目來構建它，它提供Nunjucks作為預處理器，完全適合這項工作。
具有一致的標題，導航和頁腳的四頁網站
這是一個微型網站。它不需要一個完整的CMS來處理數百頁。它不需要JavaScript來處理交互性。但它確實需要一些共享相同布局的頁面。
所有頁面都有一致的頁眉和頁腳
僅HTML就沒有很好的解決方案。我們需要的是imports。像PHP這樣的語言可以用，但是靜態文件主機不運行PHP（故意地）並且單獨的HTML沒有幫助。幸運的是，我們可以使用Nunjucks預處理includes。
可以使用PHP等語言導入組件
這裡創建一個布局非常有意義，包括標題，導航和頁腳的HTML塊。 Nunjucks模板具有塊的概念，允許我們在使用布局時將內容插入到該點。
The Power of Serverless
{% include "./template-parts/_header.njk" %}
{% include "./template-parts/_nav.njk" %}
{% block content %}
{% endblock %}
{% include "./template-parts/_footer.njk" %}
請注意，包含的文件名為_file.njk。這不是完全必要的。它可能是header.html或icons.svg，但是它們的命名是這樣的，因為1）以下劃線開頭的文件是一種標準的方式，說它們是部分的。在CodePen項目中，這意味著他們不會嘗試單獨編譯。2）通過命名.njk，我們可以在那裡使用更多的Nunjucks東西。
這些位都沒有任何特殊之處。它們只是我們四個頁面中每一頁都要使用的一小部分HTML。
Just a no-surprises footer, people. Nothing to see here.
通過這種方式，我們可以進行一次更改並將更改反映在所有四個頁面上。
使用四頁的布局
現在我們的四個頁面中的每一個都可以是一個文件。讓我們從index.njk開始，在CodePen項目中，它將自動處理並在每次保存時創建一個index.html文件。
從index.njk文件開始
這是我們可以放在index.njk中使用布局並刪除該塊中的一些內容：
{%extends"_layout.njk"%}
{%block content%}
Hello, World!
{%endblock%}
這將為我們帶來一個功能齊全的主頁！太好了！這四個頁面中的每一個都可以做同樣的事情，但在塊中放入不同的內容，我們自己將有一個易於管理的四頁網站。
index.njk文件被編譯到index.html中
為了記錄，我不確定我是否會將這些小塊稱為可重用組件。我們只是高效地將布局分解成塊。我認為一個組件更像是一個可重用的塊，它接受數據並用該數據輸出自身的唯一版本。我們會做到這一點的。
製作動態導航
現在我們在四個頁面上重複了相同的HTML塊，是否可以將獨特的CSS應用於各個導航項以識別當前頁面？我們可以使用JavaScript並查看window.location等，但我們可以在沒有JavaScript的情況下完成此操作。訣竅是在每個頁面的上放一個類，並在CSS中使用它。
在我們的_layout.njk中，我們將body輸出一個類名作為變數：
然後在我們在單個頁面上調用該布局之前，我們設置該變數：
{%set body_class ="home"%}
{%extends"_layout.njk"%}
假設我們的導航結構如下
Home
...
現在我們可以根據需要定位該鏈接並應用特殊樣式：
body.home .nav-home a,
body.services .nav-services a{
/* continue matching classes for all pages... *//* unique active state styling */
}
動態導航
哦，那些圖標？這些只是我放在一個文件夾中的個別.svg文件，然後像這樣引用
{%include"../icons/cloud.svg"%}
這樣可以允許我像這樣給它們加樣式：
svg{fill:white;}
假設裡面的SVG元素已經沒有填充屬性。
在Markdown中創作內容
我的微型網站的主頁上有很多內容。我當然可以在HTML本身中編寫和維護它，但有時將這種類型的東西留給Markdown是很好的。 Markdown感覺寫得更乾淨，而且當它有很多副本時可能更容易查詢。
這在CodePen項目中非常簡單。我創建了一個以.md結尾的文件，它將自動處理成HTML，然後包含在index.njk文件中。
markdown中的文件在CodePen Projects上編譯成HTML
{%block content%}
{%include"content/about.html"%}
{%endblock%}
構建實際組件
讓我們將組件視為可重複的模塊，這些模塊在數據中傳遞以創建自己。在像Vue這樣的框架中，您將使用單個文件組件，這些組件是模板化HTML，作用域CSS和特定於組件的JavaScript的孤立部分。這太酷了，但我們的微型網站不需要任何花哨的東西。
我們需要基於一個簡單的模板創建一些「卡片」，所以我們可以構建這樣的東西：
使用模板創建可重複的組件
使用Nunjucks中的Macros方法可以構建可重複的組件。Macros非常簡單。它們就像HTML有函數一樣！
{%macrocard(title, content)%}
{{title}}
{{content}}
{%endmacro%}
然後根據需要調用它：
{{card("My Module","Lorem ipsum whatever.")}}
這裡的原則是數據和標記分離。這給了我們一些非常明確和切實的好處：
如果我們需要對HTML進行更改，我們可以在macro中更改它，並在使用該macro的任何地方進行更改。
數據不會跟標記耦合。
數據可能來自任何地方！正如我們上面所做的那樣，我們將數據編碼為對macro的調用。或者我們可以引用一些JSON數據並循環它。我相信你甚至可以想像成一個JSON數據的設置，這個數據可能來自某種無頭CMS，構建過程，無伺服器功能，cron作業等等。
現在我們有了這些可重複的卡片，它們結合了數據和標記，正是我們所需要的：
HTML在macro中受到控制，而數據可以來自任何地方
隨心所欲地製作多個組件
你可以採取這個想法，並與它一起運行。例如，想像一下Bootstrap本質上是一堆CSS，你遵循HTML模式使用它。您可以將這些模式中的每一個都設置為macro並根據需要調用它們，實質上是對框架進行組件化。
如果您願意，可以嵌套組件，採用一種原子設計理念。 Nunjucks也提供邏輯，這意味著只需傳入不同的數據就可以創建條件組件和變數。
在我製作的簡單網站中，我為網站的創意部分製作了一個不同的macro，因為它涉及略有不同的數據和略有不同的卡片設計。
可以根據需要創建任意數量的組件
針對靜態站點的快速案例
我可能會爭辯說，大多數站點都受益於基於組件的體系結構，但只有一些站點適合靜態。我在許多後端語言主導的網站上工作過。
我的一個網站CSS-Tricks，有一些像用戶登錄一樣的複雜的許可權系統：論壇，評論，電子商務。雖然這些都沒有使我完全停止靜態化的想法，但我常常很高興我有一個資料庫和後端語言可以使用。它幫助我建立我需要的東西，並將事物保持在一個屋檐下。
走向並擁抱靜態生活！
請記住，以我們在本文中所做的方式構建的好處之一是最終結果只是一堆靜態文件。這種方式易於託管，快速，安全。然而，我們不必放棄對開發人員友好的方式工作。此站點將很容易更新和維護。
最終的項目是一個名為「The Power of Serverless for Front-End Developers 」的微型網站（https://thepowerofserverless.info/）
靜態文件託管是無伺服器運動的一部分。
您可以在CodePen上查看所有代碼（甚至可以為自己分配一份副本）。它使用CodePen Projects在CodePen上構建，維護和託管。
CodePen Projects處理我們在這裡談到的所有Nunjucks內容，以及Sass處理和圖像託管等內容，我利用這些內容進行搭建網站。您可以基於Gulp或Grunt構建一個相同的副本。相關demo地址：https://github.com/ericmotil/gulp-nunjucks-sass。
END
本文由大前端學堂編譯出品，原文來自smashingmagazine，作者Chris Coyier，若轉載請註明出處，轉發感激不盡。
TAG:大前端學堂 |