I will summarize the procedure for adding pages and applying layout to the site (theme: Learn) built with Hugo.
-[Docker] Environment construction for using Hugo -[Docker] Build a site on Hugo and publish it on GitHub
The procedure described above The environment is built and the page is created, and the explanation is based on the assumption that the posts folder is in the "content" folder below.
content
└── posts
└── my-first-post.md
Completed page at the moment
The goal is to create the following site by adding pages (children) and setting index pages (parents).
The final file structure is as follows
content
├── _index.md // baseurl
└── posts
├── _index.md // .../post
├── my-first-post.md // .../post/my-first-post
└── my-second-post.md // .../post/my-second-post
Site index page, page settings depend on folder structure
A page (child) is created by executing the hugo new
command.
In Previous article, the following command has been executed.
hugo new posts/my-first-post.md
By executing this command, the contents described in the "default.md" file in the "archetypes" folder will be added to the specified .md file.
The items added by default are as follows
default.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
You can create a website by filling in these parameters.
Explain how to change the title of the table of contents
Since the title is set in "title:" of "my-first-post.md", change the character string here.
my-first-post.md
---
title: "My First Post" //Specified here
date: 2020-XX-XX
draft: true
---
#title
Try to create a hoge site
If you change to title:" Chapter 1 "
, the following three parts will be changed.
There are two ways to add pages:
hugo new
command as when creating a new pagehugo new
commandThe difference is whether the contents of the default.md file are commanded or entered manually.
Here, copy "my-first-post.md", rename it to "my-second-post.md", save it in the same hierarchy, and add the page
my-second-post.md
---
title: "Chapter 2"
date: 2020-XX-XX
draft: true
---
#Add page
my-first-post.Copy md to modify the contents, my-second.Save as md file
Page added
I want to set the page that is displayed when I click "Post" or "My New Hugo Site" Looking at the current file structure, it is as follows. These are the parent pages, called index pages. Learn Guide: _index.md
content
└── posts
├── my-first-post.md
└── my-second-post.md
By default, there are no files that make up the Post or My New Hugo Site pages. You can configure the page by creating _index.md
in each folder.
_index.md
---
title: "Site information"
date: 2020-XX-XX
draft: true
---
This site is testing Learn customization.
_index.md
---
title: "Customization procedure"
date: 2020-XX-XX
draft: true
---
#Learn customization
_You can edit this page by creating an index file.
With the operations up to this point, the file structure is as follows.
content
├── _index.md
└── posts
├── _index.md
├── my-first-post.md
└── my-second-post.md
Learn provides layouts for chapter pages in addition to regular page layouts
Learn Guide: Create your first chapter page
The layout is applied by adding chapter: true
to the header part and writing as follows.
###Subheading
#title
Write a sentence here
posts> Apply layout for chapters to _index.md file
_index.md
---
title: "Customization procedure"
date: 2020-XX-XX
draft: true
chapter: true //Postscript
---
###Beginners
#Learn customization
_You can edit this page by creating an index file.
Hugo Learn Guide Hugo Content Organization
Recommended Posts