+++
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:

![About page](about_page.jpg)

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!:

![Navigation bar with About page](about_navbar.jpg)