Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create content list template

This commit is contained in:
Helen Chong 2024-04-15 11:55:50 +08:00
parent 58b0e11f2b
commit 74ffb66923
3 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/_includes/main/content-list.njk Normal file
View File

@ -0,0 +1,22 @@
---
layout: main/base
metadata:
type: article
---
<header class="main__header">
<h1>{{ title }}</h1>
{% if intro %}
<p>{{ intro }}</p>
{% endif %}
</header>
<div class="content__wrapper">
{% if toc %}
{% include "toc.njk" %}
{% endif %}
<div class="content-list">
{{ content | safe }}
</div>
</div>

5
src/assets/css/main.css
View File

@ -261,6 +261,7 @@ main {
.main__header, .main__header,
.article, .article,
.content-list,
.left-sidebar, .left-sidebar,
.right-sidebar { .right-sidebar {
padding: 1.5rem clamp(1rem, 5%, 3rem); padding: 1.5rem clamp(1rem, 5%, 3rem);
@ -271,6 +272,7 @@ main {
} }
.article, .article,
.content-list,
.left-sidebar, .left-sidebar,
.right-sidebar { .right-sidebar {
background-color: var(--clr-content-bg); background-color: var(--clr-content-bg);
@ -302,7 +304,8 @@ main {
grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem); grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
} }
.article { .article,
.content-list {
grid-area: article; grid-area: article;
} }

70
src/pages/articles.njk
View File

@ -1,5 +1,5 @@
--- ---
layout: main/base layout: main/content-list
title: Articles title: Articles
metadata: metadata:
desc: List of articles published on my website. desc: List of articles published on my website.
@ -7,42 +7,36 @@ metadata:
date: 2023-01-04 date: 2023-01-04
--- ---
<div class="content-container"> <section class="content-section">
<section class="content-section"> <h2>My Articles</h2>
<h1>Articles</h1> <p>Articles I have written.</p>
</section> <ul class="article-list">
{% for article in collections["my articles"] %}
<li>
<h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3>
<time>{{ article.date | niceDate }}</time>
</li>
{% endfor %}
</ul>
</section>
<section class="content-section"> <section class="content-section">
<h2>My Articles</h2> <h2>My Articles for Video Games with Their Own Pages</h2>
<p>Articles I have written.</p> <ul class="article-list">
<ul class="article-list"> <li>My <cite>Cassette Beasts</cite> shrine <a href="/shrines/cassettebeasts/articles/">Articles</a> page</li>
{% for article in collections["my articles"] %} <li>My <cite>Star Wars: Knights of the Old Republic</cite> shrine <a href="/shrines/starwarskotor/articles/">Articles</a> page</li>
<li> </ul>
<h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3> </section>
<time>{{ article.date | niceDate }}</time>
</li>
{% endfor %}
</ul>
</section>
<section class="content-section"> <section class="content-section">
<h2>My Articles for Video Games with Their Own Pages</h2> <h2>Featured Articles</h2>
<ul class="article-list"> <p>Articles featuring other people's interview with me.</p>
<li>My <cite>Cassette Beasts</cite> shrine <a href="/shrines/cassettebeasts/articles/">Articles</a> page</li> <ul class="article-list">
<li>My <cite>Star Wars: Knights of the Old Republic</cite> shrine <a href="/shrines/starwarskotor/articles/">Articles</a> page</li> {% for article in collections["featured articles"] %}
</ul> <li>
</section> <h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3>
<time>{{ article.date | niceDate }}</time>
<section class="content-section"> </li>
<h2>Featured Articles</h2> {% endfor %}
<p>Articles featuring other people's interview with me.</p> </ul>
<ul class="article-list"> </section>
{% for article in collections["featured articles"] %}
<li>
<h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3>
<time>{{ article.date | niceDate }}</time>
</li>
{% endfor %}
</ul>
</section>
</div>