Set up global content layout

This commit is contained in:
Helen Chong 2024-04-19 07:50:20 +08:00
parent bde44bd168
commit 516dc1ecdb
2 changed files with 66 additions and 65 deletions

View File

@ -0,0 +1,65 @@
<header class="main__header">
{% if isArticle %}
<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 }}
{% if updated %}
• Last updated on {{ updated | niceDate }}</p>
{% endif %}
{% if categories %}
<p>Categories:
{% for cat in categories %}
<a href="/categories/{{ cat | slugify }}">{{ cat }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
<p>{{ content | emojiReadTime }}</p>
</div>
{% else %}
<h1>{{ pageTitle or title }}</h1>
{% if desc %}
<p>{{ desc }}</p>
{% endif %}
{% endif %}
</header>
<div class="content__wrapper">
{% if toc %}
{% include "global/toc.njk" %}
{% endif %}
{% if isArticle %}
<article class="article">
{{ content | safe }}
</article>
{% else %}
<div class="content {{'content--divided' if isContentDivided }}">
{{ content | safe }}
</div>
{% endif %}
{% if tags and tags.includes("contents") or title === "Articles" or tags and tags.includes("blog pages") %}
{% 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;
}
</style>

View File

@ -2,68 +2,4 @@
layout: main/base layout: main/base
--- ---
<header class="main__header"> {% extends "global/content.njk" %}
{% if isArticle %}
<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 }}
{% if updated %}
• Last updated on {{ updated | niceDate }}</p>
{% endif %}
{% if categories %}
<p>Categories:
{% for cat in categories %}
<a href="/categories/{{ cat | slugify }}">{{ cat }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
<p>{{ content | emojiReadTime }}</p>
</div>
{% else %}
<h1>{{ pageTitle or title }}</h1>
{% if desc %}
<p>{{ desc }}</p>
{% endif %}
{% endif %}
</header>
<div class="content__wrapper">
{% if toc %}
{% include "global/toc.njk" %}
{% endif %}
{% if isArticle %}
<article class="article">
{{ content | safe }}
</article>
{% else %}
<div class="content {{'content--divided' if isContentDivided }}">
{{ content | safe }}
</div>
{% endif %}
{% if tags and tags.includes("articles") or title === "Articles" or tags and tags.includes("blog pages") %}
{% 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;
}
</style>