1. 程式人生 > 其它 >使用 Java 和 Maven (JBake) 生成靜態網站

使用 Java 和 Maven (JBake) 生成靜態網站

使用 JBake(“mvn generate-resources”)構建您的靜態網站或部落格。使用佈局、巨集和資料檔案。 我們遷移了整個www.optaplanner.org網站(1399 個檔案)以使用 Java 和 Maven,而不是 Ruby 和 Rake 進行構建。從表面上看,什麼都沒有改變。但在原始碼中,對於我們的 Java 開發人員團隊來說,它是一個遊戲規則改變者。 我們的 Java 團隊現在可以輕鬆地為網站做出貢獻。在完成遷移後的幾個小時內,我們的一位開發人員已經提交了一份不願意用十英尺長的杆子接觸以前的原始碼的提交。 我們建立了這個網站。 我們在 Java 和 Maven 上構建了這個站點。 我們建立了這個網站。 我們在 JBake 和 Freemarker 上建立了這個網站。

使用 JBake(“mvn generate-resources”)構建您的靜態網站或部落格。使用佈局、巨集和資料檔案。

我們遷移了整個www.optaplanner.org網站(1399 個檔案)以使用 Java 和 Maven,而不是 Ruby 和 Rake 進行構建。從表面上看,什麼都沒有改變。但在原始碼中,對於我們的 Java 開發人員團隊來說,它是一個遊戲規則改變者。

我們的 Java 團隊現在可以輕鬆地為網站做出貢獻。在完成遷移後的幾個小時內,我們的一位開發人員已經提交了一份不願意用十英尺長的杆子接觸以前的原始碼的提交。

我們建立了這個網站。
我們在 Java 和 Maven 上構建了這個站點。
我們建立了這個網站。
我們在 JBake 和 Freemarker 上建立了這個網站。

為什麼使用靜態網站生成器?

靜態網站生成器將模板和內容檔案轉換為靜態 HTML/JS/CSS 網站。對於我們這樣的專案,這比內容管理系統 (CMS) 有很多優勢:

託管很便宜。GitHub 頁面甚至免費託管靜態網站。

原始檔進入 Git 進行備份和歷史記錄。

原始檔為純文字格式:

更改以拉取請求的形式出現,以進行適當的審查和 CI 驗證。

原始碼在我們的 IDE 中是開放的,這鼓勵將它們與程式碼一起重構。這會減少陳舊的內容。

多年來,Awestruct 一直為我們服務。但由於缺乏活動,是時候升級了。

為什麼是 JBake?

因為我們是 Java 程式設計師。

有幾個很好的靜態網站生成器,比如 Jekyll (Ruby) 和 Hugo (Go)。我們選擇JBake (Java),因為:

我們的網站現在使用 Maven ( mvn generate-resources)構建。

無需安裝任何東西。甚至不是 JBake。每個人都使用相同版本的 JBake 構建,如pom.xml.

而且速度很快:即使mvn clean在我的機器上構建 150 個輸出頁面也只需要 20 秒。

.下面全是Java。

編寫條件表示式很簡單。API ( String.substring(), ...) 很熟悉。日期格式 ( d MMMM yyyy) 和正則表示式的行為符合預期。

最重要的是,錯誤訊息很清楚。

8 年來,我用 Awestruct (Ruby) 編寫了這個網站。但我從來沒有花時間好好學習 Ruby,所以每次改變都需要數小時的反覆試驗。我不能只是閱讀錯誤訊息並修復它。這不是魯比的錯。那是因為我從來沒有花幾天時間來真正學習 Ruby。使用 JBake,我可以在很短的時間內修復錯誤:不再需要反覆試驗。

什麼是 JBake?

JBake 是一個靜態網站生成器,有很多選項:

使用 Maven 或 Gradle 構建。

我們選擇Maven,因為我們所有的 repos 都是用 Maven 構建的(儘管兩個OptaPlanner Quickstarts也用 Gradle 構建,因為 OptaPlanner 也支援 Gradle)。

用 Asciidoc、Markdown 或 HTML 編寫內容。

我們選擇Asciidoc是因為它比 Markdown更豐富、更可靠。此外,我們所有的文件都是用 Asciidoc 編寫的。

