Add breadcrumbs to articles
This commit is contained in:
parent
89f86d4565
commit
ddbd68f611
|
@ -5,6 +5,16 @@ metadata:
|
|||
---
|
||||
|
||||
<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>
|
||||
<div class="article__info">
|
||||
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
|
||||
|
@ -35,3 +45,19 @@ metadata:
|
|||
{% include "main/content-nav.njk" %}
|
||||
{% endif %}
|
||||
</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>
|
|
@ -267,6 +267,7 @@ main {
|
|||
/* background-color: var(--clr-quote-bg); */
|
||||
padding: 2.5rem clamp(1rem, 5%, 3rem);
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.article,
|
||||
|
|
Loading…
Reference in New Issue