Docs

List

Use the list content block to show a list of articles.
Overview   Default List   Filtered List   Custom List   Arguments   Background Type   Heading Type   Input Type  

Overview  

The list block renders a list of articles.

Default List  

Recent Articles
Title Description
Custom Appearance Guide on how to use custom layouts to change the appearance of the homepage, single pages, and list pages.
Automation Guide on how to automate npm and hugo dependencies with GitHub actions.
Versioning Guide on how to create versioned documentation using folders and branch deployments.
Modules Guide on how to develop Hugo modules compatible with Hinode.
Optimization Guide on how to optimize the user experience of your site.
Editing Set up your Hinode site with version control using npm, GitHub and VS Code.
yml 
- _bookshop_name: list
  heading:
    title: Recent articles
    align: start
  input:
    section: tutorials
    reverse: true
    sort: date
  hide_empty: false
  background:
    color: body-tertiary
    subtle: false
  justify: start

Filtered List  

Add the following configuration to your page’s frontmatter to enable data table features:

---
modules: ["simple-datatables"]
---

You can then use sortable, paginate, and searchable to enable inline sorting and filtering.

Recent Articles
Title Description
Editing Set up your Hinode site with version control using npm, GitHub and VS Code.
Optimization Guide on how to optimize the user experience of your site.
Modules Guide on how to develop Hugo modules compatible with Hinode.
Versioning Guide on how to create versioned documentation using folders and branch deployments.
Automation Guide on how to automate npm and hugo dependencies with GitHub actions.
Custom Appearance Guide on how to use custom layouts to change the appearance of the homepage, single pages, and list pages.
yml 
- _bookshop_name: list
  heading:
    title: Recent articles
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  pagination: 5
  hide_empty: false
  background:
    color: body-tertiary
    subtle: false
  justify: start
  sortable: true
  paginate: true
  searchable: true

Custom List  

Customize the list by providing a hook partial.

Recent Articles
Article Published
Editing 2023-04-03
Optimization 2023-04-03
Modules 2023-07-22
Versioning 2023-08-02
Automation 2023-08-21
Custom Appearance 2024-08-20
yml 
- _bookshop_name: list
  heading:
    title: Recent articles
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide_empty: false
  hook: assets/table-hook
  background:
    color: body-tertiary
    subtle: false
  justify: start
  sortable: true

Define the hook partial in your site’s layouts/_partials folder. The following example renders a custom Markdown table consisting of the article’s title and publication date.

{{ $pages := .pages | default dict }}

{{ $content := printf "| %s | %s |\n|-|-|\n" (T "article") (T "published") }}
{{ range $pages }}
    {{ $content = printf "%s[%s](%s) | %s |\n" $content .LinkTitle .RelPermalink 
        (.PublishDate | time.Format "2006-01-02") 
    }}
{{ end }}

{{ return $content }}

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string Background style of the section.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover bool true Flag indicating if the element should be rendered fullscreen.
heading Heading Heading of the content block, including a preheading and content element.
hide_empty bool Hides the entire section when no pages are available.
hook string Render hook for the element’s partial.
id string Unique identifier of the current element.
input Input yes List input of the element. Uses the name of the section to retrieve known pages.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
limit int Maximum number of elements to display.
paginate bool Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination int Number of elements per page in pagination, overrides site settings.
pagination_select string Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires paginate = true. It is recommended to configure values that are a multitude of the pagination value.
searchable bool Toggle the ability to search the dataset.
sortable bool Toggle the ability to sort the columns.
theme select Color theme to apply to the element. Supported values: [light, dark].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrap bool Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_ordinal int
Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string
Background style of the section.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover bool true
Flag indicating if the element should be rendered fullscreen.
heading Heading
Heading of the content block, including a preheading and content element.
hide_empty bool
Hides the entire section when no pages are available.
hook string
Render hook for the element’s partial.
id string
Unique identifier of the current element.
input Input yes
List input of the element. Uses the name of the section to retrieve known pages.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
limit int
Maximum number of elements to display.
paginate bool
Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination int
Number of elements per page in pagination, overrides site settings.
pagination_select string
Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires paginate = true. It is recommended to configure values that are a multitude of the pagination value.
searchable bool
Toggle the ability to search the dataset.
sortable bool
Toggle the ability to sort the columns.
theme select
Color theme to apply to the element. Supported values: [light, dark].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrap bool
Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Input Type  

Name Type Required Default Comment
categories string, slice Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool If set, retrieves all pages below the section or current page recursively. By default, only first-order children are retrieved.
reverse bool true Sets the sort order to descending.
section string Name of the content section.
sort select yes Key to sort by. Supported values: [date, title, weight].
tags string, slice Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.
Name Type Required Default
categories string, slice
Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice
Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool
If set, retrieves all pages below the section or current page recursively. By default, only first-order children are retrieved.
reverse bool true
Sets the sort order to descending.
section string
Name of the content section.
sort select yes
Key to sort by. Supported values: [date, title, weight].
tags string, slice
Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.
On this page