Đây là bài hướng dẫn, cũng như ghi chép tương đối đầy đủ của Nam về Hugo Cms. Một trong những static web builder chạy Golang tương đối dễ sử dụng & thông minh. Một lưu ý nho nhỏ là chính trang web này cũng đang chạy bằng Hugo
Dưới đây là 1 số ghi chép & những nhận định của Nam sau khi đã đọc tài liệu Documentation của Hugo Cms. Có thể nói đây là 1 Framework build static web rất thông minh & tốc độ. Nhưng cũng cần có những lưu ý quan trọng khi sử dụng.
Content Management
Hugo sử dụng content dạng tĩnh, điều đó cũng có nghĩa là chúng có cơ cấu tổ chức dạng hierarchy thay vì sử dụng database để quản lý dữ liệu
Content Organization
Hugo quản lý dữ liệu theo cơ cấu tổ chức – còn gọi là Page bundle
Ví dụ ở trong phần content, bạn tạo 1 source là /blog/, trong có nhiều bài viết nhỏ thì URL của chúng sẽ là
Nội dung URL: baseurl/blog/content1
Trong đó baseurl chỉ URL gốc
Cách thành phần chia nhỏ của Page trong Hugo
Index Pages: _index.md
_index.md là 1 trang đặc biệt, chúng sẽ cho phép cung cấp nội dung & các trường đầu nhìn (Front Matter) tới template dạng list. Những template này có thể là:
- templates theo từng phần
- templates phân loại bài viết
_index.md có thể được gắn vào mỗi loại trang (Homepage, taxonomy, cụm từ taxonomy)
. url
. ⊢–^-⊣
. path slug
. ⊢–^-⊣⊢—^—⊣
. filepath
. ⊢——^——⊣
content/posts/_index.md
Khi nội dung file _index.md được gắn ở trong posts, thì khi chạy ứng dụng Go, chúng sẽ tham chiếu & tìm kiến content index.html
url (“/posts/”)
⊢-^-⊣
baseurl section (“posts”)
⊢——–^———⊣⊢-^-⊣
permalink
⊢———-^————-⊣
Ví dụ khi ta tạo file _index.md, hugo sẽ tạo 1 file index.html chứa templates tương ứng (dạng list bài viết, taxonomy)
Single Page trong các phần
Single page sẽ được render dựa theo single page template
path (“posts/my-first-hugo-post.md”)
. ⊢———–^————⊣
. section slug
. ⊢-^-⊣⊢——–^———-⊣
content/posts/my-first-hugo-post.md
Khi Hugo build site, chúng sẽ nhận phần bài viết với đầu nhìn html là
url (“/posts/my-first-hugo-post/”)
⊢————^———-⊣
baseurl section slug
⊢——–^——–⊣⊢-^–⊣⊢——-^———⊣
permalink
⊢——————–^———————⊣
Lý giải cơ cấu đường dẫn trong Hugo
section
Thành phần cơ bản của một nội dung, thường đặt trong phần content của hugo cms cơ bản
Slug
Là đường dẫn, thường sẽ theo tên file, có thể thay đổi tại front matter (giao diện đầu nhìn)
Path
Tương tự wordpress, path được định nghĩa dựa vào vị trí tương đối của 1 file, path thường không bao gồm slug
Url
The url is the relative URL for the piece of content. The url
- is based on the content’s location within the directory structure OR
- is defined in front matter and overrides all the above
URL là đường dẫn chính xác của một phần nội dung,
url sẽ theo đuôi vị trí của nội dung trong cấu trúc hoặc được định nghĩa tại front matter (giao diện đầu nhìn) & thay đổi tất cả các giá trị phía trên
Một số thành phần sẽ thay đổi tự động khi ta thực hiện thay đổi các thông tin tại front matter, ví dụ
- slug sẽ thay đổi khi đổi tên files
- filename: đổi tên file sẽ làm thay đổi các giá trị
- url
- type: loại nội dung (Cái này sẽ rất hữu dụng nếu bạn muốn xây dựng giao diện đầu nhìn khác cho 1 type, bằng cách kết hợp với thuộc tính layout)
Như bạn đã thấy, cấu trúc new/mylayout sẽ tạo nên khối nội dung riêng của bài post này
Page Bundles
Page bundles là cách để nhóm các tài nguyên Page
Page Bundle có thể gồm 2 nhóm
- Bundle dạng đơn lẻ, có nội dung riêng – Page bundles lớp lá
- Bundle lớp cành (Homepage, section, taxonomy terms, taxonomy list) sẽ hiển thị phần tổng hợp (archive…)
content/
├── about
│ ├── index.md
├── posts
│ ├── my-post
│ │ ├── content1.md
│ │ ├── content2.md
│ │ ├── image1.jpg
│ │ ├── image2.png
│ │ └── index.md
│ └── my-other-post
│ └── index.md
│
└── another-section
├── ..
└── not-a-leaf-bundle
├── ..
└── another-leaf-bundle
└── index.md
Ở ví dụ hiện tại thì đang có 4 bundles dạng lá
- about
- my-post: leaf bundle có file index và 2 file content md cùng 2 ảnh
- image1: image1 chỉ có thể khả dụng tại my-post/index.md
- image2: là resources của my-post và chỉ khả dụng tại my-post/index.md
Headless Bundle
Headless bundle được tạo thủ công, và cũng không đặt tại vị trí nào cả
- Chúng sẽ không có Permalink, và cấu trúc HTML, mà có thể render trực tiếp trên một phần nội dung (Ví dụ index.html của trang chủ)
- Không phải là 1 phần của .Site.RegularPages
Nhưng bạn có thể gọi chúng bằng cách sử dụng .Site.GetPage
Branch Page Bundles
A Branch Bundle is any directory at any hierarchy within the content/ directory, that contains at least an _index.md file.
This _index.md can also be directly under the content/ directory.
Branch Bundle là page dạng nhánh, có chứa ít nhất 1 thành phần _index.md, _index sử dụng thuộc tính nội suy của Golang để làm template cho nhiều loại dữ liệu
content/
├── branch-bundle-1
│ ├── branch-content1.md
│ ├── branch-content2.md
│ ├── image1.jpg
│ ├── image2.png
│ └── _index.md
└── branch-bundle-2
├── _index.md
└── a-leaf-bundle
└── index.md
Trong đó, có 2 thành phần branch bundle như sau:
Front Matter
Front matter là các dữ liệu đầu nhìn giúp truyền thông tin vào các Layout được định nghĩa sẵn, biến Hugo trở thành 1 static web app cms đích thực
Front matter allows you to keep metadata attached to an instance of a content type—i.e., embedded inside a content file—and is one of the many features that gives Hugo its strength.
Như ta có thể thấy, phần thông tin ngay phía trên đầu (information about content)
title: “Tên post”
date: ngày / tháng / năm
draft: true
Front matter formats
YAML, TOML, JSON
Front matter có thể cung cấp được nhiều thông tin (Metadata giá trị) ví dụ như:
author(nếu theme hỗ trợ)
headless: biến page dạng lá thành headless bundle
Page Resources
Page resources: tài nguyên bao gồm
- ảnh
- page khác
- các tài liệu
Các tài nguyên trong Page Bundles
Như bạn thấy, trong Page Bundles cấp lá (leaf bundles) này chứa rất nhiều dữ liệu & tài nguyên, bản thân chúng cũng có những URL tương ứng đồng thời cũng có thể access vào meta data
Nội dung Page resources chứa trong first-post, không nằm ngoài second post
Permalink
Đường dẫn chính xác của nguồn thông tin
The absolute URL to the resource. Resources of type page will have no value.
RelPermalink
RelPermalink là URL tương ứng
The relative URL to the resource. Resources of type page will have no value.
Page Resources Meta data
Page resources metadata có thể được quản lý trong front matter với file toml để có thể gọi dữ liệu nhanh & đơn giản
Dưới đây là 1 ví dụ của file resources meta data
date = “2018-01-25”
title = “Application”
[[resources]]
name = “header”
src = “images/sunset.jpg”
[[resources]]
src = “documents/photo_specs.pdf”
title = “Photo Specifications”
[resources.params]
icon = “photo”
[[resources]]
src = “documents/guide.pdf”
title = “Instruction Guide”
[[resources]]
src = “documents/checklist.pdf”
title = “Document Checklist”
[[resources]]
src = “documents/payment.docx”
title = “Proof of Payment”
[[resources]]
name = “pdf-file-:counter”
src = “**.pdf”
[resources.params]
icon = “pdf”
[[resources]]
src = “**.docx”
[resources.params]
icon = “word”
Dữ liệu này có thể settings & thay đổi dễ dàng, chúng cũng được đặt trong các vị trí ở file html
Dưới đây là ví dụ của file toml chứa các thông tin được setup sẵn trong các vị trí trong themes
Shortcodes
Shortcodes là đoạn code được định hướng sẵn để cho vào nội dung .md
Ví dụ ở đây ta sử dụng 1 built in shortcodes là {{ < youtube 2xkNJL4gJ9E> }}
Shortcodes thường sẽ có dạng {{ <> }}
Content Sections
Hugo tạo ra cây section match content
Section là một tập hợp các trang được định nghĩa dựa theo content structure
Thông thường, thì folder level đầu tiên ngay dưới content định hình ra section của chúng (root section), tương đương với Branch dạng nhánh.
Dạng Page bundles dạng lá (Leaf Bundles) không có section, dù bản thân chúng cũng có phần directory riêng biệt
content
└── blog <– Section, because first-level dir under content/
├── funny-cats
│ ├── mypost.md
│ └── kittens <– Section, because contains _index.md
│ └── _index.md
└── tech <– Section, because contains _index.md
└── _index.md
- trường hợp đầu tiên thì đương nhiên, vì chúng nằm ngay dưới cấp đầu tiên của /content
- kittens là section, vì chúng là Page Bundles dạng nhánh (Branch)
- tech cũng như vậy
Taxonomies
Hugo sử dụng cách group các phần nội dung còn gọi là taxonomies(tương tự như wordpress), taxonomies gồm 3 cấp
Taxonomy
a categorization that can be used to classify content
Term
a key within the taxonomy
Value
a piece of content assigned to a term
Món ăn <- Taxonomy
Ăn sáng <- Term
Bánh mỳ <- Value
Bánh bao <- Value
Moonrise Kingdom <- Value
Ăn trưa <- Term
Unbreakable <- Value
The Avengers <- Value
xXx <- Value
Như vậy các phần nội dung của 1 chủ đề lớn sẽ chia làm nhiều cụm từ (Term) và sẽ có các giá trị đi theo sau.
Nếu trong tags có những term tương ứng thì lúc này cũng cần phải tạo file index.html cho đường dẫn tags/development
Nếu bạn khởi tạo Categories & tags thì chúng sẽ làm gì?
Khi khởi tạo & taxonomies được sử dụng, & taxonomies template được khởi tạo tương ứng. Hugo sẽ tạo cả trang taxonomies term (Chứa tổng hợp tất cả các term danh mục) và 1 trang chứa tất cả nội dung của từng term
- 1 trang chứa tổng hợp tất cả các term ví dụ: example.com/categories
- Trang chưa bài viết của từng tern một, ví dụ: example.com/categories/development/
Content Summaries
Hugo khởi tạo Summaries cho nội dung của bạn (Tổng hợp của nội dung) và thu gọn nội dung đó để dễ sử dụng
Phần Summary này có thể được sử dụng để gọi ra các layout trong phần list.html hoặc single.html nếu cần
Tự động ngắt nội dung
Với việc sử dụng
Trong các content dạng .md (markdown) bạn có thể tạo ra phần summaries post tự động
Files tĩnh (Static)
Trong Hugo thì những file tĩnh nằm trong thư mục static sẽ chứa các thành phần bất biến, ít thay đổi như stylesheet, js, images…
Các file tĩnh có thể được gọi ra bằng việc lược bỏ phần static
ví dụ
static/image.png -> /images.png
Pages Template
Hugo sử dụng cấu trúc html/template & text/template để thực hiện việc xây dựng cấu trúc template
Một số template cơ bản
File Go template là những file HTML với biến (variable) và functions. Các biến được gọi bằng ký hiệu {{ }}
Phương pháp và các trường được gọi bằng dấu chấm (.)
Bạn có thể access vào 1 biến or fields tại front matter nhờ việc sử dụng dấu chấm (.). Ví dụ
{{ .Params.bar }}
Lúc này, bạn tiến hành gọi 1 Page parameter của trường bar.
Dấu {} có thể được dùng để nhóm các thành phần cùng nhau
{{ if or (isset .Params “alt”) (isset .Params “caption”) }} Caption {{ end }}
Nếu Page Parameter alt đã được định nghĩa và asset Param caption đã được định nghĩa thì biến hình ảnh sẽ được gọi ra.
Một đoạn code có thể chia ra nhiều dòng
{{ if or
(isset .Params “alt”)
(isset .Params “caption”)
}}
Biến (Variables)
{{ $address := “123 Main St.” }}
{{ $address }}
Functions
Hugo đi kèm 1 số Function đơn giản để hỗ trợ xây dựng website.
Vòng lặp
Go template luôn sử dụng thuộc tính range để tạo vòng lặp cho map, mảng hoặc slice
Điều kiện Conditional
{{ with .Params.title }}
{{ . }}
{{ end }}
Ví dụ với việc chọn thành phần title của Page front matter, nếu có giá trị thì sẽ hiển thị, không thì sẽ để trống.
{{ with .Param “description” }}
{{ . }}
{{ else }}
{{ .Summary }}
{{ end }}
Nếu Param description được set, chúng sẽ được hiển thị, còn nếu để trống thì giá trị biến Summary sẽ được gọi ra.
{{ if isset .Params “title” }}
{{ index .Params “title” }}
{{ end }}
Nếu Param title được chọn, thẻ h4 sẽ được gọi ra. (Đây là cách dài dòng hơn)
Và, Hoặc
{{ if (and (or (isset .Params “title”) (isset .Params “caption”)) (isset .Params “attr”)) }}
Nếu giá trị title HOẶC giá trị caption được set VÀ giá trị attr được set
Pipes: dẫn truyền dữ liệu
Một tính năng mạnh mẽ của Go Templates là khả năng dẫn truyền dữ liệu bằng Pipes. mỗi output của 1 đường dẫn trở thành input của 1 ống dẫn khác
Xáo trộn sequences 1 -5
{{ shuffle (seq 1 5) }}
{{ (seq 1 5) | shuffle }}
Sequences 1 – 5 xáo trộn
Index
{{ index .Params “disqus_url” | html }}
Output của thuộc tính index gắn với Params disqus và show ra html
Cách viết tắt or thành |
{{ if or (or (isset .Params “title”) (isset .Params “caption”)) (isset .Params “attr”) }}
Stuff Here
{{ end }}
Nếu hoặc Param title và caption được set HOẶC Param “attr” được chọn. Phần này có thể được viết thành
{{ if isset .Params “caption” | or isset .Params “title” | or isset .Params “attr” }}
Stuff Here
{{ end }}
Nếu Param “caption” được chọn hoặc “title” hoặc “attr”
Context (Dấu chấm)
The most easily overlooked concept to understand about Go Templates is that {{ . }} always refers to the current context.
- In the top level of your template, this will be the data set made available to it.
- Inside of an iteration, however, it will have the value of the current item in the loop; i.e., {{ . }} will no longer refer to the data available to the entire page.
If you need to access page-level data (e.g., page params set in front matter) from within the loop, you will likely want to do one of the following:
Một concept thường rất hay dùng trong Template của Go đó là sử dụng {{ . }} – tương đương với việc sử dụng bối cảnh hiện tại:
- {{ . }} sử dụng ở đầu 1 template, nó sẽ là data set được dùng để sử dụng
- Trong một vòng lặp lại, nhưng chúng sẽ phản ánh giá trị hiện tại trong vòng lặp, chứ không phải data trong cả trang
Việc sử dụng context sẽ giúp bạn access & xử lý được dữ liệu nằm trong từng trang (page, post…)
Định nghĩa biến độc lập
Ví dụ dưới đây nói về cách định nghĩa một biến với context (bối cảnh) độc lập
tags-range-with-page-variable.html
{{ $title := .Site.Title }}
{{ range .Params.tags }}
{{ . }}
– {{ $title }}
{{ end }}
Trong đó file template tags-range-with-page-variable.html sẽ tạo 1 vòng loop với những đường link chứa thẻ tags
- $title := .Site.Title sử dụng context của chính page đó để thể hiện dữ liệu về tên site
- context {{ . }} đưa vào vòng loop sẽ phản ánh giá trị của từng giá trị trong vòng loop
Sử dụng $ để access vào các biến Global
$ sử dụng để giúp bạn access vào các biến global của dữ liệu
{{ $title := .Site.Title }}
{{ range .Params.tags }}
{{ . }}
– {{ $.Site.Title }}
{{ end }}
Điểm khác biệt của việc sử dụng $ là chúng sẽ gọi ra biến Title Site của từng phần tử trong vòng loop.
Use Content (Page) Parameters
You can provide variables to be used by templates in individual content’s front matter.
An example of this is used in the Hugo docs. Most of the pages benefit from having the table of contents provided, but sometimes the table of contents doesn’t make a lot of sense. We’ve defined a notoc variable in our front matter that will prevent a table of contents from rendering when specifically set to true.
Here is the example front matter (YAML):
Bạn có thể cung cấp các biến để sử dụng trong templates dựa theo dữ liệu đến từ front matter
Front matter
-–
title: Roadmap
lastmod: 2017-03-05
date: 2013-11-18
notoc: true
-–
Để xây dựng phần table of content của một template tương ứng với Front matter kể trên
layouts/partials/toc.html
{{ if not .Params.notoc }}
{{.Title}}
{{.TableOfContents}}
{{ end }}
Nếu Parameter notoc là false thì sẽ gọi ra phần Table of content
Lưu ý rằng các Parameter của phần nội dung có thể được access thẳng vào các biến .Title, .TableOfContents
Sử dụng Site Configuration Parameter
You can arbitrarily define as many site-level parameters as you want in your site’s configuration file. These parameters are globally available in your templates.
For instance, you might declare the following:
Bạn có thể tùy ý define nhiều site-level parameters như bạn mong muốn ở file site configuration. Đây là ví dụ – bạn muốn tạo 1 param về copyright
[params]
copyrighthtml = “Copyright © 2017 John Doe. All Rights Reserved.”
sidebarrecentlimit = 5
twitteruser = “spf13”
Tiếp đó, bạn gắn chúng vào footer
{{ if .Site.Params.copyrighthtml }}
{{.Site.Params.CopyrightHTML | safeHTML}}
{{ end }}
Nếu params copyright của Site là true thì sẽ load ra giá trị này dưới dạng safeHTML
Bạn có thể tạo vòng loop với số lượng bài theo biến Site Params sidebarrecentlimit
Recent Posts
{{- range first .Site.Params.SidebarRecentLimit .Site.Pages -}}
{{.Title}}
{{- end -}}
Tạo ra 1 vòng loop với giá trị theo biến Site Params sidebarrecentlimit
Tạo vòng loop cho biết các sự kiện sắp tới
Giả dụ bạn muốn index những thông tin có front matter theo dạng này:
{{ range where .Pages.ByDate “Section” “events” }}
{{ if ge .Date.Unix now.Unix }}
{{ .Type | title }} —
{{ .Title }} on
{{ .Date.Format “2 January at 3:04pm” }}
at {{ .Params.place }}
{{ end }}
{{ end }}
Vòng loop này sẽ tạo theo những sự kiện sẽ được tổ chức trong tương lai. Phần .Date.Format cho thấy tính nội suy của Go trong việc xác định Format date phù hợp
Template Lookup Order
Hugo sử dụng layout của những page cho sẵn với thứ tự đã được định nghĩa trước. Tương tự như việc làm themes WordPress, khi bạn tạo 1 custom post type thì tương ứng như vậy sẽ ra 1 single-post-type.php tương ứng.
Loại (Kind)
Page kind (homepage là 1 loại)
Hãy nhìn ví dụ dưới đây
- Nếu loại page là single page thì lúc này hugo sẽ bám theo template _default/single.html
- Nếu loại page là list page, lúc này chúng ta sẽ tìm kiếm template _default/list.html
Layout
Có thể được định nghĩa trong Front matter của từng loại page
Luật tìm kiếm template files của Hugo
Đối với các thành phần trong 1 page (List, li…)
Như vậy, có thể thấy là Hugo đã có những quy tắc về Lookup Template tương đối chuẩn chỉnh & có tính logic cao. Ta có thể tận dụng để theo dõi các template tương ứng
Base Template and Block
Cách sử dụng baseof.html
Base of template sẽ là template có quyền cao hơn so với các template tương ứng khác, bạn có thể tạo ra khối header, footer bất biến ở đây
và các phần content khác ở đây sẽ thay đổi single, list.html, và chúng được gọi là Block template
Bố cục sẽ bao gồm cấu trúc
{{ block main }}
-——-Content here———-
{{ end }}
Bạn cũng có thể đổi các thành phần nằm trong khối block main này (file baseof.html) nhưng chúng có thể được thay đổi nếu trong dạng single.html hoặc list.html có cùng khối
{{ block main }}
-——-Different content——-
{{ end }}
List content Templates
List templates được sử dụng cho templates dạng nội dung có _index.html (Hoặc Page Bundles dạng nhánh)
List.html là content sẽ chịu trách nhiệm cho các list content (content archive…)
Phần _index.html sẽ chứa một số thông tin cơ bản xoay quanh loại templates này
Nếu bạn muốn xây dựng 1 layout list hoàn toàn riêng biệt thì bạn có thể sử dụng chức năng layouts có sẵn của hugo, layouts sẽ giúp bạn overwrite layout gốc của giao diện
Ví dụ: trong hugo/themes/tên-themes/layouts/_default/list.html
Bạn có thể overwrite bằng hugo/layouts/_default/list.html
{{ define “main” }}
{{.Title}}
{{.Content}}
{{ range .Pages }}
{{.Date.Format “2006-01-02”}} | {{.Title}}
{{ end }}
{{ end }}
Thử phân tích đoạn code phía trên, ta sẽ thấy chúng gọi biến .Title và .Content nằm trong file _index.html.
Thử dụng hàm range để gọi vòng loop đối với toàn bộ Pages của từng section website. Chúng sẽ loop tới từng Pages và lôi ra đường link chứa Permalink dưới nhãn là Title của từng pages
Một số cấu trúc list phổ biến
{{ partial “header.html” . }}
{{ partial “subheader.html” . }}
{{ .Title }}
{{ range .Pages }}
{{ .Render “li”}}
{{ end }}
{{ partial “footer.html” . }}
This list template has been modified slightly from a template originally used in spf13.com. It makes use of partial templates for the chrome of the rendered page rather than using a base template. The examples that follow also use the content view templates li.html or summary.html.
list template được chỉnh sửa 1 chút để chia về partial template thay vì dùng base templates. Đó là lí do ta định nghĩa 1 partial tên là li.html
Sử dụng lệnh Render “li” để gọi phần content li tương ứng trong 1 section
Taxonomy Templates
layouts/_default/taxonomy.html
{{ define “main” }}
{{ .Title }}
{{ range .Pages }}
{{ .Render “summary”}}
{{ end }}
{{ end }}
Taxonomy.html sẽ load ra tất cả những Term để phân loại nội dung & với mỗi 1 thành phần thì ta sử dụng summary để định nghĩa cách hiển thị của từng term
Order content
Hugo lists render the content based on metadata you provide in front matter. In addition to sane defaults, Hugo also ships with multiple methods to make quick work of ordering content inside list templates:
Hugo show content dựa vào metadata bạn cung cấp tại front matter, bạn có thể xây dựng nhiều dạng archive theo ý muốn, dựa theo thuộc tính range .Pages.ByParam “term”
Homepage templates
Homepage tương tự như những list page khác của Hugo, chấp nhận phần nội dung và front matter từ _index.md. Phần nội dung này sẽ live tại root của content folter
content/_index.md
Và tương đương với meta data này, file tham chiếu tương ứng là layouts/index.html
{{ define “main” }}
{{.Title}}
{{ with .Params.subtitle }}
{{.}}
{{ end }}
{{.Content}}
{{ range first 10 .Site.RegularPages }}
{{ .Render “summary”}}
{{ end }}
{{ end }}
Đây là templates bao gồm các trường .Title, Params.subtitle và phần content tại _index.md
Section Page Templates
Templates sử dụng cho section pages là dạng list và chứa tất cả các biến & phương pháp cho list page
section pages là những thành phần như sau: (Có thể bao gồm cả list post…nhưng rộng hơn)
content
└── blog <– Section, because first-level dir under content/
├── funny-cats
│ ├── mypost.md
│ └── kittens <– Section, because contains _index.md
│ └── _index.md
└── tech <– Section, because contains _index.md
└── _index.md
- Section sẽ cover các Pages Bundles dạng nhánh
- Section sẽ cover phần blog ở root content (first level dir under content
Page kinds (Loại trang)
Section phản ánh nhiều loại nội dung khác nhau như home, page, section, taxonomy (categories, tags), term (khái niệm phân loại content con của taxonomy)
Tạo ra Default sections template
Dưới đây là ví dụ tạo ra 1 templates section mặc định
layouts/_default/section.html
{{ define “main” }}
{{ .Content }}
{{ range .Paginator.Pages }}
{{.Title}}
{{ partial “summary.html” . }}
{{ end }}
{{ partial “pagination.html” . }}
{{ end }}
Cần chú ý 1 chút:
phần nội dung này sẽ lấy .Content tại _index.html của bất kỳ section nào, tiếp đó sẽ load 1 vòng loop có Paginator
Cùng với đó, phần summary.html nằm cùng thư mục _default cũng sẽ được load ra
Tạo ra 1 section template với .Site.GetPage
└── content
├── blog
│ ├── _index.md # “title: My Hugo Blog” in the front matter
│ ├── post-1.md
│ ├── post-2.md
│ └── post-3.md
└── events #Note there is no _index.md file in “events”
├── event-1.md
└── event-2.md
Có 1 dạng section nữa là phần section không có _index.md (Xem ví dụ Event). Nếu dùng lệnh .Site.GetPage sẽ không có giá trị gì được trả về nếu không có _index.md. Đồng thời, nếu giá trị cũng không được tìm thấy ở Front matter ở /blog/_index.md, template sẽ gọi ra section name
Nếu Blog có 1 section index page nằm ở Front matter với giá trị content/blog/_index.md. Code phía trên sẽ trả về giá trị
My Hugo Blog
Nhưng nếu chúng ta thử lắp nó vào events (vốn không có giá trị _index.md,
{{ with .Site.GetPage “section” “events” }}{{ .Title }}{{ end }}
Thì kết quả trả về sẽ là “Event”
Array