Adding Navigation Buttons

User Guide → Adding Navigation Buttons

Adding Navigation Buttons

Navigation buttons can greatly help your website visitors browse through your content with ease.

Overview of steps

  1. Define a function to read the page title and create navigation buttons via Nunjucks.
  2. Define a title variable in the content file and invoke the function created to render the navigation buttons.

In the following example, we will be editing the site content generated from the default template (by running markbind init in the terminal).

Adding the required file and folder

  1. Create a folder njk in the root directory.
  2. In the folder, create a file common.njk with the following code:
common.njk
{% macro previous_next(previous_page, next_page) %}
<div class="clearfix">
{% if previous_page != ''%}
<span class="float-start">
    <a class="btn btn-light" href="{{ previous_page }}.html">
        <md>:far-arrow-alt-circle-left: <include src="{{ previous_page }}.md#title" inline />
        </md>
    </a>
</span>
{% endif %}
{% if next_page != ''%}
<span class="float-end">
    <a class="btn btn-light" href="{{ next_page }}.html">
        <md>
            <include src="{{ next_page }}.md#title" inline /> :far-arrow-alt-circle-right:
        </md>
    </a>
</span>
{% endif %}
</div>
<br>
{% endmacro %}

Example Here is an example of how the default template's directory structure will look like after the changes.

root ├── _markbind ├── _site ├── contents ├── njk/ │ └── common.njk ├── stylesheets ├── index.md └── site.json

Editing the content files

  1. Add the following code into the topic1.md file:
topic1.md
<!--- Add this to the top of the file -->
<span id="title" class="d-none">Topic 1</span>

<!--- Add this to the end of the file -->
{% from "njk/common.njk" import previous_next %}
{{ previous_next('', 'topic2') }}
  1. Add the following code into the topic2.md file:
topic2.md
<!--- Add this to the top of the file -->
<span id="title" class="d-none">Topic 2</span>

<!--- Add this to the end of the file -->
{% from "njk/common.njk" import previous_next %}
{{ previous_next('topic1', '') }}

Example Here is an example of how the files will look like after the changes.

topic1.md
<span id="title" class="d-none">Topic 1</span>

<br>

# Topic 1

> More content to be added

{% from "njk/common.njk" import previous_next %}
{{ previous_next('', 'topic2') }}
topic2.md
<span id="title" class="d-none">Topic 2</span>

<br>
<box>
    <span class="fas fa-tools"></span><span> This is a placeholder page</span>
</box>

{% from "njk/common.njk" import previous_next %}
{{ previous_next('topic1', '') }}

You should now be able to navigate between Topic 1 and Topic 2 with ease!

Whenever you create a new page, be sure to include the following code below and replace the parts enclosed in the square brackets e.g [Name_Of_Section].

<!--- Creates an invisible title used in the common.njk file -->
<span id="title" class="d-none">[Name_Of_Section]</span>

{% from "njk/common.njk" import previous_next %}
{{ previous_next('[Previous_Page_Filename]', '[Next_Page_Filename]') }}

Effect after changes are made

  1. Changing [Name_Of_Section] will affect the text in the navigation button when attempting to navigate to the current page from the previous and next pages.
  2. Changing [Previous_Page_Filename] and [Next_Page_Filename] will link the current page to the respective previous and next pages.
  3. Line 4 aims to import the previous_next function from common.njk file that you created earlier. You can refer to the Nunjucks docs for the syntax here.
  4. Line 5 aims to call the previous_next function you imported. You can refer to the Nunjucks docs for the syntax here.

Redirecting to a Custom 404 Page

Templates