forked from deepStateMirrors/tabi
✨ feat: add indicator to external links (#443)
This commit is contained in:
Óscar
GitHub
parent
036b11b7da
commit
a5ab6259c6
8 changed files with 103 additions and 6 deletions
|
|
@ -38,6 +38,8 @@ bottom_footnotes = true
|
|||
# To use a Zola built-in theme, CSP needs to allow unsafe-inline for style-src.
|
||||
highlight_theme = "css"
|
||||
smart_punctuation = true
|
||||
# Set to 'external' to add an indicator next to external links.
|
||||
external_links_class = "external"
|
||||
|
||||
[link_checker]
|
||||
internal_level = "warn"
|
||||
|
|
|
|||
BIN
content/blog/mastering-tabi-settings/img/external_link_dark.webp
Normal file
BIN
content/blog/mastering-tabi-settings/img/external_link_dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Domina la configuració de tabi: guia completa"
|
||||
date = 2023-09-18
|
||||
updated = 2025-02-09
|
||||
updated = 2025-02-15
|
||||
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -237,6 +237,25 @@ Fes clic a la imatge a continuació per comparar les fonts:
|
|||
|
||||
{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Font serif", toggled_alt="Font sans-serif", full_width=true) }}
|
||||
|
||||
### Indicador d'enllaços externs
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix Jerarquia | Requereix JavaScript |
|
||||
|:------:|:------:|:-------------:|:-----------------:|:-------------------:|
|
||||
| ❌ | ❌ | ✅ | ❌ | ❌ |
|
||||
|
||||
{{ admonition(type="info", text="Requereix Zola 0.20.0 o posterior.") }}
|
||||
|
||||
Si vols afegir una icona als enllaços externs, configura la secció `[markdown]` (no `[extra]`) al teu `config.toml`:
|
||||
|
||||
```toml
|
||||
[markdown]
|
||||
external_links_class = "external"
|
||||
```
|
||||
|
||||
Això afegirà una petita icona al costat dels enllaços externs:
|
||||
|
||||
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="Icona d'enllaç extern", full_width=true) }}
|
||||
|
||||
### Estils CSS personalitzats
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Domina la configuración de tabi: guía completa"
|
||||
date = 2023-09-18
|
||||
updated = 2025-02-09
|
||||
updated = 2025-02-15
|
||||
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -238,6 +238,25 @@ Haz clic en la imagen para comparar las fuentes:
|
|||
|
||||
{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Fuente serif", toggled_alt="Fuente sans-serif", full_width=true) }}
|
||||
|
||||
### Indicador de enlaces externos
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue Jerarquía | Requiere JavaScript |
|
||||
|:------:|:-------:|:-------------:|:----------------:|:------------------:|
|
||||
| ❌ | ❌ | ✅ | ❌ | ❌ |
|
||||
|
||||
{{ admonition(type="info", text="Requiere Zola 0.20.0 o posterior.") }}
|
||||
|
||||
Si deseas añadir un icono a los enlaces externos, configura la sección `[markdown]` (no `[extra]`) en tu `config.toml`:
|
||||
|
||||
```toml
|
||||
[markdown]
|
||||
external_links_class = "external"
|
||||
```
|
||||
|
||||
Esto añadirá un pequeño icono junto a los enlaces externos:
|
||||
|
||||
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="Icono de enlace externo", full_width=true) }}
|
||||
|
||||
### Estilos CSS personalizados
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Mastering tabi Settings: A Comprehensive Guide"
|
||||
date = 2023-09-18
|
||||
updated = 2025-02-09
|
||||
updated = 2025-02-15
|
||||
description = "Discover the many ways you can customise your tabi site."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -242,6 +242,25 @@ Click on the image below to compare the two looks:
|
|||
|
||||
{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Serif font", toggled_alt="Sans-serif font", full_width=true) }}
|
||||
|
||||
### External Link Indicator
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
|
||||
| ❌ | ❌ | ✅ | ❌ | ❌ |
|
||||
|
||||
{{ admonition(type="info", text="Requires Zola 0.20.0 or later.") }}
|
||||
|
||||
If you'd like to add an icon to external links, configure the `[markdown]` (not `[extra]`) section in your `config.toml`:
|
||||
|
||||
```toml
|
||||
[markdown]
|
||||
external_links_class = "external"
|
||||
```
|
||||
|
||||
This will add a small icon next to external links:
|
||||
|
||||
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="External link icon", full_width=true) }}
|
||||
|
||||
### Custom CSS
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|
|
|
|||
|
|
@ -82,6 +82,44 @@ a {
|
|||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
// External link styles with `external_links_class = "external"`.
|
||||
main {
|
||||
--external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E");
|
||||
a.external:not(:has(img, svg, video, picture, figure)) {
|
||||
display: inline-block;
|
||||
padding-inline-end: 0.9em;
|
||||
}
|
||||
|
||||
a.external:not(:has(img, svg, video, picture, figure))::after {
|
||||
-webkit-mask-image: var(--external-link-icon);
|
||||
-webkit-mask-size: 100% 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
mask-image: var(--external-link-icon);
|
||||
mask-size: 100% 100%;
|
||||
margin-inline-start: 0.2em;
|
||||
inset-inline-end: 0;
|
||||
background-color: var(--primary-color);
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.meta a.external:not(:has(img, svg, video, picture, figure))::after {
|
||||
background-color: var(--meta-color);
|
||||
}
|
||||
|
||||
a.external:not(:has(img, svg, video, picture, figure)):hover::after {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--hover-color);
|
||||
|
|
@ -91,7 +129,7 @@ a:hover rt {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
a:not(.no-hover-padding):hover::after {
|
||||
a:not(.no-hover-padding):hover::before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
|
@ -100,7 +138,7 @@ a:not(.no-hover-padding):hover::after {
|
|||
inset-inline-end: -0.15em;
|
||||
inset-inline-start: -0.15em;
|
||||
background-color: var(--primary-color);
|
||||
max-inline-size: 105%; // This fixes multi-line links (see #225)
|
||||
max-inline-size: 105%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
|
|||
</ul><ul class="meta last-updated"><li>{{ updated_str }}</li>
|
||||
{#- Show link to remote changes if enabled -#}
|
||||
{%- if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" -%}
|
||||
<li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small> <span class="arrow-corner">↗</span></small></a></li>
|
||||
<li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a class="external" href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}</a></li>
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue