Entu SSG

Entu SSG 是一個簡單的 Pug、Markdown、Yaml 靜態網站產生器，支援多語系。

優點

• 簡單的 Pug (前身為 Jade)、Markdown、Yaml 靜態網站產生器。
• 從 Pug 模板或 Markdown 產生靜態 HTML 檔案。
• 使用 Yaml 檔案將資料傳遞到模板。
• 在檔案名稱中使用語系識別碼以產生特定語系的內容和路徑。
• 從 Stylus 檔案產生網站 CSS。
• 使用您最愛的工具/編輯器。
• 將其託管在您自己的伺服器、Netlify、S3 上，或任何其他地方...

安裝和使用

1. 下載最新版本
2. 執行

    ./build.js ./my-page/entu-ssg-config.yaml

設定

網站建構過程可透過 Yaml 檔案設定，其路徑必須是 entu-ssg.js 的第一個參數。必要的參數為：

• locales - 要產生的語系資料夾清單。您可以將語系識別碼放入檔案名稱中 (例如 index.en.pug 或 data.et.yaml) 以產生特定語系的內容。
• defaultLocale - 如果設定，此語系中的頁面路徑將不會有語系前綴 (例如，/en/about 將會是 /about)。
• source - 包含原始碼檔案的資料夾 (相對於建構 config.yaml)。以底線開頭的資料夾會被忽略。
• build - 放置產生 HTML 的資料夾 (相對於建構 config.yaml)。
• assets - 包含靜態資產 (JS、圖片、...) 的資料夾。
• protectedFromCleanup - 如果使用 cleanup 參數執行 build.sh，則不會刪除的路徑清單。 相對於 build 路徑。
• server.port - 在 localhost 上用於服務的連接埠。
• server.assets - 在 localhost 上服務頁面會將此網址對應到 assets 參數中指定的資料夾。
• dev.aliases - 建構頁面的別名。
• dev.paths - 要建構的 (來源) 路徑清單。 相對於 source 路徑。

範例建構設定檔

locales:
  - en
  - et
source: ./source
build: ./build
assets: ./assets
protectedFromCleanup:
  - assets
  - index.html
server:
  port: 4000
  assets: /assets/
dev:
  aliases: true
  paths:
    - test/page1
    - test/page2

內容

頁面內容 - index.pug

頁面內容從 index.pug 檔案產生。所有其他檔案都會被忽略，但您可以使用這些檔案來使用 Pug 的 include/extends 功能。您可以將語系識別碼放入檔案名稱中 (例如 index.en.pug) 以產生特定語系的內容。

頁面資料和設定 - data.yaml

若要將資料傳遞至 index.pug，請使用 data.yaml 檔案。此資料會以名為 self 的物件傳遞至 index.pug (若要從 data.yaml 取得屬性 text，請在 index.pug 中使用 self.text)。

您可以將語系識別碼放入檔案名稱中 (例如 data.en.yaml) 以產生特定語系的內容。

某些頁面參數會變更 HTML 的產生方式。這些參數如下：

• disabled - 如果為 true，頁面將不會被產生，也不會載入到 self.otherLocalePaths 物件中。
• path - 如果設定，將會覆寫基於資料夾的路徑。
• aliases - 路徑別名清單。會將重新導向 URL 指向原始路徑。
• data - 要從中載入資料的檔案。此資料會以名為 self.data 的物件傳遞至 index.pug。您可以使用相對路徑 (./ 或 ../)。如果使用，則相對於 data.yaml 檔案。根路徑 (/) 是您的原始碼資料夾 (在 config.yaml 中設定)。

範例頁面 data.yaml

path: /testpage1
aliases:
  - /test
  - /test123
data:
  news: ./datafiles/news.yaml
someOtherData:
  - A
  - B

頁面樣式 - style.styl

若要產生頁面 CSS，請使用 .styl 檔案。 全域 style.css 是從所有 .styl 檔案 (來自原始碼資料夾) 合併而來，並儲存到建構的根資料夾 (例如 /style.css)。

頁面腳本 - script.js

若要產生頁面 JS，請使用 .js 檔案。 全域 script.js 是從所有 .js 檔案 (來自原始碼資料夾) 合併而來，並儲存到建構的根資料夾 (例如 /script.js)。

在建構時...

... 像這樣的原始碼資料夾 ...

- source
    |- _templates
    |   |- layout.pug
    |   |- mixins.pug
    |   +- somescripts.js
    |
    |- testpage1
    |   |- data.en.yaml
    |   |- data.et.yaml
    |   |- index.pug
    |   +- style.et.styl
    |
    |- testpage2
    |   |- index.en.pug
    |   |- index.et.pug
    |   |- data.yaml
    |   +- testpage2en
    |       |- index.en.pug
    |       +- data.en.yaml
    |
    |- index.pug
    +- style.styl

... 將會轉換成像這樣的建構資料夾

- build
    |- en
    |   |- index.html
    |   |- testpage1
    |   |   +- index.html
    |   |
    |   +- testpage2
    |       |- index.html
    |       +- testpage2en
    |           +- index.html
    |
    |- et
    |   |- index.html
    |   |- testpage1
    |   |   +- index.html
    |   |
    |   +- testpage2
    |       +- index.html
    |- script.js
    |- script.js.map
    |- style.css
    +- style.css.map