Pagelist
The ::pagelist element allows you to create a dynamic page directory that displays a list of pages on a website. Various options can be used to filter the displayed pages, choose the format of the list, and determine the order.
::pagelist{format="<Format>" source="<Source>" orderBy="<OrderCriteria>"}Parameters
format
Defines how the list is rendered:
ol: Creates an ordered listul: Creates an unordered listglossary: Creates a grouped list by first letter#<snippet>: Uses a custom snippet to generate the list. The snippet receivespagescontaining all filtered pages.
source
A query expression to filter pages. Supports:
Fields:
href(regex): Match the page URLname(regex): Match the page namekeyword(regex): Match any of the page's keywordsdescription(regex): Match the page description<customField>(regex): Match any custom frontmatter field
Operators:
AND: Both conditions must matchOR: Either condition must matchNOT: Negate a condition(): Group conditions to control precedence
Operator precedence (highest to lowest): NOT > AND > OR
orderBy
Sort the results by any field. Format: field:direction
Built-in fields:
name: Sort by page nameindex: Sort by page indexhref: Sort by page URL
Custom fields:
- Any frontmatter field can be used (e.g.,
difficulty:asc,priority:desc)
Directions:
asc: Ascending orderdesc: Descending order (default)
Pages with missing or null values for the sort field are placed at the end.
limit
Limit the number of results returned.
::pagelist{source="href(/elements/.*)" limit="5"}Query Language Examples
Basic Queries
::pagelist{source="href(/elements/.*)"}
::pagelist{source="name(.*IDE.*)"}
::pagelist{source="keyword(tutorial)"}AND - Both conditions must match
::pagelist{source="href(/elements/.*) AND keyword(media)"}
::pagelist{source="name(.*IDE.*) AND href(.*sql.*)"}OR - Either condition matches
::pagelist{source="name(Video) OR name(Audio)"}
::pagelist{source="keyword(beginner) OR keyword(tutorial)"}NOT - Exclude matching pages
::pagelist{source="href(/elements/.*) AND NOT name(Video)"}
::pagelist{source="NOT keyword(deprecated)"}Parentheses - Group conditions
::pagelist{source="href(/elements/.*) AND (name(Video) OR name(Audio))"}
::pagelist{source="(href(/elements/.*) OR href(/advanced/.*)) AND keyword(test)"}Custom Frontmatter
If your pages have custom frontmatter fields:
---
name: My Page
difficulty: beginner
tags:
- tutorial
- video
---You can query them:
::pagelist{source="difficulty(beginner)"}
::pagelist{source="tags(tutorial)"}
::pagelist{source="difficulty(beginner) OR difficulty(intermediate)"}
::pagelist{source="tags(video) AND NOT difficulty(advanced)"}Sorting Examples
Sort by name
::pagelist{source="href(/elements/.*)" orderBy="name:asc"}
::pagelist{source="href(/elements/.*)" orderBy="name:desc"}Sort by custom frontmatter
::pagelist{source="tags(tutorial)" orderBy="difficulty:asc"}
::pagelist{source="href(/.*)" orderBy="priority:desc"}Format Examples
Glossary
::pagelist{format="glossary" source="href(/glossary/.*)"}A Glossary of all Elements
::pagelist{format="glossary" source="href(/elements/.*)"}Unordered List by href
::pagelist{format="ul" source="href(/elements/.*)" orderBy="name:desc"}- YouTube
- Web IDE
- Video
- Typst
- Tiles
- Text Input
- Tabs
- Struktog
- SQL IDE
- Snippets
- Slideshow
- Scratchblock
- QR Code
- Pyide
- Protect
- PlantUML
- Pagelist
- P5
- Online IDE
- Multievent
- Mermaid
- Math
- Learningmap
- JSXGraph
- H5P
- Glossary
- GeoGebra
- Excalidraw
- Emoji
- Embed
- Download
- Collapsible
- Bookmarks
- Audio
- Archive
- Alert
- ABC Music
Ordered List with IDE in the name and additionally with SQL in the URL
::pagelist{format="ol" source="name(.*IDE.*)"}
::pagelist{format="ol" source="href(.*sql.*) AND name(.*IDE.*)"}Using OR to list multiple specific pages
::pagelist{format="ul" source="name(Video) OR name(Audio) OR name(YouTube)"}Excluding pages with NOT
::pagelist{format="ul" source="href(/elements/.*) AND NOT name(.*IDE.*)" orderBy="name:asc" limit="10"}Custom snippet
The snippet is located in the snippets folder with the name list.md.hbs
{{#each pages}}
- {{{ name }}}: [{{ href }}]({{ href }})
{{/each}}::pagelist{format="#list" source="name(^V.*)"}- Vercel: /hosting/vercel
- Video: /elements/video
When using custom snippets with pagelist, the file-related helpers are not available:
filerfilebase64rbase64
All other helpers (like dateformat, truncate, truncateWords, etc.) work normally.