Golang實戰-部署 AdminLTE 3 後臺靜態介面【首頁】（一）
安裝第三方依賴庫 gorilla/mux 路由器：
1、設定國內加速配置，見邏輯：Golang實戰-舞臺搭建（三），這裡不在配置
2、安裝 gorilla/mux
$ go get -u github。com/gorilla/mux
3、使用 gorilla/mux
修改 main。go 在 main 函式首行新增 router ：= mux。NewRouter（）
儲存程式碼後，VSCode 會在頂部使用 import 自動匯入 mux 庫，不需要手動新增。
分析 AdminLTE 3 的靜態資源
AdminLTE 3 有五個靜態資源需要載入，在加一個 js 一個六個。首先在專案根目錄 easygo 新建目錄 public。
目錄結構如下：
public
|————- build
|————- css
|————- dist
|————- img
|————- js
|————- plugins
然後把 AdminLTE 3 對應的檔案 copy 到專案中去
我們知道構建一個 web 網站這些資源的載入是必不可少的；且本篇章的主題是構建首頁還缺少一個 index 首頁介面，需要注意的是，本 web 專案是用 GO 構建的，所以一切 html 檔案的命名規則用字尾 。gohtml。
分析下 AdminLTE 3 的介面佈局見 下圖
一共有上（Heaer）、中（Content）、下（Footer）、左（Menu）、右（Set）共五個板塊組成，除了Content 是根據模組動態渲染，其他板塊都是共用的（每個介面上下左右都會用到）；所以共用的板塊將採用 layouts 來佈局。下面將建立相應的模板檔案資源，目錄結構如下：
resources
|————- views
|————- home （首頁目錄）
|————- index。gohtml（首頁模板檔案）
|————- layouts（共用模組）
|————- app。gohtml（中）
|————- control-sidebar。gohtml（右）
|————- footer。gohtml（下）
|————- menu。gohtml（左）
|————- navbar。gohtml（上）
程式碼組織：
1、在main()函式中新增 首頁 index 路由和首頁方法 homeHander()
在瀏覽器中訪問首頁驗證是否成功
2、繫結靜態資源的載入入口和模板檔案的輸出
修改main 函式：
修改 homeHander（）方法 載入模板
3、構建介面佈局：
分析 AdminLTE 3 首頁佈局
分別抽離各個模組塊部署到 layouts 對應的檔案中
注意：介面中必須使用 {{define “檔名稱”}} 定義當前檔名稱（一般都是以檔名命名），引入時使用 {{template “檔名稱” 。}} 這裡有個 。 不要省去
下面是各個模組的程式碼：
app。gohtml
{{define “app”}}
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
“utf-8”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
title
>
AdminLTE 3 | 儀表盤
title
>
<！—— 告訴瀏覽器螢幕自適應 ——>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1”
>
<！—— Font Awesome ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/fontawesome-free/css/all。min。css”
>
<！—— Ionicons ——>
<
link
rel
=
“stylesheet”
href
=
“https：//cdn。bootcss。com/ionicons/2。0。1/css/ionicons。min。css”
>
<！—— Tempusdominus Bbootstrap 4 ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4。min。css”
>
<！—— iCheck ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/icheck-bootstrap/icheck-bootstrap。min。css”
>
<！—— JQVMap ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/jqvmap/jqvmap。min。css”
>
<！—— 主題樣式 ——>
<
link
rel
=
“stylesheet”
href
=
“dist/css/adminlte。min。css”
>
<！—— overlayScrollbars ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/overlayScrollbars/css/OverlayScrollbars。min。css”
>
<！—— Daterange picker ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/daterangepicker/daterangepicker。css”
>
<！—— summernote ——>
<
link
rel
=
“stylesheet”
href
=
“plugins/summernote/summernote-bs4。css”
>
<！—— 離線 Google 字型： Source Sans Pro ——>
<
link
href
=
“dist/css/google。css”
rel
=
“stylesheet”
>
head
>
<
body
class
=
“hold-transition sidebar-mini layout-fixed”
>
<
div
class
=
“wrapper”
>
<！—— 導航欄 ——>
{{template “navbar” 。}}
<！—— /。navbar ——>
<！—— 主側邊欄容器 ——>
{{template “menu” 。}}
<！—— /。menu ——>
<！—— 內容 ——>
{{template “content-wrapper” 。}}
<！—— /。content-wrapper ——>
<！—— 底部 ——>
{{template “footer” 。}}
<！—— /。footer ——>
<！—— 控制側邊欄內容 ——>
{{template “control-sidebar”}}
<！—— /。control-sidebar ——>
div
>
<！—— jQuery ——>
<
script
src
=
“plugins/jquery/jquery。min。js”
>
script
>
<！—— jQuery UI 1。11。4 ——>
<
script
src
=
“plugins/jquery-ui/jquery-ui。min。js”
>
script
>
<！—— 解決使用 Bootstrap 提示工具與 jQuery UI 提示工具衝突 ——>
<
script
>
$
。
widget
。
bridge
（
‘uibutton’
，
$
。
ui
。
button
）
script
>
<！—— Bootstrap 4 ——>
<
script
src
=
“plugins/bootstrap/js/bootstrap。bundle。min。js”
>
script
>
<！—— ChartJS ——>
<
script
src
=
“plugins/chart。js/Chart。min。js”
>
script
>
<！—— Sparkline ——>
<
script
src
=
“plugins/sparklines/sparkline。js”
>
script
>
<！—— JQVMap ——>
<
script
src
=
“plugins/jqvmap/jquery。vmap。min。js”
>
script
>
<
script
src
=
“plugins/jqvmap/maps/jquery。vmap。usa。js”
>
script
>
<！—— jQuery Knob Chart ——>
<
script
src
=
“plugins/jquery-knob/jquery。knob。min。js”
>
script
>
<！—— daterangepicker ——>
<
script
src
=
“plugins/moment/moment。min。js”
>
script
><
script
src
=
“plugins/moment/locale/zh-cn。js”
>
script
>
<
script
src
=
“plugins/daterangepicker/daterangepicker。js”
>
script
>
<！—— Tempusdominus Bootstrap 4 ——>
<
script
src
=
“plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4。min。js”
>
script
>
<！—— Summernote ——>
<
script
src
=
“plugins/summernote/summernote-bs4。min。js”
>
script
>
<！—— overlayScrollbars ——>
<
script
src
=
“plugins/overlayScrollbars/js/jquery。overlayScrollbars。min。js”
>
script
>
<！—— AdminLTE App ——>
<
script
src
=
“dist/js/adminlte。js”
>
script
>
<！—— AdminLTE 儀表盤演示（僅用於演示） ——>
<
script
src
=
“dist/js/pages/dashboard。js”
>
script
>
<！—— 用於演示 AdminLTE ——>
<
script
src
=
“dist/js/demo。js”
>
script
>
body
>
html
>
{{end}}
control-sidebar。gohtml
{{define “control-sidebar”}}
<
aside
class
=
“control-sidebar control-sidebar-dark”
>
aside
>
{{end}}
footer。gohtml
{{define “footer”}}
<
footer
class
=
“main-footer”
>
<
strong
>
Copyright
©；
2014-2019
<
a
href
=
“http：//adminlte。io”
>
AdminLTE。io
a
>
。
strong
>
保留所有權利。
<
div
class
=
“float-right d-none d-sm-inline-block”
>
<
b
>
版本
b
>
3。0。5
div
>
footer
>
{{end}}
menu。gohtml
{{define “menu”}}
<
aside
class
=
“main-sidebar sidebar-dark-primary elevation-4”
>
<！—— 品牌 Logo ——>
<
a
href
=
“index3。html”
class
=
“brand-link”
>
<
img
src
=
“dist/img/AdminLTELogo。png”
alt
=
“AdminLTE Logo”
class
=
“brand-image img-circle elevation-3”
style
=
“opacity： 。8”
>
<
span
class
=
“brand-text font-weight-light”
>
AdminLTE 3
span
>
a
>
<！—— Sidebar ——>
<
div
class
=
“sidebar”
>
<！—— 側邊欄使用者面板（可選） ——>
<
div
class
=
“user-panel mt-3 pb-3 mb-3 d-flex”
>
<
div
class
=
“image”
>
<
img
src
=
“dist/img/user2-160x160。jpg”
class
=
“img-circle elevation-2”
alt
=
“使用者頭像”
>
div
>
<
div
class
=
“info”
>
<
a
href
=
“#”
class
=
“d-block”
>
Alexander Pierce
a
>
div
>
div
>
<！—— 側邊欄選單 ——>
<
nav
class
=
“mt-2”
>
<
ul
class
=
“nav nav-pills nav-sidebar flex-column”
data-widget
=
“treeview”
role
=
“menu”
data-accordion
=
“false”
>
<！—— 使用 。nav-icon 類新增圖示，
或使用 font-awesome 或其他任何圖示字型庫 ——>
<
li
class
=
“nav-item has-treeview menu-open”
>
<
a
href
=
“#”
class
=
“nav-link active”
>
<
i
class
=
“nav-icon fas fa-tachometer-alt”
>
i
>
<
p
>
儀表盤
<
i
class
=
“right fas fa-angle-left”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“。/index。html”
class
=
“nav-link active”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
儀表盤 v1
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“。/index2。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
儀表盤 v2
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“。/index3。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
儀表盤 v3
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/widgets。html”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-th”
>
i
>
<
p
>
小部件
<
span
class
=
“right badge badge-danger”
>
新
span
>
p
>
a
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-copy”
>
i
>
<
p
>
佈局選項
<
i
class
=
“fas fa-angle-left right”
>
i
>
<
span
class
=
“badge badge-info right”
>
6
span
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/top-nav。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
頂部導航
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/top-nav-sidebar。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
頂部導航 + 側邊欄
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/boxed。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
盒式佈局
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/fixed-sidebar。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
固定側欄
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/fixed-topnav。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
固定導航欄
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/fixed-footer。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
固定頁尾
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/layout/collapsed-sidebar。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
摺疊側邊欄
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-chart-pie”
>
i
>
<
p
>
圖表
<
i
class
=
“right fas fa-angle-left”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/charts/chartjs。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
ChartJS 外掛
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/charts/flot。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
Flot 外掛
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/charts/inline。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
內聯圖表
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-tree”
>
i
>
<
p
>
UI 元素
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/general。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
常規
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/icons。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
圖示
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/buttons。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
按鈕
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/sliders。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
滑塊
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/modals。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
彈框
&
提醒
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/navbar。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
導航
&
選項卡
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/timeline。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
時間線
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/UI/ribbons。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
絲帶
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-edit”
>
i
>
<
p
>
表單
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/forms/general。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
常規元素
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/forms/advanced。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
高階表單
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/forms/editors。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
編輯器
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/forms/validation。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
驗證
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-table”
>
i
>
<
p
>
表格
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/tables/simple。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
簡單表格
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/tables/data。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
資料表格
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/tables/jsgrid。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
jsGrid 外掛
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-header”
>
示例
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/calendar。html”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-calendar-alt”
>
i
>
<
p
>
日曆
<
span
class
=
“badge badge-info right”
>
2
span
>
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/gallery。html”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-image”
>
i
>
<
p
>
相簿
p
>
a
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-envelope”
>
i
>
<
p
>
郵箱
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/mailbox/mailbox。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
收件箱
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/mailbox/compose。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
寫信
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/mailbox/read-mail。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
檢視
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-book”
>
i
>
<
p
>
頁面
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/invoice。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
發票
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/profile。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
資料
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/e-commerce。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
電子商務
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/projects。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
專案
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/project-add。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
新增專案
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/project-edit。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
編輯專案
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/project-detail。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
專案詳情
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/contacts。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
聯絡人
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-plus-square”
>
i
>
<
p
>
附加
<
i
class
=
“fas fa-angle-left right”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/login。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
登入
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/register。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
註冊
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/forgot-password。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
忘記密碼
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/recover-password。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
重置密碼
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/lockscreen。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
鎖屏
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/legacy-user-menu。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
傳統使用者選單
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/language-menu。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
多國語言
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/404。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
404 錯誤
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/500。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
500 錯誤
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/pace。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
載入狀態
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“pages/examples/blank。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
空白頁
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“starter。html”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
起始頁
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-header”
>
雜項
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“/AdminLTE/AdminLTE-3。x/docs/”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-file”
>
i
>
<
p
>
文件
p
>
a
>
li
>
<
li
class
=
“nav-header”
>
多級示例
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“fas fa-circle nav-icon”
>
i
>
<
p
>
一級
p
>
a
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon fas fa-circle”
>
i
>
<
p
>
一 級
<
i
class
=
“right fas fa-angle-left”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
二級
p
>
a
>
li
>
<
li
class
=
“nav-item has-treeview”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
二 級
<
i
class
=
“right fas fa-angle-left”
>
i
>
p
>
a
>
<
ul
class
=
“nav nav-treeview”
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-dot-circle nav-icon”
>
i
>
<
p
>
三級
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-dot-circle nav-icon”
>
i
>
<
p
>
三級
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-dot-circle nav-icon”
>
i
>
<
p
>
三級
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“far fa-circle nav-icon”
>
i
>
<
p
>
二級
p
>
a
>
li
>
ul
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“fas fa-circle nav-icon”
>
i
>
<
p
>
一級
p
>
a
>
li
>
<
li
class
=
“nav-header”
>
標籤
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-circle text-danger”
>
i
>
<
p
class
=
“text”
>
重要
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-circle text-warning”
>
i
>
<
p
>
警告
p
>
a
>
li
>
<
li
class
=
“nav-item”
>
<
a
href
=
“#”
class
=
“nav-link”
>
<
i
class
=
“nav-icon far fa-circle text-info”
>
i
>
<
p
>
資訊
p
>
a
>
li
>
ul
>
nav
>
<！—— /。sidebar-menu ——>
div
>
<！—— /。sidebar ——>
aside
>
{{end}}
navbar。gohtml
{{define “navbar”}}
<
nav
class
=
“main-header navbar navbar-expand navbar-white navbar-light”
>
<！—— 左側導航欄連結 ——>
<
ul
class
=
“navbar-nav”
>
<
li
class
=
“nav-item”
>
<
a
class
=
“nav-link”
data-widget
=
“pushmenu”
href
=
“#”
role
=
“button”
><
i
class
=
“fas fa-bars”
>
i
>
a
>
li
>
<
li
class
=
“nav-item d-none d-sm-inline-block”
>
<
a
href
=
“index3。html”
class
=
“nav-link”
>
主頁
a
>
li
>
<
li
class
=
“nav-item d-none d-sm-inline-block”
>
<
a
href
=
“#”
class
=
“nav-link”
>
聯絡
a
>
li
>
ul
>
<！—— 搜尋表單 ——>
<
form
class
=
“form-inline ml-3”
>
<
div
class
=
“input-group input-group-sm”
>
<
input
class
=
“form-control form-control-navbar”
type
=
“search”
placeholder
=
“搜尋”
aria-label
=
“Search”
>
<
div
class
=
“input-group-append”
>
<
button
class
=
“btn btn-navbar”
type
=
“submit”
>
<
i
class
=
“fas fa-search”
>
i
>
button
>
div
>
div
>
form
>
<！—— 右側導航欄連結 ——>
<
ul
class
=
“navbar-nav ml-auto”
>
<！—— 訊息下拉選單 ——>
<
li
class
=
“nav-item dropdown”
>
<
a
class
=
“nav-link”
data-toggle
=
“dropdown”
href
=
“#”
>
<
i
class
=
“far fa-comments”
>
i
>
<
span
class
=
“badge badge-danger navbar-badge”
>
3
span
>
a
>
<
div
class
=
“dropdown-menu dropdown-menu-lg dropdown-menu-right”
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<！—— 訊息開始 ——>
<
div
class
=
“media”
>
<
img
src
=
“dist/img/user1-128x128。jpg”
alt
=
“使用者頭像”
class
=
“img-size-50 mr-3 img-circle”
>
<
div
class
=
“media-body”
>
<
h3
class
=
“dropdown-item-title”
>
Brad Diesel
<
span
class
=
“float-right text-sm text-danger”
><
i
class
=
“fas fa-star”
>
i
>
span
>
h3
>
<
p
class
=
“text-sm”
>
有空的話就打電話給我。。。
p
>
<
p
class
=
“text-sm text-muted”
><
i
class
=
“far fa-clock mr-1”
>
i
>
4 小時前
p
>
div
>
div
>
<！—— 訊息結束 ——>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<！—— 訊息開始 ——>
<
div
class
=
“media”
>
<
img
src
=
“dist/img/user8-128x128。jpg”
alt
=
“使用者頭像”
class
=
“img-size-50 img-circle mr-3”
>
<
div
class
=
“media-body”
>
<
h3
class
=
“dropdown-item-title”
>
John Pierce
<
span
class
=
“float-right text-sm text-muted”
><
i
class
=
“fas fa-star”
>
i
>
span
>
h3
>
<
p
class
=
“text-sm”
>
我收到你的訊息了
p
>
<
p
class
=
“text-sm text-muted”
><
i
class
=
“far fa-clock mr-1”
>
i
>
4 小時前
p
>
div
>
div
>
<！—— 訊息結束 ——>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<！—— 訊息開始 ——>
<
div
class
=
“media”
>
<
img
src
=
“dist/img/user3-128x128。jpg”
alt
=
“使用者頭像”
class
=
“img-size-50 img-circle mr-3”
>
<
div
class
=
“media-body”
>
<
h3
class
=
“dropdown-item-title”
>
Nora Silvester
<
span
class
=
“float-right text-sm text-warning”
><
i
class
=
“fas fa-star”
>
i
>
span
>
h3
>
<
p
class
=
“text-sm”
>
主題在這裡
p
>
<
p
class
=
“text-sm text-muted”
><
i
class
=
“far fa-clock mr-1”
>
i
>
4 小時前
p
>
div
>
div
>
<！—— 訊息結束 ——>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item dropdown-footer”
>
檢視所有訊息
a
>
div
>
li
>
<！—— 通知下拉選單 ——>
<
li
class
=
“nav-item dropdown”
>
<
a
class
=
“nav-link”
data-toggle
=
“dropdown”
href
=
“#”
>
<
i
class
=
“far fa-bell”
>
i
>
<
span
class
=
“badge badge-warning navbar-badge”
>
15
span
>
a
>
<
div
class
=
“dropdown-menu dropdown-menu-lg dropdown-menu-right”
>
<
span
class
=
“dropdown-item dropdown-header”
>
15 條通知
span
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<
i
class
=
“fas fa-envelope mr-2”
>
i
>
4 條新訊息
<
span
class
=
“float-right text-muted text-sm”
>
3 分鐘前
span
>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<
i
class
=
“fas fa-users mr-2”
>
i
>
8 個好友請求
<
span
class
=
“float-right text-muted text-sm”
>
12 小時前
span
>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item”
>
<
i
class
=
“fas fa-file mr-2”
>
i
>
3 個新報告
<
span
class
=
“float-right text-muted text-sm”
>
2 天前
span
>
a
>
<
div
class
=
“dropdown-divider”
>
div
>
<
a
href
=
“#”
class
=
“dropdown-item dropdown-footer”
>
檢視所有通知
a
>
div
>
li
>
<
li
class
=
“nav-item”
>
<
a
class
=
“nav-link”
data-widget
=
“control-sidebar”
data-slide
=
“true”
href
=
“#”
role
=
“button”
>
<
i
class
=
“fas fa-th-large”
>
i
>
a
>
li
>
ul
>
nav
>
{{end}}
再次預覽下首頁
完美預覽。
後續：
Golang實戰-部署 AdminLTE 3 後臺靜態介面模板語法的應用{{}}（二）
我是邏輯，感謝各位人才的：
點贊
、
收藏
和
評論
，一起學習見證未來。