Creating an about page on existing theme

Using Themes
1

I have a problem that is probably quite easy to solve, but because I’m new to Hugo and programming in general, I couldn’t find anything to help me with the following problem.

I’m using Manis theme and I used exampleSite config file to get started. I would like the menu bar to have an About button which leads straight to the about page, no lists or additional pages needed. Right now, the only way I have found is to make an About folder in Content and a separate post in that folder, just as you would make a blogpost. I also added these lines in the config file to make the button appear.
[[menu.main]]
name = “About”
url = “/about”

As I mentioned before, this shows the about page as a separate post, which is not ideal. Any help or references to similar topics would be appreciated.

2

All these statements are confusing. Do you want the about page to be a section of the homepage? Because having a separate page is the correct way to link to it.

3

Right now, I have a menu bar that looks like this:
Menu bar
This leads to a separate page like this:
About page

From here, I have to click once again on the about article to reach the final page. I’m not planning on releasing about posts every week so I would like to click on the menu bar and arrive straight on the about article/post or however you call it.

4

I suspect you’ve added _index.md instead of index.md to your about folder (see page bundles). Instead, delete that folder and do the following—

  1. Navigate to your site’s directory and create a leaf bundle inside content/about/index.md with the command hugo new about/index.md.
  2. Open the page you created. Delete the draft: true entry in your front matter and paste this code below the date entry
url: about
_build:
  list: never

So your page should now look like this

---
title: "Test"
date: 2023-03-21T12:40:07+06:00
url: about
_build:
  list: never
---
your content here

(I recommend deleting the date too).
3. Your menu in config.toml

[menu]
 [[menu.main]]
    name = "About"
    pageRef = "/about"
    weight = 10
  1. Run hugo server and open the page now. The link should work as expected.

(See build options for more about the _build entry.)

5

This is much better than my first solution, thanks! I still have a few questions.
One small problem is that when I remove the date, it still appears on the about page, but instead of a normal one its Jan 01, 0001. Is it a because of the theme or am I missing something? My config file has also been changed.
Example

And is there a difference, if I use pageRef or url in config file? It seems to work both ways. Also, what does the weight line do?

6

It is the theme. Usually, about pages don’t have dates. To correct the issue, you can either:

  1. Retain the date in the front matter; or
  2. Add noMeta: true in your about page–
---
title: "Test"
date: 2023-03-21T12:40:07+06:00
url: about
noMeta: true
_build:
  list: never
---

Then Copy the file layouts/partials/title.html in the theme into the same path in the base layouts folder of your Hugo site, where the config.toml file is. Then replace the highlighted code here with the following:

{{- if ne .Params.noMeta }}
    <h5>
		{{ $dateformat := .Site.Params.DateFmt | default "Jan 02, 2006" }}
		<time datetime="{{.Date}}">{{ .Date.Format $dateformat }}</time>
		<span class="no-print">
			{{ with .Params.tags -}}
			-
				{{ range . }}
				<a href="/tags/{{.}}">{{.}}</a>
				{{ end }}
			{{- end -}}
			{{- with .Params.workURL -}}
			-
			<a href="{{.}}">{{ T "workHomepage" }}</a>
			{{- end -}}
		<span>
	</h5>
{{- end }}

This should remove the date and tags from the about page. If you need to to the same for other pages or posts in future, just add the noMeta: true in the front matter.

Yes! For the configuration file, pageRef is meant for internal links and also enables you do add/highlight the active class with CSS in Hugo with either IsMenuCurrent (IsMenuCurrent | Hugo) or HasMenuCurrent (HasMenuCurrent | Hugo). url should be used for external links. But be aware pageRef should follow the page path e.g. /about in your example or if the content is in posts/a-post/index.md (assuming you are using page bundles) then pageRef = "/posts/a-post". Also, don’t add a trailing slash with pageRef.

It defines the order of appearance of your menus on the frontend. So, menus with a lower weight (like 10) will appear first in your order. The weight option takes both positive and negative intergers (so -10 and 10 will still work). I prefer using weights in multiples of 10 (10, 20, 30, etc) so that, in case you need to add some menus before others, then you can choose another weight between these numbers, e.g. between 11-19 will place a menu before the one with weight 20.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.