The way we left “My new Hugo Site” wasn’t perfect. We added some content, created a new type of posts… but we don’t have a menu to see that new post type that we called “news”.
So, on the last article we learned how to use our theme. Now we know we can use Syntax highlighting, Disqus for comments, include Google analytics… now let’s create a menu to navigate through the different section on our site.
Add a menu to your site
How do we add a menu? Well, the theme we chose can helps us. If you go to
my-new-site\themes\beautifulhugo\exampleSite You can see they give us an example of site
that we can create with this theme. On the
config.toml file you can see an example for the menu that they already support.
An adaptation to our site would be:
[[menu.main]] name = "Blog" // name that will show up on the menu url = "/" // url where the link will take you weight = 1 // order on the menu [[menu.main]] name = "News" url = "/news" weight = 2 [[menu.main]] name = "Tags" url = "tags" weight = 3
Adding this, you’ll see your brand new menu on the top of the site, on the right hand side.
Now we can navigate to our new post type (news) and back to our main blog.
See that there is also a “Tags” item on the menu. How to add content here? Adding tags to your content, on the front matter. For example in one of the post we wrote:
--- title: "One More Post" date: 2017-07-10T18:24:49+02:00 draft: false subtitle: "" tags: ["intro", "post"] ---
Those terms will show up on the page like so:
More data on my site
If you want to add your email on the site, your twitter account, your logo… “Beautiful Hugo” got you covered. Take a look to the example site they offer.
You can add something like this to your
[Params] subtitle = "Build a beautiful and simple website in minutes" logo = "img/avatar-icon.png" favicon = "img/favicon.ico" dateFormat = "January 2, 2006" commit = false rss = true comments = true [Author] name = "Aida Martinez" email = "firstname.lastname@example.org" twitter = "aida_41d4ma"
and get some cool extras on the site: