Working with Jekyll templates
Jekyll include files¶
There are assorted Jekyll include files available for use inside of Jekyll content. Note that these "includes" cannot be used in site configuration settings or indicator configuration settings. They are primarily intended for use in page/post content, layouts, overrides, or other include files.
Back-to-top links¶
For displaying a link that takes the user back to the top of the page. Example:
{% include back-to-top.html %}
Custom content for the head¶
To add custom content in the <head>
element (such as web fonts) you can override the _includes/head-custom.html
file. In your version you can add anything you'd like, as needed.
Variables available on all pages¶
Jekyll provides a page
variable for use in any of files in _layouts
and _includes
(referred to here as "templates"). This page
variable contains helpful contextual information about the current page being rendered. Open SDG adds additional information for your use.
The following variables can be used on any page:
-
page.goals
An array of all the SDG Goals available. Each item in the array contains information about the goal. See "Goal objects" below.
Usage example - printing the names of each goal:
{% for goal in page.goals %} {{ goal.name }} {% endfor %}
-
page.targets
An array of all the SDG Targets available. Each item in the array contains information about the target. See "Target objects" below.
Usage example - printing the names of each target:
{% for target in page.targets %} {{ target.name }} {% endfor %}
-
page.indicators
An array of all the SDG Indicators available. Each item in the array contains information about the indicator. See "Indicator objects" below.
Usage example - printing the names of each indicator:
{% for indicator in page.indicators %} {{ indicator.name }} {% endfor %}
-
page.baseurl
This should be used instead of
site.baseurl
, because it includes necessary subfolders according to the language of the current page.Usage example - printing a link to another page:
<a href="{{ page.baseurl }}/my-page/">My page</a>
-
page.language
The language code for the current page.
Usage example - printing the current language code:
The current language code is {{ page.language }}.
-
page.language_public
The "public" language code for the current page. This may be different from
page.language
in special cases where you prefer a language code that is different from the standard language code for your language. Most sites will not use this.Usage example - printing the current public language code:
The current language code is {{ page.language }}, but the "public" language code is {{ page.language_public }}.
-
page.t
The translations for the current language. More detail on this is available on the configuration page.
Usage example - printing the translation of the word "Goal" (which is available with the key "goal" in the "general" group:
{{ page.t.general.goal }}
-
page.url_by_language
This contains URLs to the current page, but in each language. This is useful if you'd like to link to the same page but in another language.
Usage example - printing a link to the Spanish version of the current page:
<a href="{{ page.url_by_language.es }}">Spanish version</a>
-
page.logo
This contains properties for two attributes of the main logo image: "src" and "alt". This is useful to ensure that the logo for the current language is being displayed.
Usage example - printing the logo image with alt text:
<img src="{{ page.logo.src }}" alt="{{ page.logo.alt }}" />
Variables available on Goal pages only¶
The following variables can be used on goal pages only:
-
page.goal
Information about the current goal. See "Goal objects" below.
Usage example - printing the name of the current goal:
{{ page.goal.name }}
Variables available on Indicator pages only¶
The following variables can be used on indicator pages only:
-
page.goal
Information about the current goal. See "Goal objects" below.
Usage example - printing the name of the current goal:
{{ page.goal.name }}
-
page.target
Information about the current target. See "Target objects" below.
Usage example - printing the name of the current target:
{{ page.target.name }}
-
page.indicator
Information about the current indicator. See "Indicator objects" below.
Usage example - printing the name of the current indicator:
{{ page.indicator.name }}
Goal objects¶
The goal objects mentioned above in page.goal
and page.goals
each contain the following information:
-
icon
- the URL of the goal's icon, for the current language. Examples:- https://example.com/goal-icons/english/goal-1.png
-
name
- the translated name of the goal. Examples:- End poverty in all its forms everywhere
-
number
- the number of the goal. Examples:- 1
- 2
-
short
- the translated short name of the goal. Examples:- No poverty
-
slug
- the slug for the goal, for use in URLs. For goals this is identical to "number". -
sort
- a string suitable for use in sorting the goal. Examples:- 01
- 02
-
url
- the URL of the goal's page in the platform, for the current language. Examples:- /my-base-url/en/1/
Target objects¶
The target objects mentioned above in page.target
and page.targets
each contain the following information:
-
goal_number
- the number of the goal that the target is part of. Examples:- 1
- 2
-
name
- the translated name of the target. Examples:- By 2030, eradicate extreme poverty for all people everywhere, currently measured as people living on less than $1.25 a day
-
number
- the number of the target. Examples:- 1.1
- 1.2
-
slug
- the slug for the target, for use in URLs. Examples:- 1-1
- 1-2
-
sort
- a string suitable for use in sorting the goal. Examples:- 0101
- 0102
Indicator objects¶
The indicator objects mentioned above in page.indicator
and page.indicators
each contain the following information:
-
goal_number
- the number of the goal that the indicator is part of. Examples:- 1
- 2
-
name
- the translated name of the indicator. Examples:- Proportion of population living below the national poverty line, by sex and age
-
number
- the number of the indicator. Examples:- 1.1.1
- 1.2.1
-
slug
- the slug for the indicator, for use in URLs. Examples:- 1-1-1
- 1-2-1
-
sort
- a string suitable for use in sorting the indicator. Examples:- 010101
- 010201
-
target_number
- the number of the target that the indicator is part of. Examples:- 1.1
- 1.2
-
url
- the URL of the indicators's page in the platform, for the current language. Examples:- /my-base-url/en/1-1-1/
-
[all metadata fields for the indicator]
The indicator object contains ALL metadata fields associated with the indicator, as set in the data repository.