Hugo 佈景概念
概念
新佈景的基本架構
hugo new theme HUGO-NOTEPAD
網站\THEMES\HUGO-NOTEPAD
│ LICENSE
│ theme.toml
│
├─archetypes
│ default.md
│
├─layouts
│ │ 404.html
│ │ index.html
│ │
│ ├─partials
│ │ footer.html
│ │ head.html
│ │ header.html
│ │
│ └─_default
│ baseof.html
│ list.html
│ single.html
│
└─static
├─css
└─js
layout
├─layouts
│ 404.html
│ index.html
│
├─blog
│ li.html
│ list.html
│ single.html
│ summary.html
│
├─partials
│ content-footer.html
│ custom-css.html
│ custom-head.html
│ edit-meta.html
│ edit-page.html
│ footer.html
│ global-menu.html
│ head.html
│ last-updated.html
│ notification.html
│ pagination.html
│ powered.html
│ prepend-body.html
│ sidebar-footer.html
│ sidebar.html
│ site-header.html
│ table-of-contents.html
│
├─menu
│ open-menu.html
│ slide-menu.html
│
└─meta
chroma.html
google-analytics-async.html
google-site-verification.html
-
以頁面(page)為基本單位
- 瀏覽資料夾時，相當於瀏覽
_index.md
- 瀏覽資料夾時，相當於瀏覽
-
所有的網頁都是以theme/layouts資料夾裡的檔案來渲染
-
檔案可以透過
FrontMatter來指定用什麼模板渲染 -
每個頁面都會自動綁定
Page變數 -
layout
- _default: 預設模板
baseof.html⇒ 根模板首頁⇒index.html用index.html來渲染_index.md_index.md⇒list.html用list.html來渲染_index.md一般文章⇒single.html用single.html來渲染一般文章
- _default: 預設模板
模板的概念
baseof.html
- 定義有一個區塊，名字為main
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
</head>
<body>
<!-- 定義這裡要填入名為main的區塊內容 -->
{{ block "main" . }}
{{ end }}
</body>
</html>
default baseof.html
<!DOCTYPE html>
<html lang="en">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
{{- block "main" . -}}{{- end -}}
{{- partial "footer.html" . -}}
</body>
</html>
index.html
- 渲染首頁(index.html)時，會以
baseof.html為基礎 - 再將
define "main"的內容插入到baseof.html中
<!--定義main區塊是什麼-->
{{ define "main" }}
{{ .Content }} <!-- .Content是Page的變數，即為文章的內容 -->
{{ end }}
Partial
│ ├─partials
│ content-footer.html
│ custom-css.html
│ custom-head.html
│ edit-meta.html
│ edit-page.html
│ footer.html
│ global-menu.html
│ head.html
│ last-updated.html
│ notification.html
│ pagination.html
│ powered.html
│ prepend-body.html
│ sidebar-footer.html
│ sidebar.html
│ site-header.html
│ table-of-contents.html
menu
- menu一般是由Hugo去尋找Content資料夾裡的子資料夾，並存到變數中
- 這些子資料夾，在Hugo中稱為Section
- 通常會用Section裡的
_index.md的title來做為menu要顯示的字
- 透過變數來顯示menu
- 在網站的
config.toml中，做如下設定，表示將Section存到main變數
SectionPagesMenu: main
layouts/partials/header.html
- 用回圈顯示
.Site.Menus.main的內容，做為menu
<header>
<nav>
{{ range .Site.Menus.main }}
<a class="{{if eq $.URL .URL}}active{{end}}" href="{{ .URL }}">
{{ .Name }}
</a>
{{ end }}
</nav>
</header>
將partial加到 首頁(index.html)
{{ partial "header" . }}- 表示這裡要用partial header.html的內容代替
{{ define "main" }}
<main>
{{ partial "header" . }} <!--表示這裡要用partial header.html的內容代替-->
<article>
{{ .Content }}
</article>
</main>
{{ end }}
佈景的架構參考
│ .editorconfig
│ .gitignore
│ gulpfile.js
│ LICENSE.md
│ package-lock.json
│ package.json
│ README.md
│ theme.toml
│ tree.txt
│ webpack.config.js
│
├─archetypes
│ default.md
│
├─exampleSite
│ │ config.toml
│ │
│ ├─content
│ │ │ about.md
│ │ │ _index.md
│ │ │
│ │ ├─archives
│ │ │ hello_world.md
│ │ │
│ │ ├─blog
│ │ │ hello_world.md
│ │ │
│ │ ├─chapter1
│ │ │ 1.md
│ │ │ _index.md
│ │ │
│ │ ├─chapter2
│ │ │ │ 1.md
│ │ │ │ _index.md
│ │ │ │
│ │ │ └─chapter2-1
│ │ │ 1.md
│ │ │ _index.md
│ │ │
│ │ ├─entry
│ │ │ hello_world.md
│ │ │
│ │ ├─getting-started
│ │ │ installation.md
│ │ │ _index.md
│ │ │
│ │ ├─post
│ │ │ creating-a-new-theme.md
│ │ │
│ │ ├─posts
│ │ │ hello_world.md
│ │ │
│ │ └─sample
│ │ build-in-shortcodes.md
│ │ _index.md
│ │
│ ├─resources
│ │ └─_gen
│ │ ├─assets
│ │ └─images
│ └─static
│ └─images
│ og-image.png
│ pexels-photo-196666.jpeg
│
├─images
│ screenshot-edit-link.png
│ screenshot-open-menu.png
│ screenshot-slide-menu.gif
│ screenshot-theme-color.png
│ screenshot.png
│ tn.png
│
├─layouts
│ │ 404.html
│ │ index.html
│ │
│ ├─blog
│ │ li.html
│ │ list.html
│ │ single.html
│ │ summary.html
│ │
│ ├─partials
│ │ │ content-footer.html
│ │ │ custom-css.html
│ │ │ custom-head.html
│ │ │ edit-meta.html
│ │ │ edit-page.html
│ │ │ footer.html
│ │ │ global-menu.html
│ │ │ head.html
│ │ │ last-updated.html
│ │ │ notification.html
│ │ │ pagination.html
│ │ │ powered.html
│ │ │ prepend-body.html
│ │ │ sidebar-footer.html
│ │ │ sidebar.html
│ │ │ site-header.html
│ │ │ table-of-contents.html
│ │ │
│ │ ├─menu
│ │ │ open-menu.html
│ │ │ slide-menu.html
│ │ │
│ │ └─meta
│ │ chroma.html
│ │ google-analytics-async.html
│ │ google-site-verification.html
│ │ tag-manager.html
│ │
│ ├─posts
│ │ list.html
│ │ single.html
│ │
│ ├─shortcodes
│ │ button.html
│ │ panel.html
│ │
│ └─_default
│ baseof.html
│ list.html
│ single.html
│
├─src
│ ├─js
│ │ │ keydown-nav.js
│ │ │ main.js
│ │ │ sidebar-menu.js
│ │ │
│ │ └─jquery.backtothetop
│ │ jquery.backtothetop.js
│ │ jquery.backtothetop.min.js
│ │
│ └─scss
│ │ chroma.scss
│ │ theme.scss
│ │ _component.scss
│ │ _foundation.scss
│ │ _function.scss
│ │ _project.scss
│ │ _structure.scss
│ │ _variable.scss
│ │
│ ├─foundation
│ │ _element.scss
│ │ _normalize.scss
│ │ _reset.scss
│ │ _stack.scss
│ │
│ └─function
│ _calc-font-size.scss
│ _calc-stack.scss
│ _contrast-color.scss
│ _strip-unit.scss
│
└─static
├─css
│ chroma.css
│ chroma.min.css
│ theme.css
│ theme.min.css
│
└─js
bundle.js