skeleventy

高度入門骨架

Skeleventy為您提供了堅實的基礎，以構建快速且易於訪問的靜態網站。查看演示站點。

特徵

• 用SCSS和Laravel混合使用乾淨，最小的構建管道，用於編譯資產
• 戈爾科（Gorko），一個聰明的小笨蛋式公用工具類生成器
• 珀格斯人去除未使用的CSS
• html minifier
• 支持ES2017 JavaScript，並由Babel彙編
• SEO友好頁面元數據，包括開放圖和Twitter
• 圖像懶負荷
• 移動導航
• XML站點地圖
• 乾淨簡單的博客，具有類別和特色圖像

入門

先決條件

節點v10+

安裝

1. 克隆回購git clone https://github.com/josephdyer/skeleventy.git
2. cd進入項目文件夾並運行npm install
3. 通過運行npm run dev提示啟動本地開發服務器： Elevient bure bure bure bute！

文件夾結構

高度

• site/包含所有全局數據，模板和內容
• utilities/包含高高的助手filters和transforms
• 每個頁面都應具有包含index.md文件的各自的文件夾
• 然後，您可以為每個頁面選擇最合適的佈局（如果需要的話，請創建更多）
• 導航由官方高度導航插件提供動力

資產

• css/用於編譯的CSS
• js/用於編譯JavaScript
• images/包含我們網站的圖像，SVG圖標精靈和用於元圖像的文件夾（OG，Twitter等）

構建管道

Laravel Mix為我們在WebPack頂部提供了一個不錯的API層。 Skeleventy使用一個簡單的設置，但是您可以利用與自定義的WebPack配置，代碼分配和插件（例如PostCSS）的混合使用（如果您願意的話）。

您會在resources/混音將在其中觀看這些目錄的任何更改的資源中找到網站未編譯的SCS和JS。提示：最好在創建任何新的部分或文件夾時始終重新啟動服務器

SCSS

• scss/構造成自明的子文件夾
• _config.scss文件是您可以更改網站的顏色和gorko生成的公用事業類別的地方
• 印刷量表已經使用我個人喜歡的主要第三秤進行了設置。
• 提示：有關更多秤，請查看類型秤

戈爾科

我決定取消tailly逆權，純粹是為了簡單性和可維護性（尤其是對於新開發人員而言）。沒有太多的一開始並添加所需的東西，將導致更簡單，更可維護的代碼庫。 Gorko允許您添加大量可重複使用的公用事業課程，以幫助保持代碼乾燥。歸功於安迪·貝爾（Andy Bell）製造這款方便的小工具

JavaScript

• utilities/包含任何全球公用事業/輔助功能
• modules/包含您網站的實際JavaScript，所有這些都保持整潔和整潔
• 您可以使用import '@modules/example-module'將這些子文件夾導入main.js
• 提示：您可以通過webpack.mix.js文件設置可選導入別名

響應式圖像的註釋

Skeleventy沒有響應式響應圖像，主要原因是：最好使用CDN。查看有關用Cloudinary設置高度的教程。