how to create about page
How to custom a page,not blog page
Create a custom page: about me
About page is not the default page, easily we can consider about.html is a other type of posts, so we need to create a post: the command-line interface (CLI) is:
1
|
hugo new posts/<post-name>.md
|
in this case, we need to type:
1
2
3
|
hugo new about/_index.md
# create a new folder named about, we separate posts folder(default blog folder) and custom folder
|
you might ask why is md file not HTML? In fact, md(markdown) file can store the metadata of your article, about page is a special type of blog. when the application runs, the program will search _index file at first.
Page structure
We can notice, there are some metadatas I have defined in archetype, [title,date, type,layout…], we need to create a about.html for the about page.
Create about.html
Head to layout/ folder, create a html file name about, paste the html content to your about page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{{- define "main" }}
<section class="s:mt-10">
<div class="container">
<div class="flex flex-col sm:flex-row gap-8 sm:my-14">
<!-- Photo -->
<div class="sm:w-2/5 sm:mt-10">
<img src="{{ $.Site.Params.aboutImage }}">
</div>
<div class="w-full sm:w-3/5 sm:mt-10">
<!-- Content -->
{{ .Content }}
</div>
</div>
</div>
</section>
{{- end }}
<!-- .Content is the hugo syntax, load the content you write in md file -->
|
The fix HTML structure is, you can use it in any html file.
1
2
3
4
5
6
7
8
|
{{- define "main" }}
<section class="s:mt-10">
<div class="container">
<div class="flex flex-col sm:flex-row gap-8 sm:my-14">
<!-- add you html content or md content -->
</div>
</section>
{{- end }}
|
’define “main”‘ you can consider it as a tag which will render in the index page automatically
1
|
{{- define "main" }}xxxx{{- end }}
|
about page using HTML and md file
Using HTML tag in md file
In hugo, it provides more flexible way to custom your own HTML page, you can write HTML code in pure HTML file, or you can use HTML tag in MD file. You need add this configuration in config.toml.
1
2
3
4
5
6
7
|
# allow md file shows HTML format
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe= true
hardWraps = false
xhtml = false
|
