Hướng dẫn Hugo Cms toàn tập

Đâ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”