Website Topic Pages - OpenDataEnterprise/sdg-nri-website GitHub Wiki

Introduction

The topic pages provide descriptions and resources for each topic category. However, they are the most modularized pages with the most complex construction, each page being composed from a Jekyll template, Jekyll page, and a Vue component, with navigation generated from data files.

Because the generation of each topic page is heavily automated, the format of each page is very prescribed, and manual control of changes and content have to be carefully included and managed.

Front Matter

There are a few front matter items that should be defined for every topic page:

  • layout

    The value of layout determines the template under which this page's content is rendered. This should specifically be set to the topic page layout.

  • permalink

    This value specifies the relative URL path the page should be available under.

    The navigation sidebar on topic pages links each topic to a corresponding page under the /topic/ URL path.

  • title

    This value is fairly self-explanatory. The title should be set to value of the topic's label.

  • topic-tag

    This value is the the one-word tag that uniquely identifies the topic and is used for determining which link (i.e. the active topic) should be highlighted in the topic navigation sidebar.

  • show-resources

    This value determines whether or not the resource-list Vue component, which displays any topic-specific resources, should be loaded for the page.

Templating

Topic pages use the template _layouts/topic.html. The files under _pages/topic only contain the description content for each topic, which is injected by Jeykll into the topic page template. This isolates modifications to the descriptions for each topic, making it safer for non-technical staff to edit copy without the risk of affecting entire topic pages.

Data Files

The underlying data listing these pages are in the _data directory under the root of the website repository. These files are used by Jekyll to construct all of the topic navigation elements on the website. Do not edit these manually.