Foundation for Sites6.8.1 變更日誌
元件清單

入門專案

我們有幾個入門專案範本，可以使用 Foundation CLI 安裝。您也可以手動下載！

我們的專案範本提供穩固的... 基礎，讓您開始新的專案。兩個範本都使用 Gulp 建置系統，自動化編譯 Sass、處理 JavaScript、複製檔案等流程。

基本範本

我們的基本專案範本很像 Foundation 5 的 Sass 範本。專案具有扁平目錄結構，只編譯 Sass。如果您想快速組成一個簡單的專案，而且只需要使用 Sass，這會是一個很棒的選擇。

您可以使用以下指令手動安裝範本

# Download the template with Git
git clone https://github.com/foundation/foundation-sites-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the Sass files
yarn start

每次您儲存 `dist/` 中的 Sass 檔案時，專案都會重新編譯。

ZURB 範本

官方的 ZURB 範本不只包含 Sass 處理，還包含 JavaScript 處理、Handlebars 範本和影像壓縮。我們在 ZURB 的客戶工作中使用這個範本！

您可以使用以下指令手動安裝範本

# Download the ZURB template with Git
git clone https://github.com/foundation/foundation-zurb-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the project
yarn start

編譯後，您可以在以下位置檢視專案： https://127.0.0.1:8000

這個範本和基本範本之間最大的差異在於資料夾結構。在 ZURB 範本中，您的專案有一個包含原始檔案的 src/ 資料夾，以及一個包含完成網站的 dist/ 資料夾。當您處理專案時，Gulp 會持續使用新版本的檔案更新您的 dist/ 資料夾。若要編譯製作版本，請執行 yarn build。

若要覆寫或新增 ZURB 範本的預設樣式，請在專案的 src/assets/scss/ 資料夾中

  • 變更 _settings.scss 中的 Sass 變數
  • 在 components 資料夾中新增自訂 SCSS 和 css 到新檔案，然後在 app.scss 的底部匯入這些檔案

升級現有專案時，_settings.scss 和 app.scss 檔案並不會變更。因此，您必須手動編輯 _settings.scss 檔案，以納入 版本說明 中找到的任何 Sass 變更。

功能

以下是 ZURB 範本功能的概觀

  • 資產複製

    Gulp 會將 src/assets 資料夾中的任何內容原樣複製到最終專案的 assets 資料夾。請注意，Sass 檔案、JavaScript 檔案和影像並非此複製程序的一部分，因為它們有自己的步驟。

  • 頁面編譯

    src/ 目錄包含三個用於建立 HTML 頁面的資料夾：pages/、layouts/ 和 partials/。名為 Panini 的平面檔案編譯器用於處理專案的各種頁面，將它們插入共用範本，並注入任何 HTML 部分。這是透過名為 Handlebars 的範本語言來完成的。

    Panini 在文件中有專門的頁面說明其各種功能。進一步了解 Panini。

  • Sass 編譯

    Sass 使用 Libsass（透過 node-sass）編譯成 CSS。主要的 Sass 檔案位於 src/assets/scss/app.scss，並匯入 Foundation 和 Motion UI。您建立的任何新的 Sass 部分也應該放在這個資料夾中。

    CSS 以 nested 樣式輸出，可像一般 CSS 一樣閱讀。也會建立原始碼對應，可由開發人員工具（例如 Chrome 網頁檢查器）讀取。在建置生產環境時，CSS 也會使用 clean-css 壓縮，並使用 UnCSS 移除。UnCSS 會掃描頁面的 HTML，並移除您未使用的任何 CSS 類別。

  • JavaScript 編譯

    JavaScript 使用 Babel（搭配 es2015 外掛）轉譯，因此您可以使用 ES2015 功能。主要的 Js 檔案位於 src/assets/js/app.js，並匯入 Foundation、jQuery 和 whatInput。您可以在此匯入已安裝的套件和自訂檔案，它們會包含在建置中。

    會建立原始碼對應，對應回原始檔案。預設情況下，已套件化的 app.js 未壓縮。在建置生產環境時，檔案會透過 UglifyJS 進行壓縮。

    整個套件化程序由 webpack 處理：它為您管理所有資產和依賴項，並將它們編譯成一個單一檔案。如果您不熟悉匯入或模組套件化，請查看

  • 影像壓縮

    預設情況下，所有影像會從 assets/img 原樣複製到 dist 資料夾。在建置生產環境時，影像會透過 gulp-imagemin 進行壓縮。此外掛程式支援 JPEG、PNG、SVG 和 GIF 檔案。

  • BrowserSync

    此範本會建立一個 BrowserSync 伺服器，位址為 https://127.0.0.1:8000。載入此 URL 以查看已編譯的範本。在伺服器執行時，只要您儲存檔案，所有已開啟的頁面都會自動重新整理，讓您在工作時能即時看到變更。

  • 建立樣式指南

    在 src/styleguide 下有兩個檔案，可用於為專案建立樣式指南。樣式指南是使用 Style Sherpa 建立的，這是 ZURB 建立的一個小型外掛程式。

Style Sherpa 在文件中有專屬的頁面，說明其各種功能。深入了解 Style Sherpa。

教學課程