Add breadcrumbs to articles

This commit is contained in:
Helen Chong 2024-04-18 22:07:38 +08:00
parent 89f86d4565
commit ddbd68f611
2 changed files with 28 additions and 1 deletions

View File

@ -5,6 +5,16 @@ metadata:
--- ---
<header class="main__header"> <header class="main__header">
<ul class="breadcrumbs">
{% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %}
{%- for entry in breadcrumbNavPages %}
<li>
<a href="{{ entry.url }}" {% if entry.url == page.url %} class="breadcrumbs--active"{% endif %}>{{ entry.title }}</a>
</li>
{%- endfor %}
</ul>
<h1>{{ articleTitle }}</h1> <h1>{{ articleTitle }}</h1>
<div class="article__info"> <div class="article__info">
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }} <p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
@ -35,3 +45,19 @@ metadata:
{% include "main/content-nav.njk" %} {% include "main/content-nav.njk" %}
{% endif %} {% endif %}
</div> </div>
<style>
.breadcrumbs {
justify-self: center;
list-style: none;
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
}
.breadcrumbs--active {
text-decoration: none;
color: var(--clr-bold-txt);
}
</style>

View File

@ -267,6 +267,7 @@ main {
/* background-color: var(--clr-quote-bg); */ /* background-color: var(--clr-quote-bg); */
padding: 2.5rem clamp(1rem, 5%, 3rem); padding: 2.5rem clamp(1rem, 5%, 3rem);
text-align: center; text-align: center;
display: grid;
} }
.article, .article,