This shows a sample layout for a knowledge base. Each square could link to a tag archive page. In this example, font icons from Font Awesome are used for the graphics, and the layout is pulled from the Modern Business theme. .

Here’s the sample knowledge-base style layout:

Knowledge Base Categories

Getting started

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Navigation

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Single sourcing

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Formatting

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

The layout uses Bootstrap 5 cards in a responsive grid. The row-cols-* classes set how many cards appear in each row at different screen widths, and the icons are stacked Font Awesome icons. View the source of this page (pages/mydoc/mydoc_kb_layout.md) to see the code.

Generating a list of all pages with a certain tag

If you don’t want to link to a tag archive index, but instead want to list all pages that have a certain tag, you could use this code:

Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{ page.url | remove_first: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>

Here’s the result:

Getting started pages: