Update page templating to centralize header and metatada, add 404 page

This commit is contained in:
Froge 2025-07-23 09:52:56 +10:00
parent 16941f6074
commit c0d63ab5f3
Signed by: froge
GPG key ID: A825E09930271BFA
4 changed files with 40 additions and 47 deletions

11
templates/404.html Normal file
View file

@ -0,0 +1,11 @@
{% extends "base.html" %}
{% block content %}
<main id="main-content">
<div id="welcome-message">
<h2 id="blog-page-title">|| 404 Not Found ||</h2>
<h6 class="blog-post-date">These are not the frogs you're looking for 👋 🐸</h6>
</div>
<div class="dotted-border"></div>
</main>
{% endblock content %}

View file

@ -17,19 +17,7 @@
██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████ ██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████
</pre></a></div> </pre></a></div>
<div class="dotted-border"></div> <div class="dotted-border"></div>
<main id="main-content"> {% block content %} {% endblock content %}
<div id="welcome-message">
<h1 class="title">Welcome</h1>
<p>This blog is made with 💜 and <a target="_blank" href="https://www.getzola.org">Zola!</a></p>
<p>It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a>
</p>
</div>
<div class="dotted-border"></div>
<div class="blog-entry-container">
<h3 class="title">View the latest posts</h3>
{% block content %} {% endblock %}
</div>
</main>
</div> </div>
</body> </body>

View file

@ -1,11 +1,23 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<ul> <main id="main-content">
<!-- If you are using pagination, section.pages will be empty. <div id="welcome-message">
You need to use the paginator object --> <h1 class="title">Welcome</h1>
{% for page in section.pages %} <p>This blog is made with 💜 and <a target="_blank" href="https://www.getzola.org">Zola!</a></p>
<li class="blog-entry-title">{{ page.date }} // <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li> <p>It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a>
{% endfor %} </p>
</ul> </div>
<div class="dotted-border"></div>
<div class="blog-entry-container">
<h3 class="title">View the latest posts</h3>
<ul>
<!-- If you are using pagination, section.pages will be empty.
You need to use the paginator object -->
{% for page in section.pages %}
<li class="blog-entry-title">{{ page.date }} // <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
</div>
</main>
{% endblock content %} {% endblock content %}

View file

@ -1,32 +1,14 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=/main.css>
<title>🐸 CyberFrog</title>
</head>
<body> {% block content %}
<div id="site-content"> <main id="main-content">
<!-- Credits to http://patorjk.com/software/taag/ for the header, made using "ANSI Regular" font --> <div id="welcome-message">
<div id="ascii-header"><a href="/"><pre> <h2 id="blog-page-title">{{ page.title }}</h2>
██████ ██ ██ ██████ ███████ ██████ ███████ ██████ ██████ ██████ ███ ███ ███████ <h6 class="blog-post-date">// Published: {{ page.date }} // Modified: {{ page.updated }} //</h6>
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ </div>
██ ████ ██████ █████ ██████ █████ ██████ ██ ██ ██ ███ ██ ████ ██ █████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████
</pre></a></div>
<div class="dotted-border"></div>
<main id="main-content">
<div id="welcome-message">
<h2 id="blog-page-title">{{ page.title }}</h2>
<h6 class="blog-post-date">// Published: {{ page.date }} // Modified: {{ page.updated }} //</h6>
</div>
<div class="dotted-border"></div> <div class="dotted-border"></div>
<div id="blog-post-content"> <div id="blog-post-content">
{{ page.content | safe }} {{ page.content | safe }}
</div> </div>
</main> </main>
</body> {% endblock content %}
</html>