使用 Freemarker、Thymeleaf 或 Groovy 建立模板。

我們選擇Freemarker是因為它是一個強大的、經過實戰考驗的模板引擎。

技巧和竅門

這些是構建高階靜態網站的常見任務以及如何在 JBake-Freemarker 中實現每個任務。您甚至可以將這些JBake 設計模式稱為:

使用巨集渲染共享內容

我們幾乎所有的模板都顯示相同的最新版本面板:

最新發布

Freemarker 模板非常適合避免重複自己 (DRY):
templates/macros.ftl使用輸出 HTML 的巨集建立:

<#macro latestReleases>
    <div class="panel panel-default">
        <div class="panel-heading">Latest release</div>
        ...
    </div>
</#macro>

然後在*.ftl模板中使用它:

<#import "macros.ftl" as macros>
...
<div class="row">
    <div class="col-md-9">
        ...
    </div>
    <div class="col-md-3">
        <@macros.latestReleases/>
    </div>
</div>

使用資料檔案新增視訊、事件或其他易失性資料

某些資料更改過於頻繁,無法在內容或模板檔案中進行維護:

一個數據檔案,例如一個簡單的*.yml檔案,可以很好地儲存這樣的易失性資料:

建立data/videos.yml:

- youtubeId: blK7gxqu2B0
title: "Unit testing constraints"
...

- youtubeId: gIaHtATz6n8
title: "Maintenance scheduling"
...

- youtubeId: LTkoaBk-P6U
title: "Vaccination appointment scheduling"
...

然後在ftl模板中使用它:

<#assign videos = data.get('videos.yml').data>

<div class="panel panel-default">
    <div class="panel-heading">Latest videos</div>
    <div class="panel-body">
        <ul>
            <#list videos[0..6] as video>
                <li>
                    <a href="https://youtu.be/${video.youtubeId}">${video.title}</a>
                </li>
            </#list>
        </ul>
    </div>
</div>

佈局繼承

所有 HTML 頁面通常共享相同的 HTML 頭(元資料)、頁首(導航)和頁尾。這些非常適合base.ftl佈局,由所有其他模板擴充套件:

儘管大多數內容使用normalBase.ftl,但useCaseBase.ftl所有用例頁面都有單獨的模板,例如車輛路線問題 (VRP)、維護計劃和輪班排班。

使用帶有 的巨集<\#nested>來構建佈局繼承:

建立templates/base.ftl:

<#macro layout>
    <html>
        <head>
          ...
        </head>
        <body>
            <div>
                ... <#-- header -->
            </div>
            <#nested>
            <div>
              ... <#-- footer -->
            </div>
        </body>
    </html>
</#macro>

擴充套件它templates/useCaseBase.ftl並引入自定義屬性related_tag:

<#import "base.ftl" as parent>

<@layout>${content.body}</@layout>

<#macro layout>
    <@parent.layout>
        <h1>${content.title}</h1>
        <#nested>
        <h2>Related videos</h2>
        <#assign videos = data.get('videos.yml').data>
        <#assign relatedVideos = videos?filter(video -> video.tags.contains(content.related_tag))>
        <ul>
            <#list relatedVideos as video>
                <li><a href="https://youtu.be/${video.youtubeId}">${video.title}</a></li>
            </#list>
        </ul>
    </@parent.layout>
</#macro>

建立content/vehicleRoutingProblem.adoc使用該模板並設定該related_tag屬性的用例頁面:

= Vehicle Routing Problem
:jbake-type: useCaseBase
:jbake-related_tag: vehicle routing

The Vehicle Routing Problem (VRP) optimizes the routes of delivery trucks,
cargo lorries, public transportation (buses, taxi's and airplanes)
or technicians on the road, by improving the order of the visits.
This routing optimization heavily reduces driving time and fuel consumption compared to manual planning:

...

開始
自己試試吧。要構建www.optaplanner.org網站,請執行以下命令:

$ git clone https://github.com/kiegroup/o...
...
$ cd optaplanner-website
$ mvn clean generate-resources
...
$ firefox target/website/index.html

或者看看原始碼