假設我們有了一個後臺管理WEB模板，例如 startbootstrap-admin-2。

我們需要可以用它來製作一個管理後臺，可以這樣做。

製作 layout 頁面

將 startbootstrap-sb-admin-2-gh-pages git 項目檢出後，可以看到下面的目錄結構。

css\
img\
js\
node_modules\
scss\
vendor\
.browserslistrc
.gitignore
.travis.yml
404.html
blank.html
buttons.html
cards.html
charts.html
forgot-password.html
gulpfile.js
index.html
LICENSE
login.html
package.json
package-lock.json
README.md
register.html
tables.html
utilities-animation.html
utilities-border.html
utilities-color.html
utilities-other.html

我們只需要將 index.html 文件拷貝爲 grails 項目的 views/layout/sb_main.gsp ，後續會修改 sb_main.gsp 的內容。

準備資源文件

再將 vendors/ 目錄複製爲 grails 項目的 assets/libs 目錄，後續會刪除不必要的文件。

將模板項目/js 下的文件複製到 grails項目的 assets/javascripts 目錄下。
將模板項目/css 下的文件複製到 grails項目的 assets/stylesheets 目錄下。
將模板項目/img 下的文件複製到 grails項目的 assets/images 目錄下。

清理資源文件目錄

這裏我就得到如下的 libs 目錄結構：

├─bootstrap
│  ├─js
│  └─scss
│      ├─mixins
│      ├─utilities
│      └─vendor
├─chart.js
├─datatables
├─fontawesome-free
│  ├─css
│  ├─js
│  ├─less
│  ├─scss
│  ├─sprites
│  ├─svgs
│  │  ├─brands
│  │  ├─regular
│  │  └─solid
│  └─webfonts
├─jquery
└─jquery-easing

現在我們來刪除不用的文件。
首先所有的 less、scss 目錄都可以刪除。

bootstrap 目錄也可以刪除，因爲可以改用 grails 自帶的 bootstrap4.3 文件。

然後刪除 .min.js，.min.css 文件，因爲 asset-pipeline 會爲我們在打包的時候創建。
刪除 *.map 文件，因爲 asset-pipeline 會爲我們在打包的時候創建。

對於 fontawesome-free 要特殊處理，因爲該目錄下文件衆多，都是用不上的。
先刪除 svgs 目錄，這個目錄下有1700+多個文件，並且不需要。刪除 scss、less 目錄，上面提到過。刪除 js 和 css 目錄下的 brands*, regular*, solids* 文件，因爲 all 裏面都包含了。剩下的文件是：

all.js
conflict-detection.js
fontawesome.js
v4-shims.js

清理完文件、目錄後，資源準備環節就告一個段落了。

修改 sb_main.gsp 中引用資源的寫法

link 標籤

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

改爲

<asset:link href="fontawesome-free/css/all.css" rel="stylesheet" type="text/css"/>

注意這裏的區別：

grails 的 asset-pipeline plugin 會自動在 assets/ 子目錄下查找文件，所以，不需要寫 assets/ 下的一級子目錄如 stylesheets、libs 等。
要寫結束標籤 “/>”，而不是 body 爲空的 xml 標籤。<a></a>就是一個 body 爲空的 xml 標籤，要寫成 <a/>纔行。

stylesheet 標籤

<link href="css/sb-admin-2.min.css" rel="stylesheet">

改爲

<asset:stylesheet src="sb-admin-2.css"/>

javascript 標籤

<script src="vendor/jquery/jquery.min.js"></script>

改爲

<asset:javascript src="jquery-3.3.1.min.js" />

img 標籤

<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;" src="img/undraw_posting_photo.svg" alt="">

改爲

<asset:image class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;" src="undraw_posting_photo.svg" alt="" />

改到這裏，頁面模板就能正常顯示了，但還沒有將內容部分留出來，所有頁面顯示的內容都是一樣的，下面我們需要添加 layout 的內容區域設置。

給layout文件添加布局指令

有三個佈局指令，告訴 grails 佈局文件中哪部分是 header、哪部分是 title、哪部分是要插入的正文。

三個指令分別是：

<g:layoutTitle default="金案源"/>
<g:layoutHead/>
<g:layoutBody/>

下面直接給出最終結果，大家一看就明白了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <title>
        <g:layoutTitle default="在線象棋商城"/>
    </title>
    <!-- Custom fonts for this template-->
    <asset:link href="fontawesome-free/css/all.css" rel="stylesheet" type="text/css"/>
    <asset:stylesheet src="fonts.css"/>

    <!-- Custom styles for this template-->
    <asset:stylesheet src="sb-admin-2.css"/>
</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <g:render template="/layouts/sidebar" />
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <g:render template="/layouts/topbar" />
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">
                <g:layoutBody/>
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright &copy; ${companyName} 2020</span>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">準備退出嗎?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">想退出登錄請選擇下面的 "退出" 按鈕。</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" href="login.html">退出</a>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript-->
<asset:javascript src="jquery-3.3.1.min.js" />

<asset:javascript src="bootstrap.bundle.js"/>

<!-- Core plugin JavaScript-->
<asset:javascript src="jquery-easing/jquery.easing.js" />

<!-- Custom scripts for all pages-->
<asset:javascript src="sb-admin-2.js"/>

<!-- Page level plugins -->
<asset:javascript src="chart.js/Chart.js"/>

<!-- Page level custom scripts -->
<asset:javascript src="demo/chart-area-demo.js"/>
<asset:javascript src="demo/chart-pie-demo.js"/>

</body>

</html>

具體頁面的寫法

如 views/index.gsp 頁面，套用 layout 的寫法如下：

<!doctype html>
<html>
<head>
    <meta name="layout" content="sb_main"/>
    <title>Welcome to Grails</title>
</head>
<body>
   這裏的內容會被插入到 <g:layoutBody/> 處。
</body>

刷新一下頁面，就能看到最終效果了。

完畢。

如何將一個後臺管理模板移植到 Grails 中？

製作 layout 頁面

準備資源文件

清理資源文件目錄

修改 sb_main.gsp 中引用資源的寫法

link 標籤

stylesheet 標籤

javascript 標籤

img 標籤

給layout文件添加布局指令

具體頁面的寫法

參考文檔

如何讓 Postman 自動複製JWT 登錄後的 Token 到其他API請求？

Groovy編譯靜態泛型方法報錯的解決辦法

如何記住 Spring 容器的生命週期管理技術？

Grails 中都可以拿 DomainUnitTest 做什麼測試？

如何將 Groovy GORM 獨立地用於 Java 項目

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結