134 lines
3.5 KiB
Markdown
134 lines
3.5 KiB
Markdown
+++
|
|
title = 'Adding an About page'
|
|
show_toc = true
|
|
weight = 40
|
|
+++
|
|
|
|
For the finishing touch, let's add an "About" page to talk a bit about your webcomic.
|
|
|
|
Once again, this will be a page under the `content/` folder.
|
|
|
|
<!--more-->
|
|
|
|
|
|
## What is and is not a *comic* page
|
|
|
|
Hugo knows the type of a page by looking at the *first* folder after `content/`.
|
|
For example, `content/comic/E01P01/` is a `comic` page.
|
|
|
|
The type can be anything, so `content/animal/insect/ant/` would be of type `animal`.
|
|
But Silicate doesn't not know what to do with that type, so it will a "normal" or "default" page.
|
|
|
|
So, simply put: anything under `content/comic/` will be a comic page, and everything
|
|
*outside* will be a "normal" page.
|
|
|
|
|
|
## Creating the About page
|
|
|
|
Here's the twist: since we don't care about type for the "about" page, we don't
|
|
need a folder.
|
|
|
|
Just like `index.md`, create a `content/about.md` text file.
|
|
|
|
Then, you just need to add a front matter and some content! In the case of the Pepper & Carrot demo:
|
|
|
|
```
|
|
+++
|
|
title = 'About'
|
|
+++
|
|
|
|
### Silicate Pepper & Carrot demo
|
|
|
|
This website is a demo for Silicate using [Pepper & Carrot webcomic](https://www.peppercarrot.com/)
|
|
comic pages as an example.
|
|
|
|
### Browse the source
|
|
|
|
You can see the source used to create this website here :
|
|
<https://silicate.aribaud.net/demos-sources/pepper-carrot>
|
|
|
|
### Check out Silicate
|
|
|
|
You can learn more about Silicate on its main website:
|
|
<https://silicate.aribaud.net/>
|
|
```
|
|
|
|
Now, your website's files should look like this:
|
|
|
|
```
|
|
my_webcomic/
|
|
hugo.toml
|
|
content/
|
|
about.md
|
|
comic/
|
|
_index.md
|
|
E01P01/
|
|
index.md
|
|
transcript.md
|
|
strips/
|
|
E01P01.jpg
|
|
```
|
|
|
|
You can navigate to `https://localhost:1313/about/` and you should see the about page:
|
|
|
|
|
|
|
|
Unlike the comic pages, we have no folder with a `index.md` file, directly a `.md` file because we
|
|
need no other resources. This is what Hugo calls a "regular page", as opposed to a "page bundle" like before.
|
|
|
|
## Adding the About page to the header navigation bar
|
|
|
|
Right now the header navigation bar only shows "Home" and "Archive"; we want to add our new "About" page to it.
|
|
|
|
The header is configured through `hugo.toml`.
|
|
Since nothing is set yet for the main menu, it uses defaults values from `themes/silicate/hugo.toml`.
|
|
|
|
First, let's open `themes/silicate/hugo.toml` and copy-paste the whole `[menus]` table into
|
|
our own `hugo.toml`.
|
|
|
|
We should have something like this now:
|
|
|
|
```
|
|
title = 'Silicate Pepper & Carrot Demo'
|
|
baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'
|
|
theme = 'silicate'
|
|
copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'
|
|
|
|
[menus]
|
|
[[menus.main]]
|
|
name = 'Home'
|
|
pageRef = '/'
|
|
weight = 10
|
|
|
|
[[menus.main]]
|
|
name = 'Archive'
|
|
pageRef = '/comic'
|
|
weight = 20
|
|
|
|
[params]
|
|
[params.author]
|
|
email = 'jdoe@example.org'
|
|
name = 'John Doe'
|
|
```
|
|
|
|
Now, we can add our own About page entry inside the `[menus]` table:
|
|
|
|
```
|
|
[[menus.main]]
|
|
name = 'About'
|
|
pageRef = '/about'
|
|
weight = 30
|
|
```
|
|
|
|
* `name` is what is displayed in the nav
|
|
* `pageRef` is what page should be displayed, relative to the
|
|
`content/` folder
|
|
* `weight` is for sorting the menu entries just like we saw for pages
|
|
|
|
Be careful, we need `[[menus.main]]` and **not** `[menus.main]`.
|
|
|
|
Now, if we look at the home page, we should have a working `About` link
|
|
leading to the corresponding page!:
|
|
|
|
|