feat: add pinned posts functionality (#424)

main
Óscar 3 months ago committed by GitHub
parent 42f9bb9781
commit 36e53dc646
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -120,7 +120,6 @@ highlight_theme = "css"
+++
title = "Home"
paginate_by = 5 # Show 5 posts per page.
template = "section.html"
+++
```
@ -132,7 +131,6 @@ highlight_theme = "css"
+++
title = "Home"
# Note we're not setting `paginate_by` here.
template = "section.html"
[extra]
section_path = "blog/_index.md" # Where to find your posts.

@ -1,7 +1,6 @@
+++
title = "Publicacions recents"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" }

@ -1,7 +1,6 @@
+++
title = "Publicaciones recientes"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" }

@ -1,7 +1,6 @@
+++
title = "Latest posts"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }

@ -2,7 +2,6 @@
paginate_by = 5
title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"
[extra]

@ -2,7 +2,6 @@
paginate_by = 5
title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"
[extra]

@ -2,7 +2,6 @@
paginate_by = 5
title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"
[extra]

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

@ -1,13 +1,14 @@
+++
title = "Domina la configuració de tabi: guia completa"
date = 2023-09-18
updated = 2024-10-20
updated = 2024-11-13
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
[taxonomies]
tags = ["funcionalitat", "tutorial", "preguntes freqüents"]
[extra]
pinned = true
quick_navigation_buttons = true
social_media_card = "social_cards/ca_blog_mastering_tabi_settings.jpg"
+++
@ -121,7 +122,6 @@ Configura `paginate_by` al front matter del teu arxiu `content/_index.md`:
```toml
title = "Últimes publicacions"
sort_by = "date"
template = "section.html"
paginate_by = 5 # Mostra 5 publicacions per pàgina.
[extra]
@ -137,7 +137,6 @@ Utilitza `section_path` a la secció `[extra]` del teu arxiu `content/_index.md`
```toml
title = "Últimes publicacions"
sort_by = "date"
template = "section.html"
# No configuris `paginate_by` aquí.
[extra]
@ -153,6 +152,23 @@ Notes addicionals:
- El `title` al front matter estableix el títol que apareix sobre les publicacions.
- Utilitza la ruta completa a l'arxiu `_index.md` de la secció per a `section_path`. Usar `section_path = "blog/"` no funcionarà.
##### Fixar entrades
Pots fixar entrades per mantenir-les a la part superior de la pàgina principal. En aquesta demo, aquesta entrada està fixada, així que apareix primera amb una icona i etiqueta de "fixada":
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fixada", full_width=true) }}
Les entrades fixades es mostren primer, mantenint el seu ordre relatiu segons el `sort_by` de la secció, seguides per les entrades regulars.
Per fixar una entrada, afegeix el següent al seu front matter:
```toml
[extra]
pinned = true
```
{{ admonition(type="note", text="Aquesta configuració només afecta les pàgines que utilitzen la plantilla predeterminada `section.html`. En aquesta demo, això inclou la pàgina principal i `blog/`. Altres seccions —pàgines d'etiquetes, `archive/` o sèries— ignoren aquesta configuració.") }}
##### Mostrar la data dels articles al llistat
Per defecte, quan es llisten els articles, es mostra la data de creació. Pots configurar quina(es) data(es) mostrar utilitzant l'opció `post_listing_date`. Configuracions disponibles:

@ -1,13 +1,14 @@
+++
title = "Domina la configuración de tabi: guía completa"
date = 2023-09-18
updated = 2024-10-20
updated = 2024-11-13
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
[taxonomies]
tags = ["funcionalidad", "tutorial", "preguntas frecuentes"]
[extra]
pinned = true
quick_navigation_buttons = true
social_media_card = "social_cards/es_blog_mastering_tabi_settings.jpg"
+++
@ -121,7 +122,6 @@ Configura `paginate_by` en el front matter de tu archivo `content/_index.md`:
```toml
title = "Últimas publicaciones"
sort_by = "date"
template = "section.html"
paginate_by = 5 # Muestra 5 publicaciones por página.
[extra]
@ -137,7 +137,6 @@ Utiliza `section_path` en la sección `[extra]` de tu archivo `content/_index.md
```toml
title = "Últimas publicaciones"
sort_by = "date"
template = "section.html"
# No configures `paginate_by` aquí.
[extra]
@ -153,6 +152,23 @@ Notas adicionales:
- El `title` en el front matter establece el título que aparece sobre las publicaciones.
- Usa la ruta completa al archivo `_index.md` de la sección para `section_path`. Usar `section_path = "blog/"` no funcionará.
##### Fijar publicaciones
Puedes fijar publicaciones para mantenerlas en la parte superior de la página principal. En esta demo, esta publicación está fijada, por lo que aparece primera con un icono y etiqueta de "fijada":
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fijada", full_width=true) }}
Las publicaciones fijadas se muestran primero, manteniendo su orden relativo según el `sort_by` de la sección, seguidas por el resto de las publicaciones.
Para fijar una publicación, añade lo siguiente a su front matter:
```toml
[extra]
pinned = true
```
{{ admonition(type="note", text='Este ajuste solo afecta a las páginas que usan la plantilla predeterminada `section.html`. En esta demo, esto incluye la página principal y `blog/`. Otras secciones —páginas de etiquetas, `archive/` o series— ignoran este ajuste.') }}
##### Mostrar la fecha de los artículos en el listado
Por defecto, cuando se listan los artículos, se muestra la fecha de creación. Puedes configurar qué fecha(s) mostrar usando la opción `post_listing_date`. Configuraciones disponibles:

@ -1,13 +1,14 @@
+++
title = "Mastering tabi Settings: A Comprehensive Guide"
date = 2023-09-18
updated = 2024-10-20
updated = 2024-11-13
description = "Discover the many ways you can customise your tabi site."
[taxonomies]
tags = ["showcase", "tutorial", "FAQ"]
[extra]
pinned = true
quick_navigation_buttons = true
social_media_card = "social_cards/blog_mastering_tabi_settings.jpg"
+++
@ -121,7 +122,6 @@ Set `paginate_by` in the front matter of your `content/_index.md` file:
```toml
title = "Latest posts"
sort_by = "date"
template = "section.html"
paginate_by = 5 # Show 5 posts per page.
[extra]
@ -137,7 +137,6 @@ Use `section_path` in the `[extra]` section of your `content/_index.md` file:
```toml
title = "Latest posts"
sort_by = "date"
template = "section.html"
# Do not set `paginate_by` here.
[extra]
@ -153,6 +152,23 @@ Additional notes:
- The `title` in the front matter sets the header that appears above the posts.
- Use the full path to the section's `_index.md` file for `section_path`. Using `section_path = "blog/"` will not work.
##### Pinning Posts
You can pin posts to keep them at the top of the main page listing. In this demo, this post is pinned, so it appears first with a "pinned" icon and label:
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Pinned post", full_width=true) }}
Pinned posts are shown first, maintaining their relative order of the section's `sort_by`, followed by regular posts.
To pin a post, add the following to its front matter:
```toml
[extra]
pinned = true
```
{{ admonition(type="note", text='This setting only affects pages using the default `section.html` template. In this demo, this includes the main page and `blog/`. Other sections —tags, archives, or series pages— ignore this setting.') }}
##### Display the Date of Posts in Listing
By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the `post_listing_date` option. Available settings:

@ -30,6 +30,7 @@ few_results = "تم العثور على $NUMBER نتائج" # for 3 to 10 searc
many_results = "تم العثور على $NUMBER نتيجة" # 11 or more search results.
# Navigation.
pinned = "مثبتة"
jump_to_posts = "الإنتقال إلى التدوينات"
read_more = "إقرأ المزيد"
one_posts = "تدوينة واحدة" #One blog post.

@ -23,6 +23,7 @@ one_results = "$NUMBER resultat" # "1 result"
many_results = "$NUMBER resultats" # "3 results"
# Navigation.
pinned = "Fixada"
jump_to_posts = "Saltar als articles"
read_more = "Llegir més"
one_posts = "$NUMBER entrada"

@ -27,6 +27,7 @@ one_results = "$NUMBER Ergebnis" # "1 result"
many_results = "$NUMBER Ergebnisse" # "3 results"
# Navigation.
pinned = "Angeheftet"
jump_to_posts = "Zu den Beiträgen springen"
read_more = "Weiterlesen"
one_posts = "$NUMBER Beitrag"

@ -23,6 +23,7 @@ one_results = "$NUMBER result" # "1 result"
many_results = "$NUMBER results" # "3 results"
# Navigation.
pinned = "Pinned"
jump_to_posts = "Jump to posts"
read_more = "Read more"
one_posts = "$NUMBER post"

@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"
many_results = "$NUMBER resultados"
# Navigation.
pinned = "Fijada"
jump_to_posts = "Saltar a las entradas"
read_more = "Leer más"
one_posts = "$NUMBER entrada"

@ -23,6 +23,7 @@ one_results = "$NUMBER tulemus" # "1 result"
many_results = "$NUMBER tulemust" # "3 results"
# Navigation.
pinned = "Kinnitatud"
jump_to_posts = "Hüppa postitusteni"
read_more = "Loe edasi"
one_posts = "$NUMBER postitus"

@ -23,6 +23,7 @@ one_results = "$NUMBER نتیجه" # "1 result"
many_results = "$NUMBER نتیجه" # "3 results"
# Navigation.
pinned = "سنجاق‌شده"
jump_to_posts = "پرش به نوشته‌ها"
read_more = "ادامه مطلب"
one_posts = "$NUMBER مطلب"

@ -23,6 +23,7 @@ one_results = "$NUMBER résultat" # "1 result"
many_results = "$NUMBER résultats" # "3 results"
# Navigation.
pinned = "Épinglé"
jump_to_posts = "Aller aux articles"
read_more = "Lire plus"
one_posts = "$NUMBER article"

@ -25,6 +25,7 @@ one_results = "$NUMBER परिणाम" # "1 result"
many_results = "$NUMBER परिणाम" # "3 results"
# Navigation.
pinned = "पिन किया गया"
jump_to_posts = "पोस्ट पर जाएं"
read_more = "और पढ़ें"
one_posts = "$NUMBER पोस्ट"

@ -23,6 +23,7 @@ one_results = "$NUMBER risultato"
many_results = "$NUMBER risultati"
# Navigation.
pinned = "In evidenza"
jump_to_posts = "Vai ai post"
read_more = "Leggi di più"
one_posts = "$NUMBER post"

@ -27,6 +27,7 @@ one_results = "$NUMBER 結果" # "1 result"
many_results = "$NUMBER 結果" # "3 results"
# Navigation.
pinned = "固定"
jump_to_posts = "投稿へジャンプ"
read_more = "続きを読む"
one_posts = "$NUMBER 投稿"

@ -27,6 +27,7 @@ one_results = "$NUMBER 결과" # "1 result"
many_results = "$NUMBER 결과" # "3 results"
# Navigation.
pinned = "고정됨"
jump_to_posts = "게시물로 이동"
read_more = "더 읽기"
one_posts = "$NUMBER 게시물"

@ -23,6 +23,7 @@ one_results = "$NUMBER resultaat" # "1 result"
many_results = "$NUMBER resultaten" # "3 results"
# Navigation.
pinned = "Vastgezet"
jump_to_posts = "Naar berichten springen"
read_more = "Lees meer"
one_posts = "$NUMBER bericht" # "1 post"

@ -23,6 +23,7 @@ one_results = "$NUMBER ପରିଣାମ" # "1 result"
many_results = "$NUMBER ପରିଣାମଗୁଡ଼ିକ" # "3 results"
# Navigation.
pinned = "ପିନ୍ କରାଯାଇଛି"
jump_to_posts = "ପୋଷ୍ଟକୁ ଯାଆନ୍ତୁ"
read_more = "ଆହୁରି ପଢ଼ନ୍ତୁ"
one_posts = "$NUMBER ପୋଷ୍ଟ"

@ -23,6 +23,7 @@ one_results = "$NUMBER resultado" # "1 result"
many_results = "$NUMBER resultados" # "3 results"
# Navigation.
pinned = "Fixado"
jump_to_posts = "Ir para as publicações"
read_more = "Ler mais"
one_posts = "$NUMBER publicação"

@ -28,6 +28,7 @@ few_results = "$NUMBER результата" # 2, 3, 4 but not 12-14
many_results = "$NUMBER результатов" # 5-9, 0, 11-14, and others
# Navigation.
pinned = "Закреплено"
jump_to_posts = "Перейти к записям"
read_more = "Читать далее"
post = "пост"

@ -33,6 +33,7 @@ few_results = "$NUMBER результати"
many_results = "$NUMBER результатів"
# Navigation.
pinned = "Закріплено"
jump_to_posts = "Перейти до дописів"
read_more = "Читати далі"
one_posts = "$NUMBER пост"

@ -23,6 +23,7 @@ one_results = "$NUMBER 个结果"
many_results = "$NUMBER 个结果"
# Navigation.
pinned = "置顶"
jump_to_posts = "跳转到文章"
read_more = "阅读全文"
one_posts = "$NUMBER 篇文章"

@ -23,6 +23,7 @@ one_results = "$NUMBER 個結果"
many_results = "$NUMBER 個結果"
# Navigation.
pinned = "釘選"
jump_to_posts = "跳轉到文章"
read_more = "閱讀全文"
one_posts = "$NUMBER 篇文章"

@ -3,11 +3,14 @@
grid-template-columns: 1fr 8fr;
}
$padding: 2.5rem;
.bloglist-meta {
display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding-block: 2.5rem;
padding-block: $padding;
ul {
margin-inline-end: 0.7rem;
@ -34,9 +37,26 @@
.bloglist-content {
display: flex;
position: relative;
align-items: flex-start;
background-color: var(--navbar-color);
padding: 2.5rem 0;
padding: $padding 0;
.pinned-label {
display: flex;
position: absolute;
top: 0.8rem;
align-items: center;
gap: 0.3rem;
color: var(--meta-color);
font-weight: 300;
font-size: 0.8rem;
}
.pinned-label svg {
width: 0.8rem;
height: 0.8rem;
}
div {
flex: 1;
@ -100,9 +120,13 @@
grid-template-columns: 1fr;
}
.pinned-label svg {
margin-bottom: -2px;
}
.bloglist-meta {
padding-block: 2rem;
border-bottom: 0;
padding-block: 2rem;
ul {
margin-block-end: 0;
@ -121,6 +145,13 @@
padding: 0;
padding-bottom: 2rem;
.pinned-label {
position: static;
margin: 0;
margin-top: -1.9rem;
}
div {
width: 100%;
}

@ -3,12 +3,30 @@
{# It would also work with arrays (e.g. ["dates"] or ["indexes"] or even ["indexes","dates"]). #}
{# Nevertheless, arrays cannot be used as a default value for a macro parameter in Tera (see https://github.com/Keats/tera/issues/710). #}
{# `paginator` is only used to compute indexes metadata and can be let empty otherwise. #}
{% macro list_posts(posts, max, metadata="dates", language_strings="", section_path="blog", paginator="") %}
{% macro list_posts(posts, max, metadata="dates", language_strings="", section_path="blog", paginator="", pinned_first=false) %}
{%- set separator = config.extra.separator | default(value="•") -%}
<div class="bloglist-container">
{# Separate pinned and regular posts #}
{% set all_posts = [] %}
{% if pinned_first %}
{% set pinned_posts = [] %}
{% set regular_posts = [] %}
{% for post in posts %}
{% if post.extra.pinned %}
{% set_global pinned_posts = pinned_posts | concat(with=post) %}
{% else %}
{% set_global regular_posts = regular_posts | concat(with=post) %}
{% endif %}
{% endfor %}
{% set all_posts = pinned_posts | concat(with=regular_posts) %}
{% else %}
{% set all_posts = posts %}
{% endif %}
<div class="bloglist-container">
{# Display all posts (pinned first, then regular) #}
{% for post in all_posts %}
{% if loop.index <= max %}
{% if loop.index == max or loop.last %}
{% set bottom_divider = false %}
@ -20,10 +38,10 @@
<ul>
{%- if "indexes" in metadata -%}
{%- set post_index = loop.index -%}
{%- set nb_posts = posts | length -%}
{%- set number_of_posts = posts | length -%}
{# in case we have a pager, the index has been computed for the current page. #}
{%- if paginator -%}
{%- set nb_posts = paginator.total_pages -%}
{%- set number_of_posts = paginator.total_pages -%}
{%- set number_of_other_pages = paginator.current_index - 1 -%}
{%- set posts_per_page = paginator.paginate_by -%}
{%- set posts_in_other_pages = number_of_other_pages * posts_per_page -%}
@ -31,10 +49,11 @@
{%- endif -%}
{%- if macros_settings::evaluate_setting_priority(setting="post_listing_index_reversed", page=section, default_global_value=false) == "true" -%}
{# index starts at 1 instead of 0 #}
{%- set post_index = nb_posts + 1 - post_index -%}
{%- set post_index = number_of_posts + 1 - post_index -%}
{%- endif -%}
<li class="index-label">{{ post_index }}</li>
{%- endif -%}
{%- if "dates" in metadata -%}
{%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
{%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
@ -66,8 +85,16 @@
{% endif %}
</ul>
</section>
<section class="bloglist-content {% if bottom_divider -%}bottom-divider{%- endif -%}">
<div>
{% if pinned_first and post.extra.pinned %}
<div class="pinned-label">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.5 2.255v-.01c.003-.03.013-.157-.361-.35C9.703 1.668 8.967 1.5 8 1.5s-1.703.169-2.138.394c-.375.194-.365.32-.362.351v.01c-.003.03-.013.157.362.35C6.297 2.832 7.033 3 8 3s1.703-.169 2.139-.394c.374-.194.364-.32.361-.351M12 2.25c0 .738-.433 1.294-1.136 1.669l.825 2.31c1.553.48 2.561 1.32 2.561 2.52c0 1.854-2.402 2.848-5.5 2.985V15a.75.75 0 0 1-1.5 0v-3.266c-3.098-.136-5.5-1.131-5.5-2.984c0-1.2 1.008-2.04 2.561-2.52l.825-2.311C4.433 3.544 4 2.988 4 2.25C4 .75 5.79 0 8 0s4 .75 4 2.25" clip-rule="evenodd"/></svg>
<span>{{ macros_translate::translate(key="pinned", default="Pinned", language_strings=language_strings) }}</span>
</div>
{% endif %}
<h2 class="bloglist-title">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h2>
@ -100,5 +127,4 @@
{% endif %}
{% endfor %}
</div>
{% endmacro %}

@ -37,7 +37,7 @@
{% endif -%}
{% set max_posts = section.extra.max_posts | default(value=999999) %}
{{ macros_list_posts::list_posts(posts=pages, max=max_posts, language_strings=language_strings, section_path=path) }}
{{ macros_list_posts::list_posts(posts=pages, max=max_posts, language_strings=language_strings, section_path=path, pinned_first=true) }}
</div>
{% if paginator and paginator.pages | length > 0 %}

Loading…
Cancel
Save