Extending Minima Theme

Help
1

I am generating a website for the first time, so I am a beginner. I am attempting to extend the Minima theme to meet my needs and as a first step, I am studying how Minima works. The Minima theme has a home page and that page contains an “About” button in the header. I cannot find where this “About” button comes from. I need to know as I want to add a couple of other navigation buttons in the same place. Can anyone tell me where I should be looking for the code that generates the button?

1 Like
2

When you say “button”, I think you are referring to the navigation link that appears at the top of the page or in the hamburger, correct? You can take a look at the repo for this theme here, and you will notice there is an about.md page.

The way Jekyll works is you create YAML front matter at the top of the page that you can use programmatically using the Liquid.

Here, you can see the about.md page includes front matter for the layout, title, and permalink:

---
layout: page
title: About
permalink: /about/
---

Minima was programmed using Liquid and what it does is look for any layout: page that includes the title: YAML tag. If you go to your code and remove title: About, you will notice that the page no longer shows up as a link in the navigation bar.

So, if you want to create a page called “Our Products” and you want that in the navigation, you would create a page anywhere on your site (just not in a folder starting with an underscore), like this:

./products/our-products.md

---
layout: page
title: Our Products
---

You could of course add a permalink and all sorts of other data, but that is the minimum level of data you require to create a new navigation item in Minima. After you save the file and your site reloads, you will notice the link in your navigation.

Other options

Now keep in mind there are many ways to create a navigation bar and that is how the Minima theme does it. You do not have to use Minima’s theme if you do not want to.

You can override a theme. After you do that, all the files that make up the theme will be located in your website’s folder. Then, you can modify the ./_includes/header.html file, which you can also see here.

You will find the following code that you can modify to display the menu the way you want to:

./_includes/header.html

...
{%- for path in page_paths -%}
  {%- assign my_page = site.pages | where: "path", path | first -%}
  {%- if my_page.title -%}
    <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
  {%- endif -%}
{%- endfor -%}
...

I hope that helps!

1 Like