mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
Add 5 new languages to exampleSite: German, French, Spanish, Portuguese
Add complete translations for: - German (de) - French (fr) - Spanish (es) - Portuguese Brazil (pt-br) - Portuguese Portugal (pt-pt) Changes include: - Language config files (languages.*.toml) - Menu config files (menus.*.toml) - Translated docs section (16 files x 5 langs) - Translated homepage, guides, samples - Translated examples, authors, tags sections - Translated users section (112 dirs x 5 langs) - Fixed YAML front matter formatting in user files Hugo build now supports 9 languages total. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nuno Coração
318
exampleSite/content/docs/content-examples/index.de.md
Normal file
318
exampleSite/content/docs/content-examples/index.de.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
title: "Inhaltsbeispiele"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "Alle verfügbaren Partials in Blowfish."
|
||||
slug: "content-examples"
|
||||
tags: ["inhalt", "beispiel"]
|
||||
series: ["Dokumentation"]
|
||||
series_order: 12
|
||||
---
|
||||
|
||||
Wenn Sie die Dokumentation der Reihe nach gelesen haben, sollten Sie jetzt alle Funktionen und Konfigurationen kennen, die in Blowfish verfügbar sind. Diese Seite ist darauf ausgelegt, alles zusammenzuführen und einige ausgearbeitete Beispiele anzubieten, die Sie möglicherweise in Ihrem Hugo-Projekt verwenden möchten.
|
||||
|
||||
{{< alert >}}
|
||||
**Tipp:** Wenn Sie neu bei Hugo sind, schauen Sie sich unbedingt die [offizielle Dokumentation](https://gohugo.io/content-management/page-bundles/) an, um mehr über das Konzept von Page Bundles und Ressourcen zu erfahren.
|
||||
{{< /alert >}}
|
||||
|
||||
Die Beispiele auf dieser Seite können alle an verschiedene Szenarien angepasst werden, geben Ihnen aber hoffentlich einige Ideen, wie Sie die Formatierung eines bestimmten Inhaltselements für Ihr individuelles Projekt angehen können.
|
||||
|
||||
## Branch-Seiten
|
||||
|
||||
Branch Page Bundles in Hugo decken Elemente wie die Homepage, Abschnittslisten und Taxonomie-Seiten ab. Das Wichtigste bei Branch Bundles ist, dass der Dateiname für diesen Inhaltstyp **`_index.md`** ist.
|
||||
|
||||
Blowfish berücksichtigt die Front-Matter-Parameter, die in Branch-Seiten angegeben sind, und diese überschreiben die Standardeinstellungen für diese bestimmte Seite. Zum Beispiel ermöglicht das Setzen des `title`-Parameters in einer Branch-Seite das Überschreiben des Seitentitels.
|
||||
|
||||
### Homepage
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Inhalt:** | `content/_index.md` |
|
||||
|
||||
Die Homepage in Blowfish ist insofern besonders, als ihr übergreifendes Design durch den Homepage-Layout-Konfigurationsparameter gesteuert wird. Mehr darüber erfahren Sie im Abschnitt [Homepage-Layout]({{< ref "homepage-layout" >}}).
|
||||
|
||||
Wenn Sie dieser Seite benutzerdefinierten Inhalt hinzufügen möchten, müssen Sie einfach eine `content/_index.md`-Datei erstellen. Alles in dieser Datei wird dann auf Ihrer Homepage eingefügt.
|
||||
|
||||
**Beispiel:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Willkommen bei Blowfish!"
|
||||
description: "Dies ist eine Demo zum Hinzufügen von Inhalten zur Homepage."
|
||||
---
|
||||
Willkommen auf meiner Website! Ich freue mich sehr, dass Sie vorbeischauen.
|
||||
```
|
||||
|
||||
_Dieses Beispiel setzt einen benutzerdefinierten Titel und fügt zusätzlichen Text zum Body der Seite hinzu. Jeder Markdown-formatierte Text ist akzeptabel, einschließlich Shortcodes, Bilder und Links._
|
||||
|
||||
### Listenseiten
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout:** | `layouts/_default/list.html` |
|
||||
| **Inhalt:** | `content/../_index.md` |
|
||||
|
||||
Listenseiten gruppieren alle Seiten innerhalb eines Abschnitts und bieten Besuchern eine Möglichkeit, jede Seite zu erreichen. Ein Blog oder Portfolio sind Beispiele für eine Listenseite, da sie Beiträge oder Projekte zusammenfassen.
|
||||
|
||||
Das Erstellen einer Listenseite ist so einfach wie das Erstellen eines Unterverzeichnisses im Content-Ordner. Um zum Beispiel einen "Projekte"-Abschnitt zu erstellen, würden Sie `content/projects/` erstellen. Dann erstellen Sie eine Markdown-Datei für jedes Ihrer Projekte.
|
||||
|
||||
Eine Listenseite wird standardmäßig generiert. Um den Inhalt jedoch anzupassen, sollten Sie auch eine `_index.md`-Seite in diesem neuen Verzeichnis erstellen.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
Hugo generiert entsprechend URLs für die Seiten in Ihrem Projektordner.
|
||||
|
||||
Genau wie auf der Homepage wird der Inhalt der `_index.md`-Datei im generierten Listenindex ausgegeben. Blowfish listet dann alle Seiten in diesem Abschnitt unter dem Inhalt auf.
|
||||
|
||||
**Beispiel:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Projekte"
|
||||
description: "Erfahren Sie mehr über einige meiner Projekte."
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
Dieser Abschnitt enthält alle meine aktuellen Projekte.
|
||||
```
|
||||
|
||||
_In diesem Beispiel wird der spezielle `cascade`-Parameter verwendet, um die Lesezeit auf allen Unterseiten dieses Abschnitts auszublenden. Dadurch wird bei Projektseiten keine Lesezeit angezeigt. Dies ist eine großartige Möglichkeit, Standard-Theme-Parameter für einen ganzen Abschnitt zu überschreiben, ohne sie in jede einzelne Seite aufnehmen zu müssen._
|
||||
|
||||
Der [Samples-Abschnitt]({{< ref "samples" >}}) dieser Website ist ein Beispiel für eine Listenseite.
|
||||
|
||||
### Taxonomie-Seiten
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **Listen-Layout:** | `layouts/_default/taxonomy.html` |
|
||||
| **Term-Layout:** | `layouts/_default/term.html` |
|
||||
| **Inhalt:** | `content/../_index.md` |
|
||||
|
||||
Taxonomie-Seiten gibt es in zwei Formen - Taxonomie-Listen und Taxonomie-Terme. Listen zeigen eine Auflistung aller Terme innerhalb einer bestimmten Taxonomie an, während Terme eine Liste von Seiten anzeigen, die mit einem bestimmten Term verbunden sind.
|
||||
|
||||
Die Terminologie kann etwas verwirrend werden, also lassen Sie uns ein Beispiel mit einer Taxonomie namens `animals` untersuchen.
|
||||
|
||||
Zunächst müssen Taxonomien in Hugo konfiguriert werden, um sie zu verwenden. Dies geschieht durch Erstellen einer Konfigurationsdatei unter `config/_default/taxonomies.toml` und Definition des Taxonomie-Namens.
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
Hugo erwartet, dass Taxonomien mit ihrer Singular- und Pluralform aufgelistet werden, also fügen wir das Singular `animal` gleich dem Plural `animals` hinzu, um unsere Beispiel-Taxonomie zu erstellen.
|
||||
|
||||
Jetzt, da unsere `animals`-Taxonomie existiert, muss sie zu einzelnen Inhaltselementen hinzugefügt werden. Das ist so einfach wie das Einfügen in das Front Matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "In der Höhle des Löwen"
|
||||
description: "Diese Woche lernen wir über Löwen."
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
Dies hat nun zwei _Terme_ innerhalb unserer `animals`-Taxonomie erstellt - `lion` und `cat`.
|
||||
|
||||
Obwohl es zu diesem Zeitpunkt nicht offensichtlich ist, generiert Hugo jetzt Listen- und Term-Seiten für diese neue Taxonomie. Standardmäßig kann die Auflistung unter `/animals/` aufgerufen werden und die Term-Seiten sind unter `/animals/lion/` und `/animals/cat/` zu finden.
|
||||
|
||||
Die Listenseite listet alle Terme auf, die in der Taxonomie enthalten sind. In diesem Beispiel zeigt das Navigieren zu `/animals/` eine Seite mit Links zu "lion" und "cat", die Besucher zu den einzelnen Term-Seiten führen.
|
||||
|
||||
Die Term-Seiten listen alle Seiten auf, die in diesem Term enthalten sind. Diese Term-Listen sind im Wesentlichen die gleichen wie normale [Listenseiten](#listenseiten) und verhalten sich ähnlich.
|
||||
|
||||
Um benutzerdefinierten Inhalt zu Taxonomie-Seiten hinzuzufügen, erstellen Sie einfach `_index.md`-Dateien im Content-Ordner mit dem Taxonomie-Namen als Unterverzeichnisname.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
Alles in diesen Inhaltsdateien wird nun auf den generierten Taxonomie-Seiten platziert. Wie bei anderen Inhalten können die Front-Matter-Variablen verwendet werden, um Standardwerte zu überschreiben. Auf diese Weise könnten Sie einen Tag namens `lion` haben, aber den `title` mit "Löwe" überschreiben.
|
||||
|
||||
Um zu sehen, wie das in der Realität aussieht, schauen Sie sich die [Tags-Taxonomie-Auflistung]({{< ref "tags" >}}) auf dieser Website an.
|
||||
|
||||
## Leaf-Seiten
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout:** | `layouts/_default/single.html` |
|
||||
| **Inhalt (eigenständig):** | `content/../page-name.md` |
|
||||
| **Inhalt (gebündelt):** | `content/../page-name/index.md` |
|
||||
|
||||
Leaf-Seiten in Hugo sind im Grunde Standard-Inhaltsseiten. Sie werden als Seiten definiert, die keine Unterseiten enthalten. Dies könnten Dinge wie eine Über-uns-Seite oder ein einzelner Blogbeitrag sein, der im Blog-Bereich der Website lebt.
|
||||
|
||||
Das Wichtigste bei Leaf-Seiten ist, dass sie im Gegensatz zu Branch-Seiten `index.md` _ohne_ Unterstrich benannt werden sollten. Leaf-Seiten sind auch insofern besonders, als sie auf der obersten Ebene des Abschnitts gruppiert und mit einem eindeutigen Namen versehen werden können.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
Wenn Assets wie ein Bild in eine Seite eingebunden werden sollen, sollte ein Page Bundle verwendet werden. Page Bundles werden mit einem Unterverzeichnis mit einer `index.md`-Datei erstellt. Das Gruppieren der Assets mit dem Inhalt in seinem eigenen Verzeichnis ist wichtig, da viele der Shortcodes und andere Theme-Logik davon ausgehen, dass Ressourcen zusammen mit Seiten gebündelt sind.
|
||||
|
||||
**Beispiel:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mein erster Blog-Beitrag"
|
||||
date: 2022-01-25
|
||||
description: "Willkommen auf meinem Blog!"
|
||||
summary: "Erfahren Sie mehr über mich und warum ich diesen Blog starte."
|
||||
tags: ["willkommen", "neu", "über", "erster"]
|
||||
---
|
||||
_Dies_ ist der Inhalt meines Blog-Beitrags.
|
||||
```
|
||||
|
||||
Leaf-Seiten haben eine große Vielfalt an [Front-Matter]({{< ref "front-matter" >}})-Parametern, die verwendet werden können, um anzupassen, wie sie angezeigt werden.
|
||||
|
||||
### Externe Links
|
||||
|
||||
Blowfish hat eine spezielle Funktion, die es ermöglicht, Links zu externen Seiten neben Artikeln in den Artikellisten anzuzeigen. Dies ist nützlich, wenn Sie Inhalte auf Websites Dritter wie Medium haben oder wissenschaftliche Arbeiten, auf die Sie verlinken möchten, ohne den Inhalt auf Ihrer Hugo-Site zu replizieren.
|
||||
|
||||
Um einen externen Link-Artikel zu erstellen, müssen einige spezielle Front-Matter-Einstellungen vorgenommen werden:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mein Medium-Beitrag"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "Ich habe einen Beitrag auf Medium geschrieben."
|
||||
showReadingTime: false
|
||||
build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
Zusammen mit den normalen Front-Matter-Parametern wie `title` und `summary` wird der Parameter `externalUrl` verwendet, um Blowfish mitzuteilen, dass dies kein gewöhnlicher Artikel ist. Die hier angegebene URL ist der Ort, zu dem Besucher weitergeleitet werden, wenn sie diesen Artikel auswählen.
|
||||
|
||||
Zusätzlich verwenden wir einen speziellen Hugo-Front-Matter-Parameter `build`, um zu verhindern, dass eine normale Seite für diesen Inhalt generiert wird - es macht keinen Sinn, eine Seite zu generieren, da wir auf eine externe URL verlinken!
|
||||
|
||||
Das Theme enthält einen Archetyp, der das Erstellen dieser externen Link-Artikel vereinfacht. Geben Sie einfach `-k external` an, wenn Sie neuen Inhalt erstellen.
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Einfache Seiten
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
|
||||
Blowfish enthält auch ein spezielles Layout für einfache Seiten. Das einfache Layout ist eine Vorlage in voller Breite, die einfach Markdown-Inhalt auf der Seite platziert, ohne spezielle Theme-Funktionen.
|
||||
|
||||
Die einzigen Funktionen, die im einfachen Layout verfügbar sind, sind Breadcrumbs und Teilen-Links. Das Verhalten dieser kann jedoch weiterhin mit den normalen Seiten-[Front-Matter]({{< ref "front-matter" >}})-Variablen gesteuert werden.
|
||||
|
||||
Um das einfache Layout auf einer bestimmten Seite zu aktivieren, fügen Sie die `layout`-Front-Matter-Variable mit dem Wert `"simple"` hinzu:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Meine Landing Page"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
Der Inhalt dieser Seite ist jetzt in voller Breite.
|
||||
```
|
||||
|
||||
## Benutzerdefinierte Layouts
|
||||
|
||||
Einer der Vorteile von Hugo ist, dass es einfach ist, benutzerdefinierte Layouts für die gesamte Website, einzelne Abschnitte oder Seiten zu erstellen.
|
||||
|
||||
Layouts folgen allen normalen Hugo-Templating-Regeln und weitere Informationen finden Sie in der [offiziellen Hugo-Dokumentation](https://gohugo.io/templates/introduction/).
|
||||
|
||||
### Überschreiben von Standard-Layouts
|
||||
|
||||
Jeder der oben besprochenen Inhaltstypen listet die Layout-Datei auf, die zur Generierung jedes Seitentyps verwendet wird. Wenn diese Datei in Ihrem lokalen Projekt erstellt wird, überschreibt sie die Theme-Vorlage und kann somit verwendet werden, um den Standardstil der Website anzupassen.
|
||||
|
||||
Zum Beispiel ermöglicht das Erstellen einer `layouts/_default/single.html`-Datei die vollständige Anpassung des Layouts von Leaf-Seiten.
|
||||
|
||||
### Benutzerdefinierte Abschnitt-Layouts
|
||||
|
||||
Es ist auch einfach, benutzerdefinierte Layouts für einzelne Inhaltsabschnitte zu erstellen. Dies ist nützlich, wenn Sie einen Abschnitt erstellen möchten, der eine bestimmte Art von Inhalt mit einem bestimmten Stil auflistet.
|
||||
|
||||
Lassen Sie uns ein Beispiel durchgehen, das eine benutzerdefinierte "Projekte"-Seite erstellt, die Projekte mit einem speziellen Layout auflistet.
|
||||
|
||||
Strukturieren Sie dazu Ihren Inhalt nach den normalen Hugo-Inhaltsregeln und erstellen Sie einen Abschnitt für Ihre Projekte. Erstellen Sie zusätzlich ein neues Layout für den Projektabschnitt, indem Sie denselben Verzeichnisnamen wie den Inhalt verwenden und eine `list.html`-Datei hinzufügen.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
Diese `list.html`-Datei überschreibt nun die Standard-Listenvorlage, aber nur für den `projects`-Abschnitt. Bevor wir uns diese Datei ansehen, schauen wir uns zunächst die einzelnen Projektdateien an.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Ein Theme für Hugo, erstellt mit Tailwind CSS."
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/nunocoracao/blowfish/"
|
||||
---
|
||||
```
|
||||
|
||||
_In diesem Beispiel weisen wir jedem Projekt einige Metadaten zu, die wir dann in unserer Listenvorlage verwenden können. Es gibt keinen Seiteninhalt, aber nichts hindert Sie daran, ihn hinzuzufügen. Es ist schließlich Ihre eigene benutzerdefinierte Vorlage!_
|
||||
|
||||
Mit den definierten Projekten können wir jetzt eine Listenvorlage erstellen, die die Details jedes Projekts ausgibt.
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Obwohl dies ein ziemlich einfaches Beispiel ist, können Sie sehen, dass es durch jede der Seiten in diesem Abschnitt (d.h. jedes Projekt) geht und dann HTML-Links zu jedem Projekt zusammen mit einem Symbol ausgibt. Die Metadaten im Front Matter für jedes Projekt werden verwendet, um zu bestimmen, welche Informationen angezeigt werden.
|
||||
|
||||
Beachten Sie, dass Sie sicherstellen müssen, dass die relevanten Stile und Klassen verfügbar sind, was möglicherweise eine Neukompilierung des Tailwind CSS erfordert. Dies wird im Abschnitt [Erweiterte Anpassung]({{< ref "advanced-customisation" >}}) ausführlicher besprochen.
|
||||
|
||||
Beim Erstellen benutzerdefinierter Vorlagen wie dieser ist es immer am einfachsten, einen Blick darauf zu werfen, wie die Standard-Blowfish-Vorlage funktioniert, und diese dann als Leitfaden zu verwenden. Denken Sie daran, dass die [Hugo-Dokumentation](https://gohugo.io/templates/introduction/) auch eine großartige Ressource ist, um mehr über das Erstellen von Vorlagen zu erfahren.
|
||||
318
exampleSite/content/docs/content-examples/index.es.md
Normal file
318
exampleSite/content/docs/content-examples/index.es.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
title: "Ejemplos de contenido"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "Todos los partials disponibles en Blowfish."
|
||||
slug: "content-examples"
|
||||
tags: ["contenido", "ejemplo"]
|
||||
series: ["Documentación"]
|
||||
series_order: 12
|
||||
---
|
||||
|
||||
Si has estado leyendo la documentación en orden, ahora deberías conocer todas las características y configuraciones disponibles en Blowfish. Esta página está diseñada para unir todo y ofrecer algunos ejemplos prácticos que podrías querer usar en tu proyecto Hugo.
|
||||
|
||||
{{< alert >}}
|
||||
**Consejo:** Si eres nuevo en Hugo, asegúrate de consultar la [documentación oficial](https://gohugo.io/content-management/page-bundles/) para aprender más sobre el concepto de bundles de página y recursos.
|
||||
{{< /alert >}}
|
||||
|
||||
Los ejemplos en esta página pueden adaptarse a diferentes escenarios, pero esperamos que te den algunas ideas sobre cómo abordar el formateo de un elemento de contenido particular para tu proyecto individual.
|
||||
|
||||
## Páginas rama
|
||||
|
||||
Los bundles de página rama en Hugo cubren elementos como la página de inicio, listados de secciones y páginas de taxonomía. Lo importante a recordar sobre los bundles rama es que el nombre de archivo para este tipo de contenido es **`_index.md`**.
|
||||
|
||||
Blowfish respetará los parámetros de front matter especificados en las páginas rama y estos anularán la configuración predeterminada para esa página particular. Por ejemplo, establecer el parámetro `title` en una página rama permitirá anular el título de la página.
|
||||
|
||||
### Página de inicio
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Contenido:** | `content/_index.md` |
|
||||
|
||||
La página de inicio en Blowfish es especial porque su diseño general está controlado por el parámetro de configuración del layout de la página de inicio. Puedes aprender más sobre esto en la sección [Layout de página de inicio]({{< ref "homepage-layout" >}}).
|
||||
|
||||
Si quieres añadir contenido personalizado a esta página, simplemente necesitas crear un archivo `content/_index.md`. Cualquier cosa en este archivo se incluirá en tu página de inicio.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "¡Bienvenido a Blowfish!"
|
||||
description: "Esta es una demostración de cómo añadir contenido a la página de inicio."
|
||||
---
|
||||
¡Bienvenido a mi sitio web! Me alegra mucho que hayas pasado por aquí.
|
||||
```
|
||||
|
||||
_Este ejemplo establece un título personalizado y añade algo de texto adicional al cuerpo de la página. Cualquier texto formateado en Markdown es aceptable, incluyendo shortcodes, imágenes y enlaces._
|
||||
|
||||
### Páginas de lista
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout:** | `layouts/_default/list.html` |
|
||||
| **Contenido:** | `content/../_index.md` |
|
||||
|
||||
Las páginas de lista agrupan todas las páginas de una sección y proporcionan una forma para que los visitantes lleguen a cada página. Un blog o portfolio son ejemplos de una página de lista ya que agrupan publicaciones o proyectos.
|
||||
|
||||
Crear una página de lista es tan simple como crear un subdirectorio en la carpeta de contenido. Por ejemplo, para crear una sección "Proyectos", crearías `content/projects/`. Luego crea un archivo Markdown para cada uno de tus proyectos.
|
||||
|
||||
Se generará una página de lista por defecto, sin embargo, para personalizar el contenido, también deberías crear una página `_index.md` en este nuevo directorio.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
Hugo generará URLs para las páginas en tu carpeta de proyectos en consecuencia.
|
||||
|
||||
Al igual que la página de inicio, el contenido en el archivo `_index.md` se mostrará en el índice de lista generado. Blowfish luego listará cualquier página en esta sección debajo del contenido.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Proyectos"
|
||||
description: "Aprende sobre algunos de mis proyectos."
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
Esta sección contiene todos mis proyectos actuales.
|
||||
```
|
||||
|
||||
_En este ejemplo, se está usando el parámetro especial `cascade` para ocultar el tiempo de lectura en cualquier subpágina dentro de esta sección. Al hacer esto, las páginas de proyecto no mostrarán su tiempo de lectura. Esta es una excelente manera de anular los parámetros predeterminados del tema para una sección completa sin tener que incluirlos en cada página individual._
|
||||
|
||||
La [sección de muestras]({{< ref "samples" >}}) de este sitio es un ejemplo de una página de lista.
|
||||
|
||||
### Páginas de taxonomía
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **Layout lista:** | `layouts/_default/taxonomy.html` |
|
||||
| **Layout término:** | `layouts/_default/term.html` |
|
||||
| **Contenido:** | `content/../_index.md` |
|
||||
|
||||
Las páginas de taxonomía vienen en dos formas - listas de taxonomía y términos de taxonomía. Las listas muestran un listado de cada uno de los términos dentro de una taxonomía dada, mientras que los términos muestran una lista de páginas que están relacionadas con un término dado.
|
||||
|
||||
La terminología puede ser un poco confusa, así que exploremos un ejemplo usando una taxonomía llamada `animals`.
|
||||
|
||||
Primero, para usar taxonomías en Hugo, deben configurarse. Esto se hace creando un archivo de configuración en `config/_default/taxonomies.toml` y definiendo el nombre de la taxonomía.
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
Hugo espera que las taxonomías se listen usando sus formas singular y plural, así que añadimos el singular `animal` igual al plural `animals` para crear nuestra taxonomía de ejemplo.
|
||||
|
||||
Ahora que nuestra taxonomía `animals` existe, necesita añadirse a los elementos de contenido individuales. Es tan simple como insertarla en el front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "En la guarida del león"
|
||||
description: "Esta semana estamos aprendiendo sobre leones."
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
Esto ha creado ahora dos _términos_ dentro de nuestra taxonomía `animals` - `lion` y `cat`.
|
||||
|
||||
Aunque no es obvio en este punto, Hugo ahora estará generando páginas de lista y término para esta nueva taxonomía. Por defecto, el listado puede accederse en `/animals/` y las páginas de término pueden encontrarse en `/animals/lion/` y `/animals/cat/`.
|
||||
|
||||
La página de lista listará todos los términos contenidos dentro de la taxonomía. En este ejemplo, navegar a `/animals/` mostrará una página que tiene enlaces para "lion" y "cat" que llevan a los visitantes a las páginas de término individuales.
|
||||
|
||||
Las páginas de término listarán todas las páginas contenidas dentro de ese término. Estas listas de términos son esencialmente lo mismo que las [páginas de lista](#páginas-de-lista) normales y se comportan de manera muy similar.
|
||||
|
||||
Para añadir contenido personalizado a las páginas de taxonomía, simplemente crea archivos `_index.md` en la carpeta de contenido usando el nombre de la taxonomía como nombre del subdirectorio.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
Cualquier cosa en estos archivos de contenido se colocará ahora en las páginas de taxonomía generadas. Como con otro contenido, las variables de front matter pueden usarse para anular valores predeterminados. De esta manera podrías tener una etiqueta llamada `lion` pero anular el `title` para que sea "León".
|
||||
|
||||
Para ver cómo se ve esto en la realidad, consulta el [listado de taxonomía de etiquetas]({{< ref "tags" >}}) en este sitio.
|
||||
|
||||
## Páginas hoja
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout:** | `layouts/_default/single.html` |
|
||||
| **Contenido (independiente):** | `content/../page-name.md` |
|
||||
| **Contenido (agrupado):** | `content/../page-name/index.md` |
|
||||
|
||||
Las páginas hoja en Hugo son básicamente páginas de contenido estándar. Se definen como páginas que no contienen ninguna subpágina. Estas podrían ser cosas como una página Acerca de, o una publicación de blog individual que vive en la sección de blog del sitio web.
|
||||
|
||||
Lo más importante a recordar sobre las páginas hoja es que a diferencia de las páginas rama, las páginas hoja deben nombrarse `index.md` _sin_ guion bajo. Las páginas hoja también son especiales porque pueden agruparse en el nivel superior de la sección y nombrarse con un nombre único.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
Cuando se incluyen recursos en una página, como una imagen, debe usarse un bundle de página. Los bundles de página se crean usando un subdirectorio con un archivo `index.md`. Agrupar los recursos con el contenido en su propio directorio es importante ya que muchos de los shortcodes y otras lógicas del tema asumen que los recursos están agrupados junto con las páginas.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mi primera publicación de blog"
|
||||
date: 2022-01-25
|
||||
description: "¡Bienvenido a mi blog!"
|
||||
summary: "Aprende más sobre mí y por qué estoy empezando este blog."
|
||||
tags: ["bienvenida", "nuevo", "acerca", "primero"]
|
||||
---
|
||||
_Este_ es el contenido de mi publicación de blog.
|
||||
```
|
||||
|
||||
Las páginas hoja tienen una amplia variedad de parámetros de [front matter]({{< ref "front-matter" >}}) que pueden usarse para personalizar cómo se muestran.
|
||||
|
||||
### Enlaces externos
|
||||
|
||||
Blowfish tiene una característica especial que permite que los enlaces a páginas externas aparezcan junto a los artículos en los listados de artículos. Esto es útil si tienes contenido en sitios web de terceros como Medium, o artículos de investigación que te gustaría enlazar, sin replicar el contenido en tu sitio Hugo.
|
||||
|
||||
Para crear un artículo de enlace externo, se necesita establecer algún front matter especial:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mi publicación en Medium"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "Escribí una publicación en Medium."
|
||||
showReadingTime: false
|
||||
build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
Junto con los parámetros normales de front matter como `title` y `summary`, el parámetro `externalUrl` se usa para decirle a Blowfish que este no es un artículo ordinario. La URL proporcionada aquí será donde se dirija a los visitantes cuando seleccionen este artículo.
|
||||
|
||||
Adicionalmente, usamos un parámetro especial de front matter de Hugo `build` para evitar que se genere una página normal para este contenido - ¡no tiene sentido generar una página ya que estamos enlazando a una URL externa!
|
||||
|
||||
El tema incluye un arquetipo para simplificar la generación de estos artículos de enlace externo. Solo especifica `-k external` al crear nuevo contenido.
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Páginas simples
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
|
||||
Blowfish también incluye un layout especial para páginas simples. El layout simple es una plantilla de ancho completo que simplemente coloca el contenido Markdown en la página sin ninguna característica especial del tema.
|
||||
|
||||
Las únicas características disponibles en el layout simple son las migas de pan y los enlaces para compartir. Sin embargo, el comportamiento de estos aún puede controlarse usando las variables normales de [front matter]({{< ref "front-matter" >}}) de la página.
|
||||
|
||||
Para habilitar el layout simple en una página particular, añade la variable de front matter `layout` con un valor de `"simple"`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mi página de aterrizaje"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
El contenido de esta página ahora es de ancho completo.
|
||||
```
|
||||
|
||||
## Layouts personalizados
|
||||
|
||||
Uno de los beneficios de Hugo es que facilita la creación de layouts personalizados para todo el sitio, secciones individuales o páginas.
|
||||
|
||||
Los layouts siguen todas las reglas normales de plantillas de Hugo y hay más información disponible en la [documentación oficial de Hugo](https://gohugo.io/templates/introduction/).
|
||||
|
||||
### Anular layouts predeterminados
|
||||
|
||||
Cada uno de los tipos de contenido discutidos anteriormente lista el archivo de layout que se usa para generar cada tipo de página. Si este archivo se crea en tu proyecto local, anulará la plantilla del tema y por lo tanto puede usarse para personalizar el estilo predeterminado del sitio web.
|
||||
|
||||
Por ejemplo, crear un archivo `layouts/_default/single.html` permitirá personalizar completamente el layout de las páginas hoja.
|
||||
|
||||
### Layouts de sección personalizados
|
||||
|
||||
También es simple crear layouts personalizados para secciones de contenido individuales. Esto es útil cuando quieres crear una sección que lista cierto tipo de contenido usando un estilo particular.
|
||||
|
||||
Repasemos un ejemplo que crea una página "Proyectos" personalizada que lista proyectos usando un layout especial.
|
||||
|
||||
Para hacer esto, estructura tu contenido usando las reglas normales de contenido de Hugo y crea una sección para tus proyectos. Adicionalmente, crea un nuevo layout para la sección de proyectos usando el mismo nombre de directorio que el contenido y añadiendo un archivo `list.html`.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
Este archivo `list.html` ahora anulará la plantilla de lista predeterminada, pero solo para la sección `projects`. Antes de mirar este archivo, primero veamos los archivos de proyecto individuales.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Un tema para Hugo construido con Tailwind CSS."
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/nunocoracao/blowfish/"
|
||||
---
|
||||
```
|
||||
|
||||
_En este ejemplo estamos asignando algunos metadatos a cada proyecto que luego podemos usar en nuestra plantilla de lista. No hay contenido de página, pero nada te impide incluirlo. ¡Es tu propia plantilla personalizada después de todo!_
|
||||
|
||||
Con los proyectos definidos, ahora podemos crear una plantilla de lista que muestre los detalles de cada proyecto.
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Aunque este es un ejemplo bastante sencillo, puedes ver que recorre cada una de las páginas en esta sección (es decir, cada proyecto), y luego muestra enlaces HTML a cada proyecto junto con un icono. Los metadatos en el front matter de cada proyecto se usan para determinar qué información se muestra.
|
||||
|
||||
Ten en cuenta que necesitarás asegurarte de que los estilos y clases relevantes estén disponibles, lo que puede requerir que se recompile el CSS de Tailwind. Esto se discute con más detalle en la sección [Personalización avanzada]({{< ref "advanced-customisation" >}}).
|
||||
|
||||
Al crear plantillas personalizadas como esta, siempre es más fácil echar un vistazo a cómo funciona la plantilla predeterminada de Blowfish y luego usarla como guía. Recuerda, la [documentación de Hugo](https://gohugo.io/templates/introduction/) también es un gran recurso para aprender más sobre la creación de plantillas.
|
||||
318
exampleSite/content/docs/content-examples/index.fr.md
Normal file
318
exampleSite/content/docs/content-examples/index.fr.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
title: "Exemples de contenu"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "Tous les partials disponibles dans Blowfish."
|
||||
slug: "content-examples"
|
||||
tags: ["contenu", "exemple"]
|
||||
series: ["Documentation"]
|
||||
series_order: 12
|
||||
---
|
||||
|
||||
Si vous avez lu la documentation dans l'ordre, vous devriez maintenant connaître toutes les fonctionnalités et configurations disponibles dans Blowfish. Cette page est conçue pour tout rassembler et offrir quelques exemples pratiques que vous pourriez vouloir utiliser dans votre projet Hugo.
|
||||
|
||||
{{< alert >}}
|
||||
**Astuce :** Si vous êtes nouveau sur Hugo, assurez-vous de consulter la [documentation officielle](https://gohugo.io/content-management/page-bundles/) pour en savoir plus sur le concept de bundles de pages et de ressources.
|
||||
{{< /alert >}}
|
||||
|
||||
Les exemples de cette page peuvent tous être adaptés à différents scénarios, mais ils vous donneront, espérons-le, quelques idées sur la façon d'aborder le formatage d'un élément de contenu particulier pour votre projet individuel.
|
||||
|
||||
## Pages de branche
|
||||
|
||||
Les bundles de pages de branche dans Hugo couvrent des éléments comme la page d'accueil, les listes de sections et les pages de taxonomie. La chose importante à retenir concernant les bundles de branche est que le nom de fichier pour ce type de contenu est **`_index.md`**.
|
||||
|
||||
Blowfish honorera les paramètres de front matter spécifiés dans les pages de branche et ceux-ci remplaceront les paramètres par défaut pour cette page particulière. Par exemple, définir le paramètre `title` dans une page de branche permettra de remplacer le titre de la page.
|
||||
|
||||
### Page d'accueil
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout :** | `layouts/index.html` |
|
||||
| **Contenu :** | `content/_index.md` |
|
||||
|
||||
La page d'accueil dans Blowfish est spéciale car son design global est contrôlé par le paramètre de configuration du layout de la page d'accueil. Vous pouvez en savoir plus à ce sujet dans la section [Layout de la page d'accueil]({{< ref "homepage-layout" >}}).
|
||||
|
||||
Si vous voulez ajouter du contenu personnalisé à cette page, vous devez simplement créer un fichier `content/_index.md`. Tout ce qui se trouve dans ce fichier sera alors inclus dans votre page d'accueil.
|
||||
|
||||
**Exemple :**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Bienvenue sur Blowfish !"
|
||||
description: "Ceci est une démo d'ajout de contenu à la page d'accueil."
|
||||
---
|
||||
Bienvenue sur mon site web ! Je suis vraiment content que vous soyez passé.
|
||||
```
|
||||
|
||||
_Cet exemple définit un titre personnalisé et ajoute du texte supplémentaire au corps de la page. Tout texte formaté en Markdown est acceptable, y compris les shortcodes, les images et les liens._
|
||||
|
||||
### Pages de liste
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout :** | `layouts/_default/list.html` |
|
||||
| **Contenu :** | `content/../_index.md` |
|
||||
|
||||
Les pages de liste regroupent toutes les pages d'une section et offrent un moyen aux visiteurs d'atteindre chaque page. Un blog ou un portfolio sont des exemples de pages de liste car ils regroupent des articles ou des projets.
|
||||
|
||||
Créer une page de liste est aussi simple que de créer un sous-répertoire dans le dossier content. Par exemple, pour créer une section "Projets", vous créeriez `content/projects/`. Ensuite, créez un fichier Markdown pour chacun de vos projets.
|
||||
|
||||
Une page de liste sera générée par défaut, cependant pour personnaliser le contenu, vous devriez également créer une page `_index.md` dans ce nouveau répertoire.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
Hugo générera des URLs pour les pages de votre dossier projets en conséquence.
|
||||
|
||||
Tout comme la page d'accueil, le contenu du fichier `_index.md` sera affiché dans l'index de liste généré. Blowfish listera ensuite toutes les pages de cette section sous le contenu.
|
||||
|
||||
**Exemple :**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Projets"
|
||||
description: "Découvrez certains de mes projets."
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
Cette section contient tous mes projets actuels.
|
||||
```
|
||||
|
||||
_Dans cet exemple, le paramètre spécial `cascade` est utilisé pour masquer le temps de lecture sur toutes les sous-pages de cette section. En faisant cela, les pages de projet n'afficheront pas leur temps de lecture. C'est un excellent moyen de remplacer les paramètres par défaut du thème pour une section entière sans avoir à les inclure dans chaque page individuelle._
|
||||
|
||||
La [section samples]({{< ref "samples" >}}) de ce site est un exemple de page de liste.
|
||||
|
||||
### Pages de taxonomie
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **Layout liste :** | `layouts/_default/taxonomy.html` |
|
||||
| **Layout terme :** | `layouts/_default/term.html` |
|
||||
| **Contenu :** | `content/../_index.md` |
|
||||
|
||||
Les pages de taxonomie se présentent sous deux formes - les listes de taxonomie et les termes de taxonomie. Les listes affichent une liste de chacun des termes dans une taxonomie donnée, tandis que les termes affichent une liste de pages qui sont liées à un terme donné.
|
||||
|
||||
La terminologie peut être un peu confuse, alors explorons un exemple utilisant une taxonomie nommée `animals`.
|
||||
|
||||
Tout d'abord, pour utiliser les taxonomies dans Hugo, elles doivent être configurées. Cela se fait en créant un fichier de configuration à `config/_default/taxonomies.toml` et en définissant le nom de la taxonomie.
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
Hugo s'attend à ce que les taxonomies soient listées en utilisant leurs formes singulière et plurielle, donc nous ajoutons le singulier `animal` égal au pluriel `animals` pour créer notre taxonomie d'exemple.
|
||||
|
||||
Maintenant que notre taxonomie `animals` existe, elle doit être ajoutée aux éléments de contenu individuels. C'est aussi simple que de l'insérer dans le front matter :
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Dans la tanière du lion"
|
||||
description: "Cette semaine, nous apprenons sur les lions."
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
Cela a maintenant créé deux _termes_ dans notre taxonomie `animals` - `lion` et `cat`.
|
||||
|
||||
Bien que ce ne soit pas évident à ce stade, Hugo génère maintenant des pages de liste et de terme pour cette nouvelle taxonomie. Par défaut, la liste peut être accessible à `/animals/` et les pages de terme peuvent être trouvées à `/animals/lion/` et `/animals/cat/`.
|
||||
|
||||
La page de liste listera tous les termes contenus dans la taxonomie. Dans cet exemple, naviguer vers `/animals/` affichera une page qui a des liens pour "lion" et "cat" qui amènent les visiteurs aux pages de terme individuelles.
|
||||
|
||||
Les pages de terme listeront toutes les pages contenues dans ce terme. Ces listes de termes sont essentiellement les mêmes que les [pages de liste](#pages-de-liste) normales et se comportent de la même manière.
|
||||
|
||||
Pour ajouter du contenu personnalisé aux pages de taxonomie, créez simplement des fichiers `_index.md` dans le dossier content en utilisant le nom de la taxonomie comme nom de sous-répertoire.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
Tout ce qui se trouve dans ces fichiers de contenu sera maintenant placé sur les pages de taxonomie générées. Comme pour les autres contenus, les variables de front matter peuvent être utilisées pour remplacer les valeurs par défaut. De cette façon, vous pourriez avoir un tag nommé `lion` mais remplacer le `title` par "Lion".
|
||||
|
||||
Pour voir à quoi cela ressemble en réalité, consultez la [liste de taxonomie des tags]({{< ref "tags" >}}) sur ce site.
|
||||
|
||||
## Pages feuille
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout :** | `layouts/_default/single.html` |
|
||||
| **Contenu (autonome) :** | `content/../page-name.md` |
|
||||
| **Contenu (groupé) :** | `content/../page-name/index.md` |
|
||||
|
||||
Les pages feuille dans Hugo sont essentiellement des pages de contenu standard. Elles sont définies comme des pages qui ne contiennent aucune sous-page. Cela pourrait être des choses comme une page À propos, ou un article de blog individuel qui vit dans la section blog du site web.
|
||||
|
||||
La chose la plus importante à retenir concernant les pages feuille est que contrairement aux pages de branche, les pages feuille doivent être nommées `index.md` _sans_ tiret bas. Les pages feuille sont également spéciales car elles peuvent être regroupées au niveau supérieur de la section et nommées avec un nom unique.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
Lors de l'inclusion d'assets dans une page, comme une image, un bundle de page doit être utilisé. Les bundles de page sont créés en utilisant un sous-répertoire avec un fichier `index.md`. Regrouper les assets avec le contenu dans son propre répertoire est important car de nombreux shortcodes et autres logiques du thème supposent que les ressources sont groupées avec les pages.
|
||||
|
||||
**Exemple :**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mon premier article de blog"
|
||||
date: 2022-01-25
|
||||
description: "Bienvenue sur mon blog !"
|
||||
summary: "Apprenez-en plus sur moi et pourquoi je lance ce blog."
|
||||
tags: ["bienvenue", "nouveau", "à propos", "premier"]
|
||||
---
|
||||
_Voici_ le contenu de mon article de blog.
|
||||
```
|
||||
|
||||
Les pages feuille ont une grande variété de paramètres de [front matter]({{< ref "front-matter" >}}) qui peuvent être utilisés pour personnaliser leur affichage.
|
||||
|
||||
### Liens externes
|
||||
|
||||
Blowfish a une fonctionnalité spéciale qui permet aux liens vers des pages externes d'apparaître à côté des articles dans les listes d'articles. C'est utile si vous avez du contenu sur des sites tiers comme Medium, ou des articles de recherche que vous souhaitez lier, sans répliquer le contenu dans votre site Hugo.
|
||||
|
||||
Pour créer un article de lien externe, un front matter spécial doit être défini :
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Mon article Medium"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "J'ai écrit un article sur Medium."
|
||||
showReadingTime: false
|
||||
build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
En plus des paramètres de front matter normaux comme `title` et `summary`, le paramètre `externalUrl` est utilisé pour indiquer à Blowfish qu'il ne s'agit pas d'un article ordinaire. L'URL fournie ici sera l'endroit où les visiteurs seront dirigés lorsqu'ils sélectionneront cet article.
|
||||
|
||||
De plus, nous utilisons un paramètre de front matter Hugo spécial `build` pour empêcher la génération d'une page normale pour ce contenu - il n'y a pas d'intérêt à générer une page puisque nous lions vers une URL externe !
|
||||
|
||||
Le thème inclut un archétype pour simplifier la génération de ces articles de liens externes. Spécifiez simplement `-k external` lors de la création de nouveau contenu.
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Pages simples
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout :** | `layouts/_default/simple.html` |
|
||||
| **Front Matter :** | `layout: "simple"` |
|
||||
|
||||
Blowfish inclut également un layout spécial pour les pages simples. Le layout simple est un template pleine largeur qui place simplement le contenu Markdown dans la page sans aucune fonctionnalité spéciale du thème.
|
||||
|
||||
Les seules fonctionnalités disponibles dans le layout simple sont les fils d'Ariane et les liens de partage. Cependant, le comportement de ceux-ci peut toujours être contrôlé en utilisant les variables de [front matter]({{< ref "front-matter" >}}) normales de la page.
|
||||
|
||||
Pour activer le layout simple sur une page particulière, ajoutez la variable de front matter `layout` avec la valeur `"simple"` :
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Ma page d'atterrissage"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
Le contenu de cette page est maintenant en pleine largeur.
|
||||
```
|
||||
|
||||
## Layouts personnalisés
|
||||
|
||||
Un des avantages de Hugo est qu'il facilite la création de layouts personnalisés pour l'ensemble du site, des sections individuelles ou des pages.
|
||||
|
||||
Les layouts suivent toutes les règles normales de templating Hugo et plus d'informations sont disponibles dans la [documentation officielle de Hugo](https://gohugo.io/templates/introduction/).
|
||||
|
||||
### Remplacement des layouts par défaut
|
||||
|
||||
Chacun des types de contenu discutés ci-dessus liste le fichier de layout qui est utilisé pour générer chaque type de page. Si ce fichier est créé dans votre projet local, il remplacera le template du thème et peut donc être utilisé pour personnaliser le style par défaut du site web.
|
||||
|
||||
Par exemple, créer un fichier `layouts/_default/single.html` permettra de personnaliser complètement le layout des pages feuille.
|
||||
|
||||
### Layouts de section personnalisés
|
||||
|
||||
Il est également simple de créer des layouts personnalisés pour des sections de contenu individuelles. C'est utile lorsque vous voulez créer une section qui liste un certain type de contenu en utilisant un style particulier.
|
||||
|
||||
Parcourons un exemple qui crée une page "Projets" personnalisée qui liste les projets en utilisant un layout spécial.
|
||||
|
||||
Pour ce faire, structurez votre contenu en utilisant les règles de contenu Hugo normales et créez une section pour vos projets. De plus, créez un nouveau layout pour la section projets en utilisant le même nom de répertoire que le contenu et en ajoutant un fichier `list.html`.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
Ce fichier `list.html` remplacera maintenant le template de liste par défaut, mais uniquement pour la section `projects`. Avant de regarder ce fichier, examinons d'abord les fichiers de projet individuels.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Un thème pour Hugo construit avec Tailwind CSS."
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/nunocoracao/blowfish/"
|
||||
---
|
||||
```
|
||||
|
||||
_Dans cet exemple, nous attribuons des métadonnées à chaque projet que nous pouvons ensuite utiliser dans notre template de liste. Il n'y a pas de contenu de page, mais rien ne vous empêche d'en inclure. C'est votre propre template personnalisé après tout !_
|
||||
|
||||
Avec les projets définis, nous pouvons maintenant créer un template de liste qui affiche les détails de chaque projet.
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Bien qu'il s'agisse d'un exemple assez simple, vous pouvez voir qu'il parcourt chacune des pages de cette section (c'est-à-dire chaque projet), puis affiche des liens HTML vers chaque projet avec une icône. Les métadonnées dans le front matter de chaque projet sont utilisées pour déterminer quelles informations sont affichées.
|
||||
|
||||
Gardez à l'esprit que vous devrez vous assurer que les styles et classes pertinents sont disponibles, ce qui peut nécessiter la recompilation du CSS Tailwind. Ceci est discuté plus en détail dans la section [Personnalisation avancée]({{< ref "advanced-customisation" >}}).
|
||||
|
||||
Lors de la création de templates personnalisés comme celui-ci, il est toujours plus facile de regarder comment le template Blowfish par défaut fonctionne et ensuite de l'utiliser comme guide. N'oubliez pas que la [documentation Hugo](https://gohugo.io/templates/introduction/) est également une excellente ressource pour en savoir plus sur la création de templates.
|
||||
318
exampleSite/content/docs/content-examples/index.pt-br.md
Normal file
318
exampleSite/content/docs/content-examples/index.pt-br.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
title: "Exemplos de conteúdo"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "Todos os partials disponíveis no Blowfish."
|
||||
slug: "content-examples"
|
||||
tags: ["conteúdo", "exemplo"]
|
||||
series: ["Documentação"]
|
||||
series_order: 12
|
||||
---
|
||||
|
||||
Se você está lendo a documentação em ordem, agora deve conhecer todos os recursos e configurações disponíveis no Blowfish. Esta página foi projetada para reunir tudo e oferecer alguns exemplos práticos que você pode querer usar em seu projeto Hugo.
|
||||
|
||||
{{< alert >}}
|
||||
**Dica:** Se você é novo no Hugo, certifique-se de conferir a [documentação oficial](https://gohugo.io/content-management/page-bundles/) para aprender mais sobre o conceito de bundles de página e recursos.
|
||||
{{< /alert >}}
|
||||
|
||||
Os exemplos nesta página podem ser adaptados para diferentes cenários, mas esperamos que lhe deem algumas ideias sobre como abordar a formatação de um item de conteúdo específico para seu projeto individual.
|
||||
|
||||
## Páginas branch
|
||||
|
||||
Os bundles de página branch no Hugo cobrem itens como a página inicial, listagens de seções e páginas de taxonomia. O importante a lembrar sobre bundles branch é que o nome do arquivo para este tipo de conteúdo é **`_index.md`**.
|
||||
|
||||
O Blowfish respeitará os parâmetros de front matter especificados nas páginas branch e estes substituirão as configurações padrão para essa página específica. Por exemplo, definir o parâmetro `title` em uma página branch permitirá substituir o título da página.
|
||||
|
||||
### Página inicial
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Conteúdo:** | `content/_index.md` |
|
||||
|
||||
A página inicial no Blowfish é especial porque seu design geral é controlado pelo parâmetro de configuração do layout da página inicial. Você pode aprender mais sobre isso na seção [Layout da página inicial]({{< ref "homepage-layout" >}}).
|
||||
|
||||
Se você quiser adicionar conteúdo personalizado a esta página, simplesmente precisa criar um arquivo `content/_index.md`. Qualquer coisa neste arquivo será incluída em sua página inicial.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Bem-vindo ao Blowfish!"
|
||||
description: "Esta é uma demonstração de como adicionar conteúdo à página inicial."
|
||||
---
|
||||
Bem-vindo ao meu site! Fico muito feliz que você passou por aqui.
|
||||
```
|
||||
|
||||
_Este exemplo define um título personalizado e adiciona algum texto adicional ao corpo da página. Qualquer texto formatado em Markdown é aceitável, incluindo shortcodes, imagens e links._
|
||||
|
||||
### Páginas de lista
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout:** | `layouts/_default/list.html` |
|
||||
| **Conteúdo:** | `content/../_index.md` |
|
||||
|
||||
As páginas de lista agrupam todas as páginas de uma seção e fornecem uma maneira para os visitantes alcançarem cada página. Um blog ou portfolio são exemplos de uma página de lista, pois agrupam posts ou projetos.
|
||||
|
||||
Criar uma página de lista é tão simples quanto criar um subdiretório na pasta de conteúdo. Por exemplo, para criar uma seção "Projetos", você criaria `content/projects/`. Em seguida, crie um arquivo Markdown para cada um dos seus projetos.
|
||||
|
||||
Uma página de lista será gerada por padrão, no entanto, para personalizar o conteúdo, você também deve criar uma página `_index.md` neste novo diretório.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
O Hugo gerará URLs para as páginas na sua pasta de projetos de acordo.
|
||||
|
||||
Assim como a página inicial, o conteúdo no arquivo `_index.md` será exibido no índice de lista gerado. O Blowfish então listará quaisquer páginas nesta seção abaixo do conteúdo.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Projetos"
|
||||
description: "Conheça alguns dos meus projetos."
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
Esta seção contém todos os meus projetos atuais.
|
||||
```
|
||||
|
||||
_Neste exemplo, o parâmetro especial `cascade` está sendo usado para ocultar o tempo de leitura em quaisquer subpáginas dentro desta seção. Ao fazer isso, as páginas de projeto não mostrarão seu tempo de leitura. Esta é uma ótima maneira de substituir os parâmetros padrão do tema para uma seção inteira sem ter que incluí-los em cada página individual._
|
||||
|
||||
A [seção de amostras]({{< ref "samples" >}}) deste site é um exemplo de uma página de lista.
|
||||
|
||||
### Páginas de taxonomia
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **Layout lista:** | `layouts/_default/taxonomy.html` |
|
||||
| **Layout termo:** | `layouts/_default/term.html` |
|
||||
| **Conteúdo:** | `content/../_index.md` |
|
||||
|
||||
As páginas de taxonomia vêm em duas formas - listas de taxonomia e termos de taxonomia. As listas exibem uma listagem de cada um dos termos dentro de uma determinada taxonomia, enquanto os termos exibem uma lista de páginas que estão relacionadas a um determinado termo.
|
||||
|
||||
A terminologia pode ser um pouco confusa, então vamos explorar um exemplo usando uma taxonomia chamada `animals`.
|
||||
|
||||
Primeiro, para usar taxonomias no Hugo, elas devem ser configuradas. Isso é feito criando um arquivo de configuração em `config/_default/taxonomies.toml` e definindo o nome da taxonomia.
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
O Hugo espera que as taxonomias sejam listadas usando suas formas singular e plural, então adicionamos o singular `animal` igual ao plural `animals` para criar nossa taxonomia de exemplo.
|
||||
|
||||
Agora que nossa taxonomia `animals` existe, ela precisa ser adicionada aos itens de conteúdo individuais. É tão simples quanto inseri-la no front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Na toca do leão"
|
||||
description: "Esta semana estamos aprendendo sobre leões."
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
Isso criou agora dois _termos_ dentro de nossa taxonomia `animals` - `lion` e `cat`.
|
||||
|
||||
Embora não seja óbvio neste ponto, o Hugo agora estará gerando páginas de lista e termo para esta nova taxonomia. Por padrão, a listagem pode ser acessada em `/animals/` e as páginas de termo podem ser encontradas em `/animals/lion/` e `/animals/cat/`.
|
||||
|
||||
A página de lista listará todos os termos contidos dentro da taxonomia. Neste exemplo, navegar para `/animals/` mostrará uma página que tem links para "lion" e "cat" que levam os visitantes às páginas de termo individuais.
|
||||
|
||||
As páginas de termo listarão todas as páginas contidas dentro desse termo. Essas listas de termos são essencialmente as mesmas que as [páginas de lista](#páginas-de-lista) normais e se comportam da mesma maneira.
|
||||
|
||||
Para adicionar conteúdo personalizado às páginas de taxonomia, simplesmente crie arquivos `_index.md` na pasta de conteúdo usando o nome da taxonomia como o nome do subdiretório.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
Qualquer coisa nesses arquivos de conteúdo será agora colocada nas páginas de taxonomia geradas. Como com outros conteúdos, as variáveis de front matter podem ser usadas para substituir valores padrão. Dessa forma, você poderia ter uma tag chamada `lion` mas substituir o `title` por "Leão".
|
||||
|
||||
Para ver como isso se parece na realidade, confira a [listagem de taxonomia de tags]({{< ref "tags" >}}) neste site.
|
||||
|
||||
## Páginas leaf
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout:** | `layouts/_default/single.html` |
|
||||
| **Conteúdo (autônomo):** | `content/../page-name.md` |
|
||||
| **Conteúdo (agrupado):** | `content/../page-name/index.md` |
|
||||
|
||||
As páginas leaf no Hugo são basicamente páginas de conteúdo padrão. Elas são definidas como páginas que não contêm nenhuma subpágina. Isso poderia ser coisas como uma página Sobre, ou uma postagem de blog individual que vive na seção de blog do site.
|
||||
|
||||
O mais importante a lembrar sobre páginas leaf é que, ao contrário das páginas branch, as páginas leaf devem ser nomeadas `index.md` _sem_ underscore. As páginas leaf também são especiais porque podem ser agrupadas no nível superior da seção e nomeadas com um nome único.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
Ao incluir recursos em uma página, como uma imagem, um bundle de página deve ser usado. Os bundles de página são criados usando um subdiretório com um arquivo `index.md`. Agrupar os recursos com o conteúdo em seu próprio diretório é importante, pois muitos dos shortcodes e outras lógicas do tema assumem que os recursos estão agrupados junto com as páginas.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Minha primeira postagem de blog"
|
||||
date: 2022-01-25
|
||||
description: "Bem-vindo ao meu blog!"
|
||||
summary: "Saiba mais sobre mim e por que estou começando este blog."
|
||||
tags: ["boas-vindas", "novo", "sobre", "primeiro"]
|
||||
---
|
||||
_Este_ é o conteúdo da minha postagem de blog.
|
||||
```
|
||||
|
||||
As páginas leaf têm uma grande variedade de parâmetros de [front matter]({{< ref "front-matter" >}}) que podem ser usados para personalizar como são exibidas.
|
||||
|
||||
### Links externos
|
||||
|
||||
O Blowfish tem um recurso especial que permite que links para páginas externas apareçam ao lado dos artigos nas listagens de artigos. Isso é útil se você tem conteúdo em sites de terceiros como Medium, ou artigos de pesquisa que você gostaria de vincular, sem replicar o conteúdo em seu site Hugo.
|
||||
|
||||
Para criar um artigo de link externo, algum front matter especial precisa ser definido:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Minha postagem no Medium"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "Escrevi uma postagem no Medium."
|
||||
showReadingTime: false
|
||||
build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
Junto com os parâmetros normais de front matter como `title` e `summary`, o parâmetro `externalUrl` é usado para dizer ao Blowfish que este não é um artigo comum. A URL fornecida aqui será para onde os visitantes serão direcionados quando selecionarem este artigo.
|
||||
|
||||
Adicionalmente, usamos um parâmetro especial de front matter do Hugo `build` para evitar que uma página normal seja gerada para este conteúdo - não há sentido em gerar uma página já que estamos vinculando a uma URL externa!
|
||||
|
||||
O tema inclui um arquétipo para simplificar a geração desses artigos de link externo. Basta especificar `-k external` ao criar novo conteúdo.
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Páginas simples
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
|
||||
O Blowfish também inclui um layout especial para páginas simples. O layout simples é um template de largura total que simplesmente coloca o conteúdo Markdown na página sem nenhum recurso especial do tema.
|
||||
|
||||
Os únicos recursos disponíveis no layout simples são breadcrumbs e links de compartilhamento. No entanto, o comportamento destes ainda pode ser controlado usando as variáveis normais de [front matter]({{< ref "front-matter" >}}) da página.
|
||||
|
||||
Para habilitar o layout simples em uma página específica, adicione a variável de front matter `layout` com o valor `"simple"`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Minha página de destino"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
O conteúdo desta página agora é de largura total.
|
||||
```
|
||||
|
||||
## Layouts personalizados
|
||||
|
||||
Um dos benefícios do Hugo é que ele facilita a criação de layouts personalizados para todo o site, seções individuais ou páginas.
|
||||
|
||||
Os layouts seguem todas as regras normais de templates do Hugo e mais informações estão disponíveis na [documentação oficial do Hugo](https://gohugo.io/templates/introduction/).
|
||||
|
||||
### Substituindo layouts padrão
|
||||
|
||||
Cada um dos tipos de conteúdo discutidos acima lista o arquivo de layout que é usado para gerar cada tipo de página. Se este arquivo for criado em seu projeto local, ele substituirá o template do tema e, portanto, pode ser usado para personalizar o estilo padrão do site.
|
||||
|
||||
Por exemplo, criar um arquivo `layouts/_default/single.html` permitirá que o layout das páginas leaf seja completamente personalizado.
|
||||
|
||||
### Layouts de seção personalizados
|
||||
|
||||
Também é simples criar layouts personalizados para seções de conteúdo individuais. Isso é útil quando você quer fazer uma seção que lista um certo tipo de conteúdo usando um estilo específico.
|
||||
|
||||
Vamos percorrer um exemplo que cria uma página "Projetos" personalizada que lista projetos usando um layout especial.
|
||||
|
||||
Para fazer isso, estruture seu conteúdo usando as regras normais de conteúdo do Hugo e crie uma seção para seus projetos. Adicionalmente, crie um novo layout para a seção de projetos usando o mesmo nome de diretório que o conteúdo e adicionando um arquivo `list.html`.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
Este arquivo `list.html` agora substituirá o template de lista padrão, mas apenas para a seção `projects`. Antes de olharmos para este arquivo, vamos primeiro olhar para os arquivos de projeto individuais.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Um tema para Hugo construído com Tailwind CSS."
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/nunocoracao/blowfish/"
|
||||
---
|
||||
```
|
||||
|
||||
_Neste exemplo, estamos atribuindo alguns metadados a cada projeto que podemos usar em nosso template de lista. Não há conteúdo de página, mas nada impede você de incluí-lo. É seu próprio template personalizado, afinal!_
|
||||
|
||||
Com os projetos definidos, agora podemos criar um template de lista que exibe os detalhes de cada projeto.
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Embora este seja um exemplo bastante simples, você pode ver que ele percorre cada uma das páginas nesta seção (ou seja, cada projeto) e então exibe links HTML para cada projeto junto com um ícone. Os metadados no front matter de cada projeto são usados para determinar quais informações são exibidas.
|
||||
|
||||
Tenha em mente que você precisará garantir que os estilos e classes relevantes estejam disponíveis, o que pode exigir que o CSS do Tailwind seja recompilado. Isso é discutido com mais detalhes na seção [Personalização avançada]({{< ref "advanced-customisation" >}}).
|
||||
|
||||
Ao criar templates personalizados como este, é sempre mais fácil dar uma olhada em como o template padrão do Blowfish funciona e depois usá-lo como guia. Lembre-se, a [documentação do Hugo](https://gohugo.io/templates/introduction/) também é um ótimo recurso para aprender mais sobre a criação de templates.
|
||||
318
exampleSite/content/docs/content-examples/index.pt-pt.md
Normal file
318
exampleSite/content/docs/content-examples/index.pt-pt.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
title: "Exemplos de conteúdo"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "Todos os partials disponíveis no Blowfish."
|
||||
slug: "content-examples"
|
||||
tags: ["conteúdo", "exemplo"]
|
||||
series: ["Documentação"]
|
||||
series_order: 12
|
||||
---
|
||||
|
||||
Se tem lido a documentação por ordem, agora deverá conhecer todas as funcionalidades e configurações disponíveis no Blowfish. Esta página foi concebida para reunir tudo e oferecer alguns exemplos práticos que poderá querer utilizar no seu projeto Hugo.
|
||||
|
||||
{{< alert >}}
|
||||
**Dica:** Se é novo no Hugo, certifique-se de consultar a [documentação oficial](https://gohugo.io/content-management/page-bundles/) para saber mais sobre o conceito de bundles de página e recursos.
|
||||
{{< /alert >}}
|
||||
|
||||
Os exemplos nesta página podem todos ser adaptados a diferentes cenários, mas esperamos que lhe deem algumas ideias sobre como abordar a formatação de um item de conteúdo específico para o seu projeto individual.
|
||||
|
||||
## Páginas branch
|
||||
|
||||
Os bundles de página branch no Hugo cobrem itens como a página inicial, listagens de secções e páginas de taxonomia. O importante a lembrar sobre bundles branch é que o nome do ficheiro para este tipo de conteúdo é **`_index.md`**.
|
||||
|
||||
O Blowfish respeitará os parâmetros de front matter especificados nas páginas branch e estes substituirão as definições predefinidas para essa página específica. Por exemplo, definir o parâmetro `title` numa página branch permitirá substituir o título da página.
|
||||
|
||||
### Página inicial
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Conteúdo:** | `content/_index.md` |
|
||||
|
||||
A página inicial no Blowfish é especial porque o seu design geral é controlado pelo parâmetro de configuração do layout da página inicial. Pode saber mais sobre isto na secção [Layout da página inicial]({{< ref "homepage-layout" >}}).
|
||||
|
||||
Se quiser adicionar conteúdo personalizado a esta página, basta criar um ficheiro `content/_index.md`. Tudo o que estiver neste ficheiro será incluído na sua página inicial.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Bem-vindo ao Blowfish!"
|
||||
description: "Esta é uma demonstração de como adicionar conteúdo à página inicial."
|
||||
---
|
||||
Bem-vindo ao meu site! Fico muito contente que tenha passado por cá.
|
||||
```
|
||||
|
||||
_Este exemplo define um título personalizado e adiciona algum texto adicional ao corpo da página. Qualquer texto formatado em Markdown é aceitável, incluindo shortcodes, imagens e ligações._
|
||||
|
||||
### Páginas de lista
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout:** | `layouts/_default/list.html` |
|
||||
| **Conteúdo:** | `content/../_index.md` |
|
||||
|
||||
As páginas de lista agrupam todas as páginas de uma secção e fornecem uma forma para os visitantes alcançarem cada página. Um blogue ou portfólio são exemplos de uma página de lista, pois agrupam publicações ou projetos.
|
||||
|
||||
Criar uma página de lista é tão simples como criar um subdiretório na pasta de conteúdo. Por exemplo, para criar uma secção "Projetos", criaria `content/projects/`. Em seguida, crie um ficheiro Markdown para cada um dos seus projetos.
|
||||
|
||||
Uma página de lista será gerada por predefinição, no entanto, para personalizar o conteúdo, também deve criar uma página `_index.md` neste novo diretório.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
O Hugo gerará URLs para as páginas na sua pasta de projetos em conformidade.
|
||||
|
||||
Tal como na página inicial, o conteúdo no ficheiro `_index.md` será apresentado no índice de lista gerado. O Blowfish listará então quaisquer páginas nesta secção abaixo do conteúdo.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Projetos"
|
||||
description: "Conheça alguns dos meus projetos."
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
Esta secção contém todos os meus projetos atuais.
|
||||
```
|
||||
|
||||
_Neste exemplo, o parâmetro especial `cascade` está a ser utilizado para ocultar o tempo de leitura em quaisquer subpáginas dentro desta secção. Ao fazer isto, as páginas de projeto não mostrarão o seu tempo de leitura. Esta é uma excelente forma de substituir os parâmetros predefinidos do tema para uma secção inteira sem ter de os incluir em cada página individual._
|
||||
|
||||
A [secção de amostras]({{< ref "samples" >}}) deste site é um exemplo de uma página de lista.
|
||||
|
||||
### Páginas de taxonomia
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **Layout lista:** | `layouts/_default/taxonomy.html` |
|
||||
| **Layout termo:** | `layouts/_default/term.html` |
|
||||
| **Conteúdo:** | `content/../_index.md` |
|
||||
|
||||
As páginas de taxonomia vêm em duas formas - listas de taxonomia e termos de taxonomia. As listas apresentam uma listagem de cada um dos termos dentro de uma determinada taxonomia, enquanto os termos apresentam uma lista de páginas que estão relacionadas com um determinado termo.
|
||||
|
||||
A terminologia pode ser um pouco confusa, então vamos explorar um exemplo utilizando uma taxonomia chamada `animals`.
|
||||
|
||||
Primeiro, para utilizar taxonomias no Hugo, estas devem ser configuradas. Isto é feito criando um ficheiro de configuração em `config/_default/taxonomies.toml` e definindo o nome da taxonomia.
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
O Hugo espera que as taxonomias sejam listadas utilizando as suas formas singular e plural, pelo que adicionamos o singular `animal` igual ao plural `animals` para criar a nossa taxonomia de exemplo.
|
||||
|
||||
Agora que a nossa taxonomia `animals` existe, precisa de ser adicionada aos itens de conteúdo individuais. É tão simples como inseri-la no front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Na toca do leão"
|
||||
description: "Esta semana estamos a aprender sobre leões."
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
Isto criou agora dois _termos_ dentro da nossa taxonomia `animals` - `lion` e `cat`.
|
||||
|
||||
Embora não seja óbvio neste ponto, o Hugo estará agora a gerar páginas de lista e termo para esta nova taxonomia. Por predefinição, a listagem pode ser acedida em `/animals/` e as páginas de termo podem ser encontradas em `/animals/lion/` e `/animals/cat/`.
|
||||
|
||||
A página de lista listará todos os termos contidos dentro da taxonomia. Neste exemplo, navegar para `/animals/` mostrará uma página que tem ligações para "lion" e "cat" que levam os visitantes às páginas de termo individuais.
|
||||
|
||||
As páginas de termo listarão todas as páginas contidas dentro desse termo. Estas listas de termos são essencialmente as mesmas que as [páginas de lista](#páginas-de-lista) normais e comportam-se da mesma forma.
|
||||
|
||||
Para adicionar conteúdo personalizado às páginas de taxonomia, basta criar ficheiros `_index.md` na pasta de conteúdo utilizando o nome da taxonomia como o nome do subdiretório.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
Tudo o que estiver nestes ficheiros de conteúdo será agora colocado nas páginas de taxonomia geradas. Como com outros conteúdos, as variáveis de front matter podem ser utilizadas para substituir valores predefinidos. Desta forma, poderia ter uma tag chamada `lion` mas substituir o `title` por "Leão".
|
||||
|
||||
Para ver como isto se parece na realidade, consulte a [listagem de taxonomia de tags]({{< ref "tags" >}}) neste site.
|
||||
|
||||
## Páginas leaf
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout:** | `layouts/_default/single.html` |
|
||||
| **Conteúdo (autónomo):** | `content/../page-name.md` |
|
||||
| **Conteúdo (agrupado):** | `content/../page-name/index.md` |
|
||||
|
||||
As páginas leaf no Hugo são basicamente páginas de conteúdo padrão. São definidas como páginas que não contêm quaisquer subpáginas. Estas poderiam ser coisas como uma página Sobre, ou uma publicação de blogue individual que vive na secção de blogue do site.
|
||||
|
||||
O mais importante a lembrar sobre páginas leaf é que, ao contrário das páginas branch, as páginas leaf devem ser nomeadas `index.md` _sem_ underscore. As páginas leaf também são especiais porque podem ser agrupadas no nível superior da secção e nomeadas com um nome único.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
Ao incluir recursos numa página, como uma imagem, deve ser utilizado um bundle de página. Os bundles de página são criados utilizando um subdiretório com um ficheiro `index.md`. Agrupar os recursos com o conteúdo no seu próprio diretório é importante, pois muitos dos shortcodes e outras lógicas do tema assumem que os recursos estão agrupados junto com as páginas.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "A minha primeira publicação de blogue"
|
||||
date: 2022-01-25
|
||||
description: "Bem-vindo ao meu blogue!"
|
||||
summary: "Saiba mais sobre mim e porque estou a começar este blogue."
|
||||
tags: ["boas-vindas", "novo", "sobre", "primeiro"]
|
||||
---
|
||||
_Este_ é o conteúdo da minha publicação de blogue.
|
||||
```
|
||||
|
||||
As páginas leaf têm uma grande variedade de parâmetros de [front matter]({{< ref "front-matter" >}}) que podem ser utilizados para personalizar como são apresentadas.
|
||||
|
||||
### Ligações externas
|
||||
|
||||
O Blowfish tem uma funcionalidade especial que permite que ligações para páginas externas apareçam ao lado dos artigos nas listagens de artigos. Isto é útil se tem conteúdo em sites de terceiros como Medium, ou artigos de investigação que gostaria de ligar, sem replicar o conteúdo no seu site Hugo.
|
||||
|
||||
Para criar um artigo de ligação externa, algum front matter especial precisa de ser definido:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "A minha publicação no Medium"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "Escrevi uma publicação no Medium."
|
||||
showReadingTime: false
|
||||
build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
Juntamente com os parâmetros normais de front matter como `title` e `summary`, o parâmetro `externalUrl` é utilizado para dizer ao Blowfish que este não é um artigo comum. O URL fornecido aqui será para onde os visitantes serão direcionados quando selecionarem este artigo.
|
||||
|
||||
Adicionalmente, utilizamos um parâmetro especial de front matter do Hugo `build` para evitar que uma página normal seja gerada para este conteúdo - não faz sentido gerar uma página já que estamos a ligar a um URL externo!
|
||||
|
||||
O tema inclui um arquétipo para simplificar a geração destes artigos de ligação externa. Basta especificar `-k external` ao criar novo conteúdo.
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Páginas simples
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
|
||||
O Blowfish também inclui um layout especial para páginas simples. O layout simples é um template de largura total que simplesmente coloca o conteúdo Markdown na página sem nenhuma funcionalidade especial do tema.
|
||||
|
||||
As únicas funcionalidades disponíveis no layout simples são breadcrumbs e ligações de partilha. No entanto, o comportamento destes ainda pode ser controlado utilizando as variáveis normais de [front matter]({{< ref "front-matter" >}}) da página.
|
||||
|
||||
Para ativar o layout simples numa página específica, adicione a variável de front matter `layout` com o valor `"simple"`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "A minha página de destino"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
O conteúdo desta página é agora de largura total.
|
||||
```
|
||||
|
||||
## Layouts personalizados
|
||||
|
||||
Um dos benefícios do Hugo é que facilita a criação de layouts personalizados para todo o site, secções individuais ou páginas.
|
||||
|
||||
Os layouts seguem todas as regras normais de templates do Hugo e mais informações estão disponíveis na [documentação oficial do Hugo](https://gohugo.io/templates/introduction/).
|
||||
|
||||
### Substituir layouts predefinidos
|
||||
|
||||
Cada um dos tipos de conteúdo discutidos acima lista o ficheiro de layout que é utilizado para gerar cada tipo de página. Se este ficheiro for criado no seu projeto local, substituirá o template do tema e, portanto, pode ser utilizado para personalizar o estilo predefinido do site.
|
||||
|
||||
Por exemplo, criar um ficheiro `layouts/_default/single.html` permitirá que o layout das páginas leaf seja completamente personalizado.
|
||||
|
||||
### Layouts de secção personalizados
|
||||
|
||||
Também é simples criar layouts personalizados para secções de conteúdo individuais. Isto é útil quando quer fazer uma secção que lista um certo tipo de conteúdo utilizando um estilo específico.
|
||||
|
||||
Vamos percorrer um exemplo que cria uma página "Projetos" personalizada que lista projetos utilizando um layout especial.
|
||||
|
||||
Para fazer isto, estruture o seu conteúdo utilizando as regras normais de conteúdo do Hugo e crie uma secção para os seus projetos. Adicionalmente, crie um novo layout para a secção de projetos utilizando o mesmo nome de diretório que o conteúdo e adicionando um ficheiro `list.html`.
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
Este ficheiro `list.html` irá agora substituir o template de lista predefinido, mas apenas para a secção `projects`. Antes de olharmos para este ficheiro, vamos primeiro olhar para os ficheiros de projeto individuais.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Um tema para Hugo construído com Tailwind CSS."
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/nunocoracao/blowfish/"
|
||||
---
|
||||
```
|
||||
|
||||
_Neste exemplo, estamos a atribuir alguns metadados a cada projeto que podemos depois utilizar no nosso template de lista. Não há conteúdo de página, mas nada o impede de o incluir. É o seu próprio template personalizado, afinal!_
|
||||
|
||||
Com os projetos definidos, agora podemos criar um template de lista que apresenta os detalhes de cada projeto.
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Embora este seja um exemplo bastante simples, pode ver que percorre cada uma das páginas nesta secção (ou seja, cada projeto) e depois apresenta ligações HTML para cada projeto juntamente com um ícone. Os metadados no front matter de cada projeto são utilizados para determinar que informações são apresentadas.
|
||||
|
||||
Tenha em mente que precisará de garantir que os estilos e classes relevantes estão disponíveis, o que pode exigir que o CSS do Tailwind seja recompilado. Isto é discutido com mais detalhe na secção [Personalização avançada]({{< ref "advanced-customisation" >}}).
|
||||
|
||||
Ao criar templates personalizados como este, é sempre mais fácil dar uma vista de olhos em como o template predefinido do Blowfish funciona e depois utilizá-lo como guia. Lembre-se, a [documentação do Hugo](https://gohugo.io/templates/introduction/) também é um excelente recurso para saber mais sobre a criação de templates.
|
||||
Reference in New Issue
Block a user