In this article
Usage
Via data attributes
Use data-element="article-navigation"
with an empty element on the Article page and pass the article ID using the data-article-id
attribute:
<div data-element="article-navigation" data-article-id="{{article.id}}"></div>
If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Via JavaScript
The Article Navigation plugin can be instantiated against a element using JavaScript:
<div id="article-navigation"></div>
<script type="text/javascript">
ready(function() {
var articleNavigation = document.getElementById('article-navigation');
if (articleNavigation) {
new ArticleNavigation(articleNavigation, {
articleId: {{article.id}},
// Options go here
});
}
});
</script>
Example
Options
Name | Type | Default | Description |
---|---|---|---|
articleId | string number null | null | The ID of the current article. |
labels | array | [] | The label(s) to filter articles by. |
properties | array | See below | The object properties from the REST API response to pass to the templating function. |
template | string null | null | The name of the template to use. |
templateData | object | {} | Additional data to expose to the templating function. |
The following article properties are passed to the templating function by default:
id
title
html_url
position
promoted
draft
The following section and category properties are required by the plugin to sort the collection of articles:
section_id
category_id
Events
Class | Properties |
---|---|
articleNavigation.render | Fires when the article list has been rendered. |