傑基爾的內聯CSS

鑰匙要點

Jekyll中的Inline CSS
• 對於具有足夠小CSS的站點的有價值的工具，因為它允許您在第一個服務器往返中發送所有樣式，從而消除了對外部樣式表的需求。這對於交付塑造頁面頂部和主要內容區域外觀的關鍵樣式特別有效。 > 在Jekyll中，可以將樣式直接包含在_的文件夾中，然後在文檔頭部內導入。如果使用SASS，則可以使用SCSSIFY過濾器將SASS格式的字符串轉換為CSS，即使在插入樣式時也可以使用SASS。
jekyll中的SCSSIFY濾鏡還尊重您的SASS配置，從_config.yml尊重您的SASS配置。因此，如果將輸出樣式設置為在配置文件中壓縮，則過濾器將將SASS彙編為壓縮CSS，以輔助Minification。
• 我長期以來一直是Jekyll的粉絲。它有一些缺陷，並不總是是工作的最佳工具，但是，它可能是某些情況的絕佳工具。我已經失去了我與之建立的網站的數量。

>最近，我與Jekyll一起製作了另一個網站，這次是簡化的JavaScript術語，我發現自己面臨著一個不太非典型的問題 - 將樣式包裹在。

需要

您可能聽說過關鍵CSS。該概念背後的想法是盡快提供關鍵樣式（負責頁面頂部和主要內容區域外觀的樣式），以便瀏覽器在訪問內容之前沒有延遲。

>有一個共同的規則說，可以發送以下14KB以下頁面頂部所需的內容，因為這大約是服務器在一個往返中可以處理的程度。 Google PagesPeed Insights在他們的文檔中提供了有關此信息的更多信息，因此，如果您想知道為什麼它有效，請隨時查看。

>

在某種程度上，如果您的CSS足夠小（就像SJSJ一樣），則可以將其全部嵌入到>中，並在第一個往返中將其全部發送在一起，而無需使用外部樣式表。那不是超級常見的，但是當它是相當的

時，

回到jekyll

>因此，我的想法是在文檔頭部中包含