diff --git a/exampleSite/config/_default/languages.de.toml b/exampleSite/config/_default/languages.de.toml new file mode 100644 index 00000000..97e04231 --- /dev/null +++ b/exampleSite/config/_default/languages.de.toml @@ -0,0 +1,22 @@ +languageCode = "de" +languageName = "Deutsch" +weight = 3 +title = "Blowfish" + +[params] + displayName = "Deutsch" + isoCode = "de" + rtl = false + dateFormat = "2. January 2006" + logo = "img/blowfish_logo_transparent.png" + description = "Ein leistungsstarkes, leichtgewichtiges Theme für Hugo." + +[params.author] + name = "Blowfish" + image = "img/blowfish_logo.png" + headline = "Ein leistungsstarkes, leichtgewichtiges Theme für Hugo." + bio = "Ein leistungsstarkes, leichtgewichtiges Theme für Hugo." + links = [ + { x-twitter = "https://twitter.com/burufugu" }, + { github = "https://github.com/nunocoracao/blowfish" }, + ] diff --git a/exampleSite/config/_default/languages.es.toml b/exampleSite/config/_default/languages.es.toml new file mode 100644 index 00000000..04fe2660 --- /dev/null +++ b/exampleSite/config/_default/languages.es.toml @@ -0,0 +1,22 @@ +languageCode = "es" +languageName = "Español" +weight = 6 +title = "Blowfish" + +[params] + displayName = "Español" + isoCode = "es" + rtl = false + dateFormat = "2 de January de 2006" + logo = "img/blowfish_logo_transparent.png" + description = "Un tema potente y ligero para Hugo." + +[params.author] + name = "Blowfish" + image = "img/blowfish_logo.png" + headline = "Un tema potente y ligero para Hugo." + bio = "Un tema potente y ligero para Hugo." + links = [ + { x-twitter = "https://twitter.com/burufugu" }, + { github = "https://github.com/nunocoracao/blowfish" }, + ] diff --git a/exampleSite/config/_default/languages.fr.toml b/exampleSite/config/_default/languages.fr.toml new file mode 100644 index 00000000..efdc8ad4 --- /dev/null +++ b/exampleSite/config/_default/languages.fr.toml @@ -0,0 +1,22 @@ +languageCode = "fr" +languageName = "Français" +weight = 2 +title = "Blowfish" + +[params] + displayName = "Français" + isoCode = "fr" + rtl = false + dateFormat = "2 janvier 2006" + logo = "img/blowfish_logo_transparent.png" + description = "Un thème puissant et léger pour Hugo." + +[params.author] + name = "Blowfish" + image = "img/blowfish_logo.png" + headline = "Un thème puissant et léger pour Hugo." + bio = "Un thème puissant et léger pour Hugo." + links = [ + { x-twitter = "https://twitter.com/burufugu" }, + { github = "https://github.com/nunocoracao/blowfish" }, + ] diff --git a/exampleSite/config/_default/languages.it.toml b/exampleSite/config/_default/languages.it.toml index cad80e90..50812a9c 100644 --- a/exampleSite/config/_default/languages.it.toml +++ b/exampleSite/config/_default/languages.it.toml @@ -1,6 +1,6 @@ languageCode = "it" languageName = "Italiano" -weight = 2 +weight = 4 title = "Blowfish" [params] diff --git a/exampleSite/config/_default/languages.ja.toml b/exampleSite/config/_default/languages.ja.toml index 396625bd..14bbffba 100644 --- a/exampleSite/config/_default/languages.ja.toml +++ b/exampleSite/config/_default/languages.ja.toml @@ -1,6 +1,6 @@ languageCode = "ja" languageName = "日本語" -weight = 3 +weight = 8 title = "Blowfish" [params] diff --git a/exampleSite/config/_default/languages.pt-br.toml b/exampleSite/config/_default/languages.pt-br.toml new file mode 100644 index 00000000..50bd9489 --- /dev/null +++ b/exampleSite/config/_default/languages.pt-br.toml @@ -0,0 +1,22 @@ +languageCode = "pt-br" +languageName = "Português (Brasil)" +weight = 6 +title = "Blowfish" + +[params] + displayName = "Português (Brasil)" + isoCode = "pt-br" + rtl = false + dateFormat = "2 de January de 2006" + logo = "img/blowfish_logo_transparent.png" + description = "Um tema poderoso e leve para Hugo." + +[params.author] + name = "Blowfish" + image = "img/blowfish_logo.png" + headline = "Um tema poderoso e leve para Hugo." + bio = "Um tema poderoso e leve para Hugo." + links = [ + { x-twitter = "https://twitter.com/burufugu" }, + { github = "https://github.com/nunocoracao/blowfish" }, + ] diff --git a/exampleSite/config/_default/languages.pt-pt.toml b/exampleSite/config/_default/languages.pt-pt.toml new file mode 100644 index 00000000..97205cf7 --- /dev/null +++ b/exampleSite/config/_default/languages.pt-pt.toml @@ -0,0 +1,22 @@ +languageCode = "pt-pt" +languageName = "Português (Portugal)" +weight = 5 +title = "Blowfish" + +[params] + displayName = "Português (Portugal)" + isoCode = "pt-pt" + rtl = false + dateFormat = "2 de January de 2006" + logo = "img/blowfish_logo_transparent.png" + description = "Um tema poderoso e leve para Hugo." + +[params.author] + name = "Blowfish" + image = "img/blowfish_logo.png" + headline = "Um tema poderoso e leve para Hugo." + bio = "Um tema poderoso e leve para Hugo." + links = [ + { x-twitter = "https://twitter.com/burufugu" }, + { github = "https://github.com/nunocoracao/blowfish" }, + ] diff --git a/exampleSite/config/_default/languages.zh-cn.toml b/exampleSite/config/_default/languages.zh-cn.toml index f52dc55d..106ad5c9 100644 --- a/exampleSite/config/_default/languages.zh-cn.toml +++ b/exampleSite/config/_default/languages.zh-cn.toml @@ -1,6 +1,6 @@ languageCode = "zh-cn" languageName = "简体中文" -weight = 4 +weight = 9 title = "Blowfish" [params] diff --git a/exampleSite/config/_default/menus.de.toml b/exampleSite/config/_default/menus.de.toml new file mode 100644 index 00000000..cdb4dbc6 --- /dev/null +++ b/exampleSite/config/_default/menus.de.toml @@ -0,0 +1,69 @@ +# -- Hauptmenü -- +# Das Hauptmenü wird in der Kopfzeile oben auf der Seite angezeigt. + +[[main]] + name = "Dokumentation" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Shortcodes" + pageRef = "docs/shortcodes" + weight = 15 + +[[main]] + name = "Beispiele" + weight = 20 + +[[main]] + name = "Vorlagen" + parent = "Beispiele" + pageRef = "samples" + weight = 16 + +[[main]] + name = "Galerie" + parent = "Beispiele" + pageRef = "examples" + weight = 30 + +[[main]] + name = "Rezepte" + parent = "Beispiele" + pageRef = "guides" + weight = 40 + +[[main]] + name = "Benutzer" + pageRef = "users" + weight = 90 + +[[main]] + name = "Merch" + url = "https://www.teepublic.com/user/blowfish-store/t-shirts" + weight = 100 + +[[main]] + identifier = "twitter" + pre = "x-twitter" + url = "https://twitter.com/burufugu" + weight = 200 + +[[main]] + identifier = "github" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 400 + + +# -- Fußzeilenmenü -- + + [[footer]] + name = "Tags" + pageRef = "tags" + weight = 10 + + [[footer]] + name = "Autoren" + pageRef = "authors" + weight = 20 diff --git a/exampleSite/config/_default/menus.es.toml b/exampleSite/config/_default/menus.es.toml new file mode 100644 index 00000000..8ad705e5 --- /dev/null +++ b/exampleSite/config/_default/menus.es.toml @@ -0,0 +1,69 @@ +# -- Menú Principal -- +# El menú principal se muestra en el encabezado en la parte superior de la página. + +[[main]] + name = "Documentación" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Shortcodes" + pageRef = "docs/shortcodes" + weight = 15 + +[[main]] + name = "Ejemplos" + weight = 20 + +[[main]] + name = "Muestras" + parent = "Ejemplos" + pageRef = "samples" + weight = 16 + +[[main]] + name = "Galería" + parent = "Ejemplos" + pageRef = "examples" + weight = 30 + +[[main]] + name = "Recetas" + parent = "Ejemplos" + pageRef = "guides" + weight = 40 + +[[main]] + name = "Usuarios" + pageRef = "users" + weight = 90 + +[[main]] + name = "Merch" + url = "https://www.teepublic.com/user/blowfish-store/t-shirts" + weight = 100 + +[[main]] + identifier = "twitter" + pre = "x-twitter" + url = "https://twitter.com/burufugu" + weight = 200 + +[[main]] + identifier = "github" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 400 + + +# -- Menú de Pie de Página -- + + [[footer]] + name = "Etiquetas" + pageRef = "tags" + weight = 10 + + [[footer]] + name = "Autores" + pageRef = "authors" + weight = 20 diff --git a/exampleSite/config/_default/menus.fr.toml b/exampleSite/config/_default/menus.fr.toml new file mode 100644 index 00000000..1f7b0e39 --- /dev/null +++ b/exampleSite/config/_default/menus.fr.toml @@ -0,0 +1,69 @@ +# -- Menu Principal -- +# Le menu principal est affiché dans l'en-tête en haut de la page. + +[[main]] + name = "Documentation" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Shortcodes" + pageRef = "docs/shortcodes" + weight = 15 + +[[main]] + name = "Exemples" + weight = 20 + +[[main]] + name = "Échantillons" + parent = "Exemples" + pageRef = "samples" + weight = 16 + +[[main]] + name = "Vitrine" + parent = "Exemples" + pageRef = "examples" + weight = 30 + +[[main]] + name = "Recettes" + parent = "Exemples" + pageRef = "guides" + weight = 40 + +[[main]] + name = "Utilisateurs" + pageRef = "users" + weight = 90 + +[[main]] + name = "Merch" + url = "https://www.teepublic.com/user/blowfish-store/t-shirts" + weight = 100 + +[[main]] + identifier = "twitter" + pre = "x-twitter" + url = "https://twitter.com/burufugu" + weight = 200 + +[[main]] + identifier = "github" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 400 + + +# -- Menu Pied de Page -- + + [[footer]] + name = "Tags" + pageRef = "tags" + weight = 10 + + [[footer]] + name = "Auteurs" + pageRef = "authors" + weight = 20 diff --git a/exampleSite/config/_default/menus.pt-br.toml b/exampleSite/config/_default/menus.pt-br.toml new file mode 100644 index 00000000..ba6fc700 --- /dev/null +++ b/exampleSite/config/_default/menus.pt-br.toml @@ -0,0 +1,69 @@ +# -- Menu Principal -- +# O menu principal é exibido no cabeçalho no topo da página. + +[[main]] + name = "Documentação" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Shortcodes" + pageRef = "docs/shortcodes" + weight = 15 + +[[main]] + name = "Exemplos" + weight = 20 + +[[main]] + name = "Amostras" + parent = "Exemplos" + pageRef = "samples" + weight = 16 + +[[main]] + name = "Galeria" + parent = "Exemplos" + pageRef = "examples" + weight = 30 + +[[main]] + name = "Receitas" + parent = "Exemplos" + pageRef = "guides" + weight = 40 + +[[main]] + name = "Usuários" + pageRef = "users" + weight = 90 + +[[main]] + name = "Merch" + url = "https://www.teepublic.com/user/blowfish-store/t-shirts" + weight = 100 + +[[main]] + identifier = "twitter" + pre = "x-twitter" + url = "https://twitter.com/burufugu" + weight = 200 + +[[main]] + identifier = "github" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 400 + + +# -- Menu de Rodapé -- + + [[footer]] + name = "Tags" + pageRef = "tags" + weight = 10 + + [[footer]] + name = "Autores" + pageRef = "authors" + weight = 20 diff --git a/exampleSite/config/_default/menus.pt-pt.toml b/exampleSite/config/_default/menus.pt-pt.toml new file mode 100644 index 00000000..4ca05c2b --- /dev/null +++ b/exampleSite/config/_default/menus.pt-pt.toml @@ -0,0 +1,69 @@ +# -- Menu Principal -- +# O menu principal é apresentado no cabeçalho no topo da página. + +[[main]] + name = "Documentação" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Shortcodes" + pageRef = "docs/shortcodes" + weight = 15 + +[[main]] + name = "Exemplos" + weight = 20 + +[[main]] + name = "Amostras" + parent = "Exemplos" + pageRef = "samples" + weight = 16 + +[[main]] + name = "Galeria" + parent = "Exemplos" + pageRef = "examples" + weight = 30 + +[[main]] + name = "Receitas" + parent = "Exemplos" + pageRef = "guides" + weight = 40 + +[[main]] + name = "Utilizadores" + pageRef = "users" + weight = 90 + +[[main]] + name = "Merch" + url = "https://www.teepublic.com/user/blowfish-store/t-shirts" + weight = 100 + +[[main]] + identifier = "twitter" + pre = "x-twitter" + url = "https://twitter.com/burufugu" + weight = 200 + +[[main]] + identifier = "github" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 400 + + +# -- Menu de Rodapé -- + + [[footer]] + name = "Tags" + pageRef = "tags" + weight = 10 + + [[footer]] + name = "Autores" + pageRef = "authors" + weight = 20 diff --git a/exampleSite/content/_index.de.md b/exampleSite/content/_index.de.md new file mode 100644 index 00000000..4f317df9 --- /dev/null +++ b/exampleSite/content/_index.de.md @@ -0,0 +1,29 @@ +--- +title: "Willkommen bei Blowfish! :tada:" +description: "Diese Seite wurde mit dem Blowfish-Theme für Hugo erstellt." +--- + + +
+ + {{< icon "triangle-exclamation" >}} + + + Dies ist eine Demo des background Layouts. + + +
+ + +```shell +npx blowfish-tools +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools Demo" >}} + + diff --git a/exampleSite/content/_index.es.md b/exampleSite/content/_index.es.md new file mode 100644 index 00000000..8294011c --- /dev/null +++ b/exampleSite/content/_index.es.md @@ -0,0 +1,29 @@ +--- +title: "¡Bienvenido a Blowfish! :tada:" +description: "Esta página fue creada usando el tema Blowfish para Hugo." +--- + + +
+ + {{< icon "triangle-exclamation" >}} + + + Esta es una demostración del layout background. + + +
+ + +```shell +npx blowfish-tools +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Demo de Blowfish-tools" >}} + + diff --git a/exampleSite/content/_index.fr.md b/exampleSite/content/_index.fr.md new file mode 100644 index 00000000..840def8d --- /dev/null +++ b/exampleSite/content/_index.fr.md @@ -0,0 +1,29 @@ +--- +title: "Bienvenue sur Blowfish ! :tada:" +description: "Cette page a été créée avec le thème Blowfish pour Hugo." +--- + + +
+ + {{< icon "triangle-exclamation" >}} + + + Ceci est une démo du layout background. + + +
+ + +```shell +npx blowfish-tools +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Démo de Blowfish-tools" >}} + + diff --git a/exampleSite/content/_index.pt-br.md b/exampleSite/content/_index.pt-br.md new file mode 100644 index 00000000..45539ca5 --- /dev/null +++ b/exampleSite/content/_index.pt-br.md @@ -0,0 +1,29 @@ +--- +title: "Bem-vindo ao Blowfish! :tada:" +description: "Esta página foi criada usando o tema Blowfish para Hugo." +--- + + +
+ + {{< icon "triangle-exclamation" >}} + + + Esta é uma demonstração do layout background. + + +
+ + +```shell +npx blowfish-tools +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Demo do Blowfish-tools" >}} + + diff --git a/exampleSite/content/_index.pt-pt.md b/exampleSite/content/_index.pt-pt.md new file mode 100644 index 00000000..02994c93 --- /dev/null +++ b/exampleSite/content/_index.pt-pt.md @@ -0,0 +1,29 @@ +--- +title: "Bem-vindo ao Blowfish! :tada:" +description: "Esta página foi criada utilizando o tema Blowfish para Hugo." +--- + + +
+ + {{< icon "triangle-exclamation" >}} + + + Esta é uma demonstração do layout background. + + +
+ + +```shell +npx blowfish-tools +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Demo do Blowfish-tools" >}} + + diff --git a/exampleSite/content/authors/nunocoracao/_index.de.md b/exampleSite/content/authors/nunocoracao/_index.de.md new file mode 100644 index 00000000..60db49d5 --- /dev/null +++ b/exampleSite/content/authors/nunocoracao/_index.de.md @@ -0,0 +1,5 @@ +--- +title: "Nuno Coração" +--- + +Nunos fantastische Beispielbiografie. diff --git a/exampleSite/content/authors/nunocoracao/_index.es.md b/exampleSite/content/authors/nunocoracao/_index.es.md new file mode 100644 index 00000000..e1eb17d2 --- /dev/null +++ b/exampleSite/content/authors/nunocoracao/_index.es.md @@ -0,0 +1,5 @@ +--- +title: "Nuno Coração" +--- + +La increíble biografía ficticia de Nuno. diff --git a/exampleSite/content/authors/nunocoracao/_index.fr.md b/exampleSite/content/authors/nunocoracao/_index.fr.md new file mode 100644 index 00000000..b040bb7f --- /dev/null +++ b/exampleSite/content/authors/nunocoracao/_index.fr.md @@ -0,0 +1,5 @@ +--- +title: "Nuno Coração" +--- + +La super bio fictive de Nuno. diff --git a/exampleSite/content/authors/nunocoracao/_index.pt-br.md b/exampleSite/content/authors/nunocoracao/_index.pt-br.md new file mode 100644 index 00000000..e94f1d94 --- /dev/null +++ b/exampleSite/content/authors/nunocoracao/_index.pt-br.md @@ -0,0 +1,5 @@ +--- +title: "Nuno Coração" +--- + +A incrível bio fictícia do Nuno. diff --git a/exampleSite/content/authors/nunocoracao/_index.pt-pt.md b/exampleSite/content/authors/nunocoracao/_index.pt-pt.md new file mode 100644 index 00000000..b58cb784 --- /dev/null +++ b/exampleSite/content/authors/nunocoracao/_index.pt-pt.md @@ -0,0 +1,5 @@ +--- +title: "Nuno Coração" +--- + +A fantástica biografia fictícia do Nuno. diff --git a/exampleSite/content/authors/secondauthor/_index.de.md b/exampleSite/content/authors/secondauthor/_index.de.md new file mode 100644 index 00000000..02aa41ab --- /dev/null +++ b/exampleSite/content/authors/secondauthor/_index.de.md @@ -0,0 +1,5 @@ +--- +title: "Dummy Second Author" +--- + +Die fantastische Beispielbiografie des zweiten Beispielautors. diff --git a/exampleSite/content/authors/secondauthor/_index.es.md b/exampleSite/content/authors/secondauthor/_index.es.md new file mode 100644 index 00000000..0c78fef4 --- /dev/null +++ b/exampleSite/content/authors/secondauthor/_index.es.md @@ -0,0 +1,5 @@ +--- +title: "Dummy Second Author" +--- + +La increíble biografía ficticia del segundo autor ficticio. diff --git a/exampleSite/content/authors/secondauthor/_index.fr.md b/exampleSite/content/authors/secondauthor/_index.fr.md new file mode 100644 index 00000000..e015bd36 --- /dev/null +++ b/exampleSite/content/authors/secondauthor/_index.fr.md @@ -0,0 +1,5 @@ +--- +title: "Dummy Second Author" +--- + +La super bio fictive du deuxième auteur fictif. diff --git a/exampleSite/content/authors/secondauthor/_index.pt-br.md b/exampleSite/content/authors/secondauthor/_index.pt-br.md new file mode 100644 index 00000000..4a4ce5f4 --- /dev/null +++ b/exampleSite/content/authors/secondauthor/_index.pt-br.md @@ -0,0 +1,5 @@ +--- +title: "Dummy Second Author" +--- + +A incrível bio fictícia do segundo autor fictício. diff --git a/exampleSite/content/authors/secondauthor/_index.pt-pt.md b/exampleSite/content/authors/secondauthor/_index.pt-pt.md new file mode 100644 index 00000000..27d4603c --- /dev/null +++ b/exampleSite/content/authors/secondauthor/_index.pt-pt.md @@ -0,0 +1,5 @@ +--- +title: "Dummy Second Author" +--- + +A fantástica biografia fictícia do segundo autor fictício. diff --git a/exampleSite/content/docs/_index.de.md b/exampleSite/content/docs/_index.de.md new file mode 100644 index 00000000..8a8521f0 --- /dev/null +++ b/exampleSite/content/docs/_index.de.md @@ -0,0 +1,17 @@ +--- +title: "Dokumentation" +description: "Erfahren Sie, wie Sie Blowfish und seine Funktionen nutzen können." + +cascade: + showDate: false + showAuthor: false + invertPagination: true +--- + +{{< lead >}} +Einfach, aber leistungsstark. Erfahren Sie, wie Sie Blowfish und seine Funktionen nutzen können. +{{< /lead >}} + +Dieser Abschnitt enthält alles, was Sie über Blowfish wissen müssen. Wenn Sie neu sind, lesen Sie den [Installations]({{< ref "docs/installation" >}})-Leitfaden, um zu beginnen, oder besuchen Sie den Bereich [Beispiele]({{< ref "samples" >}}), um zu sehen, was Blowfish kann. + +--- diff --git a/exampleSite/content/docs/_index.es.md b/exampleSite/content/docs/_index.es.md new file mode 100644 index 00000000..d1523f0d --- /dev/null +++ b/exampleSite/content/docs/_index.es.md @@ -0,0 +1,17 @@ +--- +title: "Documentación" +description: "Aprende a usar Blowfish y sus características." + +cascade: + showDate: false + showAuthor: false + invertPagination: true +--- + +{{< lead >}} +Simple, pero potente. Aprende a usar Blowfish y sus características. +{{< /lead >}} + +Esta sección contiene todo lo que necesitas saber sobre Blowfish. Si eres nuevo, consulta la guía de [Instalación]({{< ref "docs/installation" >}}) para comenzar o visita la sección de [Ejemplos]({{< ref "samples" >}}) para ver lo que Blowfish puede hacer. + +--- diff --git a/exampleSite/content/docs/_index.fr.md b/exampleSite/content/docs/_index.fr.md new file mode 100644 index 00000000..110a8dd0 --- /dev/null +++ b/exampleSite/content/docs/_index.fr.md @@ -0,0 +1,17 @@ +--- +title: "Documentation" +description: "Apprenez à utiliser Blowfish et ses fonctionnalités." + +cascade: + showDate: false + showAuthor: false + invertPagination: true +--- + +{{< lead >}} +Simple, mais puissant. Apprenez à utiliser Blowfish et ses fonctionnalités. +{{< /lead >}} + +Cette section contient tout ce que vous devez savoir sur Blowfish. Si vous êtes nouveau, consultez le guide d'[Installation]({{< ref "docs/installation" >}}) pour commencer ou visitez la section [Exemples]({{< ref "samples" >}}) pour voir ce que Blowfish peut faire. + +--- diff --git a/exampleSite/content/docs/_index.pt-br.md b/exampleSite/content/docs/_index.pt-br.md new file mode 100644 index 00000000..f1cce9dd --- /dev/null +++ b/exampleSite/content/docs/_index.pt-br.md @@ -0,0 +1,17 @@ +--- +title: "Documentação" +description: "Aprenda a usar o Blowfish e seus recursos." + +cascade: + showDate: false + showAuthor: false + invertPagination: true +--- + +{{< lead >}} +Simples, mas poderoso. Aprenda a usar o Blowfish e seus recursos. +{{< /lead >}} + +Esta seção contém tudo o que você precisa saber sobre o Blowfish. Se você é novo, confira o guia de [Instalação]({{< ref "docs/installation" >}}) para começar ou visite a seção de [Exemplos]({{< ref "samples" >}}) para ver o que o Blowfish pode fazer. + +--- diff --git a/exampleSite/content/docs/_index.pt-pt.md b/exampleSite/content/docs/_index.pt-pt.md new file mode 100644 index 00000000..af372647 --- /dev/null +++ b/exampleSite/content/docs/_index.pt-pt.md @@ -0,0 +1,17 @@ +--- +title: "Documentação" +description: "Aprenda a utilizar o Blowfish e as suas funcionalidades." + +cascade: + showDate: false + showAuthor: false + invertPagination: true +--- + +{{< lead >}} +Simples, mas poderoso. Aprenda a utilizar o Blowfish e as suas funcionalidades. +{{< /lead >}} + +Esta secção contém tudo o que precisa de saber sobre o Blowfish. Se é novo, consulte o guia de [Instalação]({{< ref "docs/installation" >}}) para começar ou visite a secção de [Exemplos]({{< ref "samples" >}}) para ver o que o Blowfish pode fazer. + +--- diff --git a/exampleSite/content/docs/advanced-customisation/index.de.md b/exampleSite/content/docs/advanced-customisation/index.de.md new file mode 100644 index 00000000..b0e91294 --- /dev/null +++ b/exampleSite/content/docs/advanced-customisation/index.de.md @@ -0,0 +1,265 @@ +--- +title: "Erweiterte Anpassung" +weight: 13 +draft: false +description: "Erfahren Sie, wie Sie Blowfish manuell erstellen." +slug: "advanced-customisation" +tags: ["erweitert", "css", "dokumentation"] +series: ["Dokumentation"] +series_order: 13 +--- + +Es gibt viele Möglichkeiten, erweiterte Änderungen an Blowfish vorzunehmen. Lesen Sie unten, um mehr darüber zu erfahren, was angepasst werden kann und wie Sie das gewünschte Ergebnis am besten erreichen. + +Wenn Sie weitere Ratschläge benötigen, stellen Sie Ihre Fragen in den [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). + +## Hugo-Projektstruktur + +Bevor wir loslegen, zunächst ein kurzer Hinweis zur [Hugo-Projektstruktur](https://gohugo.io/getting-started/directory-structure/) und bewährten Methoden zur Verwaltung Ihrer Inhalte und Theme-Anpassungen. + +{{< alert >}} +**Zusammenfassung:** Bearbeiten Sie niemals direkt die Theme-Dateien. Nehmen Sie Anpassungen nur in den Unterverzeichnissen Ihres Hugo-Projekts vor, nicht im themes-Verzeichnis selbst. +{{< /alert >}} + +Blowfish wurde entwickelt, um alle Standard-Hugo-Praktiken zu nutzen. Es ist so konzipiert, dass alle Aspekte des Themes angepasst und überschrieben werden können, ohne die Kern-Theme-Dateien zu ändern. Dies ermöglicht ein nahtloses Upgrade-Erlebnis und gibt Ihnen gleichzeitig die volle Kontrolle über das Aussehen und die Handhabung Ihrer Website. + +Um dies zu erreichen, sollten Sie niemals manuell Theme-Dateien direkt anpassen. Ob Sie Hugo-Module verwenden, als Git-Submodul installieren oder das Theme manuell in Ihrem `themes/`-Verzeichnis einbinden, Sie sollten diese Dateien immer intakt lassen. + +Der richtige Weg, Theme-Verhalten anzupassen, ist das Überschreiben von Dateien mithilfe der leistungsfähigen Hugo [Datei-Suchreihenfolge](https://gohugo.io/templates/lookup-order/). Zusammenfassend stellt die Suchreihenfolge sicher, dass alle Dateien, die Sie in Ihr Projektverzeichnis einbinden, automatisch Vorrang vor Theme-Dateien haben. + +Wenn Sie beispielsweise das Hauptartikel-Template in Blowfish überschreiben möchten, können Sie einfach Ihre eigene `layouts/_default/single.html`-Datei erstellen und sie im Root Ihres Projekts platzieren. Diese Datei überschreibt dann die `single.html` aus dem Theme, ohne das Theme selbst zu ändern. Dies funktioniert für alle Theme-Dateien - HTML-Templates, Partials, Shortcodes, Konfigurationsdateien, Daten, Assets, etc. + +Solange Sie diese einfache Praxis befolgen, können Sie das Theme immer aktualisieren (oder verschiedene Theme-Versionen testen), ohne sich Sorgen machen zu müssen, dass Sie Ihre benutzerdefinierten Änderungen verlieren. + +## Bildoptimierungseinstellungen ändern + +Hugo verfügt über verschiedene integrierte Methoden zum Ändern der Größe, Zuschneiden und Optimieren von Bildern. + +Als Beispiel - in `layouts/partials/article-link/card.html` haben Sie folgenden Code: + +```go +{{ with .Resize "600x" }} +
+{{ end }} +``` + +Das Standardverhalten von Hugo hier ist, die Bildgröße auf 600px unter Beibehaltung des Seitenverhältnisses zu ändern. + +Es ist erwähnenswert, dass Standard-Bildkonfigurationen wie der [Ankerpunkt](https://gohugo.io/content-management/image-processing/#anchor) auch in Ihrer [Site-Konfiguration](https://gohugo.io/content-management/image-processing/#processing-options) sowie im Template selbst festgelegt werden können. + +Weitere Informationen finden Sie in den [Hugo-Dokumenten zur Bildverarbeitung](https://gohugo.io/content-management/image-processing/#image-processing-methods). + +## Farbschemata + +Blowfish wird mit einer Reihe von Farbschemata ausgeliefert. Um das grundlegende Farbschema zu ändern, können Sie den Theme-Parameter `colorScheme` festlegen. Lesen Sie den Abschnitt [Erste Schritte]({{< ref "getting-started#colour-schemes" >}}), um mehr über die integrierten Schemata zu erfahren. + +Zusätzlich zu den Standardschemata können Sie auch eigene erstellen und die gesamte Website nach Ihren Wünschen gestalten. Schemata werden erstellt, indem Sie eine `.css`-Datei im Ordner `assets/css/schemes/` platzieren. Sobald die Datei erstellt ist, verweisen Sie einfach in der Theme-Konfiguration mit dem Namen darauf. + +{{< alert "github">}} +**Hinweis:** Die manuelle Generierung dieser Dateien kann schwierig sein. Ich habe ein `nodejs`-Terminal-Tool entwickelt, um dabei zu helfen: [Fugu](https://github.com/nunocoracao/fugu). Im Wesentlichen übergeben Sie die drei Haupt-`hex`-Werte Ihrer Farbpalette und das Programm gibt eine CSS-Datei aus, die direkt in Blowfish importiert werden kann. +{{< /alert >}} + + +Blowfish definiert eine Drei-Farben-Palette, die im gesamten Theme verwendet wird. Die drei Farben sind als `neutral`, `primary` und `secondary` Varianten definiert, jeweils mit zehn Farbstufen. + +Aufgrund der Art und Weise, wie Tailwind CSS 3.0 Farbwerte mit Deckkraft berechnet, müssen die im Schema angegebenen Farben einem [bestimmten Format entsprechen](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo), indem sie die Rot-, Grün- und Blau-Farbwerte angeben. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +Dieses Beispiel definiert eine CSS-Variable für die `primary-500`-Farbe mit einem Rotwert von `139`, Grünwert von `92` und Blauwert von `246`. + +Verwenden Sie eines der vorhandenen Theme-Stylesheets als Vorlage. Sie können Ihre eigenen Farben definieren, aber zur Inspiration schauen Sie sich die offizielle [Tailwind-Farbpaletten-Referenz](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) an. + +## Das Stylesheet überschreiben + +Manchmal müssen Sie einen benutzerdefinierten Stil hinzufügen, um Ihre eigenen HTML-Elemente zu gestalten. Blowfish bietet diese Möglichkeit, indem Sie die Standardstile in Ihrem eigenen CSS-Stylesheet überschreiben können. Erstellen Sie einfach eine `custom.css`-Datei im Ordner `assets/css/` Ihres Projekts. + +Die `custom.css`-Datei wird von Hugo minimiert und automatisch nach allen anderen Theme-Stilen geladen, was bedeutet, dass alles in Ihrer benutzerdefinierten Datei Vorrang vor den Standardeinstellungen hat. + +### Zusätzliche Schriftarten verwenden + +Blowfish ermöglicht es Ihnen, die Schriftart für Ihre Website einfach zu ändern. Nachdem Sie eine `custom.css`-Datei im Ordner `assets/css/` Ihres Projekts erstellt haben, platzieren Sie Ihre Schriftdatei in einem `fonts`-Ordner innerhalb des `static`-Root-Ordners. + +```shell +. +├── assets +│ └── css +│ └── custom.css +... +└─── static + └── fonts + └─── font.ttf + +``` + +Dies macht die Schriftart für die Website verfügbar. Jetzt kann die Schriftart einfach in Ihrer `custom.css` importiert und ersetzt werden, wo immer Sie es für richtig halten. Das folgende Beispiel zeigt, wie das Ersetzen der Schriftart für das gesamte `html` aussehen würde. + +```css +@font-face { + font-family: font; + src: url('/fonts/font.ttf'); +} + +html { + font-family: font; +} +``` + +### Schriftgröße anpassen + +Das Ändern der Schriftgröße Ihrer Website ist ein Beispiel für das Überschreiben des Standard-Stylesheets. Blowfish macht dies einfach, da es im gesamten Theme skalierte Schriftgrößen verwendet, die von der Basis-HTML-Schriftgröße abgeleitet werden. Standardmäßig setzt Tailwind die Standardgröße auf `12pt`, aber sie kann auf jeden beliebigen Wert geändert werden. + +Erstellen Sie eine `custom.css`-Datei gemäß den [obigen Anweisungen]({{< ref "#overriding-the-stylesheet" >}}) und fügen Sie die folgende CSS-Deklaration hinzu: + +```css +/* Standardschriftgröße erhöhen */ +html { + font-size: 13pt; +} +``` + +Allein durch das Ändern dieses einen Wertes werden alle Schriftgrößen auf Ihrer Website an diese neue Größe angepasst. Um also die insgesamt verwendeten Schriftgrößen zu erhöhen, machen Sie den Wert größer als `12pt`. Um die Schriftgrößen zu verringern, machen Sie den Wert kleiner als `12pt`. + +### Syntax-Highlighting-Theme ändern + +Um das Syntax-Highlighting-Theme zu ändern, erstellen Sie `assets/css/custom.css` und fügen Sie Folgendes hinzu: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + font-style: unset; +} +``` + +Dies löscht die Standard-Chroma-Stile. Der nächste Schritt ist, Chroma-Stile in Ihre CSS-Datei mit dem Befehl `hugo gen chromastyles` einzubinden: + +```sh +# Mac/Linux +(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css +(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css + +# Windows PowerShell +# Dieser Befehl kann nicht in CMD ausgeführt werden; er muss in PowerShell ausgeführt werden +@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css" +@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css" +``` + +Alle verfügbaren Stile finden Sie in [Hugos Dokumentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + +## Das Theme-CSS aus dem Quellcode erstellen + +Wenn Sie eine größere Änderung vornehmen möchten, können Sie den Tailwind CSS JIT-Compiler nutzen und das gesamte Theme-CSS von Grund auf neu erstellen. Dies ist nützlich, wenn Sie die Tailwind-Konfiguration anpassen oder zusätzliche Tailwind-Klassen zum Haupt-Stylesheet hinzufügen möchten. + +{{< alert >}} +**Hinweis:** Das manuelle Erstellen des Themes ist für fortgeschrittene Benutzer gedacht. +{{< /alert >}} + +Lassen Sie uns durchgehen, wie das Erstellen des Tailwind CSS funktioniert. + +### Tailwind-Konfiguration + +Um eine CSS-Datei zu generieren, die nur die Tailwind-Klassen enthält, die tatsächlich verwendet werden, muss der JIT-Compiler alle HTML-Templates und Markdown-Inhaltsdateien scannen, um zu überprüfen, welche Stile im Markup vorhanden sind. Der Compiler macht dies, indem er die Datei `tailwind.config.js` betrachtet, die im Root-Verzeichnis des Themes enthalten ist: + +```js +// themes/blowfish/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/blowfish/layouts/**/*.html", + "./themes/blowfish/content/**/*.{html,md}", + ], + + // und mehr... +}; +``` + +Diese Standardkonfiguration enthält diese Inhaltspfade, damit Sie Ihre eigene CSS-Datei einfach generieren können, ohne sie ändern zu müssen, vorausgesetzt Sie folgen einer bestimmten Projektstruktur. Nämlich **müssen Sie Blowfish in Ihrem Projekt als Unterverzeichnis unter `themes/blowfish/` einbinden**. Dies bedeutet, dass Sie das Theme nicht einfach mit Hugo-Modulen installieren können und Sie müssen entweder den Git-Submodule-Weg (empfohlen) oder den manuellen Installationsweg gehen. Die [Installationsdokumentation]({{< ref "installation" >}}) erklärt, wie Sie das Theme mit einer dieser Methoden installieren. + +### Projektstruktur + +Um die Standardkonfiguration zu nutzen, sollte Ihr Projekt etwa so aussehen... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # dies ist die Datei, die wir generieren werden +├── config # Site-Konfiguration +│ └── _default +├── content # Site-Inhalt +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # benutzerdefinierte Layouts für Ihre Site +│ ├── partials +│ │ └── extend-article-link/simple.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── blowfish # Git-Submodul oder manuelle Theme-Installation +``` + +Diese Beispielstruktur fügt einen neuen `projects`-Inhaltstyp mit eigenem benutzerdefinierten Layout zusammen mit einem benutzerdefinierten Shortcode und erweiterten Partial hinzu. Sofern das Projekt dieser Struktur folgt, muss nur die `main.css`-Datei neu kompiliert werden. + +### Abhängigkeiten installieren + +Damit dies funktioniert, müssen Sie in das Verzeichnis `themes/blowfish/` wechseln und die Projektabhängigkeiten installieren. Sie benötigen [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) auf Ihrem lokalen Rechner für diesen Schritt. + +```shell +cd themes/blowfish +npm install +``` + +### Tailwind-Compiler ausführen + +Mit den installierten Abhängigkeiten bleibt nur noch, die [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) zu verwenden, um den JIT-Compiler aufzurufen. Navigieren Sie zurück zum Root Ihres Hugo-Projekts und geben Sie folgenden Befehl ein: + +```shell +cd ../.. +./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit +``` + +Es ist ein etwas unschöner Befehl aufgrund der beteiligten Pfade, aber im Wesentlichen rufen Sie die Tailwind CLI auf und übergeben ihr den Speicherort der Tailwind-Konfigurationsdatei (die wir oben betrachtet haben), wo die `main.css`-Datei des Themes zu finden ist und wohin Sie die kompilierte CSS-Datei platzieren möchten (sie geht in den Ordner `assets/css/compiled/` Ihres Hugo-Projekts). + +Die Konfigurationsdatei scannt automatisch alle Inhalte und Layouts in Ihrem Projekt sowie alle im Theme und erstellt eine neue CSS-Datei, die alle für Ihre Website erforderlichen CSS enthält. Aufgrund der Art, wie Hugo die Dateihierarchie handhabt, überschreibt diese Datei in Ihrem Projekt nun automatisch die, die mit dem Theme geliefert wird. + +Jedes Mal, wenn Sie Änderungen an Ihren Layouts vornehmen und neue Tailwind CSS-Stile benötigen, können Sie einfach den Befehl erneut ausführen und die neue CSS-Datei generieren. Sie können auch `-w` am Ende des Befehls hinzufügen, um den JIT-Compiler im Watch-Modus auszuführen. + +### Ein Build-Skript erstellen + +Um diese ganze Lösung abzurunden, können Sie diesen gesamten Prozess vereinfachen, indem Sie Aliase für diese Befehle hinzufügen, oder tun Sie, was ich tue, und fügen Sie eine `package.json` zum Root Ihres Projekts hinzu, die die notwendigen Skripte enthält... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // und mehr... +} +``` + +Wenn Sie nun am Design Ihrer Site arbeiten möchten, können Sie `npm run dev` aufrufen und der Compiler wird im Watch-Modus ausgeführt. Wenn Sie bereit zur Bereitstellung sind, führen Sie `npm run build` aus und Sie erhalten einen sauberen Tailwind CSS-Build. + +🙋‍♀️ Wenn Sie Hilfe benötigen, können Sie gerne eine Frage in den [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) stellen. diff --git a/exampleSite/content/docs/advanced-customisation/index.es.md b/exampleSite/content/docs/advanced-customisation/index.es.md new file mode 100644 index 00000000..c2f3ed75 --- /dev/null +++ b/exampleSite/content/docs/advanced-customisation/index.es.md @@ -0,0 +1,265 @@ +--- +title: "Personalización avanzada" +weight: 13 +draft: false +description: "Aprende cómo construir Blowfish manualmente." +slug: "advanced-customisation" +tags: ["avanzado", "css", "documentación"] +series: ["Documentación"] +series_order: 13 +--- + +Hay muchas formas de hacer cambios avanzados a Blowfish. Lee a continuación para aprender más sobre qué se puede personalizar y la mejor manera de lograr el resultado deseado. + +Si necesitas más consejos, publica tus preguntas en [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). + +## Estructura del proyecto Hugo + +Antes de empezar, primero una nota rápida sobre la [estructura del proyecto Hugo](https://gohugo.io/getting-started/directory-structure/) y las mejores prácticas para gestionar tu contenido y personalizaciones del tema. + +{{< alert >}} +**En resumen:** Nunca edites directamente los archivos del tema. Solo haz personalizaciones en los subdirectorios de tu proyecto Hugo, no en el directorio themes en sí. +{{< /alert >}} + +Blowfish está construido para aprovechar todas las prácticas estándar de Hugo. Está diseñado para permitir que todos los aspectos del tema se personalicen y anulen sin cambiar ninguno de los archivos del tema principal. Esto permite una experiencia de actualización sin problemas mientras te da control total sobre la apariencia y el comportamiento de tu sitio web. + +Para lograr esto, nunca deberías ajustar manualmente ninguno de los archivos del tema directamente. Ya sea que instales usando módulos Hugo, como un submódulo git o incluyas manualmente el tema en tu directorio `themes/`, siempre debes dejar estos archivos intactos. + +La forma correcta de ajustar cualquier comportamiento del tema es anulando archivos usando el poderoso [orden de búsqueda de archivos](https://gohugo.io/templates/lookup-order/) de Hugo. En resumen, el orden de búsqueda asegura que cualquier archivo que incluyas en el directorio de tu proyecto tendrá automáticamente prioridad sobre cualquier archivo del tema. + +Por ejemplo, si quisieras anular el template principal de artículo en Blowfish, simplemente puedes crear tu propio archivo `layouts/_default/single.html` y colocarlo en la raíz de tu proyecto. Este archivo luego anulará el `single.html` del tema sin cambiar nunca el tema en sí. Esto funciona para cualquier archivo del tema - templates HTML, partials, shortcodes, archivos de configuración, datos, assets, etc. + +Mientras sigas esta práctica simple, siempre podrás actualizar el tema (o probar diferentes versiones del tema) sin preocuparte de perder ninguna de tus modificaciones personalizadas. + +## Cambiar configuraciones de optimización de imagen + +Hugo tiene varios métodos incorporados para redimensionar, recortar y optimizar imágenes. + +Como ejemplo - en `layouts/partials/article-link/card.html`, tienes el siguiente código: + +```go +{{ with .Resize "600x" }} +
+{{ end }} +``` + +El comportamiento predeterminado de Hugo aquí es redimensionar la imagen a 600px manteniendo la proporción. + +Vale la pena notar que las configuraciones de imagen predeterminadas como el [punto de anclaje](https://gohugo.io/content-management/image-processing/#anchor) también se pueden establecer en tu [configuración del sitio](https://gohugo.io/content-management/image-processing/#processing-options) así como en el template mismo. + +Consulta los [docs de Hugo sobre procesamiento de imágenes](https://gohugo.io/content-management/image-processing/#image-processing-methods) para más información. + +## Esquemas de color + +Blowfish viene con varios esquemas de color listos para usar. Para cambiar el esquema de color básico, puedes establecer el parámetro del tema `colorScheme`. Consulta la sección [Primeros pasos]({{< ref "getting-started#colour-schemes" >}}) para aprender más sobre los esquemas incorporados. + +Además de los esquemas predeterminados, también puedes crear los tuyos propios y re-estilizar todo el sitio web a tu gusto. Los esquemas se crean colocando un archivo `.css` en la carpeta `assets/css/schemes/`. Una vez creado el archivo, simplemente refiérete a él por su nombre en la configuración del tema. + +{{< alert "github">}} +**Nota:** generar estos archivos manualmente puede ser difícil, he construido una herramienta de terminal `nodejs` para ayudar con eso, [Fugu](https://github.com/nunocoracao/fugu). En resumen, pasas los tres valores `hex` principales de tu paleta de colores y el programa producirá un archivo css que puede ser importado directamente en Blowfish. +{{< /alert >}} + + +Blowfish define una paleta de tres colores que se usa en todo el tema. Los tres colores se definen como variantes `neutral`, `primary` y `secondary`, cada una conteniendo diez tonos de color. + +Debido a la forma en que Tailwind CSS 3.0 calcula los valores de color con opacidad, los colores especificados en el esquema necesitan [conformarse a un formato particular](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) proporcionando los valores de color rojo, verde y azul. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +Este ejemplo define una variable CSS para el color `primary-500` con un valor rojo de `139`, valor verde de `92` y valor azul de `246`. + +Usa una de las hojas de estilo existentes del tema como plantilla. Eres libre de definir tus propios colores, pero para inspiración, consulta la [referencia de paleta de colores de Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) oficial. + +## Anular la hoja de estilos + +A veces necesitas añadir un estilo personalizado para estilizar tus propios elementos HTML. Blowfish provee para este escenario permitiéndote anular los estilos predeterminados en tu propia hoja de estilos CSS. Simplemente crea un archivo `custom.css` en la carpeta `assets/css/` de tu proyecto. + +El archivo `custom.css` será minificado por Hugo y cargado automáticamente después de todos los otros estilos del tema lo que significa que cualquier cosa en tu archivo personalizado tendrá prioridad sobre los valores predeterminados. + +### Usar fuentes adicionales + +Blowfish te permite cambiar fácilmente la fuente de tu sitio. Después de crear un archivo `custom.css` en la carpeta `assets/css/` de tu proyecto, coloca tu archivo de fuente dentro de una carpeta `fonts` en la carpeta raíz `static`. + +```shell +. +├── assets +│ └── css +│ └── custom.css +... +└─── static + └── fonts + └─── font.ttf + +``` + +Esto hace que la fuente esté disponible para el sitio web. Ahora, la fuente simplemente puede ser importada en tu `custom.css` y reemplazada donde lo veas conveniente. El ejemplo de abajo muestra cómo se vería reemplazar la fuente para todo el `html`. + +```css +@font-face { + font-family: font; + src: url('/fonts/font.ttf'); +} + +html { + font-family: font; +} +``` + +### Ajustar el tamaño de fuente + +Cambiar el tamaño de fuente de tu sitio web es un ejemplo de anular la hoja de estilos predeterminada. Blowfish hace esto simple ya que usa tamaños de fuente escalados en todo el tema que se derivan del tamaño de fuente HTML base. Por defecto, Tailwind establece el tamaño predeterminado en `12pt`, pero puede cambiarse a cualquier valor que prefieras. + +Crea un archivo `custom.css` usando las [instrucciones de arriba]({{< ref "#overriding-the-stylesheet" >}}) y añade la siguiente declaración CSS: + +```css +/* Aumentar el tamaño de fuente predeterminado */ +html { + font-size: 13pt; +} +``` + +Simplemente cambiando este único valor, todos los tamaños de fuente en tu sitio web se ajustarán para coincidir con este nuevo tamaño. Por lo tanto, para aumentar los tamaños de fuente generales usados, haz el valor mayor que `12pt`. De manera similar, para disminuir los tamaños de fuente, haz el valor menor que `12pt`. + +### Cambiar el tema de resaltado de sintaxis + +Para cambiar el tema de resaltado de sintaxis, crea `assets/css/custom.css` y añade lo siguiente: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + font-style: unset; +} +``` + +Esto limpia los estilos predeterminados de Chroma. El siguiente paso es incorporar estilos de Chroma en tu archivo CSS usando el comando `hugo gen chromastyles`: + +```sh +# Mac/Linux +(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css +(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css + +# Windows PowerShell +# Este comando no puede ejecutarse en CMD; debe ejecutarse en PowerShell +@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css" +@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css" +``` + +Consulta todos los estilos disponibles en la [documentación de Hugo](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + +## Construir el CSS del tema desde la fuente + +Si quisieras hacer un cambio mayor, puedes aprovechar el compilador JIT de Tailwind CSS y reconstruir todo el CSS del tema desde cero. Esto es útil si quieres ajustar la configuración de Tailwind o añadir clases extra de Tailwind a la hoja de estilos principal. + +{{< alert >}} +**Nota:** Construir el tema manualmente está pensado para usuarios avanzados. +{{< /alert >}} + +Repasemos cómo funciona la construcción del Tailwind CSS. + +### Configuración de Tailwind + +Para generar un archivo CSS que solo contenga las clases de Tailwind que realmente se están usando, el compilador JIT necesita escanear todos los templates HTML y archivos de contenido Markdown para verificar qué estilos están presentes en el markup. El compilador hace esto mirando el archivo `tailwind.config.js` que está incluido en la raíz del directorio del tema: + +```js +// themes/blowfish/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/blowfish/layouts/**/*.html", + "./themes/blowfish/content/**/*.{html,md}", + ], + + // y más... +}; +``` + +Esta configuración predeterminada ha sido incluida con estas rutas de contenido para que puedas generar fácilmente tu propio archivo CSS sin necesidad de modificarla, siempre que sigas una estructura de proyecto particular. Es decir, **tienes que incluir Blowfish en tu proyecto como un subdirectorio en `themes/blowfish/`**. Esto significa que no puedes usar fácilmente los módulos Hugo para instalar el tema y debes optar por la instalación por submódulo git (recomendado) o la instalación manual. Los [docs de instalación]({{< ref "installation" >}}) explican cómo instalar el tema usando cualquiera de estos métodos. + +### Estructura del proyecto + +Para aprovechar la configuración predeterminada, tu proyecto debería verse algo así... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # este es el archivo que generaremos +├── config # config del sitio +│ └── _default +├── content # contenido del sitio +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # layouts personalizados para tu sitio +│ ├── partials +│ │ └── extend-article-link/simple.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── blowfish # submódulo git o instalación manual del tema +``` + +Esta estructura de ejemplo añade un nuevo tipo de contenido `projects` con su propio layout personalizado junto con un shortcode personalizado y partial extendido. Siempre que el proyecto siga esta estructura, todo lo que se requiere es recompilar el archivo `main.css`. + +### Instalar dependencias + +Para que esto funcione necesitarás cambiar al directorio `themes/blowfish/` e instalar las dependencias del proyecto. Necesitarás [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) en tu máquina local para este paso. + +```shell +cd themes/blowfish +npm install +``` + +### Ejecutar el compilador de Tailwind + +Con las dependencias instaladas, todo lo que queda es usar [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) para invocar el compilador JIT. Navega de vuelta a la raíz de tu proyecto Hugo y ejecuta el siguiente comando: + +```shell +cd ../.. +./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit +``` + +Es un comando un poco feo debido a las rutas involucradas pero esencialmente estás llamando a Tailwind CLI y pasándole la ubicación del archivo de config de Tailwind (el que vimos arriba), dónde encontrar el archivo `main.css` del tema y luego dónde quieres que se coloque el archivo CSS compilado (va a la carpeta `assets/css/compiled/` de tu proyecto Hugo). + +El archivo de config escaneará automáticamente todo el contenido y layouts en tu proyecto así como todos los del tema y construirá un nuevo archivo CSS que contiene todo el CSS requerido para tu sitio web. Debido a la forma en que Hugo maneja la jerarquía de archivos, este archivo en tu proyecto ahora anulará automáticamente el que viene con el tema. + +Cada vez que hagas un cambio en tus layouts y necesites nuevos estilos de Tailwind CSS, simplemente puedes volver a ejecutar el comando y generar el nuevo archivo CSS. También puedes añadir `-w` al final del comando para ejecutar el compilador JIT en modo watch. + +### Crear un script de build + +Para completar completamente esta solución, puedes simplificar todo este proceso añadiendo alias para estos comandos, o hacer lo que yo hago y añadir un `package.json` a la raíz de tu proyecto que contenga los scripts necesarios... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // y más... +} +``` + +Ahora cuando quieras trabajar en el diseño de tu sitio, puedes invocar `npm run dev` y el compilador se ejecutará en modo watch. Cuando estés listo para desplegar, ejecuta `npm run build` y tendrás un build limpio de Tailwind CSS. + +🙋‍♀️ Si necesitas ayuda, siéntete libre de hacer una pregunta en [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). diff --git a/exampleSite/content/docs/advanced-customisation/index.fr.md b/exampleSite/content/docs/advanced-customisation/index.fr.md new file mode 100644 index 00000000..d56fcd7e --- /dev/null +++ b/exampleSite/content/docs/advanced-customisation/index.fr.md @@ -0,0 +1,265 @@ +--- +title: "Personnalisation avancée" +weight: 13 +draft: false +description: "Apprenez à construire Blowfish manuellement." +slug: "advanced-customisation" +tags: ["avancé", "css", "documentation"] +series: ["Documentation"] +series_order: 13 +--- + +Il existe de nombreuses façons d'apporter des modifications avancées à Blowfish. Lisez ci-dessous pour en savoir plus sur ce qui peut être personnalisé et la meilleure façon d'atteindre le résultat souhaité. + +Si vous avez besoin de conseils supplémentaires, posez vos questions sur [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). + +## Structure du projet Hugo + +Avant de se lancer, d'abord un petit mot sur la [structure du projet Hugo](https://gohugo.io/getting-started/directory-structure/) et les meilleures pratiques pour gérer votre contenu et les personnalisations de thème. + +{{< alert >}} +**En résumé :** Ne modifiez jamais directement les fichiers du thème. Faites uniquement des personnalisations dans les sous-répertoires de votre projet Hugo, pas dans le répertoire themes lui-même. +{{< /alert >}} + +Blowfish est construit pour tirer parti de toutes les pratiques standard de Hugo. Il est conçu pour permettre la personnalisation et le remplacement de tous les aspects du thème sans modifier aucun des fichiers du thème de base. Cela permet une expérience de mise à niveau transparente tout en vous donnant un contrôle total sur l'apparence et le comportement de votre site web. + +Pour y parvenir, vous ne devriez jamais ajuster manuellement les fichiers du thème directement. Que vous installiez en utilisant les modules Hugo, comme un sous-module git ou que vous incluiez manuellement le thème dans votre répertoire `themes/`, vous devriez toujours laisser ces fichiers intacts. + +La bonne façon d'ajuster le comportement du thème est de remplacer les fichiers en utilisant le puissant [ordre de recherche de fichiers](https://gohugo.io/templates/lookup-order/) de Hugo. En résumé, l'ordre de recherche garantit que tous les fichiers que vous incluez dans votre répertoire de projet auront automatiquement priorité sur les fichiers du thème. + +Par exemple, si vous vouliez remplacer le template d'article principal dans Blowfish, vous pouvez simplement créer votre propre fichier `layouts/_default/single.html` et le placer à la racine de votre projet. Ce fichier remplacera alors le `single.html` du thème sans jamais modifier le thème lui-même. Cela fonctionne pour tous les fichiers du thème - templates HTML, partials, shortcodes, fichiers de configuration, données, assets, etc. + +Tant que vous suivez cette pratique simple, vous pourrez toujours mettre à jour le thème (ou tester différentes versions du thème) sans vous soucier de perdre vos modifications personnalisées. + +## Modifier les paramètres d'optimisation d'image + +Hugo dispose de diverses méthodes intégrées pour redimensionner, recadrer et optimiser les images. + +À titre d'exemple - dans `layouts/partials/article-link/card.html`, vous avez le code suivant : + +```go +{{ with .Resize "600x" }} +
+{{ end }} +``` + +Le comportement par défaut de Hugo ici est de redimensionner l'image à 600px en conservant le ratio. + +Il est à noter que les configurations d'image par défaut telles que le [point d'ancrage](https://gohugo.io/content-management/image-processing/#anchor) peuvent également être définies dans votre [configuration de site](https://gohugo.io/content-management/image-processing/#processing-options) ainsi que dans le template lui-même. + +Voir les [docs Hugo sur le traitement d'image](https://gohugo.io/content-management/image-processing/#image-processing-methods) pour plus d'infos. + +## Schémas de couleurs + +Blowfish est livré avec plusieurs schémas de couleurs prêts à l'emploi. Pour changer le schéma de couleurs de base, vous pouvez définir le paramètre de thème `colorScheme`. Référez-vous à la section [Premiers pas]({{< ref "getting-started#colour-schemes" >}}) pour en savoir plus sur les schémas intégrés. + +En plus des schémas par défaut, vous pouvez également créer les vôtres et restyler l'ensemble du site web selon vos goûts. Les schémas sont créés en plaçant un fichier `.css` dans le dossier `assets/css/schemes/`. Une fois le fichier créé, référencez-le simplement par son nom dans la configuration du thème. + +{{< alert "github">}} +**Note :** générer ces fichiers manuellement peut être difficile, j'ai créé un outil terminal `nodejs` pour aider avec cela, [Fugu](https://github.com/nunocoracao/fugu). En bref, vous passez les trois principales valeurs `hex` de votre palette de couleurs et le programme produira un fichier css qui peut être importé directement dans Blowfish. +{{< /alert >}} + + +Blowfish définit une palette de trois couleurs qui est utilisée tout au long du thème. Les trois couleurs sont définies comme variantes `neutral`, `primary` et `secondary`, chacune contenant dix nuances de couleur. + +En raison de la façon dont Tailwind CSS 3.0 calcule les valeurs de couleur avec l'opacité, les couleurs spécifiées dans le schéma doivent [se conformer à un format particulier](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) en fournissant les valeurs de couleur rouge, vert et bleu. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +Cet exemple définit une variable CSS pour la couleur `primary-500` avec une valeur rouge de `139`, une valeur verte de `92` et une valeur bleue de `246`. + +Utilisez l'une des feuilles de style du thème existantes comme modèle. Vous êtes libre de définir vos propres couleurs, mais pour l'inspiration, consultez la [référence de palette de couleurs Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) officielle. + +## Remplacer la feuille de style + +Parfois vous devez ajouter un style personnalisé pour styliser vos propres éléments HTML. Blowfish prévoit ce scénario en vous permettant de remplacer les styles par défaut dans votre propre feuille de style CSS. Créez simplement un fichier `custom.css` dans le dossier `assets/css/` de votre projet. + +Le fichier `custom.css` sera minifié par Hugo et chargé automatiquement après tous les autres styles du thème, ce qui signifie que tout dans votre fichier personnalisé aura priorité sur les valeurs par défaut. + +### Utiliser des polices supplémentaires + +Blowfish vous permet de changer facilement la police de votre site. Après avoir créé un fichier `custom.css` dans le dossier `assets/css/` de votre projet, placez votre fichier de police dans un dossier `fonts` dans le dossier racine `static`. + +```shell +. +├── assets +│ └── css +│ └── custom.css +... +└─── static + └── fonts + └─── font.ttf + +``` + +Cela rend la police disponible pour le site web. Maintenant, la police peut simplement être importée dans votre `custom.css` et remplacée où vous le jugez bon. L'exemple ci-dessous montre à quoi ressemblerait le remplacement de la police pour tout le `html`. + +```css +@font-face { + font-family: font; + src: url('/fonts/font.ttf'); +} + +html { + font-family: font; +} +``` + +### Ajuster la taille de police + +Changer la taille de police de votre site web est un exemple de remplacement de la feuille de style par défaut. Blowfish rend cela simple car il utilise des tailles de police mises à l'échelle tout au long du thème qui sont dérivées de la taille de police HTML de base. Par défaut, Tailwind définit la taille par défaut à `12pt`, mais elle peut être changée selon votre préférence. + +Créez un fichier `custom.css` en utilisant les [instructions ci-dessus]({{< ref "#overriding-the-stylesheet" >}}) et ajoutez la déclaration CSS suivante : + +```css +/* Augmenter la taille de police par défaut */ +html { + font-size: 13pt; +} +``` + +Simplement en changeant cette seule valeur, toutes les tailles de police sur votre site web seront ajustées pour correspondre à cette nouvelle taille. Par conséquent, pour augmenter les tailles de police globales utilisées, faites la valeur plus grande que `12pt`. De même, pour diminuer les tailles de police, faites la valeur plus petite que `12pt`. + +### Changer le thème de coloration syntaxique + +Pour changer le thème de coloration syntaxique, créez `assets/css/custom.css` et ajoutez ce qui suit : + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + font-style: unset; +} +``` + +Cela efface les styles Chroma par défaut. L'étape suivante est d'incorporer les styles Chroma dans votre fichier CSS en utilisant la commande `hugo gen chromastyles` : + +```sh +# Mac/Linux +(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css +(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css + +# Windows PowerShell +# Cette commande ne peut pas s'exécuter dans CMD ; elle doit s'exécuter dans PowerShell +@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css" +@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css" +``` + +Voir tous les styles disponibles dans la [documentation de Hugo](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + +## Construire le CSS du thème depuis la source + +Si vous souhaitez faire une modification majeure, vous pouvez tirer parti du compilateur JIT de Tailwind CSS et reconstruire tout le CSS du thème à partir de zéro. C'est utile si vous voulez ajuster la configuration Tailwind ou ajouter des classes Tailwind supplémentaires à la feuille de style principale. + +{{< alert >}} +**Note :** Construire le thème manuellement est destiné aux utilisateurs avancés. +{{< /alert >}} + +Voyons comment fonctionne la construction du Tailwind CSS. + +### Configuration Tailwind + +Pour générer un fichier CSS qui contient uniquement les classes Tailwind qui sont réellement utilisées, le compilateur JIT doit scanner tous les templates HTML et fichiers de contenu Markdown pour vérifier quels styles sont présents dans le markup. Le compilateur fait cela en regardant le fichier `tailwind.config.js` qui est inclus à la racine du répertoire du thème : + +```js +// themes/blowfish/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/blowfish/layouts/**/*.html", + "./themes/blowfish/content/**/*.{html,md}", + ], + + // et plus... +}; +``` + +Cette configuration par défaut a été incluse avec ces chemins de contenu afin que vous puissiez facilement générer votre propre fichier CSS sans avoir besoin de la modifier, à condition de suivre une structure de projet particulière. À savoir, **vous devez inclure Blowfish dans votre projet comme un sous-répertoire à `themes/blowfish/`**. Cela signifie que vous ne pouvez pas facilement utiliser les modules Hugo pour installer le thème et vous devez opter pour l'installation par sous-module git (recommandé) ou l'installation manuelle. Les [docs d'installation]({{< ref "installation" >}}) expliquent comment installer le thème en utilisant l'une de ces méthodes. + +### Structure du projet + +Pour tirer parti de la configuration par défaut, votre projet devrait ressembler à quelque chose comme ceci... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # c'est le fichier que nous allons générer +├── config # config du site +│ └── _default +├── content # contenu du site +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # layouts personnalisés pour votre site +│ ├── partials +│ │ └── extend-article-link/simple.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── blowfish # sous-module git ou installation manuelle du thème +``` + +Cette structure d'exemple ajoute un nouveau type de contenu `projects` avec son propre layout personnalisé ainsi qu'un shortcode personnalisé et un partial étendu. Pourvu que le projet suive cette structure, tout ce qui est requis est de recompiler le fichier `main.css`. + +### Installer les dépendances + +Pour que cela fonctionne, vous devrez vous déplacer dans le répertoire `themes/blowfish/` et installer les dépendances du projet. Vous aurez besoin de [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) sur votre machine locale pour cette étape. + +```shell +cd themes/blowfish +npm install +``` + +### Exécuter le compilateur Tailwind + +Avec les dépendances installées, il ne reste plus qu'à utiliser [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) pour invoquer le compilateur JIT. Retournez à la racine de votre projet Hugo et lancez la commande suivante : + +```shell +cd ../.. +./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit +``` + +C'est une commande un peu laide à cause des chemins impliqués mais essentiellement vous appelez Tailwind CLI et lui passez l'emplacement du fichier de config Tailwind (celui que nous avons regardé ci-dessus), où trouver le fichier `main.css` du thème et ensuite où vous voulez que le fichier CSS compilé soit placé (il va dans le dossier `assets/css/compiled/` de votre projet Hugo). + +Le fichier de config scannera automatiquement tout le contenu et les layouts de votre projet ainsi que tous ceux du thème et construira un nouveau fichier CSS qui contient tout le CSS requis pour votre site web. En raison de la façon dont Hugo gère la hiérarchie des fichiers, ce fichier dans votre projet remplacera maintenant automatiquement celui qui vient avec le thème. + +Chaque fois que vous faites un changement dans vos layouts et avez besoin de nouveaux styles Tailwind CSS, vous pouvez simplement relancer la commande et générer le nouveau fichier CSS. Vous pouvez aussi ajouter `-w` à la fin de la commande pour exécuter le compilateur JIT en mode watch. + +### Créer un script de build + +Pour compléter entièrement cette solution, vous pouvez simplifier tout ce processus en ajoutant des alias pour ces commandes, ou faire ce que je fais et ajouter un `package.json` à la racine de votre projet qui contient les scripts nécessaires... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // et plus... +} +``` + +Maintenant quand vous voulez travailler sur le design de votre site, vous pouvez invoquer `npm run dev` et le compilateur s'exécutera en mode watch. Quand vous êtes prêt à déployer, lancez `npm run build` et vous aurez un build Tailwind CSS propre. + +🙋‍♀️ Si vous avez besoin d'aide, n'hésitez pas à poser une question sur [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). diff --git a/exampleSite/content/docs/advanced-customisation/index.pt-br.md b/exampleSite/content/docs/advanced-customisation/index.pt-br.md new file mode 100644 index 00000000..b37e1378 --- /dev/null +++ b/exampleSite/content/docs/advanced-customisation/index.pt-br.md @@ -0,0 +1,265 @@ +--- +title: "Personalização avançada" +weight: 13 +draft: false +description: "Aprenda como construir o Blowfish manualmente." +slug: "advanced-customisation" +tags: ["avançado", "css", "documentação"] +series: ["Documentação"] +series_order: 13 +--- + +Existem muitas maneiras de fazer alterações avançadas no Blowfish. Leia abaixo para saber mais sobre o que pode ser personalizado e a melhor forma de alcançar o resultado desejado. + +Se precisar de mais orientação, poste suas perguntas nas [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). + +## Estrutura do projeto Hugo + +Antes de começar, primeiro uma nota rápida sobre a [estrutura do projeto Hugo](https://gohugo.io/getting-started/directory-structure/) e as melhores práticas para gerenciar seu conteúdo e personalizações do tema. + +{{< alert >}} +**Em resumo:** Nunca edite diretamente os arquivos do tema. Apenas faça personalizações nos subdiretórios do seu projeto Hugo, não no diretório themes em si. +{{< /alert >}} + +O Blowfish foi construído para aproveitar todas as práticas padrão do Hugo. Ele é projetado para permitir que todos os aspectos do tema sejam personalizados e substituídos sem alterar nenhum dos arquivos principais do tema. Isso permite uma experiência de atualização perfeita enquanto oferece controle total sobre a aparência e o funcionamento do seu site. + +Para conseguir isso, você nunca deve ajustar manualmente nenhum dos arquivos do tema diretamente. Seja instalando usando módulos Hugo, como um submódulo git ou incluindo manualmente o tema no seu diretório `themes/`, você deve sempre deixar esses arquivos intactos. + +A maneira correta de ajustar qualquer comportamento do tema é substituindo arquivos usando a poderosa [ordem de busca de arquivos](https://gohugo.io/templates/lookup-order/) do Hugo. Em resumo, a ordem de busca garante que quaisquer arquivos que você incluir no diretório do seu projeto terão automaticamente precedência sobre quaisquer arquivos do tema. + +Por exemplo, se você quisesse substituir o template principal de artigo no Blowfish, você pode simplesmente criar seu próprio arquivo `layouts/_default/single.html` e colocá-lo na raiz do seu projeto. Este arquivo então substituirá o `single.html` do tema sem nunca alterar o tema em si. Isso funciona para qualquer arquivo do tema - templates HTML, partials, shortcodes, arquivos de configuração, dados, assets, etc. + +Enquanto você seguir esta prática simples, você sempre poderá atualizar o tema (ou testar diferentes versões do tema) sem se preocupar em perder nenhuma de suas alterações personalizadas. + +## Alterar configurações de otimização de imagem + +Hugo tem vários métodos integrados para redimensionar, cortar e otimizar imagens. + +Como exemplo - em `layouts/partials/article-link/card.html`, você tem o seguinte código: + +```go +{{ with .Resize "600x" }} +
+{{ end }} +``` + +O comportamento padrão do Hugo aqui é redimensionar a imagem para 600px mantendo a proporção. + +Vale notar que as configurações de imagem padrão como o [ponto de ancoragem](https://gohugo.io/content-management/image-processing/#anchor) também podem ser definidas na sua [configuração do site](https://gohugo.io/content-management/image-processing/#processing-options) assim como no próprio template. + +Veja os [docs do Hugo sobre processamento de imagens](https://gohugo.io/content-management/image-processing/#image-processing-methods) para mais informações. + +## Esquemas de cores + +O Blowfish vem com vários esquemas de cores prontos para usar. Para alterar o esquema de cores básico, você pode definir o parâmetro do tema `colorScheme`. Consulte a seção [Primeiros passos]({{< ref "getting-started#colour-schemes" >}}) para saber mais sobre os esquemas integrados. + +Além dos esquemas padrão, você também pode criar os seus próprios e re-estilizar todo o site ao seu gosto. Os esquemas são criados colocando um arquivo `.css` na pasta `assets/css/schemes/`. Uma vez criado o arquivo, simplesmente referencie-o pelo nome na configuração do tema. + +{{< alert "github">}} +**Nota:** gerar esses arquivos manualmente pode ser difícil, eu construí uma ferramenta de terminal `nodejs` para ajudar com isso, [Fugu](https://github.com/nunocoracao/fugu). Em resumo, você passa os três valores `hex` principais da sua paleta de cores e o programa produzirá um arquivo css que pode ser importado diretamente no Blowfish. +{{< /alert >}} + + +O Blowfish define uma paleta de três cores que é usada em todo o tema. As três cores são definidas como variantes `neutral`, `primary` e `secondary`, cada uma contendo dez tons de cor. + +Devido à forma como o Tailwind CSS 3.0 calcula os valores de cor com opacidade, as cores especificadas no esquema precisam [conformar-se a um formato particular](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) fornecendo os valores de cor vermelho, verde e azul. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +Este exemplo define uma variável CSS para a cor `primary-500` com um valor vermelho de `139`, valor verde de `92` e valor azul de `246`. + +Use uma das folhas de estilo do tema existentes como modelo. Você é livre para definir suas próprias cores, mas para inspiração, confira a [referência da paleta de cores do Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) oficial. + +## Substituir a folha de estilos + +Às vezes você precisa adicionar um estilo personalizado para estilizar seus próprios elementos HTML. O Blowfish prevê este cenário permitindo que você substitua os estilos padrão na sua própria folha de estilos CSS. Simplesmente crie um arquivo `custom.css` na pasta `assets/css/` do seu projeto. + +O arquivo `custom.css` será minificado pelo Hugo e carregado automaticamente após todos os outros estilos do tema, o que significa que qualquer coisa no seu arquivo personalizado terá precedência sobre os padrões. + +### Usar fontes adicionais + +O Blowfish permite que você altere facilmente a fonte do seu site. Após criar um arquivo `custom.css` na pasta `assets/css/` do seu projeto, coloque seu arquivo de fonte dentro de uma pasta `fonts` na pasta raiz `static`. + +```shell +. +├── assets +│ └── css +│ └── custom.css +... +└─── static + └── fonts + └─── font.ttf + +``` + +Isso torna a fonte disponível para o site. Agora, a fonte pode simplesmente ser importada no seu `custom.css` e substituída onde você achar melhor. O exemplo abaixo mostra como seria substituir a fonte para todo o `html`. + +```css +@font-face { + font-family: font; + src: url('/fonts/font.ttf'); +} + +html { + font-family: font; +} +``` + +### Ajustar o tamanho da fonte + +Alterar o tamanho da fonte do seu site é um exemplo de substituição da folha de estilos padrão. O Blowfish torna isso simples pois usa tamanhos de fonte escalados em todo o tema que são derivados do tamanho da fonte HTML base. Por padrão, o Tailwind define o tamanho padrão como `12pt`, mas pode ser alterado para qualquer valor que você preferir. + +Crie um arquivo `custom.css` usando as [instruções acima]({{< ref "#overriding-the-stylesheet" >}}) e adicione a seguinte declaração CSS: + +```css +/* Aumentar o tamanho de fonte padrão */ +html { + font-size: 13pt; +} +``` + +Simplesmente alterando este único valor, todos os tamanhos de fonte no seu site serão ajustados para corresponder a este novo tamanho. Portanto, para aumentar os tamanhos de fonte gerais usados, faça o valor maior que `12pt`. Da mesma forma, para diminuir os tamanhos de fonte, faça o valor menor que `12pt`. + +### Alterar o tema de destaque de sintaxe + +Para alterar o tema de destaque de sintaxe, crie `assets/css/custom.css` e adicione o seguinte: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + font-style: unset; +} +``` + +Isso limpa os estilos padrão do Chroma. O próximo passo é incorporar os estilos do Chroma no seu arquivo CSS usando o comando `hugo gen chromastyles`: + +```sh +# Mac/Linux +(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css +(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css + +# Windows PowerShell +# Este comando não pode ser executado no CMD; deve ser executado no PowerShell +@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css" +@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css" +``` + +Veja todos os estilos disponíveis na [documentação do Hugo](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + +## Construir o CSS do tema a partir da fonte + +Se você quiser fazer uma alteração maior, pode aproveitar o compilador JIT do Tailwind CSS e reconstruir todo o CSS do tema do zero. Isso é útil se você quiser ajustar a configuração do Tailwind ou adicionar classes extras do Tailwind à folha de estilos principal. + +{{< alert >}} +**Nota:** Construir o tema manualmente é destinado a usuários avançados. +{{< /alert >}} + +Vamos ver como funciona a construção do Tailwind CSS. + +### Configuração do Tailwind + +Para gerar um arquivo CSS que contenha apenas as classes do Tailwind que estão realmente sendo usadas, o compilador JIT precisa escanear todos os templates HTML e arquivos de conteúdo Markdown para verificar quais estilos estão presentes no markup. O compilador faz isso olhando o arquivo `tailwind.config.js` que está incluído na raiz do diretório do tema: + +```js +// themes/blowfish/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/blowfish/layouts/**/*.html", + "./themes/blowfish/content/**/*.{html,md}", + ], + + // e mais... +}; +``` + +Esta configuração padrão foi incluída com esses caminhos de conteúdo para que você possa facilmente gerar seu próprio arquivo CSS sem precisar modificá-la, desde que siga uma estrutura de projeto particular. Ou seja, **você tem que incluir o Blowfish no seu projeto como um subdiretório em `themes/blowfish/`**. Isso significa que você não pode facilmente usar os módulos Hugo para instalar o tema e deve optar pela instalação por submódulo git (recomendado) ou instalação manual. Os [docs de instalação]({{< ref "installation" >}}) explicam como instalar o tema usando qualquer um desses métodos. + +### Estrutura do projeto + +Para aproveitar a configuração padrão, seu projeto deve se parecer com algo assim... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # este é o arquivo que vamos gerar +├── config # config do site +│ └── _default +├── content # conteúdo do site +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # layouts personalizados para seu site +│ ├── partials +│ │ └── extend-article-link/simple.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── blowfish # submódulo git ou instalação manual do tema +``` + +Esta estrutura de exemplo adiciona um novo tipo de conteúdo `projects` com seu próprio layout personalizado junto com um shortcode personalizado e partial estendido. Desde que o projeto siga esta estrutura, tudo o que é necessário é recompilar o arquivo `main.css`. + +### Instalar dependências + +Para que isso funcione, você precisará mudar para o diretório `themes/blowfish/` e instalar as dependências do projeto. Você precisará do [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) na sua máquina local para esta etapa. + +```shell +cd themes/blowfish +npm install +``` + +### Executar o compilador do Tailwind + +Com as dependências instaladas, tudo o que resta é usar o [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) para invocar o compilador JIT. Navegue de volta para a raiz do seu projeto Hugo e execute o seguinte comando: + +```shell +cd ../.. +./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit +``` + +É um comando um pouco feio devido aos caminhos envolvidos, mas essencialmente você está chamando o Tailwind CLI e passando a localização do arquivo de config do Tailwind (o que vimos acima), onde encontrar o arquivo `main.css` do tema e então onde você quer que o arquivo CSS compilado seja colocado (ele vai para a pasta `assets/css/compiled/` do seu projeto Hugo). + +O arquivo de config escaneará automaticamente todo o conteúdo e layouts no seu projeto assim como todos os do tema e construirá um novo arquivo CSS que contém todo o CSS necessário para seu site. Devido à forma como o Hugo lida com a hierarquia de arquivos, este arquivo no seu projeto agora substituirá automaticamente o que vem com o tema. + +Cada vez que você fizer uma alteração nos seus layouts e precisar de novos estilos do Tailwind CSS, você pode simplesmente executar o comando novamente e gerar o novo arquivo CSS. Você também pode adicionar `-w` ao final do comando para executar o compilador JIT em modo watch. + +### Criar um script de build + +Para completar totalmente esta solução, você pode simplificar todo este processo adicionando aliases para estes comandos, ou fazer o que eu faço e adicionar um `package.json` à raiz do seu projeto que contenha os scripts necessários... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // e mais... +} +``` + +Agora quando você quiser trabalhar no design do seu site, pode invocar `npm run dev` e o compilador será executado em modo watch. Quando estiver pronto para implantar, execute `npm run build` e você terá um build limpo do Tailwind CSS. + +🙋‍♀️ Se precisar de ajuda, sinta-se à vontade para fazer uma pergunta nas [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). diff --git a/exampleSite/content/docs/advanced-customisation/index.pt-pt.md b/exampleSite/content/docs/advanced-customisation/index.pt-pt.md new file mode 100644 index 00000000..c3b17c96 --- /dev/null +++ b/exampleSite/content/docs/advanced-customisation/index.pt-pt.md @@ -0,0 +1,265 @@ +--- +title: "Personalização avançada" +weight: 13 +draft: false +description: "Aprenda como construir o Blowfish manualmente." +slug: "advanced-customisation" +tags: ["avançado", "css", "documentação"] +series: ["Documentação"] +series_order: 13 +--- + +Existem muitas formas de fazer alterações avançadas ao Blowfish. Leia abaixo para saber mais sobre o que pode ser personalizado e a melhor forma de alcançar o resultado desejado. + +Se precisar de mais orientação, publique as suas perguntas nas [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). + +## Estrutura do projeto Hugo + +Antes de começar, primeiro uma nota rápida sobre a [estrutura do projeto Hugo](https://gohugo.io/getting-started/directory-structure/) e as melhores práticas para gerir o seu conteúdo e personalizações do tema. + +{{< alert >}} +**Em resumo:** Nunca edite diretamente os ficheiros do tema. Apenas faça personalizações nos subdiretórios do seu projeto Hugo, não no diretório themes em si. +{{< /alert >}} + +O Blowfish foi construído para aproveitar todas as práticas padrão do Hugo. Está concebido para permitir que todos os aspetos do tema sejam personalizados e substituídos sem alterar nenhum dos ficheiros principais do tema. Isto permite uma experiência de atualização perfeita enquanto oferece controlo total sobre a aparência e o funcionamento do seu website. + +Para conseguir isto, nunca deve ajustar manualmente nenhum dos ficheiros do tema diretamente. Quer instale utilizando módulos Hugo, como um submódulo git ou incluindo manualmente o tema no seu diretório `themes/`, deve sempre deixar estes ficheiros intactos. + +A forma correta de ajustar qualquer comportamento do tema é substituindo ficheiros utilizando a poderosa [ordem de pesquisa de ficheiros](https://gohugo.io/templates/lookup-order/) do Hugo. Em resumo, a ordem de pesquisa garante que quaisquer ficheiros que inclua no diretório do seu projeto terão automaticamente precedência sobre quaisquer ficheiros do tema. + +Por exemplo, se quisesse substituir o template principal de artigo no Blowfish, pode simplesmente criar o seu próprio ficheiro `layouts/_default/single.html` e colocá-lo na raiz do seu projeto. Este ficheiro então substituirá o `single.html` do tema sem nunca alterar o tema em si. Isto funciona para qualquer ficheiro do tema - templates HTML, partials, shortcodes, ficheiros de configuração, dados, assets, etc. + +Enquanto seguir esta prática simples, poderá sempre atualizar o tema (ou testar diferentes versões do tema) sem se preocupar em perder nenhuma das suas alterações personalizadas. + +## Alterar definições de otimização de imagem + +O Hugo tem vários métodos integrados para redimensionar, cortar e otimizar imagens. + +Como exemplo - em `layouts/partials/article-link/card.html`, tem o seguinte código: + +```go +{{ with .Resize "600x" }} +
+{{ end }} +``` + +O comportamento predefinido do Hugo aqui é redimensionar a imagem para 600px mantendo a proporção. + +Vale notar que as configurações de imagem predefinidas como o [ponto de ancoragem](https://gohugo.io/content-management/image-processing/#anchor) também podem ser definidas na sua [configuração do site](https://gohugo.io/content-management/image-processing/#processing-options) assim como no próprio template. + +Veja os [docs do Hugo sobre processamento de imagens](https://gohugo.io/content-management/image-processing/#image-processing-methods) para mais informações. + +## Esquemas de cores + +O Blowfish vem com vários esquemas de cores prontos a utilizar. Para alterar o esquema de cores básico, pode definir o parâmetro do tema `colorScheme`. Consulte a secção [Primeiros passos]({{< ref "getting-started#colour-schemes" >}}) para saber mais sobre os esquemas integrados. + +Além dos esquemas predefinidos, também pode criar os seus próprios e re-estilizar todo o website ao seu gosto. Os esquemas são criados colocando um ficheiro `.css` na pasta `assets/css/schemes/`. Uma vez criado o ficheiro, simplesmente referencie-o pelo nome na configuração do tema. + +{{< alert "github">}} +**Nota:** gerar estes ficheiros manualmente pode ser difícil, eu construí uma ferramenta de terminal `nodejs` para ajudar com isso, [Fugu](https://github.com/nunocoracao/fugu). Em resumo, passa os três valores `hex` principais da sua paleta de cores e o programa produzirá um ficheiro css que pode ser importado diretamente no Blowfish. +{{< /alert >}} + + +O Blowfish define uma paleta de três cores que é utilizada em todo o tema. As três cores são definidas como variantes `neutral`, `primary` e `secondary`, cada uma contendo dez tons de cor. + +Devido à forma como o Tailwind CSS 3.0 calcula os valores de cor com opacidade, as cores especificadas no esquema precisam de [conformar-se a um formato particular](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) fornecendo os valores de cor vermelho, verde e azul. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +Este exemplo define uma variável CSS para a cor `primary-500` com um valor vermelho de `139`, valor verde de `92` e valor azul de `246`. + +Utilize uma das folhas de estilo do tema existentes como modelo. É livre de definir as suas próprias cores, mas para inspiração, consulte a [referência da paleta de cores do Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) oficial. + +## Substituir a folha de estilos + +Por vezes precisa de adicionar um estilo personalizado para estilizar os seus próprios elementos HTML. O Blowfish prevê este cenário permitindo que substitua os estilos predefinidos na sua própria folha de estilos CSS. Simplesmente crie um ficheiro `custom.css` na pasta `assets/css/` do seu projeto. + +O ficheiro `custom.css` será minificado pelo Hugo e carregado automaticamente após todos os outros estilos do tema, o que significa que qualquer coisa no seu ficheiro personalizado terá precedência sobre os valores predefinidos. + +### Utilizar tipos de letra adicionais + +O Blowfish permite que altere facilmente o tipo de letra do seu site. Após criar um ficheiro `custom.css` na pasta `assets/css/` do seu projeto, coloque o seu ficheiro de tipo de letra dentro de uma pasta `fonts` na pasta raiz `static`. + +```shell +. +├── assets +│ └── css +│ └── custom.css +... +└─── static + └── fonts + └─── font.ttf + +``` + +Isto torna o tipo de letra disponível para o website. Agora, o tipo de letra pode simplesmente ser importado no seu `custom.css` e substituído onde achar melhor. O exemplo abaixo mostra como seria substituir o tipo de letra para todo o `html`. + +```css +@font-face { + font-family: font; + src: url('/fonts/font.ttf'); +} + +html { + font-family: font; +} +``` + +### Ajustar o tamanho do tipo de letra + +Alterar o tamanho do tipo de letra do seu website é um exemplo de substituição da folha de estilos predefinida. O Blowfish torna isto simples pois utiliza tamanhos de tipo de letra escalados em todo o tema que são derivados do tamanho do tipo de letra HTML base. Por predefinição, o Tailwind define o tamanho predefinido como `12pt`, mas pode ser alterado para qualquer valor que preferir. + +Crie um ficheiro `custom.css` utilizando as [instruções acima]({{< ref "#overriding-the-stylesheet" >}}) e adicione a seguinte declaração CSS: + +```css +/* Aumentar o tamanho de tipo de letra predefinido */ +html { + font-size: 13pt; +} +``` + +Simplesmente alterando este único valor, todos os tamanhos de tipo de letra no seu website serão ajustados para corresponder a este novo tamanho. Portanto, para aumentar os tamanhos de tipo de letra gerais utilizados, faça o valor maior que `12pt`. Da mesma forma, para diminuir os tamanhos de tipo de letra, faça o valor menor que `12pt`. + +### Alterar o tema de destaque de sintaxe + +Para alterar o tema de destaque de sintaxe, crie `assets/css/custom.css` e adicione o seguinte: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + font-style: unset; +} +``` + +Isto limpa os estilos predefinidos do Chroma. O próximo passo é incorporar os estilos do Chroma no seu ficheiro CSS utilizando o comando `hugo gen chromastyles`: + +```sh +# Mac/Linux +(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css +(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css + +# Windows PowerShell +# Este comando não pode ser executado no CMD; deve ser executado no PowerShell +@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css" +@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css" +``` + +Veja todos os estilos disponíveis na [documentação do Hugo](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + +## Construir o CSS do tema a partir da fonte + +Se quiser fazer uma alteração maior, pode aproveitar o compilador JIT do Tailwind CSS e reconstruir todo o CSS do tema do zero. Isto é útil se quiser ajustar a configuração do Tailwind ou adicionar classes extra do Tailwind à folha de estilos principal. + +{{< alert >}} +**Nota:** Construir o tema manualmente destina-se a utilizadores avançados. +{{< /alert >}} + +Vamos ver como funciona a construção do Tailwind CSS. + +### Configuração do Tailwind + +Para gerar um ficheiro CSS que contenha apenas as classes do Tailwind que estão realmente a ser utilizadas, o compilador JIT precisa de analisar todos os templates HTML e ficheiros de conteúdo Markdown para verificar quais estilos estão presentes no markup. O compilador faz isto olhando para o ficheiro `tailwind.config.js` que está incluído na raiz do diretório do tema: + +```js +// themes/blowfish/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/blowfish/layouts/**/*.html", + "./themes/blowfish/content/**/*.{html,md}", + ], + + // e mais... +}; +``` + +Esta configuração predefinida foi incluída com estes caminhos de conteúdo para que possa facilmente gerar o seu próprio ficheiro CSS sem precisar de modificá-la, desde que siga uma estrutura de projeto particular. Ou seja, **tem de incluir o Blowfish no seu projeto como um subdiretório em `themes/blowfish/`**. Isto significa que não pode facilmente utilizar os módulos Hugo para instalar o tema e deve optar pela instalação por submódulo git (recomendado) ou instalação manual. Os [docs de instalação]({{< ref "installation" >}}) explicam como instalar o tema utilizando qualquer um destes métodos. + +### Estrutura do projeto + +Para aproveitar a configuração predefinida, o seu projeto deve parecer-se com algo assim... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # este é o ficheiro que vamos gerar +├── config # config do site +│ └── _default +├── content # conteúdo do site +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # layouts personalizados para o seu site +│ ├── partials +│ │ └── extend-article-link/simple.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── blowfish # submódulo git ou instalação manual do tema +``` + +Esta estrutura de exemplo adiciona um novo tipo de conteúdo `projects` com o seu próprio layout personalizado juntamente com um shortcode personalizado e partial estendido. Desde que o projeto siga esta estrutura, tudo o que é necessário é recompilar o ficheiro `main.css`. + +### Instalar dependências + +Para que isto funcione, precisará de mudar para o diretório `themes/blowfish/` e instalar as dependências do projeto. Precisará do [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) na sua máquina local para esta etapa. + +```shell +cd themes/blowfish +npm install +``` + +### Executar o compilador do Tailwind + +Com as dependências instaladas, tudo o que resta é utilizar o [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) para invocar o compilador JIT. Navegue de volta para a raiz do seu projeto Hugo e execute o seguinte comando: + +```shell +cd ../.. +./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit +``` + +É um comando um pouco feio devido aos caminhos envolvidos, mas essencialmente está a chamar o Tailwind CLI e a passar-lhe a localização do ficheiro de config do Tailwind (o que vimos acima), onde encontrar o ficheiro `main.css` do tema e depois onde quer que o ficheiro CSS compilado seja colocado (vai para a pasta `assets/css/compiled/` do seu projeto Hugo). + +O ficheiro de config analisará automaticamente todo o conteúdo e layouts no seu projeto assim como todos os do tema e construirá um novo ficheiro CSS que contém todo o CSS necessário para o seu website. Devido à forma como o Hugo lida com a hierarquia de ficheiros, este ficheiro no seu projeto agora substituirá automaticamente o que vem com o tema. + +Cada vez que fizer uma alteração nos seus layouts e precisar de novos estilos do Tailwind CSS, pode simplesmente executar o comando novamente e gerar o novo ficheiro CSS. Também pode adicionar `-w` ao final do comando para executar o compilador JIT em modo watch. + +### Criar um script de build + +Para completar totalmente esta solução, pode simplificar todo este processo adicionando aliases para estes comandos, ou fazer o que eu faço e adicionar um `package.json` à raiz do seu projeto que contenha os scripts necessários... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // e mais... +} +``` + +Agora quando quiser trabalhar no design do seu site, pode invocar `npm run dev` e o compilador será executado em modo watch. Quando estiver pronto para implementar, execute `npm run build` e terá um build limpo do Tailwind CSS. + +🙋‍♀️ Se precisar de ajuda, sinta-se à vontade para fazer uma pergunta nas [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions). diff --git a/exampleSite/content/docs/configuration/index.de.md b/exampleSite/content/docs/configuration/index.de.md new file mode 100644 index 00000000..f63a6a32 --- /dev/null +++ b/exampleSite/content/docs/configuration/index.de.md @@ -0,0 +1,125 @@ +--- +title: "Konfiguration" +weight: 4 +draft: false +description: "Alle in Blowfish verfügbaren Konfigurationsvariablen." +slug: "configuration" +tags: ["konfiguration", "dokumentation"] +series: ["Dokumentation"] +series_order: 4 +--- + +Blowfish ist ein hochgradig anpassbares Theme und nutzt einige der neuesten Hugo-Funktionen, um die Konfiguration zu vereinfachen. + +Das Theme wird mit einer Standardkonfiguration geliefert, die Sie mit einem einfachen Blog oder einer statischen Website zum Laufen bringt. + +{{< alert "fire" >}} +Wir haben gerade ein CLI-Tool veröffentlicht, das Ihnen beim Einstieg mit Blowfish hilft. Es unterstützt Sie bei Installation und Konfiguration. Installieren Sie das CLI-Tool global mit: + +```bash +npx blowfish-tools +``` + +{{< /alert >}} + +> Die mit dem Theme gelieferten Konfigurationsdateien werden im TOML-Format bereitgestellt, da dies die Standard-Hugo-Syntax ist. Sie können Ihre Konfiguration bei Bedarf in YAML oder JSON konvertieren. + +Die Standard-Theme-Konfiguration ist in jeder Datei dokumentiert, sodass Sie die Einstellungen frei an Ihre Bedürfnisse anpassen können. + +{{< alert >}} +Wie in den [Installationsanweisungen]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}) beschrieben, sollten Sie Ihre Theme-Konfiguration anpassen, indem Sie die Dateien im Ordner `config/_default/` Ihres Hugo-Projekts ändern und die Datei `hugo.toml` im Projektstammverzeichnis löschen. +{{< /alert >}} + +## Website-Konfiguration + +Standard-Hugo-Konfigurationsvariablen werden im gesamten Theme berücksichtigt, es gibt jedoch einige spezifische Dinge, die für die beste Erfahrung konfiguriert werden sollten. + +Die Website-Konfiguration wird über die Datei `config/_default/hugo.toml` verwaltet. Die folgende Tabelle zeigt alle Einstellungen, die Blowfish nutzt. + +Beachten Sie, dass die in dieser Tabelle angegebenen Variablennamen die Punktnotation verwenden, um die TOML-Datenstruktur zu vereinfachen (d.h. `outputs.home` bezieht sich auf `[outputs] home`). + + +| Name | Standard | Beschreibung | +| --- | --- | --- | +| `theme` | `"blowfish"` | Bei Verwendung von Hugo-Modulen sollte dieser Konfigurationswert entfernt werden. Für alle anderen Installationstypen muss dies auf `blowfish` gesetzt werden, damit das Theme funktioniert. | +| `baseURL` | _Nicht gesetzt_ | Die URL zum Stammverzeichnis der Website. | +| `defaultContentLanguage` | `"en"` | Dieser Wert bestimmt die Standardsprache der Theme-Komponenten und Inhalte. Siehe den Abschnitt [Sprache und i18n](#sprache-und-i18n) unten für unterstützte Sprachcodes. | +| `enableRobotsTXT` | `true` | Wenn aktiviert, wird eine `robots.txt`-Datei im Website-Stammverzeichnis erstellt, die Suchmaschinen das Crawlen der gesamten Website ermöglicht. Wenn Sie Ihre eigene vorgefertigte `robots.txt` bereitstellen möchten, setzen Sie dies auf `false` und platzieren Sie Ihre Datei im `static`-Verzeichnis. Für vollständige Kontrolle können Sie ein [benutzerdefiniertes Layout]({{< ref "content-examples#custom-layouts" >}}) bereitstellen, um diese Datei zu generieren. | +| `pagination.pagerSize` | `10` | Die Anzahl der Artikel, die auf jeder Seite der Artikelliste angezeigt werden. | +| `summaryLength` | `0` | Die Anzahl der Wörter, die zur Generierung der Artikelzusammenfassung verwendet werden, wenn keine im [Front Matter]({{< ref "front-matter" >}}) angegeben ist. Ein Wert von `0` verwendet den ersten Satz. Dieser Wert hat keine Auswirkung, wenn Zusammenfassungen ausgeblendet sind. | +| `outputs.home` | `["HTML", "RSS", "JSON"]` | Die für die Website generierten Ausgabeformate. Blowfish benötigt HTML, RSS und JSON, damit alle Theme-Komponenten korrekt funktionieren. | +| `permalinks` | _Nicht gesetzt_ | Siehe die [Hugo-Dokumentation](https://gohugo.io/configuration/permalinks/) für die Permalink-Konfiguration. | +| `taxonomies` | _Nicht gesetzt_ | Siehe den Abschnitt [Inhalte organisieren]({{< ref "getting-started#organising-content" >}}) für die Taxonomie-Konfiguration. | + + +## Thumbnails + +Blowfish wurde so entwickelt, dass es einfach ist, visuelle Unterstützung zu Ihren Artikeln hinzuzufügen. Wenn Sie mit der Hugo-Artikelstruktur vertraut sind, müssen Sie nur eine Bilddatei (fast alle Formate werden unterstützt, aber wir empfehlen `.png` oder `.jpg`) in Ihrem Artikelordner platzieren, die mit `feature*` beginnt. Das ist alles, Blowfish kann dann das Bild sowohl als Thumbnail innerhalb Ihrer Website als auch für oEmbed-Karten auf sozialen Plattformen verwenden. + +[Hier]({{< ref "thumbnails" >}}) finden Sie auch einen Leitfaden mit mehr Informationen und ein [Beispiel]({{< ref "thumbnail_sample" >}}), wenn Sie sehen möchten, wie Sie es machen können. + +## Sprache und i18n + +Blowfish ist für vollständig mehrsprachige Websites optimiert und Theme-Assets sind standardmäßig in mehrere Sprachen übersetzt. Die Sprachkonfiguration ermöglicht es Ihnen, mehrere Versionen Ihres Inhalts zu generieren, um Ihren Besuchern ein angepasstes Erlebnis in ihrer Muttersprache zu bieten. + +Das Theme unterstützt derzeit standardmäßig die folgenden Sprachen: + +| Sprache | Code | +| --- | --- | +| Arabisch | `ar` | +| Bulgarisch | `bg` | +| Bengali | `bn` | +| Katalanisch | `ca` | +| Tschechisch | `cs` | +| Deutsch | `de` | +| Englisch | `en` | +| Esperanto | `eo` | +| Spanisch (Spanien) | `es` | +| Finnisch | `fi` | +| Französisch | `fr` | +| Galizisch | `gl` | +| Hebräisch | `he` | +| Kroatisch | `hr` | +| Ungarisch | `hu` | +| Indonesisch | `id` | +| Italienisch | `it` | +| Japanisch | `ja` | +| Koreanisch | `ko` | +| Niederländisch | `nl` | +| Persisch | `fa` | +| Polnisch | `pl` | +| Portugiesisch (Brasilien) | `pt-br` | +| Portugiesisch (Portugal) | `pt-pt` | +| Rumänisch | `ro` | +| Russisch | `ru` | +| Thai | `th` | +| Türkisch | `tr` | +| Vietnamesisch | `vi` | +| Vereinfachtes Chinesisch (China) | `zh-cn` | +| Traditionelles Chinesisch (Taiwan) | `zh-tw` | + +Die Standardübersetzungen können überschrieben werden, indem Sie eine benutzerdefinierte Datei in `i18n/[code].yaml` erstellen, die die Übersetzungsstrings enthält. Sie können diese Methode auch verwenden, um neue Sprachen hinzuzufügen. Wenn Sie eine neue Übersetzung mit der Community teilen möchten, [öffnen Sie bitte einen Pull Request](https://github.com/nunocoracao/blowfish/pulls). + +### Konfiguration + +Um so flexibel wie möglich zu sein, muss für jede Sprache auf der Website eine Sprachkonfigurationsdatei erstellt werden. Standardmäßig enthält Blowfish eine englische Sprachkonfiguration unter `config/_default/languages.en.toml`. + +Die Standarddatei kann als Vorlage verwendet werden, um zusätzliche Sprachen zu erstellen, oder umbenannt werden, wenn Sie Ihre Website in einer anderen Sprache als Englisch verfassen möchten. Benennen Sie die Datei einfach im Format `languages.[language-code].toml`. + +{{< alert >}} +**Hinweis:** Stellen Sie sicher, dass der Parameter `defaultContentLanguage` in der [Website-Konfiguration](#website-konfiguration) mit dem Sprachcode in Ihrem Sprachkonfigurationsdateinamen übereinstimmt. +{{< /alert >}} + +Detaillierte Informationen zu allen verfügbaren Konfigurationsparametern finden Sie in der englischen Dokumentation, da die Parameternamen technisch sind und im Original belassen werden. + +## Theme-Parameter + +Blowfish bietet eine große Anzahl von Konfigurationsparametern, die steuern, wie das Theme funktioniert. Die vollständige Liste aller verfügbaren Parameter finden Sie in der Datei `config/_default/params.toml`. + +Viele der Artikel-Standardeinstellungen können auf Artikelebene überschrieben werden, indem sie im Front Matter angegeben werden. Weitere Details finden Sie im Abschnitt [Front Matter]({{< ref "front-matter" >}}). + +## Weitere Konfigurationsdateien + +Das Theme enthält auch eine `markup.toml`-Konfigurationsdatei. Diese Datei enthält einige wichtige Parameter, die sicherstellen, dass Hugo korrekt konfiguriert ist, um mit Blowfish erstellte Websites zu generieren. + +Stellen Sie immer sicher, dass diese Datei im Konfigurationsverzeichnis vorhanden ist und dass die erforderlichen Werte gesetzt sind. Andernfalls können bestimmte Funktionen nicht korrekt funktionieren und es kann zu unbeabsichtigtem Verhalten kommen. diff --git a/exampleSite/content/docs/configuration/index.es.md b/exampleSite/content/docs/configuration/index.es.md new file mode 100644 index 00000000..fc6f52f4 --- /dev/null +++ b/exampleSite/content/docs/configuration/index.es.md @@ -0,0 +1,125 @@ +--- +title: "Configuración" +weight: 4 +draft: false +description: "Todas las variables de configuración disponibles en Blowfish." +slug: "configuration" +tags: ["configuración", "documentación"] +series: ["Documentación"] +series_order: 4 +--- + +Blowfish es un tema altamente personalizable y utiliza algunas de las últimas características de Hugo para simplificar su configuración. + +El tema viene con una configuración predeterminada que te permite empezar con un blog básico o sitio web estático. + +{{< alert "fire" >}} +Acabamos de lanzar una herramienta CLI para ayudarte a empezar con Blowfish. Te ayudará con la instalación y configuración. Instala la herramienta CLI globalmente usando: + +```bash +npx blowfish-tools +``` + +{{< /alert >}} + +> Los archivos de configuración incluidos con el tema se proporcionan en formato TOML ya que es la sintaxis predeterminada de Hugo. Siéntete libre de convertir tu configuración a YAML o JSON si lo deseas. + +La configuración predeterminada del tema está documentada en cada archivo para que puedas ajustar libremente la configuración según tus necesidades. + +{{< alert >}} +Como se describe en las [instrucciones de instalación]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), debes ajustar la configuración de tu tema modificando los archivos en la carpeta `config/_default/` de tu proyecto Hugo y eliminar el archivo `hugo.toml` en la raíz de tu proyecto. +{{< /alert >}} + +## Configuración del sitio + +Las variables de configuración estándar de Hugo se respetan en todo el tema, sin embargo, hay algunas cosas específicas que deben configurarse para la mejor experiencia. + +La configuración del sitio se gestiona a través del archivo `config/_default/hugo.toml`. La tabla a continuación describe todas las configuraciones que Blowfish aprovecha. + +Ten en cuenta que los nombres de variables proporcionados en esta tabla usan notación de puntos para simplificar la estructura de datos TOML (es decir, `outputs.home` se refiere a `[outputs] home`). + + +| Nombre | Predeterminado | Descripción | +| --- | --- | --- | +| `theme` | `"blowfish"` | Al usar Módulos Hugo, este valor de configuración debe eliminarse. Para todos los demás tipos de instalación, esto debe establecerse en `blowfish` para que el tema funcione. | +| `baseURL` | _No establecido_ | La URL a la raíz del sitio web. | +| `defaultContentLanguage` | `"en"` | Este valor determina el idioma predeterminado de los componentes del tema y el contenido. Consulta la sección [idioma e i18n](#idioma-e-i18n) a continuación para los códigos de idioma compatibles. | +| `enableRobotsTXT` | `true` | Cuando está habilitado, se creará un archivo `robots.txt` en la raíz del sitio que permite a los motores de búsqueda rastrear todo el sitio. Si prefieres proporcionar tu propio `robots.txt` prefabricado, establece en `false` y coloca tu archivo en el directorio `static`. Para control completo, puedes proporcionar un [diseño personalizado]({{< ref "content-examples#custom-layouts" >}}) para generar este archivo. | +| `pagination.pagerSize` | `10` | El número de artículos listados en cada página de la lista de artículos. | +| `summaryLength` | `0` | El número de palabras que se utilizan para generar el resumen del artículo cuando no se proporciona uno en el [front matter]({{< ref "front-matter" >}}). Un valor de `0` usará la primera oración. Este valor no tiene efecto cuando los resúmenes están ocultos. | +| `outputs.home` | `["HTML", "RSS", "JSON"]` | Los formatos de salida que se generan para el sitio. Blowfish requiere HTML, RSS y JSON para que todos los componentes del tema funcionen correctamente. | +| `permalinks` | _No establecido_ | Consulta la [documentación de Hugo](https://gohugo.io/configuration/permalinks/) para la configuración de permalinks. | +| `taxonomies` | _No establecido_ | Consulta la sección [Organización del contenido]({{< ref "getting-started#organising-content" >}}) para la configuración de taxonomías. | + + +## Miniaturas + +Blowfish fue construido para que sea fácil agregar soporte visual a tus artículos. Si estás familiarizado con la estructura de artículos de Hugo, solo necesitas colocar un archivo de imagen (casi todos los formatos son compatibles pero recomendamos `.png` o `.jpg`) que comience con `feature*` dentro de tu carpeta de artículo. Y eso es todo, Blowfish podrá usar la imagen tanto como miniatura dentro de tu sitio web como para tarjetas oEmbed en plataformas sociales. + +[Aquí]({{< ref "thumbnails" >}}) también hay una guía con más información y un [ejemplo]({{< ref "thumbnail_sample" >}}) si quieres ver cómo puedes hacerlo. + +## Idioma e i18n + +Blowfish está optimizado para sitios web completamente multilingües y los recursos del tema están traducidos a varios idiomas de forma predeterminada. La configuración de idioma te permite generar múltiples versiones de tu contenido para proporcionar una experiencia personalizada a tus visitantes en su idioma nativo. + +El tema actualmente soporta los siguientes idiomas por defecto: + +| Idioma | Código | +| --- | --- | +| Árabe | `ar` | +| Búlgaro | `bg` | +| Bengalí | `bn` | +| Catalán | `ca` | +| Checo | `cs` | +| Alemán | `de` | +| Inglés | `en` | +| Esperanto | `eo` | +| Español (España) | `es` | +| Finlandés | `fi` | +| Francés | `fr` | +| Gallego | `gl` | +| Hebreo | `he` | +| Croata | `hr` | +| Húngaro | `hu` | +| Indonesio | `id` | +| Italiano | `it` | +| Japonés | `ja` | +| Coreano | `ko` | +| Neerlandés | `nl` | +| Persa | `fa` | +| Polaco | `pl` | +| Portugués (Brasil) | `pt-br` | +| Portugués (Portugal) | `pt-pt` | +| Rumano | `ro` | +| Ruso | `ru` | +| Tailandés | `th` | +| Turco | `tr` | +| Vietnamita | `vi` | +| Chino simplificado (China) | `zh-cn` | +| Chino tradicional (Taiwán) | `zh-tw` | + +Las traducciones predeterminadas pueden sobrescribirse creando un archivo personalizado en `i18n/[code].yaml` que contenga las cadenas de traducción. También puedes usar este método para agregar nuevos idiomas. Si deseas compartir una nueva traducción con la comunidad, por favor [abre una pull request](https://github.com/nunocoracao/blowfish/pulls). + +### Configuración + +Para ser lo más flexible posible, se debe crear un archivo de configuración de idioma para cada idioma en el sitio web. Por defecto, Blowfish incluye una configuración de idioma en inglés en `config/_default/languages.en.toml`. + +El archivo predeterminado puede usarse como plantilla para crear idiomas adicionales, o renombrarse si deseas escribir tu sitio web en un idioma diferente al inglés. Simplemente nombra el archivo usando el formato `languages.[language-code].toml`. + +{{< alert >}} +**Nota:** Asegúrate de que el parámetro `defaultContentLanguage` en la [configuración del sitio](#configuración-del-sitio) coincida con el código de idioma en el nombre del archivo de configuración de idioma. +{{< /alert >}} + +Para información detallada sobre todos los parámetros de configuración disponibles, consulta la documentación en inglés ya que los nombres de parámetros son técnicos y permanecen en su forma original. + +## Parámetros del tema + +Blowfish proporciona un gran número de parámetros de configuración que controlan cómo funciona el tema. La lista completa de todos los parámetros disponibles se encuentra en el archivo `config/_default/params.toml`. + +Muchos de los valores predeterminados de artículos pueden sobrescribirse por artículo especificándolos en el front matter. Consulta la sección [Front Matter]({{< ref "front-matter" >}}) para más detalles. + +## Otros archivos de configuración + +El tema también incluye un archivo de configuración `markup.toml`. Este archivo contiene algunos parámetros importantes que aseguran que Hugo esté correctamente configurado para generar sitios construidos con Blowfish. + +Siempre asegúrate de que este archivo esté presente en el directorio de configuración y que los valores requeridos estén establecidos. No hacerlo puede causar que ciertas características funcionen incorrectamente y podría resultar en comportamiento no deseado. diff --git a/exampleSite/content/docs/configuration/index.fr.md b/exampleSite/content/docs/configuration/index.fr.md new file mode 100644 index 00000000..6cf74027 --- /dev/null +++ b/exampleSite/content/docs/configuration/index.fr.md @@ -0,0 +1,125 @@ +--- +title: "Configuration" +weight: 4 +draft: false +description: "Toutes les variables de configuration disponibles dans Blowfish." +slug: "configuration" +tags: ["configuration", "documentation"] +series: ["Documentation"] +series_order: 4 +--- + +Blowfish est un thème hautement personnalisable et utilise certaines des dernières fonctionnalités de Hugo pour simplifier sa configuration. + +Le thème est livré avec une configuration par défaut qui vous permet de démarrer avec un blog ou un site web statique de base. + +{{< alert "fire" >}} +Nous venons de lancer un outil CLI pour vous aider à démarrer avec Blowfish. Il vous aidera avec l'installation et la configuration. Installez l'outil CLI globalement en utilisant : + +```bash +npx blowfish-tools +``` + +{{< /alert >}} + +> Les fichiers de configuration fournis avec le thème sont au format TOML car c'est la syntaxe Hugo par défaut. N'hésitez pas à convertir votre configuration en YAML ou JSON si vous le souhaitez. + +La configuration par défaut du thème est documentée dans chaque fichier afin que vous puissiez librement ajuster les paramètres selon vos besoins. + +{{< alert >}} +Comme indiqué dans les [instructions d'installation]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), vous devez ajuster la configuration de votre thème en modifiant les fichiers dans le dossier `config/_default/` de votre projet Hugo et supprimer le fichier `hugo.toml` à la racine de votre projet. +{{< /alert >}} + +## Configuration du site + +Les variables de configuration Hugo standard sont respectées dans tout le thème, cependant il y a certaines choses spécifiques qui doivent être configurées pour une meilleure expérience. + +La configuration du site est gérée via le fichier `config/_default/hugo.toml`. Le tableau ci-dessous présente tous les paramètres que Blowfish utilise. + +Notez que les noms de variables fournis dans ce tableau utilisent la notation pointée pour simplifier la structure de données TOML (c'est-à-dire que `outputs.home` fait référence à `[outputs] home`). + + +| Nom | Défaut | Description | +| --- | --- | --- | +| `theme` | `"blowfish"` | Lors de l'utilisation des modules Hugo, cette valeur de configuration doit être supprimée. Pour tous les autres types d'installation, cela doit être défini sur `blowfish` pour que le thème fonctionne. | +| `baseURL` | _Non défini_ | L'URL vers la racine du site web. | +| `defaultContentLanguage` | `"en"` | Cette valeur détermine la langue par défaut des composants du thème et du contenu. Consultez la section [langue et i18n](#langue-et-i18n) ci-dessous pour les codes de langue pris en charge. | +| `enableRobotsTXT` | `true` | Lorsqu'il est activé, un fichier `robots.txt` sera créé à la racine du site permettant aux moteurs de recherche d'explorer l'ensemble du site. Si vous préférez fournir votre propre `robots.txt` préfabriqué, définissez sur `false` et placez votre fichier dans le répertoire `static`. Pour un contrôle complet, vous pouvez fournir une [mise en page personnalisée]({{< ref "content-examples#custom-layouts" >}}) pour générer ce fichier. | +| `pagination.pagerSize` | `10` | Le nombre d'articles listés sur chaque page de la liste d'articles. | +| `summaryLength` | `0` | Le nombre de mots utilisés pour générer le résumé de l'article lorsqu'aucun n'est fourni dans le [front matter]({{< ref "front-matter" >}}). Une valeur de `0` utilisera la première phrase. Cette valeur n'a aucun effet lorsque les résumés sont masqués. | +| `outputs.home` | `["HTML", "RSS", "JSON"]` | Les formats de sortie générés pour le site. Blowfish nécessite HTML, RSS et JSON pour que tous les composants du thème fonctionnent correctement. | +| `permalinks` | _Non défini_ | Consultez la [documentation Hugo](https://gohugo.io/configuration/permalinks/) pour la configuration des permaliens. | +| `taxonomies` | _Non défini_ | Consultez la section [Organisation du contenu]({{< ref "getting-started#organising-content" >}}) pour la configuration des taxonomies. | + + +## Vignettes + +Blowfish a été conçu pour qu'il soit facile d'ajouter un support visuel à vos articles. Si vous êtes familier avec la structure des articles Hugo, il vous suffit de placer un fichier image (presque tous les formats sont pris en charge mais nous recommandons `.png` ou `.jpg`) qui commence par `feature*` dans votre dossier d'article. Et c'est tout, Blowfish pourra alors utiliser l'image à la fois comme vignette sur votre site et pour les cartes oEmbed sur les plateformes sociales. + +[Voici]({{< ref "thumbnails" >}}) également un guide avec plus d'informations et un [exemple]({{< ref "thumbnail_sample" >}}) si vous voulez voir comment faire. + +## Langue et i18n + +Blowfish est optimisé pour les sites web entièrement multilingues et les ressources du thème sont traduites dans plusieurs langues par défaut. La configuration de la langue vous permet de générer plusieurs versions de votre contenu pour offrir une expérience personnalisée à vos visiteurs dans leur langue maternelle. + +Le thème prend actuellement en charge les langues suivantes par défaut : + +| Langue | Code | +| --- | --- | +| Arabe | `ar` | +| Bulgare | `bg` | +| Bengali | `bn` | +| Catalan | `ca` | +| Tchèque | `cs` | +| Allemand | `de` | +| Anglais | `en` | +| Espéranto | `eo` | +| Espagnol (Espagne) | `es` | +| Finnois | `fi` | +| Français | `fr` | +| Galicien | `gl` | +| Hébreu | `he` | +| Croate | `hr` | +| Hongrois | `hu` | +| Indonésien | `id` | +| Italien | `it` | +| Japonais | `ja` | +| Coréen | `ko` | +| Néerlandais | `nl` | +| Persan | `fa` | +| Polonais | `pl` | +| Portugais (Brésil) | `pt-br` | +| Portugais (Portugal) | `pt-pt` | +| Roumain | `ro` | +| Russe | `ru` | +| Thaï | `th` | +| Turc | `tr` | +| Vietnamien | `vi` | +| Chinois simplifié (Chine) | `zh-cn` | +| Chinois traditionnel (Taïwan) | `zh-tw` | + +Les traductions par défaut peuvent être remplacées en créant un fichier personnalisé dans `i18n/[code].yaml` contenant les chaînes de traduction. Vous pouvez également utiliser cette méthode pour ajouter de nouvelles langues. Si vous souhaitez partager une nouvelle traduction avec la communauté, veuillez [ouvrir une pull request](https://github.com/nunocoracao/blowfish/pulls). + +### Configuration + +Afin d'être aussi flexible que possible, un fichier de configuration de langue doit être créé pour chaque langue du site. Par défaut, Blowfish inclut une configuration de langue anglaise dans `config/_default/languages.en.toml`. + +Le fichier par défaut peut être utilisé comme modèle pour créer des langues supplémentaires, ou renommé si vous souhaitez rédiger votre site dans une langue autre que l'anglais. Nommez simplement le fichier en utilisant le format `languages.[language-code].toml`. + +{{< alert >}} +**Note :** Assurez-vous que le paramètre `defaultContentLanguage` dans la [configuration du site](#configuration-du-site) correspond au code de langue dans le nom de fichier de configuration de langue. +{{< /alert >}} + +Pour des informations détaillées sur tous les paramètres de configuration disponibles, consultez la documentation en anglais car les noms de paramètres sont techniques et restent dans leur forme originale. + +## Paramètres du thème + +Blowfish fournit un grand nombre de paramètres de configuration qui contrôlent le fonctionnement du thème. La liste complète de tous les paramètres disponibles se trouve dans le fichier `config/_default/params.toml`. + +De nombreuses valeurs par défaut des articles peuvent être remplacées article par article en les spécifiant dans le front matter. Consultez la section [Front Matter]({{< ref "front-matter" >}}) pour plus de détails. + +## Autres fichiers de configuration + +Le thème inclut également un fichier de configuration `markup.toml`. Ce fichier contient des paramètres importants qui garantissent que Hugo est correctement configuré pour générer des sites construits avec Blowfish. + +Assurez-vous toujours que ce fichier est présent dans le répertoire de configuration et que les valeurs requises sont définies. Ne pas le faire peut entraîner un fonctionnement incorrect de certaines fonctionnalités et un comportement inattendu. diff --git a/exampleSite/content/docs/configuration/index.pt-br.md b/exampleSite/content/docs/configuration/index.pt-br.md new file mode 100644 index 00000000..ed04b3e4 --- /dev/null +++ b/exampleSite/content/docs/configuration/index.pt-br.md @@ -0,0 +1,125 @@ +--- +title: "Configuração" +weight: 4 +draft: false +description: "Todas as variáveis de configuração disponíveis no Blowfish." +slug: "configuration" +tags: ["configuração", "documentação"] +series: ["Documentação"] +series_order: 4 +--- + +O Blowfish é um tema altamente personalizável e usa alguns dos recursos mais recentes do Hugo para simplificar sua configuração. + +O tema vem com uma configuração padrão que permite você começar com um blog básico ou site estático. + +{{< alert "fire" >}} +Acabamos de lançar uma ferramenta CLI para ajudá-lo a começar com o Blowfish. Ela ajudará com a instalação e configuração. Instale a ferramenta CLI globalmente usando: + +```bash +npx blowfish-tools +``` + +{{< /alert >}} + +> Os arquivos de configuração incluídos com o tema são fornecidos no formato TOML, pois é a sintaxe padrão do Hugo. Sinta-se à vontade para converter sua configuração para YAML ou JSON, se desejar. + +A configuração padrão do tema está documentada em cada arquivo para que você possa ajustar livremente as configurações de acordo com suas necessidades. + +{{< alert >}} +Conforme descrito nas [instruções de instalação]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), você deve ajustar a configuração do seu tema modificando os arquivos na pasta `config/_default/` do seu projeto Hugo e excluir o arquivo `hugo.toml` na raiz do seu projeto. +{{< /alert >}} + +## Configuração do site + +As variáveis de configuração padrão do Hugo são respeitadas em todo o tema, no entanto, há algumas coisas específicas que devem ser configuradas para a melhor experiência. + +A configuração do site é gerenciada através do arquivo `config/_default/hugo.toml`. A tabela abaixo descreve todas as configurações que o Blowfish aproveita. + +Observe que os nomes de variáveis fornecidos nesta tabela usam notação de ponto para simplificar a estrutura de dados TOML (ou seja, `outputs.home` refere-se a `[outputs] home`). + + +| Nome | Padrão | Descrição | +| --- | --- | --- | +| `theme` | `"blowfish"` | Ao usar Módulos Hugo, este valor de configuração deve ser removido. Para todos os outros tipos de instalação, isso deve ser definido como `blowfish` para que o tema funcione. | +| `baseURL` | _Não definido_ | A URL para a raiz do site. | +| `defaultContentLanguage` | `"en"` | Este valor determina o idioma padrão dos componentes do tema e do conteúdo. Consulte a seção [idioma e i18n](#idioma-e-i18n) abaixo para códigos de idioma suportados. | +| `enableRobotsTXT` | `true` | Quando habilitado, um arquivo `robots.txt` será criado na raiz do site que permite que os mecanismos de busca rastreiem todo o site. Se você preferir fornecer seu próprio `robots.txt` pré-fabricado, defina como `false` e coloque seu arquivo no diretório `static`. Para controle completo, você pode fornecer um [layout personalizado]({{< ref "content-examples#custom-layouts" >}}) para gerar este arquivo. | +| `pagination.pagerSize` | `10` | O número de artigos listados em cada página da lista de artigos. | +| `summaryLength` | `0` | O número de palavras usadas para gerar o resumo do artigo quando não é fornecido no [front matter]({{< ref "front-matter" >}}). Um valor de `0` usará a primeira frase. Este valor não tem efeito quando os resumos estão ocultos. | +| `outputs.home` | `["HTML", "RSS", "JSON"]` | Os formatos de saída gerados para o site. O Blowfish requer HTML, RSS e JSON para que todos os componentes do tema funcionem corretamente. | +| `permalinks` | _Não definido_ | Consulte a [documentação do Hugo](https://gohugo.io/configuration/permalinks/) para configuração de permalinks. | +| `taxonomies` | _Não definido_ | Consulte a seção [Organizando conteúdo]({{< ref "getting-started#organising-content" >}}) para configuração de taxonomias. | + + +## Miniaturas + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se você está familiarizado com a estrutura de artigos do Hugo, basta colocar um arquivo de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá usar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) também há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se você quiser ver como fazer. + +## Idioma e i18n + +O Blowfish é otimizado para sites totalmente multilíngues e os recursos do tema são traduzidos para vários idiomas por padrão. A configuração de idioma permite gerar múltiplas versões do seu conteúdo para fornecer uma experiência personalizada aos seus visitantes em seu idioma nativo. + +O tema atualmente suporta os seguintes idiomas por padrão: + +| Idioma | Código | +| --- | --- | +| Árabe | `ar` | +| Búlgaro | `bg` | +| Bengali | `bn` | +| Catalão | `ca` | +| Tcheco | `cs` | +| Alemão | `de` | +| Inglês | `en` | +| Esperanto | `eo` | +| Espanhol (Espanha) | `es` | +| Finlandês | `fi` | +| Francês | `fr` | +| Galego | `gl` | +| Hebraico | `he` | +| Croata | `hr` | +| Húngaro | `hu` | +| Indonésio | `id` | +| Italiano | `it` | +| Japonês | `ja` | +| Coreano | `ko` | +| Holandês | `nl` | +| Persa | `fa` | +| Polonês | `pl` | +| Português (Brasil) | `pt-br` | +| Português (Portugal) | `pt-pt` | +| Romeno | `ro` | +| Russo | `ru` | +| Tailandês | `th` | +| Turco | `tr` | +| Vietnamita | `vi` | +| Chinês simplificado (China) | `zh-cn` | +| Chinês tradicional (Taiwan) | `zh-tw` | + +As traduções padrão podem ser substituídas criando um arquivo personalizado em `i18n/[code].yaml` contendo as strings de tradução. Você também pode usar este método para adicionar novos idiomas. Se quiser compartilhar uma nova tradução com a comunidade, por favor [abra um pull request](https://github.com/nunocoracao/blowfish/pulls). + +### Configuração + +Para ser o mais flexível possível, um arquivo de configuração de idioma precisa ser criado para cada idioma no site. Por padrão, o Blowfish inclui uma configuração de idioma em inglês em `config/_default/languages.en.toml`. + +O arquivo padrão pode ser usado como modelo para criar idiomas adicionais, ou renomeado se você deseja escrever seu site em um idioma diferente do inglês. Simplesmente nomeie o arquivo usando o formato `languages.[language-code].toml`. + +{{< alert >}} +**Nota:** Certifique-se de que o parâmetro `defaultContentLanguage` na [configuração do site](#configuração-do-site) corresponda ao código de idioma no nome do arquivo de configuração de idioma. +{{< /alert >}} + +Para informações detalhadas sobre todos os parâmetros de configuração disponíveis, consulte a documentação em inglês, pois os nomes dos parâmetros são técnicos e permanecem em sua forma original. + +## Parâmetros do tema + +O Blowfish fornece um grande número de parâmetros de configuração que controlam como o tema funciona. A lista completa de todos os parâmetros disponíveis está no arquivo `config/_default/params.toml`. + +Muitos dos padrões de artigos podem ser substituídos por artigo, especificando-os no front matter. Consulte a seção [Front Matter]({{< ref "front-matter" >}}) para mais detalhes. + +## Outros arquivos de configuração + +O tema também inclui um arquivo de configuração `markup.toml`. Este arquivo contém alguns parâmetros importantes que garantem que o Hugo esteja corretamente configurado para gerar sites construídos com o Blowfish. + +Sempre certifique-se de que este arquivo esteja presente no diretório de configuração e que os valores necessários estejam definidos. Não fazer isso pode fazer com que certos recursos funcionem incorretamente e pode resultar em comportamento não intencional. diff --git a/exampleSite/content/docs/configuration/index.pt-pt.md b/exampleSite/content/docs/configuration/index.pt-pt.md new file mode 100644 index 00000000..c2c749bf --- /dev/null +++ b/exampleSite/content/docs/configuration/index.pt-pt.md @@ -0,0 +1,125 @@ +--- +title: "Configuração" +weight: 4 +draft: false +description: "Todas as variáveis de configuração disponíveis no Blowfish." +slug: "configuration" +tags: ["configuração", "documentação"] +series: ["Documentação"] +series_order: 4 +--- + +O Blowfish é um tema altamente personalizável e utiliza algumas das funcionalidades mais recentes do Hugo para simplificar a sua configuração. + +O tema vem com uma configuração predefinida que lhe permite começar com um blogue básico ou site estático. + +{{< alert "fire" >}} +Acabámos de lançar uma ferramenta CLI para o ajudar a começar com o Blowfish. Irá ajudá-lo com a instalação e configuração. Instale a ferramenta CLI globalmente utilizando: + +```bash +npx blowfish-tools +``` + +{{< /alert >}} + +> Os ficheiros de configuração incluídos com o tema são fornecidos no formato TOML, pois é a sintaxe predefinida do Hugo. Sinta-se à vontade para converter a sua configuração para YAML ou JSON, se desejar. + +A configuração predefinida do tema está documentada em cada ficheiro para que possa ajustar livremente as definições de acordo com as suas necessidades. + +{{< alert >}} +Conforme descrito nas [instruções de instalação]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), deve ajustar a configuração do seu tema modificando os ficheiros na pasta `config/_default/` do seu projeto Hugo e eliminar o ficheiro `hugo.toml` na raiz do seu projeto. +{{< /alert >}} + +## Configuração do site + +As variáveis de configuração padrão do Hugo são respeitadas em todo o tema, no entanto, há algumas coisas específicas que devem ser configuradas para a melhor experiência. + +A configuração do site é gerida através do ficheiro `config/_default/hugo.toml`. A tabela abaixo descreve todas as definições que o Blowfish aproveita. + +Note que os nomes de variáveis fornecidos nesta tabela utilizam notação de ponto para simplificar a estrutura de dados TOML (ou seja, `outputs.home` refere-se a `[outputs] home`). + + +| Nome | Predefinição | Descrição | +| --- | --- | --- | +| `theme` | `"blowfish"` | Ao utilizar Módulos Hugo, este valor de configuração deve ser removido. Para todos os outros tipos de instalação, isto deve ser definido como `blowfish` para que o tema funcione. | +| `baseURL` | _Não definido_ | O URL para a raiz do site. | +| `defaultContentLanguage` | `"en"` | Este valor determina o idioma predefinido dos componentes do tema e do conteúdo. Consulte a secção [idioma e i18n](#idioma-e-i18n) abaixo para códigos de idioma suportados. | +| `enableRobotsTXT` | `true` | Quando ativado, um ficheiro `robots.txt` será criado na raiz do site que permite que os motores de busca rastreiem todo o site. Se preferir fornecer o seu próprio `robots.txt` pré-fabricado, defina como `false` e coloque o seu ficheiro no diretório `static`. Para controlo completo, pode fornecer um [layout personalizado]({{< ref "content-examples#custom-layouts" >}}) para gerar este ficheiro. | +| `pagination.pagerSize` | `10` | O número de artigos listados em cada página da lista de artigos. | +| `summaryLength` | `0` | O número de palavras utilizadas para gerar o resumo do artigo quando não é fornecido no [front matter]({{< ref "front-matter" >}}). Um valor de `0` utilizará a primeira frase. Este valor não tem efeito quando os resumos estão ocultos. | +| `outputs.home` | `["HTML", "RSS", "JSON"]` | Os formatos de saída gerados para o site. O Blowfish requer HTML, RSS e JSON para que todos os componentes do tema funcionem corretamente. | +| `permalinks` | _Não definido_ | Consulte a [documentação do Hugo](https://gohugo.io/configuration/permalinks/) para configuração de permalinks. | +| `taxonomies` | _Não definido_ | Consulte a secção [Organização do conteúdo]({{< ref "getting-started#organising-content" >}}) para configuração de taxonomias. | + + +## Miniaturas + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se está familiarizado com a estrutura de artigos do Hugo, basta colocar um ficheiro de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá utilizar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) também há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se quiser ver como fazer. + +## Idioma e i18n + +O Blowfish está otimizado para sites totalmente multilingues e os recursos do tema são traduzidos para vários idiomas por predefinição. A configuração de idioma permite gerar múltiplas versões do seu conteúdo para fornecer uma experiência personalizada aos seus visitantes no seu idioma nativo. + +O tema atualmente suporta os seguintes idiomas por predefinição: + +| Idioma | Código | +| --- | --- | +| Árabe | `ar` | +| Búlgaro | `bg` | +| Bengali | `bn` | +| Catalão | `ca` | +| Checo | `cs` | +| Alemão | `de` | +| Inglês | `en` | +| Esperanto | `eo` | +| Espanhol (Espanha) | `es` | +| Finlandês | `fi` | +| Francês | `fr` | +| Galego | `gl` | +| Hebraico | `he` | +| Croata | `hr` | +| Húngaro | `hu` | +| Indonésio | `id` | +| Italiano | `it` | +| Japonês | `ja` | +| Coreano | `ko` | +| Holandês | `nl` | +| Persa | `fa` | +| Polaco | `pl` | +| Português (Brasil) | `pt-br` | +| Português (Portugal) | `pt-pt` | +| Romeno | `ro` | +| Russo | `ru` | +| Tailandês | `th` | +| Turco | `tr` | +| Vietnamita | `vi` | +| Chinês simplificado (China) | `zh-cn` | +| Chinês tradicional (Taiwan) | `zh-tw` | + +As traduções predefinidas podem ser substituídas criando um ficheiro personalizado em `i18n/[code].yaml` contendo as strings de tradução. Também pode utilizar este método para adicionar novos idiomas. Se quiser partilhar uma nova tradução com a comunidade, por favor [abra um pull request](https://github.com/nunocoracao/blowfish/pulls). + +### Configuração + +Para ser o mais flexível possível, um ficheiro de configuração de idioma precisa de ser criado para cada idioma no site. Por predefinição, o Blowfish inclui uma configuração de idioma em inglês em `config/_default/languages.en.toml`. + +O ficheiro predefinido pode ser utilizado como modelo para criar idiomas adicionais, ou renomeado se deseja escrever o seu site num idioma diferente do inglês. Simplesmente nomeie o ficheiro utilizando o formato `languages.[language-code].toml`. + +{{< alert >}} +**Nota:** Certifique-se de que o parâmetro `defaultContentLanguage` na [configuração do site](#configuração-do-site) corresponda ao código de idioma no nome do ficheiro de configuração de idioma. +{{< /alert >}} + +Para informações detalhadas sobre todos os parâmetros de configuração disponíveis, consulte a documentação em inglês, pois os nomes dos parâmetros são técnicos e permanecem na sua forma original. + +## Parâmetros do tema + +O Blowfish fornece um grande número de parâmetros de configuração que controlam como o tema funciona. A lista completa de todos os parâmetros disponíveis está no ficheiro `config/_default/params.toml`. + +Muitas das predefinições de artigos podem ser substituídas por artigo, especificando-as no front matter. Consulte a secção [Front Matter]({{< ref "front-matter" >}}) para mais detalhes. + +## Outros ficheiros de configuração + +O tema também inclui um ficheiro de configuração `markup.toml`. Este ficheiro contém alguns parâmetros importantes que garantem que o Hugo está corretamente configurado para gerar sites construídos com o Blowfish. + +Certifique-se sempre de que este ficheiro está presente no diretório de configuração e que os valores necessários estão definidos. Não fazer isso pode fazer com que certas funcionalidades funcionem incorretamente e pode resultar em comportamento não intencional. diff --git a/exampleSite/content/docs/content-examples/index.de.md b/exampleSite/content/docs/content-examples/index.de.md new file mode 100644 index 00000000..331ca79b --- /dev/null +++ b/exampleSite/content/docs/content-examples/index.de.md @@ -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" }} +
+ {{ range .Pages }} + + {{ end }} +
+{{ 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. diff --git a/exampleSite/content/docs/content-examples/index.es.md b/exampleSite/content/docs/content-examples/index.es.md new file mode 100644 index 00000000..0fade0ad --- /dev/null +++ b/exampleSite/content/docs/content-examples/index.es.md @@ -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" }} +
+ {{ range .Pages }} + + {{ end }} +
+{{ 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. diff --git a/exampleSite/content/docs/content-examples/index.fr.md b/exampleSite/content/docs/content-examples/index.fr.md new file mode 100644 index 00000000..0503685d --- /dev/null +++ b/exampleSite/content/docs/content-examples/index.fr.md @@ -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" }} +
+ {{ range .Pages }} + + {{ end }} +
+{{ 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. diff --git a/exampleSite/content/docs/content-examples/index.pt-br.md b/exampleSite/content/docs/content-examples/index.pt-br.md new file mode 100644 index 00000000..56656cdb --- /dev/null +++ b/exampleSite/content/docs/content-examples/index.pt-br.md @@ -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" }} +
+ {{ range .Pages }} + + {{ end }} +
+{{ 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. diff --git a/exampleSite/content/docs/content-examples/index.pt-pt.md b/exampleSite/content/docs/content-examples/index.pt-pt.md new file mode 100644 index 00000000..c80c9e8e --- /dev/null +++ b/exampleSite/content/docs/content-examples/index.pt-pt.md @@ -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" }} +
+ {{ range .Pages }} + + {{ end }} +
+{{ 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. diff --git a/exampleSite/content/docs/firebase-views/index.de.md b/exampleSite/content/docs/firebase-views/index.de.md new file mode 100644 index 00000000..d0432ae1 --- /dev/null +++ b/exampleSite/content/docs/firebase-views/index.de.md @@ -0,0 +1,55 @@ +--- +title: "Firebase: Aufrufe & Likes" +weight: 15 +draft: false +description: "Erfahren Sie, wie Sie Firebase integrieren und dynamische Daten für Aufrufe und Likes erhalten." +slug: "firebase-views" +tags: ["firebase", "aufrufe", "likes"] +series: ["Dokumentation"] +series_order: 15 +--- + +Um dynamische Daten auf Ihrer Website zu unterstützen, haben wir die Integration von Firebase hinzugefügt. Dies ermöglicht es Ihnen, die Aufrufe-Funktion über Listen und Beiträge hinweg zu nutzen. + +1. Gehen Sie zur Firebase-Website und erstellen Sie ein kostenloses Konto +2. Erstellen Sie ein neues Projekt +3. Wählen Sie den Analytics-Standort +4. Richten Sie Firebase in Blowfish ein, indem Sie die Variablen für Ihr Projekt abrufen und sie in der `params.toml`-Datei setzen. Weitere Details finden Sie auf }}">dieser Seite. Unten finden Sie ein Beispiel der Datei, die Firebase bereitstellt. Beachten Sie die Parameter innerhalb des FirebaseConfig-Objekts. + +```js +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY", + authDomain: "blowfish-21fff.firebaseapp.com", + projectId: "blowfish-21fff", + storageBucket: "blowfish-21fff.appspot.com", + messagingSenderId: "60108104191", + appId: "1:60108104191:web:039842ebe1370698b487ca", + measurementId: "G-PEDMYR1V0K" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +``` + +5. Firestore einrichten - Wählen Sie Build und öffnen Sie Firestore. Erstellen Sie eine neue Datenbank und wählen Sie den Start im Produktionsmodus. Wählen Sie den Serverstandort und warten Sie. Sobald dies gestartet ist, müssen Sie die Regeln konfigurieren. Kopieren Sie einfach die Datei unten und drücken Sie Veröffentlichen. +```txt +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} +``` +6. Anonyme Autorisierung aktivieren - Wählen Sie Build und öffnen Sie Authentication. Wählen Sie Erste Schritte, klicken Sie auf Anonym und aktivieren Sie es, speichern. +7. Fertig - Sie können jetzt Aufrufe und Likes in Blowfish für alle (oder bestimmte) Artikel aktivieren. diff --git a/exampleSite/content/docs/firebase-views/index.es.md b/exampleSite/content/docs/firebase-views/index.es.md new file mode 100644 index 00000000..e43a8b39 --- /dev/null +++ b/exampleSite/content/docs/firebase-views/index.es.md @@ -0,0 +1,55 @@ +--- +title: "Firebase: Vistas & Likes" +weight: 15 +draft: false +description: "Aprende cómo integrar Firebase y obtener datos dinámicos para vistas y likes." +slug: "firebase-views" +tags: ["firebase", "vistas", "likes"] +series: ["Documentación"] +series_order: 15 +--- + +Para poder soportar datos dinámicos en tu sitio web, hemos añadido soporte para integrar Firebase. Esto te permitirá usar la función de vistas en listas y publicaciones. + +1. Ve al sitio web de Firebase y crea una cuenta gratis +2. Crea un nuevo proyecto +3. Selecciona la ubicación de analytics +4. Configura Firebase en Blowfish obteniendo las variables para tu proyecto y configurándolas en el archivo `params.toml`. Más detalles se pueden encontrar en }}">esta página. Puedes encontrar un ejemplo del archivo que Firebase proporcionará abajo, observa los parámetros dentro del objeto FirebaseConfig. + +```js +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY", + authDomain: "blowfish-21fff.firebaseapp.com", + projectId: "blowfish-21fff", + storageBucket: "blowfish-21fff.appspot.com", + messagingSenderId: "60108104191", + appId: "1:60108104191:web:039842ebe1370698b487ca", + measurementId: "G-PEDMYR1V0K" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +``` + +5. Configurar Firestore - Selecciona Build y abre Firestore. Crea una nueva base de datos y elige iniciar en modo producción. Selecciona la ubicación del servidor y espera. Una vez iniciado, necesitas configurar las reglas. Simplemente copia y pega el archivo de abajo y presiona publicar. +```txt +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} +``` +6. Habilitar autorización anónima - Selecciona Build y abre Authentication. Selecciona comenzar, haz clic en Anónimo y actívalo, guarda. +7. Disfruta - ahora puedes activar vistas y likes en Blowfish para todos (o específicos) artículos. diff --git a/exampleSite/content/docs/firebase-views/index.fr.md b/exampleSite/content/docs/firebase-views/index.fr.md new file mode 100644 index 00000000..fd4a1799 --- /dev/null +++ b/exampleSite/content/docs/firebase-views/index.fr.md @@ -0,0 +1,55 @@ +--- +title: "Firebase : Vues & Likes" +weight: 15 +draft: false +description: "Apprenez à intégrer Firebase et obtenir des données dynamiques pour les vues et les likes." +slug: "firebase-views" +tags: ["firebase", "vues", "likes"] +series: ["Documentation"] +series_order: 15 +--- + +Afin de pouvoir prendre en charge les données dynamiques sur votre site web, nous avons ajouté le support pour intégrer Firebase. Cela vous permettra d'utiliser la fonctionnalité de vues sur les listes et les articles. + +1. Allez sur le site web Firebase et créez un compte gratuitement +2. Créez un nouveau projet +3. Sélectionnez l'emplacement des analytics +4. Configurez Firebase dans Blowfish en obtenant les variables pour votre projet et en les définissant dans le fichier `params.toml`. Plus de détails peuvent être trouvés sur }}">cette page. Vous pouvez trouver un exemple du fichier que Firebase fournira ci-dessous, notez les paramètres dans l'objet FirebaseConfig. + +```js +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY", + authDomain: "blowfish-21fff.firebaseapp.com", + projectId: "blowfish-21fff", + storageBucket: "blowfish-21fff.appspot.com", + messagingSenderId: "60108104191", + appId: "1:60108104191:web:039842ebe1370698b487ca", + measurementId: "G-PEDMYR1V0K" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +``` + +5. Configurer Firestore - Sélectionnez Build et ouvrez Firestore. Créez une nouvelle base de données et choisissez de démarrer en mode production. Sélectionnez l'emplacement du serveur et attendez. Une fois démarré, vous devez configurer les règles. Copiez et collez simplement le fichier ci-dessous et appuyez sur publier. +```txt +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} +``` +6. Activer l'autorisation anonyme - Sélectionnez Build et ouvrez Authentication. Sélectionnez commencer, cliquez sur Anonyme et activez-le, enregistrez. +7. Profitez - vous pouvez maintenant activer les vues et les likes sur Blowfish pour tous (ou certains) articles. diff --git a/exampleSite/content/docs/firebase-views/index.pt-br.md b/exampleSite/content/docs/firebase-views/index.pt-br.md new file mode 100644 index 00000000..dbac7620 --- /dev/null +++ b/exampleSite/content/docs/firebase-views/index.pt-br.md @@ -0,0 +1,55 @@ +--- +title: "Firebase: Visualizações & Curtidas" +weight: 15 +draft: false +description: "Aprenda como integrar o Firebase e obter dados dinâmicos para visualizações e curtidas." +slug: "firebase-views" +tags: ["firebase", "visualizações", "curtidas"] +series: ["Documentação"] +series_order: 15 +--- + +Para poder suportar dados dinâmicos em seu site, adicionamos suporte para integrar o Firebase. Isso permitirá que você use o recurso de visualizações em listas e posts. + +1. Vá para o site do Firebase e crie uma conta gratuitamente +2. Crie um novo projeto +3. Selecione a localização do analytics +4. Configure o Firebase no Blowfish obtendo as variáveis do seu projeto e configurando-as no arquivo `params.toml`. Mais detalhes podem ser encontrados }}">nesta página. Você pode encontrar um exemplo do arquivo que o Firebase fornecerá abaixo, observe os parâmetros dentro do objeto FirebaseConfig. + +```js +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY", + authDomain: "blowfish-21fff.firebaseapp.com", + projectId: "blowfish-21fff", + storageBucket: "blowfish-21fff.appspot.com", + messagingSenderId: "60108104191", + appId: "1:60108104191:web:039842ebe1370698b487ca", + measurementId: "G-PEDMYR1V0K" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +``` + +5. Configurar Firestore - Selecione Build e abra Firestore. Crie um novo banco de dados e escolha iniciar no modo produção. Selecione a localização do servidor e aguarde. Uma vez iniciado, você precisa configurar as regras. Basta copiar e colar o arquivo abaixo e pressionar publicar. +```txt +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} +``` +6. Habilitar autorização anônima - Selecione Build e abra Authentication. Selecione começar, clique em Anônimo e ative, salve. +7. Aproveite - agora você pode ativar visualizações e curtidas no Blowfish para todos (ou específicos) artigos. diff --git a/exampleSite/content/docs/firebase-views/index.pt-pt.md b/exampleSite/content/docs/firebase-views/index.pt-pt.md new file mode 100644 index 00000000..ea22e5e6 --- /dev/null +++ b/exampleSite/content/docs/firebase-views/index.pt-pt.md @@ -0,0 +1,55 @@ +--- +title: "Firebase: Visualizações & Gostos" +weight: 15 +draft: false +description: "Aprenda como integrar o Firebase e obter dados dinâmicos para visualizações e gostos." +slug: "firebase-views" +tags: ["firebase", "visualizações", "gostos"] +series: ["Documentação"] +series_order: 15 +--- + +Para poder suportar dados dinâmicos no seu website, adicionámos suporte para integrar o Firebase. Isto permitirá utilizar a funcionalidade de visualizações em listas e publicações. + +1. Vá ao website do Firebase e crie uma conta gratuitamente +2. Crie um novo projeto +3. Selecione a localização do analytics +4. Configure o Firebase no Blowfish obtendo as variáveis do seu projeto e configurando-as no ficheiro `params.toml`. Mais detalhes podem ser encontrados }}">nesta página. Pode encontrar um exemplo do ficheiro que o Firebase fornecerá abaixo, observe os parâmetros dentro do objeto FirebaseConfig. + +```js +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY", + authDomain: "blowfish-21fff.firebaseapp.com", + projectId: "blowfish-21fff", + storageBucket: "blowfish-21fff.appspot.com", + messagingSenderId: "60108104191", + appId: "1:60108104191:web:039842ebe1370698b487ca", + measurementId: "G-PEDMYR1V0K" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +``` + +5. Configurar Firestore - Selecione Build e abra Firestore. Crie uma nova base de dados e escolha iniciar no modo produção. Selecione a localização do servidor e aguarde. Assim que estiver iniciado, precisa de configurar as regras. Basta copiar e colar o ficheiro abaixo e premir publicar. +```txt +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} +``` +6. Ativar autorização anónima - Selecione Build e abra Authentication. Selecione começar, clique em Anónimo e ative, guarde. +7. Aproveite - agora pode ativar visualizações e gostos no Blowfish para todos (ou específicos) artigos. diff --git a/exampleSite/content/docs/front-matter/index.de.md b/exampleSite/content/docs/front-matter/index.de.md new file mode 100644 index 00000000..b5840cbc --- /dev/null +++ b/exampleSite/content/docs/front-matter/index.de.md @@ -0,0 +1,60 @@ +--- +title: "Front Matter" +weight: 7 +draft: false +description: "Alle in Blowfish verfügbaren Front-Matter-Variablen." +slug: "front-matter" +tags: ["front matter", "konfiguration", "dokumentation"] +series: ["Dokumentation"] +series_order: 7 +--- + +Zusätzlich zu den [Standard-Hugo-Front-Matter-Parametern](https://gohugo.io/content-management/front-matter/#front-matter-variables) fügt Blowfish eine Reihe zusätzlicher Optionen hinzu, um die Darstellung einzelner Artikel anzupassen. Alle verfügbaren Theme-Front-Matter-Parameter sind unten aufgelistet. + +Die Standardwerte der Front-Matter-Parameter werden von der [Basiskonfiguration]({{< ref "configuration" >}}) des Themes geerbt, sodass Sie diese Parameter nur in Ihrem Front Matter angeben müssen, wenn Sie die Standardwerte überschreiben möchten. + + +| Name | Standard | Beschreibung | +| --- | --- | --- | +| `title` | _Nicht gesetzt_ | Der Name des Artikels. | +| `description` | _Nicht gesetzt_ | Die Textbeschreibung für den Artikel. Wird in den HTML-Metadaten verwendet. | +| `externalUrl` | _Nicht gesetzt_ | Wenn dieser Artikel auf einer Drittanbieter-Website veröffentlicht wird, die URL zu diesem Artikel. Die Angabe einer URL verhindert die Generierung einer Inhaltsseite und alle Verweise auf diesen Artikel verlinken direkt zur Drittanbieter-Website. | +| `editURL` | `article.editURL` | Wenn `showEdit` aktiv ist, die URL für den Bearbeitungslink. | +| `editAppendPath` | `article.editAppendPath` | Wenn `showEdit` aktiv ist, ob der Pfad zum aktuellen Artikel an die unter `editURL` gesetzte URL angehängt werden soll. | +| `groupByYear` | `list.groupByYear` | Ob Artikel auf Listenseiten nach Jahr gruppiert werden. | +| `menu` | _Nicht gesetzt_ | Wenn ein Wert angegeben wird, erscheint ein Link zu diesem Artikel in den genannten Menüs. Gültige Werte sind `main` oder `footer`. | +| `robots` | _Nicht gesetzt_ | String, der angibt, wie Robots diesen Artikel behandeln sollen. Wenn gesetzt, wird er im Seitenkopf ausgegeben. Siehe [Googles Dokumentation](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) für gültige Werte. | +| `sharingLinks` | `article.sharingLinks` | Welche Teilen-Links am Ende dieses Artikels angezeigt werden. Wenn nicht angegeben oder auf `false` gesetzt, werden keine Links angezeigt. | +| `showAuthor` | `article.showAuthor` | Ob die Autorenbox für den Standardautor in der Artikelfußzeile angezeigt wird. | +| `showAuthorBottom` | `article.showAuthorBottom` | Autorenboxen werden am unteren Rand jeder Seite statt oben angezeigt. | +| `authors` | _Nicht gesetzt_ | Array von Werten für Autoren, überschreibt bei Angabe die `showAuthor`-Einstellungen für Seite oder Website. Wird für die Funktion mehrerer Autoren verwendet, siehe [diese Seite]({{< ref "multi-author" >}}) für Details zur Konfiguration. | +| `showAuthorsBadges` | `article.showAuthorsBadges` | Ob die `authors`-Taxonomien im Artikel- oder Listen-Header angezeigt werden. Dies erfordert die Einrichtung von `multiple authors` und der `authors`-Taxonomie. Siehe [diese Seite]({{< ref "multi-author" >}}) für Details. | +| `featureimage` | _Nicht gesetzt_ | Link zum Feature-Bild | +| `featureimagecaption` | _Nicht gesetzt_ | Bildunterschrift für das Feature-Bild. Wird nur im heroStyle `big` angezeigt | +| `showHero` | `article.showHero` | Ob das Thumbnail-Bild als Hero-Bild innerhalb der Artikelseite angezeigt wird. | +| `heroStyle` | `article.heroStyle` | Stil zur Anzeige des Hero-Bildes, gültige Optionen sind: `basic`, `big`, `background`, `thumbAndBackground`. | +| `imagePosition` | _Nicht gesetzt_ | Setzt die Position des Feature-Bildes mit dem `object-position`-Attribut. Gültige Werte sind wie in der [MDN-Dokumentation](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it) angegeben. | +| `showBreadcrumbs` | `article.showBreadcrumbs` oder `list.showBreadcrumbs` | Ob Breadcrumbs im Artikel- oder Listen-Header angezeigt werden. | +| `showDate` | `article.showDate` | Ob das Artikeldatum angezeigt wird. Das Datum wird mit dem Parameter `date` gesetzt. | +| `showDateUpdated` | `article.showDateUpdated` | Ob das Datum angezeigt wird, an dem der Artikel aktualisiert wurde. Das Datum wird mit dem Parameter `lastmod` gesetzt. | +| `showEdit` | `article.showEdit` | Ob der Link zum Bearbeiten des Artikelinhalts angezeigt werden soll. | +| `showHeadingAnchors` | `article.showHeadingAnchors` | Ob Überschriften-Anker-Links neben Überschriften in diesem Artikel angezeigt werden. | +| `showPagination` | `article.showPagination` | Ob die Links zum nächsten/vorherigen Artikel in der Artikelfußzeile angezeigt werden. | +| `invertPagination` | `article.invertPagination` | Ob die Richtung der Links zum nächsten/vorherigen Artikel umgekehrt werden soll. | +| `showReadingTime` | `article.showReadingTime` | Ob die Artikel-Lesezeit angezeigt wird. | +| `showTaxonomies` | `article.showTaxonomies` | Ob die mit diesem Artikel verbundenen Taxonomien angezeigt werden. | +| `showTableOfContents` | `article.showTableOfContents` | Ob das Inhaltsverzeichnis bei diesem Artikel angezeigt wird. | +| `showWordCount` | `article.showWordCount` | Ob die Artikel-Wortanzahl angezeigt wird. | +| `showComments` | `article.showComments` | Ob das [Kommentar-Partial]({{< ref "partials#comments" >}}) nach der Artikelfußzeile eingefügt wird. | +| `showSummary` | `list.showSummary` | Ob die Artikelzusammenfassung auf Listenseiten angezeigt werden soll. | +| `showViews` | `article.showViews` | Ob Artikelaufrufe in Listen und Detailansicht angezeigt werden sollen. Dies erfordert eine Firebase-Integration. Siehe [diese Seite]({{< ref "firebase-views" >}}) für eine Anleitung zur Firebase-Integration. | +| `showLikes` | `article.showLikes` | Ob Artikel-Likes in Listen und Detailansicht angezeigt werden sollen. Dies erfordert eine Firebase-Integration. Siehe [diese Seite]({{< ref "firebase-views" >}}) für eine Anleitung zur Firebase-Integration. | +| `seriesOpened` | `article.seriesOpened` | Ob das Serien-Modul standardmäßig geöffnet angezeigt wird oder nicht. | +| `series` | _Nicht gesetzt_ | Array von Serien, zu denen der Artikel gehört, wir empfehlen nur eine Serie pro Artikel. | +| `series_order` | _Nicht gesetzt_ | Nummer des Artikels innerhalb der Serie. | +| `summary` | Automatisch generiert mit `summaryLength` (siehe [Website-Konfiguration]({{< ref "configuration#site-configuration" >}})) | Wenn `showSummary` aktiviert ist, ist dies der Markdown-String, der als Zusammenfassung für diesen Artikel verwendet wird. | +| `xml` | `true` außer wenn durch `sitemap.excludedKinds` ausgeschlossen | Ob dieser Artikel in der generierten `/sitemap.xml`-Datei enthalten ist. | +| `excludeFromSearch` | `false` | Ob dieser Artikel von der Sitemap und dem Suchindex ausgeschlossen werden soll. Wenn `true`, erscheint die Seite nicht in `sitemap.xml` oder `index.json`. | +| `layoutBackgroundBlur` | `true` | Lässt das Hintergrundbild im background heroStyle beim Scrollen verschwimmen | +| `layoutBackgroundHeaderSpace` | `true` | Fügt Abstand zwischen Header und Body hinzu. | + diff --git a/exampleSite/content/docs/front-matter/index.es.md b/exampleSite/content/docs/front-matter/index.es.md new file mode 100644 index 00000000..04e7ab04 --- /dev/null +++ b/exampleSite/content/docs/front-matter/index.es.md @@ -0,0 +1,60 @@ +--- +title: "Front Matter" +weight: 7 +draft: false +description: "Todas las variables de front matter disponibles en Blowfish." +slug: "front-matter" +tags: ["front matter", "configuración", "documentación"] +series: ["Documentación"] +series_order: 7 +--- + +Además de los [parámetros de front matter predeterminados de Hugo](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish añade varias opciones adicionales para personalizar la presentación de artículos individuales. Todos los parámetros de front matter del tema disponibles se enumeran a continuación. + +Los valores predeterminados de los parámetros de front matter se heredan de la [configuración base]({{< ref "configuration" >}}) del tema, por lo que solo necesitas especificar estos parámetros en tu front matter cuando quieras anular el valor predeterminado. + + +| Nombre | Predeterminado | Descripción | +| --- | --- | --- | +| `title` | _No establecido_ | El nombre del artículo. | +| `description` | _No establecido_ | La descripción de texto del artículo. Se utiliza en los metadatos HTML. | +| `externalUrl` | _No establecido_ | Si este artículo está publicado en un sitio web de terceros, la URL a este artículo. Proporcionar una URL evitará que se genere una página de contenido y cualquier referencia a este artículo enlazará directamente al sitio web de terceros. | +| `editURL` | `article.editURL` | Cuando `showEdit` está activo, la URL para el enlace de edición. | +| `editAppendPath` | `article.editAppendPath` | Cuando `showEdit` está activo, si la ruta al artículo actual debe añadirse a la URL establecida en `editURL`. | +| `groupByYear` | `list.groupByYear` | Si los artículos se agrupan por año en las páginas de lista. | +| `menu` | _No establecido_ | Cuando se proporciona un valor, aparecerá un enlace a este artículo en los menús nombrados. Los valores válidos son `main` o `footer`. | +| `robots` | _No establecido_ | Cadena que indica cómo los robots deben manejar este artículo. Si se establece, se mostrará en el encabezado de la página. Consulta la [documentación de Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) para valores válidos. | +| `sharingLinks` | `article.sharingLinks` | Qué enlaces de compartir mostrar al final de este artículo. Cuando no se proporciona o se establece en `false`, no se mostrarán enlaces. | +| `showAuthor` | `article.showAuthor` | Si la caja del autor para el autor predeterminado se muestra en el pie de página del artículo. | +| `showAuthorBottom` | `article.showAuthorBottom` | Las cajas de autor se muestran en la parte inferior de cada página en lugar de arriba. | +| `authors` | _No establecido_ | Array de valores para autores, si se establece anula la configuración de `showAuthor` para la página o el sitio. Se usa en la función de múltiples autores, consulta [esta página]({{< ref "multi-author" >}}) para más detalles sobre cómo configurar esa función. | +| `showAuthorsBadges` | `article.showAuthorsBadges` | Si las taxonomías de `authors` se muestran en el encabezado del artículo o lista. Esto requiere la configuración de `multiple authors` y la taxonomía `authors`. Consulta [esta página]({{< ref "multi-author" >}}) para más detalles. | +| `featureimage` | _No establecido_ | Enlace para la imagen destacada | +| `featureimagecaption` | _No establecido_ | Leyenda para la imagen destacada. Solo se muestra en heroStyle `big` | +| `showHero` | `article.showHero` | Si la imagen en miniatura se mostrará como imagen hero dentro de la página del artículo. | +| `heroStyle` | `article.heroStyle` | Estilo para mostrar la imagen hero, las opciones válidas son: `basic`, `big`, `background`, `thumbAndBackground`. | +| `imagePosition` | _No establecido_ | Establece la posición de la imagen destacada usando el atributo `object-position`. Los valores válidos son los especificados en la [documentación MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). | +| `showBreadcrumbs` | `article.showBreadcrumbs` o `list.showBreadcrumbs` | Si las migas de pan se muestran en el encabezado del artículo o lista. | +| `showDate` | `article.showDate` | Si se muestra la fecha del artículo. La fecha se establece usando el parámetro `date`. | +| `showDateUpdated` | `article.showDateUpdated` | Si se muestra la fecha en que se actualizó el artículo. La fecha se establece usando el parámetro `lastmod`. | +| `showEdit` | `article.showEdit` | Si se debe mostrar el enlace para editar el contenido del artículo. | +| `showHeadingAnchors` | `article.showHeadingAnchors` | Si los enlaces de anclaje de encabezados se muestran junto a los encabezados en este artículo. | +| `showPagination` | `article.showPagination` | Si los enlaces al artículo siguiente/anterior se muestran en el pie de página del artículo. | +| `invertPagination` | `article.invertPagination` | Si se debe invertir la dirección de los enlaces al artículo siguiente/anterior. | +| `showReadingTime` | `article.showReadingTime` | Si se muestra el tiempo de lectura del artículo. | +| `showTaxonomies` | `article.showTaxonomies` | Si se muestran las taxonomías relacionadas con este artículo. | +| `showTableOfContents` | `article.showTableOfContents` | Si se muestra la tabla de contenidos en este artículo. | +| `showWordCount` | `article.showWordCount` | Si se muestra el recuento de palabras del artículo. | +| `showComments` | `article.showComments` | Si el [partial de comentarios]({{< ref "partials#comments" >}}) se incluye después del pie de página del artículo. | +| `showSummary` | `list.showSummary` | Si el resumen del artículo debe mostrarse en las páginas de lista. | +| `showViews` | `article.showViews` | Si las vistas del artículo deben mostrarse en listas y vista detallada. Esto requiere una integración con Firebase. Consulta [esta página]({{< ref "firebase-views" >}}) para una guía sobre cómo integrar Firebase. | +| `showLikes` | `article.showLikes` | Si los likes del artículo deben mostrarse en listas y vista detallada. Esto requiere una integración con Firebase. Consulta [esta página]({{< ref "firebase-views" >}}) para una guía sobre cómo integrar Firebase. | +| `seriesOpened` | `article.seriesOpened` | Si el módulo de serie se mostrará abierto por defecto o no. | +| `series` | _No establecido_ | Array de series a las que pertenece el artículo, recomendamos usar solo una serie por artículo. | +| `series_order` | _No establecido_ | Número del artículo dentro de la serie. | +| `summary` | Generado automáticamente usando `summaryLength` (ver [configuración del sitio]({{< ref "configuration#site-configuration" >}})) | Cuando `showSummary` está habilitado, esta es la cadena Markdown que se usará como resumen para este artículo. | +| `xml` | `true` a menos que sea excluido por `sitemap.excludedKinds` | Si este artículo se incluye en el archivo `/sitemap.xml` generado. | +| `excludeFromSearch` | `false` | Si este artículo debe excluirse del sitemap y el índice de búsqueda. Cuando es `true`, la página no aparecerá en `sitemap.xml` ni `index.json`. | +| `layoutBackgroundBlur` | `true` | Hace que la imagen de fondo en el heroStyle background se difumine con el desplazamiento | +| `layoutBackgroundHeaderSpace` | `true` | Añade espacio entre el encabezado y el cuerpo. | + diff --git a/exampleSite/content/docs/front-matter/index.fr.md b/exampleSite/content/docs/front-matter/index.fr.md new file mode 100644 index 00000000..84137975 --- /dev/null +++ b/exampleSite/content/docs/front-matter/index.fr.md @@ -0,0 +1,60 @@ +--- +title: "Front Matter" +weight: 7 +draft: false +description: "Toutes les variables front matter disponibles dans Blowfish." +slug: "front-matter" +tags: ["front matter", "configuration", "documentation"] +series: ["Documentation"] +series_order: 7 +--- + +En plus des [paramètres front matter Hugo par défaut](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish ajoute un certain nombre d'options supplémentaires pour personnaliser la présentation des articles individuels. Tous les paramètres front matter du thème disponibles sont listés ci-dessous. + +Les valeurs par défaut des paramètres front matter sont héritées de la [configuration de base]({{< ref "configuration" >}}) du thème, vous n'avez donc besoin de spécifier ces paramètres dans votre front matter que lorsque vous souhaitez remplacer la valeur par défaut. + + +| Nom | Défaut | Description | +| --- | --- | --- | +| `title` | _Non défini_ | Le nom de l'article. | +| `description` | _Non défini_ | La description textuelle de l'article. Elle est utilisée dans les métadonnées HTML. | +| `externalUrl` | _Non défini_ | Si cet article est publié sur un site tiers, l'URL vers cet article. Fournir une URL empêchera la génération d'une page de contenu et toutes les références à cet article pointeront directement vers le site tiers. | +| `editURL` | `article.editURL` | Lorsque `showEdit` est actif, l'URL du lien d'édition. | +| `editAppendPath` | `article.editAppendPath` | Lorsque `showEdit` est actif, si le chemin vers l'article actuel doit être ajouté à l'URL définie dans `editURL`. | +| `groupByYear` | `list.groupByYear` | Si les articles sont groupés par année sur les pages de liste. | +| `menu` | _Non défini_ | Lorsqu'une valeur est fournie, un lien vers cet article apparaîtra dans les menus nommés. Les valeurs valides sont `main` ou `footer`. | +| `robots` | _Non défini_ | Chaîne indiquant comment les robots doivent traiter cet article. Si défini, il sera affiché dans l'en-tête de la page. Consultez [la documentation Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) pour les valeurs valides. | +| `sharingLinks` | `article.sharingLinks` | Quels liens de partage afficher à la fin de cet article. Lorsque non fourni ou défini sur `false`, aucun lien ne sera affiché. | +| `showAuthor` | `article.showAuthor` | Si la boîte auteur pour l'auteur par défaut est affichée dans le pied de page de l'article. | +| `showAuthorBottom` | `article.showAuthorBottom` | Les boîtes auteur sont affichées en bas de chaque page au lieu du haut. | +| `authors` | _Non défini_ | Tableau de valeurs pour les auteurs, si défini, il remplace les paramètres `showAuthor` pour la page ou le site. Utilisé pour la fonctionnalité de multiples auteurs, consultez [cette page]({{< ref "multi-author" >}}) pour plus de détails sur la configuration. | +| `showAuthorsBadges` | `article.showAuthorsBadges` | Si les taxonomies `authors` sont affichées dans l'en-tête de l'article ou de la liste. Cela nécessite la configuration de `multiple authors` et de la taxonomie `authors`. Consultez [cette page]({{< ref "multi-author" >}}) pour plus de détails. | +| `featureimage` | _Non défini_ | Lien pour l'image mise en avant | +| `featureimagecaption` | _Non défini_ | Légende pour l'image mise en avant. Affichée uniquement dans le heroStyle `big` | +| `showHero` | `article.showHero` | Si l'image vignette sera affichée comme image hero dans la page de l'article. | +| `heroStyle` | `article.heroStyle` | Style d'affichage de l'image hero, les options valides sont : `basic`, `big`, `background`, `thumbAndBackground`. | +| `imagePosition` | _Non défini_ | Définit la position de l'image mise en avant en utilisant l'attribut `object-position`. Les valeurs valides sont comme spécifié dans la [documentation MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). | +| `showBreadcrumbs` | `article.showBreadcrumbs` ou `list.showBreadcrumbs` | Si les fils d'Ariane sont affichés dans l'en-tête de l'article ou de la liste. | +| `showDate` | `article.showDate` | Si la date de l'article est affichée. La date est définie avec le paramètre `date`. | +| `showDateUpdated` | `article.showDateUpdated` | Si la date de mise à jour de l'article est affichée. La date est définie avec le paramètre `lastmod`. | +| `showEdit` | `article.showEdit` | Si le lien pour éditer le contenu de l'article doit être affiché. | +| `showHeadingAnchors` | `article.showHeadingAnchors` | Si les liens d'ancrage des titres sont affichés à côté des titres dans cet article. | +| `showPagination` | `article.showPagination` | Si les liens article suivant/précédent sont affichés dans le pied de page de l'article. | +| `invertPagination` | `article.invertPagination` | Si la direction des liens article suivant/précédent doit être inversée. | +| `showReadingTime` | `article.showReadingTime` | Si le temps de lecture de l'article est affiché. | +| `showTaxonomies` | `article.showTaxonomies` | Si les taxonomies liées à cet article sont affichées. | +| `showTableOfContents` | `article.showTableOfContents` | Si la table des matières est affichée sur cet article. | +| `showWordCount` | `article.showWordCount` | Si le nombre de mots de l'article est affiché. | +| `showComments` | `article.showComments` | Si le [partial commentaires]({{< ref "partials#comments" >}}) est inclus après le pied de page de l'article. | +| `showSummary` | `list.showSummary` | Si le résumé de l'article doit être affiché sur les pages de liste. | +| `showViews` | `article.showViews` | Si les vues de l'article doivent être affichées dans les listes et la vue détaillée. Cela nécessite une intégration Firebase. Consultez [cette page]({{< ref "firebase-views" >}}) pour un guide sur l'intégration de Firebase. | +| `showLikes` | `article.showLikes` | Si les likes de l'article doivent être affichés dans les listes et la vue détaillée. Cela nécessite une intégration Firebase. Consultez [cette page]({{< ref "firebase-views" >}}) pour un guide sur l'intégration de Firebase. | +| `seriesOpened` | `article.seriesOpened` | Si le module de série sera affiché ouvert par défaut ou non. | +| `series` | _Non défini_ | Tableau des séries auxquelles l'article appartient, nous recommandons d'utiliser une seule série par article. | +| `series_order` | _Non défini_ | Numéro de l'article dans la série. | +| `summary` | Généré automatiquement avec `summaryLength` (voir [configuration du site]({{< ref "configuration#site-configuration" >}})) | Lorsque `showSummary` est activé, c'est la chaîne Markdown à utiliser comme résumé pour cet article. | +| `xml` | `true` sauf exclusion par `sitemap.excludedKinds` | Si cet article est inclus dans le fichier `/sitemap.xml` généré. | +| `excludeFromSearch` | `false` | Si cet article doit être exclu du sitemap et de l'index de recherche. Lorsque `true`, la page n'apparaîtra pas dans `sitemap.xml` ou `index.json`. | +| `layoutBackgroundBlur` | `true` | Fait flouter l'image d'arrière-plan dans le heroStyle background avec le défilement | +| `layoutBackgroundHeaderSpace` | `true` | Ajoute de l'espace entre l'en-tête et le corps. | + diff --git a/exampleSite/content/docs/front-matter/index.pt-br.md b/exampleSite/content/docs/front-matter/index.pt-br.md new file mode 100644 index 00000000..896730dd --- /dev/null +++ b/exampleSite/content/docs/front-matter/index.pt-br.md @@ -0,0 +1,60 @@ +--- +title: "Front Matter" +weight: 7 +draft: false +description: "Todas as variáveis de front matter disponíveis no Blowfish." +slug: "front-matter" +tags: ["front matter", "configuração", "documentação"] +series: ["Documentação"] +series_order: 7 +--- + +Além dos [parâmetros de front matter padrão do Hugo](https://gohugo.io/content-management/front-matter/#front-matter-variables), o Blowfish adiciona várias opções adicionais para personalizar a apresentação de artigos individuais. Todos os parâmetros de front matter do tema disponíveis estão listados abaixo. + +Os valores padrão dos parâmetros de front matter são herdados da [configuração base]({{< ref "configuration" >}}) do tema, então você só precisa especificar esses parâmetros no seu front matter quando quiser substituir o padrão. + + +| Nome | Padrão | Descrição | +| --- | --- | --- | +| `title` | _Não definido_ | O nome do artigo. | +| `description` | _Não definido_ | A descrição de texto do artigo. É usada nos metadados HTML. | +| `externalUrl` | _Não definido_ | Se este artigo está publicado em um site de terceiros, a URL para este artigo. Fornecer uma URL impedirá a geração de uma página de conteúdo e quaisquer referências a este artigo vincularão diretamente ao site de terceiros. | +| `editURL` | `article.editURL` | Quando `showEdit` está ativo, a URL para o link de edição. | +| `editAppendPath` | `article.editAppendPath` | Quando `showEdit` está ativo, se o caminho para o artigo atual deve ser anexado à URL definida em `editURL`. | +| `groupByYear` | `list.groupByYear` | Se os artigos são agrupados por ano nas páginas de lista. | +| `menu` | _Não definido_ | Quando um valor é fornecido, um link para este artigo aparecerá nos menus nomeados. Valores válidos são `main` ou `footer`. | +| `robots` | _Não definido_ | String que indica como os robôs devem tratar este artigo. Se definido, será exibido no cabeçalho da página. Consulte a [documentação do Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) para valores válidos. | +| `sharingLinks` | `article.sharingLinks` | Quais links de compartilhamento exibir no final deste artigo. Quando não fornecido ou definido como `false`, nenhum link será exibido. | +| `showAuthor` | `article.showAuthor` | Se a caixa do autor para o autor padrão é exibida no rodapé do artigo. | +| `showAuthorBottom` | `article.showAuthorBottom` | As caixas de autor são exibidas na parte inferior de cada página em vez do topo. | +| `authors` | _Não definido_ | Array de valores para autores, se definido substitui as configurações de `showAuthor` para a página ou site. Usado no recurso de múltiplos autores, consulte [esta página]({{< ref "multi-author" >}}) para mais detalhes sobre como configurar esse recurso. | +| `showAuthorsBadges` | `article.showAuthorsBadges` | Se as taxonomias de `authors` são exibidas no cabeçalho do artigo ou lista. Isso requer a configuração de `multiple authors` e a taxonomia `authors`. Consulte [esta página]({{< ref "multi-author" >}}) para mais detalhes. | +| `featureimage` | _Não definido_ | Link para a imagem de destaque | +| `featureimagecaption` | _Não definido_ | Legenda para a imagem de destaque. Exibida apenas no heroStyle `big` | +| `showHero` | `article.showHero` | Se a imagem em miniatura será mostrada como imagem hero dentro da página do artigo. | +| `heroStyle` | `article.heroStyle` | Estilo para exibir a imagem hero, opções válidas são: `basic`, `big`, `background`, `thumbAndBackground`. | +| `imagePosition` | _Não definido_ | Define a posição da imagem de destaque usando o atributo `object-position`. Valores válidos são como especificado na [documentação MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). | +| `showBreadcrumbs` | `article.showBreadcrumbs` ou `list.showBreadcrumbs` | Se as migalhas de pão são exibidas no cabeçalho do artigo ou lista. | +| `showDate` | `article.showDate` | Se a data do artigo é exibida. A data é definida usando o parâmetro `date`. | +| `showDateUpdated` | `article.showDateUpdated` | Se a data em que o artigo foi atualizado é exibida. A data é definida usando o parâmetro `lastmod`. | +| `showEdit` | `article.showEdit` | Se o link para editar o conteúdo do artigo deve ser exibido. | +| `showHeadingAnchors` | `article.showHeadingAnchors` | Se os links de âncora de cabeçalho são exibidos ao lado dos cabeçalhos neste artigo. | +| `showPagination` | `article.showPagination` | Se os links do artigo anterior/próximo são exibidos no rodapé do artigo. | +| `invertPagination` | `article.invertPagination` | Se a direção dos links do artigo anterior/próximo deve ser invertida. | +| `showReadingTime` | `article.showReadingTime` | Se o tempo de leitura do artigo é exibido. | +| `showTaxonomies` | `article.showTaxonomies` | Se as taxonomias relacionadas a este artigo são exibidas. | +| `showTableOfContents` | `article.showTableOfContents` | Se o índice é exibido neste artigo. | +| `showWordCount` | `article.showWordCount` | Se a contagem de palavras do artigo é exibida. | +| `showComments` | `article.showComments` | Se o [partial de comentários]({{< ref "partials#comments" >}}) é incluído após o rodapé do artigo. | +| `showSummary` | `list.showSummary` | Se o resumo do artigo deve ser exibido nas páginas de lista. | +| `showViews` | `article.showViews` | Se as visualizações do artigo devem ser exibidas em listas e visualização detalhada. Isso requer uma integração com Firebase. Consulte [esta página]({{< ref "firebase-views" >}}) para um guia sobre como integrar o Firebase. | +| `showLikes` | `article.showLikes` | Se os likes do artigo devem ser exibidos em listas e visualização detalhada. Isso requer uma integração com Firebase. Consulte [esta página]({{< ref "firebase-views" >}}) para um guia sobre como integrar o Firebase. | +| `seriesOpened` | `article.seriesOpened` | Se o módulo de série será exibido aberto por padrão ou não. | +| `series` | _Não definido_ | Array de séries às quais o artigo pertence, recomendamos usar apenas uma série por artigo. | +| `series_order` | _Não definido_ | Número do artigo dentro da série. | +| `summary` | Gerado automaticamente usando `summaryLength` (veja [configuração do site]({{< ref "configuration#site-configuration" >}})) | Quando `showSummary` está habilitado, esta é a string Markdown a ser usada como resumo para este artigo. | +| `xml` | `true` a menos que excluído por `sitemap.excludedKinds` | Se este artigo é incluído no arquivo `/sitemap.xml` gerado. | +| `excludeFromSearch` | `false` | Se este artigo deve ser excluído do sitemap e índice de pesquisa. Quando `true`, a página não aparecerá em `sitemap.xml` ou `index.json`. | +| `layoutBackgroundBlur` | `true` | Faz a imagem de fundo no heroStyle background desfocar com a rolagem | +| `layoutBackgroundHeaderSpace` | `true` | Adiciona espaço entre o cabeçalho e o corpo. | + diff --git a/exampleSite/content/docs/front-matter/index.pt-pt.md b/exampleSite/content/docs/front-matter/index.pt-pt.md new file mode 100644 index 00000000..10110da4 --- /dev/null +++ b/exampleSite/content/docs/front-matter/index.pt-pt.md @@ -0,0 +1,60 @@ +--- +title: "Front Matter" +weight: 7 +draft: false +description: "Todas as variáveis de front matter disponíveis no Blowfish." +slug: "front-matter" +tags: ["front matter", "configuração", "documentação"] +series: ["Documentação"] +series_order: 7 +--- + +Além dos [parâmetros de front matter padrão do Hugo](https://gohugo.io/content-management/front-matter/#front-matter-variables), o Blowfish adiciona várias opções adicionais para personalizar a apresentação de artigos individuais. Todos os parâmetros de front matter do tema disponíveis estão listados abaixo. + +Os valores predefinidos dos parâmetros de front matter são herdados da [configuração base]({{< ref "configuration" >}}) do tema, pelo que só precisa de especificar estes parâmetros no seu front matter quando quiser substituir a predefinição. + + +| Nome | Predefinição | Descrição | +| --- | --- | --- | +| `title` | _Não definido_ | O nome do artigo. | +| `description` | _Não definido_ | A descrição de texto do artigo. É utilizada nos metadados HTML. | +| `externalUrl` | _Não definido_ | Se este artigo está publicado num site de terceiros, o URL para este artigo. Fornecer um URL impedirá a geração de uma página de conteúdo e quaisquer referências a este artigo vincularão diretamente ao site de terceiros. | +| `editURL` | `article.editURL` | Quando `showEdit` está ativo, o URL para a ligação de edição. | +| `editAppendPath` | `article.editAppendPath` | Quando `showEdit` está ativo, se o caminho para o artigo atual deve ser anexado ao URL definido em `editURL`. | +| `groupByYear` | `list.groupByYear` | Se os artigos são agrupados por ano nas páginas de lista. | +| `menu` | _Não definido_ | Quando um valor é fornecido, uma ligação para este artigo aparecerá nos menus nomeados. Valores válidos são `main` ou `footer`. | +| `robots` | _Não definido_ | String que indica como os robôs devem tratar este artigo. Se definido, será apresentado no cabeçalho da página. Consulte a [documentação do Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) para valores válidos. | +| `sharingLinks` | `article.sharingLinks` | Quais ligações de partilha apresentar no final deste artigo. Quando não fornecido ou definido como `false`, nenhuma ligação será apresentada. | +| `showAuthor` | `article.showAuthor` | Se a caixa do autor para o autor predefinido é apresentada no rodapé do artigo. | +| `showAuthorBottom` | `article.showAuthorBottom` | As caixas de autor são apresentadas na parte inferior de cada página em vez do topo. | +| `authors` | _Não definido_ | Array de valores para autores, se definido substitui as definições de `showAuthor` para a página ou site. Utilizado na funcionalidade de múltiplos autores, consulte [esta página]({{< ref "multi-author" >}}) para mais detalhes sobre como configurar essa funcionalidade. | +| `showAuthorsBadges` | `article.showAuthorsBadges` | Se as taxonomias de `authors` são apresentadas no cabeçalho do artigo ou lista. Isto requer a configuração de `multiple authors` e a taxonomia `authors`. Consulte [esta página]({{< ref "multi-author" >}}) para mais detalhes. | +| `featureimage` | _Não definido_ | Ligação para a imagem de destaque | +| `featureimagecaption` | _Não definido_ | Legenda para a imagem de destaque. Apresentada apenas no heroStyle `big` | +| `showHero` | `article.showHero` | Se a imagem em miniatura será mostrada como imagem hero dentro da página do artigo. | +| `heroStyle` | `article.heroStyle` | Estilo para apresentar a imagem hero, opções válidas são: `basic`, `big`, `background`, `thumbAndBackground`. | +| `imagePosition` | _Não definido_ | Define a posição da imagem de destaque utilizando o atributo `object-position`. Valores válidos são como especificado na [documentação MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). | +| `showBreadcrumbs` | `article.showBreadcrumbs` ou `list.showBreadcrumbs` | Se as migalhas de pão são apresentadas no cabeçalho do artigo ou lista. | +| `showDate` | `article.showDate` | Se a data do artigo é apresentada. A data é definida utilizando o parâmetro `date`. | +| `showDateUpdated` | `article.showDateUpdated` | Se a data em que o artigo foi atualizado é apresentada. A data é definida utilizando o parâmetro `lastmod`. | +| `showEdit` | `article.showEdit` | Se a ligação para editar o conteúdo do artigo deve ser apresentada. | +| `showHeadingAnchors` | `article.showHeadingAnchors` | Se as ligações de âncora de cabeçalho são apresentadas junto aos cabeçalhos neste artigo. | +| `showPagination` | `article.showPagination` | Se as ligações do artigo anterior/próximo são apresentadas no rodapé do artigo. | +| `invertPagination` | `article.invertPagination` | Se a direção das ligações do artigo anterior/próximo deve ser invertida. | +| `showReadingTime` | `article.showReadingTime` | Se o tempo de leitura do artigo é apresentado. | +| `showTaxonomies` | `article.showTaxonomies` | Se as taxonomias relacionadas com este artigo são apresentadas. | +| `showTableOfContents` | `article.showTableOfContents` | Se o índice é apresentado neste artigo. | +| `showWordCount` | `article.showWordCount` | Se a contagem de palavras do artigo é apresentada. | +| `showComments` | `article.showComments` | Se o [partial de comentários]({{< ref "partials#comments" >}}) é incluído após o rodapé do artigo. | +| `showSummary` | `list.showSummary` | Se o resumo do artigo deve ser apresentado nas páginas de lista. | +| `showViews` | `article.showViews` | Se as visualizações do artigo devem ser apresentadas em listas e visualização detalhada. Isto requer uma integração com Firebase. Consulte [esta página]({{< ref "firebase-views" >}}) para um guia sobre como integrar o Firebase. | +| `showLikes` | `article.showLikes` | Se os gostos do artigo devem ser apresentados em listas e visualização detalhada. Isto requer uma integração com Firebase. Consulte [esta página]({{< ref "firebase-views" >}}) para um guia sobre como integrar o Firebase. | +| `seriesOpened` | `article.seriesOpened` | Se o módulo de série será apresentado aberto por predefinição ou não. | +| `series` | _Não definido_ | Array de séries às quais o artigo pertence, recomendamos utilizar apenas uma série por artigo. | +| `series_order` | _Não definido_ | Número do artigo dentro da série. | +| `summary` | Gerado automaticamente utilizando `summaryLength` (veja [configuração do site]({{< ref "configuration#site-configuration" >}})) | Quando `showSummary` está ativado, esta é a string Markdown a ser utilizada como resumo para este artigo. | +| `xml` | `true` a menos que excluído por `sitemap.excludedKinds` | Se este artigo é incluído no ficheiro `/sitemap.xml` gerado. | +| `excludeFromSearch` | `false` | Se este artigo deve ser excluído do sitemap e índice de pesquisa. Quando `true`, a página não aparecerá em `sitemap.xml` ou `index.json`. | +| `layoutBackgroundBlur` | `true` | Faz a imagem de fundo no heroStyle background desfocar com a rolagem | +| `layoutBackgroundHeaderSpace` | `true` | Adiciona espaço entre o cabeçalho e o corpo. | + diff --git a/exampleSite/content/docs/getting-started/index.de.md b/exampleSite/content/docs/getting-started/index.de.md new file mode 100644 index 00000000..1c7bdda6 --- /dev/null +++ b/exampleSite/content/docs/getting-started/index.de.md @@ -0,0 +1,224 @@ +--- +title: "Erste Schritte" +weight: 3 +draft: false +description: "Alle in Blowfish verfügbaren Front-Matter-Variablen." +slug: "getting-started" +tags: ["installation", "dokumentation"] +series: ["Dokumentation"] +series_order: 3 +--- + +{{< alert >}} +Dieser Abschnitt setzt voraus, dass Sie das [Blowfish-Theme bereits installiert]({{< ref "docs/installation" >}}) haben. +{{< /alert >}} + +
+{{< alert "fire" >}} +Wir haben gerade ein CLI-Tool veröffentlicht, das Ihnen beim Einstieg mit Blowfish hilft. Es unterstützt Sie bei Installation und Konfiguration. Installieren Sie das CLI-Tool global mit: +```bash +npx blowfish-tools +``` +{{< /alert >}} + +Die mit Blowfish gelieferten Konfigurationsdateien enthalten alle möglichen Einstellungen, die das Theme erkennt. Standardmäßig sind viele davon auskommentiert, aber Sie können sie einfach einkommentieren, um eine bestimmte Funktion zu aktivieren oder zu ändern. + +## Grundkonfiguration + +Bevor Sie Inhalte erstellen, sollten Sie für eine neue Installation einige Dinge festlegen. Beginnen Sie in der Datei `hugo.toml` und setzen Sie die Parameter `baseURL` und `languageCode`. Der `languageCode` sollte auf die Hauptsprache eingestellt werden, in der Sie Ihre Inhalte verfassen werden. + +```toml +# config/_default/hugo.toml + +baseURL = "https://your_domain.com/" +languageCode = "de" +``` + +Der nächste Schritt ist die Konfiguration der Spracheinstellungen. Obwohl Blowfish mehrsprachige Setups unterstützt, konfigurieren Sie vorerst nur die Hauptsprache. + +Suchen Sie die Datei `languages.en.toml` im Konfigurationsordner. Wenn Ihre Hauptsprache Englisch ist, können Sie diese Datei so verwenden, wie sie ist. Andernfalls benennen Sie sie um, sodass sie den richtigen Sprachcode im Dateinamen enthält. Für Deutsch benennen Sie die Datei beispielsweise in `languages.de.toml` um. + +{{< alert >}} +Beachten Sie, dass der Sprachcode im Dateinamen der Sprachkonfiguration mit der Einstellung `languageCode` in `hugo.toml` übereinstimmen sollte. +{{< /alert >}} + +```toml +# config/_default/languages.de.toml + +title = "Meine tolle Website" + +[params.author] +name = "Mein Name" +image = "img/author.jpg" +headline = "Ein grundsätzlich toller Mensch" +bio = "Ein bisschen über mich" +links = [ + { twitter = "https://twitter.com/username" } +] +``` + +Die `[params.author]`-Konfiguration bestimmt, wie die Autoreninformationen auf der Website angezeigt werden. Das Bild sollte im `assets/`-Ordner der Website platziert werden. Links werden in der Reihenfolge angezeigt, in der sie aufgelistet sind. + +Wenn Sie mehr Details benötigen, werden weitere Informationen zu jeder dieser Konfigurationsoptionen im Abschnitt [Konfiguration]({{< ref "configuration" >}}) behandelt. + +## Farbschemata + +Blowfish wird mit einer Reihe von Farbschemata geliefert. Sie können die integrierten Schemata unten ausprobieren: + +{{< theme-switcher >}} + +Jedes Farbschema in Blowfish basiert auf einer Drei-Farben-Palette, die konsistent im gesamten Theme verwendet wird. Jede dieser Hauptfarben basiert auf den Zehn-Stufen-Farbpaletten, die in [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) enthalten sind. + +Obwohl dies die Standardschemata sind, können Sie auch Ihre eigenen erstellen. Weitere Details finden Sie im Abschnitt [Erweiterte Anpassung]({{< ref "advanced-customisation#colour-schemes" >}}). + +## Inhalte organisieren + +Standardmäßig zwingt Blowfish Sie nicht, einen bestimmten Inhaltstyp zu verwenden. So können Sie Ihre Inhalte nach Belieben definieren. Sie bevorzugen vielleicht _Seiten_ für eine statische Website, _Beiträge_ für einen Blog oder _Projekte_ für ein Portfolio. + +Hier ist ein kurzer Überblick über ein grundlegendes Blowfish-Projekt. Alle Inhalte werden im Ordner `content` platziert: + +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── blowfish +``` + +Es ist wichtig, ein gutes Verständnis davon zu haben, wie Hugo erwartet, dass Inhalte organisiert werden, da das Theme darauf ausgelegt ist, die Hugo-Seitenbündel voll auszunutzen. Lesen Sie unbedingt die [offizielle Hugo-Dokumentation](https://gohugo.io/content-management/organization/) für weitere Informationen. + +Blowfish ist auch flexibel, wenn es um Taxonomien geht. Einige Leute bevorzugen _Tags_ und _Kategorien_, um ihre Inhalte zu gruppieren, andere bevorzugen _Themen_. + +Hugo verwendet standardmäßig Posts, Tags und Kategorien, und das funktioniert gut, wenn das ist, was Sie möchten. Wenn Sie dies jedoch anpassen möchten, können Sie dies tun, indem Sie eine `taxonomies.toml`-Konfigurationsdatei erstellen: + +```toml +# config/_default/taxonomies.toml + +topic = "topics" +``` + +Dies ersetzt die Standard-_Tags_ und _Kategorien_ durch _Themen_. Weitere Informationen zur Benennung von Taxonomien finden Sie in der [Hugo-Taxonomie-Dokumentation](https://gohugo.io/content-management/taxonomies/). + +Wenn Sie eine neue Taxonomie erstellen, müssen Sie die Navigationslinks auf der Website anpassen, um auf die richtigen Abschnitte zu verweisen, was unten behandelt wird. + +## Menüs + +Blowfish hat zwei Menüs, die angepasst werden können, um dem Inhalt und Layout Ihrer Website zu entsprechen. Das `main`-Menü erscheint in der Kopfzeile der Website und das `footer`-Menü erscheint unten auf der Seite, direkt über dem Copyright-Hinweis. + +Beide Menüs werden in der Datei `menus.de.toml` konfiguriert. Ähnlich wie bei der Sprachkonfigurationsdatei können Sie diese Datei umbenennen und `de` durch den Sprachcode ersetzen, den Sie verwenden möchten, wenn Sie eine andere Sprache verwenden möchten. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Blog" + pageRef = "posts" + weight = 10 + +[[main]] + name = "Themen" + pageRef = "topics" + weight = 20 + +[[main]] + pre = "github" + name = "GitHub" + url = "https://github.com/nunocoracao/blowfish" + weight = 30 + +[[main]] + identifier = "github2" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 40 + +[[footer]] + name = "Datenschutz" + url = "https://external-link" +``` + +Der Parameter `name` gibt den Text an, der im Menülink verwendet wird. Sie können optional auch einen `title` angeben, der das HTML-Title-Attribut für den Link füllt. + +Der Parameter `pageRef` ermöglicht es Ihnen, einfach auf Hugo-Inhaltsseiten und Taxonomien zu verweisen. Es ist der schnellste Weg, das Menü zu konfigurieren, da Sie einfach auf jedes Hugo-Inhaltselement verweisen können und es automatisch den korrekten Link erstellt. Um auf externe URLs zu verlinken, kann der Parameter `url` verwendet werden. + +Der Parameter `pre` ermöglicht es Ihnen, ein Icon aus [Blowfishs Icon-Set]({{< ref "samples/icons" >}}) im Menüeintrag zu platzieren. Dieser Parameter kann mit dem Parameter `name` oder allein verwendet werden. Wenn Sie mehrere Menüeinträge nur mit Icons verwenden möchten, setzen Sie bitte den Parameter `identifier`, da Hugo sonst den Namenstag als ID verwendet und wahrscheinlich nicht alle Menüeinträge anzeigt. + +Menülinks werden vom niedrigsten zum höchsten `weight` sortiert und dann alphabetisch nach `name`. + +Beide Menüs sind völlig optional und können auskommentiert werden, wenn sie nicht benötigt werden. Verwenden Sie die in der Datei bereitgestellte Vorlage als Leitfaden. + +### Verschachtelte Menüs + +Das Theme unterstützt auch verschachtelte Menüs. Um sie zu verwenden, müssen Sie nur einen übergeordneten Eintrag in `menu.toml` definieren und seine Untermenüs mit dem Parameter `parent` referenzieren. Alle Eigenschaften können für Untermenüs verwendet werden. `pageRef` und `url` können auch im übergeordneten Eintrag verwendet werden. Verschachtelte Menüs sind nur im Hauptmenü verfügbar, nicht für die Fußzeile. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Übergeordnet" + weight = 20 + +[[main]] + name = "Untermenü 1" + parent = "Übergeordnet" + pageRef = "samples" + weight = 20 + +[[main]] + name = "Untermenü 2" + parent = "Übergeordnet" + pageRef = "samples" + weight = 20 + +[[main]] + name = "Untermenü 3" + parent = "Übergeordnet" + pre = "github" + pageRef = "samples" + weight = 20 +``` + +### Unternavigationsmenü + +Zusätzlich können Sie auch ein Unternavigationsmenü konfigurieren. Definieren Sie einfach neue Menüeinträge als `subnavigation` in `menus.toml`. +Dies rendert eine zweite Zeile mit Unterkategorien unter dem Hauptkopfzeilenmenü. + +```toml +# config/_default/menus.toml + +[[subnavigation]] + name = "Ein interessantes Thema" + pageRef = "tags/interesting-topic" + weight = 10 + +[[subnavigation]] + name = "Meine tolle Kategorie" + pageRef = "categories/awesome" + weight = 20 +``` + +Der Standard-`name` ist der `pageRef` in Titelschreibweise. + +## Thumbnails & Hintergründe + +Blowfish wurde so entwickelt, dass es einfach ist, visuelle Unterstützung zu Ihren Artikeln hinzuzufügen. Wenn Sie mit der Hugo-Artikelstruktur vertraut sind, müssen Sie nur eine Bilddatei (fast alle Formate werden unterstützt, aber wir empfehlen `.png` oder `.jpg`) in Ihrem Artikelordner platzieren, die mit `feature*` beginnt. Das ist alles, Blowfish kann dann das Bild sowohl als Thumbnail innerhalb Ihrer Website als auch für oEmbed-Karten auf sozialen Plattformen verwenden. + +[Hier]({{< ref "thumbnails" >}}) finden Sie auch einen Leitfaden mit mehr Informationen und ein [Beispiel]({{< ref "thumbnail_sample" >}}), wenn Sie sehen möchten, wie Sie es machen können. + +Zusätzlich unterstützt Blowfish auch Hintergrund-Heldenbilder in Artikeln und Listen. Um ein anderes Bild als das vorgestellte zu verwenden, fügen Sie eine Bilddatei hinzu, deren Name mit `background*` beginnt. + +## Detaillierte Konfiguration + +Die obigen Schritte sind die Mindestkonfiguration. Wenn Sie jetzt `hugo server` ausführen, wird Ihnen eine leere Blowfish-Website präsentiert. Die detaillierte Konfiguration wird im Abschnitt [Konfiguration]({{< ref "configuration" >}}) behandelt. diff --git a/exampleSite/content/docs/getting-started/index.es.md b/exampleSite/content/docs/getting-started/index.es.md new file mode 100644 index 00000000..261e4611 --- /dev/null +++ b/exampleSite/content/docs/getting-started/index.es.md @@ -0,0 +1,224 @@ +--- +title: "Primeros Pasos" +weight: 3 +draft: false +description: "Todas las variables de front matter disponibles en Blowfish." +slug: "getting-started" +tags: ["instalación", "documentación"] +series: ["Documentación"] +series_order: 3 +--- + +{{< alert >}} +Esta sección asume que ya has [instalado el tema Blowfish]({{< ref "docs/installation" >}}). +{{< /alert >}} + +
+{{< alert "fire" >}} +Acabamos de lanzar una herramienta CLI para ayudarte a empezar con Blowfish. Te ayudará con la instalación y configuración. Instala la herramienta CLI globalmente usando: +```bash +npx blowfish-tools +``` +{{< /alert >}} + +Los archivos de configuración que vienen con Blowfish contienen todas las configuraciones posibles que el tema reconoce. Por defecto, muchas de estas están comentadas, pero puedes simplemente descomentarlas para activar o cambiar una característica específica. + +## Configuración básica + +Antes de crear cualquier contenido, hay algunas cosas que debes configurar para una nueva instalación. Comenzando en el archivo `hugo.toml`, establece los parámetros `baseURL` y `languageCode`. El `languageCode` debe configurarse con el idioma principal que usarás para escribir tu contenido. + +```toml +# config/_default/hugo.toml + +baseURL = "https://your_domain.com/" +languageCode = "es" +``` + +El siguiente paso es configurar los ajustes de idioma. Aunque Blowfish admite configuraciones multilingües, por ahora, solo configura el idioma principal. + +Localiza el archivo `languages.en.toml` en la carpeta de configuración. Si tu idioma principal es el inglés, puedes usar este archivo tal cual. De lo contrario, renómbralo para que incluya el código de idioma correcto en el nombre del archivo. Por ejemplo, para español, renombra el archivo a `languages.es.toml`. + +{{< alert >}} +Ten en cuenta que el código de idioma en el nombre del archivo de configuración de idioma debe coincidir con la configuración `languageCode` en `hugo.toml`. +{{< /alert >}} + +```toml +# config/_default/languages.es.toml + +title = "Mi sitio web increíble" + +[params.author] +name = "Mi nombre" +image = "img/author.jpg" +headline = "Un ser humano generalmente increíble" +bio = "Un poco sobre mí" +links = [ + { twitter = "https://twitter.com/username" } +] +``` + +La configuración `[params.author]` determina cómo se muestra la información del autor en el sitio web. La imagen debe colocarse en la carpeta `assets/` del sitio. Los enlaces se mostrarán en el orden en que están listados. + +Si necesitas más detalles, se cubre información adicional sobre cada una de estas opciones de configuración en la sección [Configuración]({{< ref "configuration" >}}). + +## Esquemas de colores + +Blowfish viene con varios esquemas de colores listos para usar. Puedes probar los esquemas integrados a continuación: + +{{< theme-switcher >}} + +Cada esquema de colores en Blowfish está construido sobre una paleta de tres colores que se usa consistentemente en todo el tema. Cada uno de estos colores principales está basado en las paletas de colores de diez tonos incluidas en [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). + +Aunque estos son los esquemas predeterminados, también puedes crear los tuyos propios. Consulta la sección [Personalización Avanzada]({{< ref "advanced-customisation#colour-schemes" >}}) para más detalles. + +## Organización del contenido + +Por defecto, Blowfish no te obliga a usar un tipo de contenido particular. Al hacerlo, eres libre de definir tu contenido como desees. Podrías preferir _páginas_ para un sitio estático, _publicaciones_ para un blog, o _proyectos_ para un portafolio. + +Aquí hay una descripción general rápida de un proyecto Blowfish básico. Todo el contenido se coloca dentro de la carpeta `content`: + +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── blowfish +``` + +Es importante tener una comprensión firme de cómo Hugo espera que se organice el contenido, ya que el tema está diseñado para aprovechar al máximo los bundles de páginas de Hugo. Asegúrate de leer la [documentación oficial de Hugo](https://gohugo.io/content-management/organization/) para más información. + +Blowfish también es flexible cuando se trata de taxonomías. Algunas personas prefieren usar _tags_ y _categorías_ para agrupar su contenido, otros prefieren usar _temas_. + +Hugo usa por defecto posts, tags y categorías, y esto funcionará bien si eso es lo que quieres. Sin embargo, si deseas personalizar esto, puedes hacerlo creando un archivo de configuración `taxonomies.toml`: + +```toml +# config/_default/taxonomies.toml + +topic = "topics" +``` + +Esto reemplazará los _tags_ y _categorías_ predeterminados con _temas_. Consulta la [documentación de taxonomías de Hugo](https://gohugo.io/content-management/taxonomies/) para más información sobre cómo nombrar taxonomías. + +Cuando creas una nueva taxonomía, necesitarás ajustar los enlaces de navegación en el sitio web para apuntar a las secciones correctas, lo cual se cubre a continuación. + +## Menús + +Blowfish tiene dos menús que se pueden personalizar para adaptarse al contenido y diseño de tu sitio. El menú `main` aparece en el encabezado del sitio y el menú `footer` aparece en la parte inferior de la página justo antes del aviso de copyright. + +Ambos menús se configuran en el archivo `menus.es.toml`. De manera similar al archivo de configuración de idiomas, si deseas usar otro idioma, renombra este archivo y reemplaza `en` con el código de idioma que deseas usar. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Blog" + pageRef = "posts" + weight = 10 + +[[main]] + name = "Temas" + pageRef = "topics" + weight = 20 + +[[main]] + pre = "github" + name = "GitHub" + url = "https://github.com/nunocoracao/blowfish" + weight = 30 + +[[main]] + identifier = "github2" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 40 + +[[footer]] + name = "Privacidad" + url = "https://external-link" +``` + +El parámetro `name` especifica el texto que se usa en el enlace del menú. También puedes proporcionar opcionalmente un `title` que llena el atributo title HTML para el enlace. + +El parámetro `pageRef` te permite referenciar fácilmente páginas de contenido y taxonomías de Hugo. Es la forma más rápida de configurar el menú ya que puedes simplemente referirte a cualquier elemento de contenido de Hugo y automáticamente construirá el enlace correcto. Para enlazar a URLs externas, se puede usar el parámetro `url`. + +El parámetro `pre` te permite colocar un icono del [conjunto de iconos de Blowfish]({{< ref "samples/icons" >}}) en la entrada del menú. Este parámetro se puede usar con el parámetro `name` o por sí solo. Si quieres usar múltiples entradas de menú con solo iconos, por favor establece el parámetro `identifier`, de lo contrario Hugo usará por defecto el tag de nombre como id y probablemente no mostrará todas las entradas del menú. + +Los enlaces del menú se ordenarán del `weight` más bajo al más alto, y luego alfabéticamente por `name`. + +Ambos menús son completamente opcionales y pueden comentarse si no se necesitan. Usa la plantilla proporcionada en el archivo como guía. + +### Menús anidados + +El tema también admite menús anidados. Para usarlos, solo necesitas definir una entrada padre en `menu.toml` y sus submenús usando el parámetro `parent` para referenciar al padre. Todas las propiedades se pueden usar para submenús. `pageRef` y `url` también se pueden usar en la entrada padre. Los menús anidados solo están disponibles en el menú principal, no para el pie de página. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Padre" + weight = 20 + +[[main]] + name = "sub-menú 1" + parent = "Padre" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menú 2" + parent = "Padre" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menú 3" + parent = "Padre" + pre = "github" + pageRef = "samples" + weight = 20 +``` + +### Menú de sub-navegación + +Adicionalmente, también puedes configurar un menú de sub-navegación. Solo define nuevas entradas de menú como `subnavigation` en `menus.toml`. +Esto renderizará una segunda línea con subcategorías debajo del menú principal del encabezado. + +```toml +# config/_default/menus.toml + +[[subnavigation]] + name = "Un tema interesante" + pageRef = "tags/interesting-topic" + weight = 10 + +[[subnavigation]] + name = "Mi categoría increíble" + pageRef = "categories/awesome" + weight = 20 +``` + +El `name` predeterminado es el `pageRef` en formato de título. + +## Miniaturas y Fondos + +Blowfish fue construido para que sea fácil agregar soporte visual a tus artículos. Si estás familiarizado con la estructura de artículos de Hugo, solo necesitas colocar un archivo de imagen (casi todos los formatos son compatibles pero recomendamos `.png` o `.jpg`) que comience con `feature*` dentro de tu carpeta de artículo. Y eso es todo, Blowfish podrá usar la imagen tanto como miniatura dentro de tu sitio web como para tarjetas oEmbed en plataformas sociales. + +[Aquí]({{< ref "thumbnails" >}}) también hay una guía con más información y un [ejemplo]({{< ref "thumbnail_sample" >}}) si quieres ver cómo puedes hacerlo. + +Adicionalmente, Blowfish también admite imágenes hero de fondo en artículos y listas. Para usar una imagen diferente a la destacada, agrega un archivo de imagen cuyo nombre comience con `background*`. + +## Configuración detallada + +Los pasos anteriores son la configuración mínima. Si ahora ejecutas `hugo server` se te presentará un sitio web Blowfish en blanco. La configuración detallada se cubre en la sección [Configuración]({{< ref "configuration" >}}). diff --git a/exampleSite/content/docs/getting-started/index.fr.md b/exampleSite/content/docs/getting-started/index.fr.md new file mode 100644 index 00000000..80e21b9a --- /dev/null +++ b/exampleSite/content/docs/getting-started/index.fr.md @@ -0,0 +1,224 @@ +--- +title: "Premiers Pas" +weight: 3 +draft: false +description: "Toutes les variables front matter disponibles dans Blowfish." +slug: "getting-started" +tags: ["installation", "documentation"] +series: ["Documentation"] +series_order: 3 +--- + +{{< alert >}} +Cette section suppose que vous avez déjà [installé le thème Blowfish]({{< ref "docs/installation" >}}). +{{< /alert >}} + +
+{{< alert "fire" >}} +Nous venons de lancer un outil CLI pour vous aider à démarrer avec Blowfish. Il vous aidera avec l'installation et la configuration. Installez l'outil CLI globalement en utilisant : +```bash +npx blowfish-tools +``` +{{< /alert >}} + +Les fichiers de configuration livrés avec Blowfish contiennent tous les paramètres possibles que le thème reconnaît. Par défaut, beaucoup d'entre eux sont commentés, mais vous pouvez simplement les décommenter pour activer ou modifier une fonctionnalité spécifique. + +## Configuration de base + +Avant de créer du contenu, il y a quelques éléments à définir pour une nouvelle installation. En commençant par le fichier `hugo.toml`, définissez les paramètres `baseURL` et `languageCode`. Le `languageCode` doit être défini sur la langue principale que vous utiliserez pour rédiger votre contenu. + +```toml +# config/_default/hugo.toml + +baseURL = "https://your_domain.com/" +languageCode = "fr" +``` + +L'étape suivante consiste à configurer les paramètres de langue. Bien que Blowfish prenne en charge les configurations multilingues, pour l'instant, configurez simplement la langue principale. + +Localisez le fichier `languages.en.toml` dans le dossier de configuration. Si votre langue principale est l'anglais, vous pouvez utiliser ce fichier tel quel. Sinon, renommez-le pour qu'il inclue le code de langue correct dans le nom du fichier. Par exemple, pour le français, renommez le fichier en `languages.fr.toml`. + +{{< alert >}} +Notez que le code de langue dans le nom du fichier de configuration de langue doit correspondre au paramètre `languageCode` dans `hugo.toml`. +{{< /alert >}} + +```toml +# config/_default/languages.fr.toml + +title = "Mon super site web" + +[params.author] +name = "Mon nom" +image = "img/author.jpg" +headline = "Un être humain généralement génial" +bio = "Un peu sur moi" +links = [ + { twitter = "https://twitter.com/username" } +] +``` + +La configuration `[params.author]` détermine comment les informations de l'auteur sont affichées sur le site. L'image doit être placée dans le dossier `assets/` du site. Les liens seront affichés dans l'ordre où ils sont listés. + +Si vous avez besoin de plus de détails, des informations supplémentaires sur chacune de ces options de configuration sont couvertes dans la section [Configuration]({{< ref "configuration" >}}). + +## Schémas de couleurs + +Blowfish est livré avec plusieurs schémas de couleurs prêts à l'emploi. Vous pouvez essayer les schémas intégrés ci-dessous : + +{{< theme-switcher >}} + +Chaque schéma de couleurs dans Blowfish est construit sur une palette de trois couleurs utilisée de manière cohérente dans tout le thème. Chacune de ces couleurs principales est basée sur les palettes de couleurs à dix nuances incluses dans [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). + +Bien que ce soient les schémas par défaut, vous pouvez également créer les vôtres. Consultez la section [Personnalisation avancée]({{< ref "advanced-customisation#colour-schemes" >}}) pour plus de détails. + +## Organisation du contenu + +Par défaut, Blowfish ne vous oblige pas à utiliser un type de contenu particulier. Ce faisant, vous êtes libre de définir votre contenu comme vous le souhaitez. Vous pourriez préférer des _pages_ pour un site statique, des _articles_ pour un blog, ou des _projets_ pour un portfolio. + +Voici un aperçu rapide d'un projet Blowfish de base. Tout le contenu est placé dans le dossier `content` : + +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── blowfish +``` + +Il est important d'avoir une bonne compréhension de la façon dont Hugo s'attend à ce que le contenu soit organisé, car le thème est conçu pour tirer pleinement parti des bundles de pages Hugo. Assurez-vous de lire la [documentation officielle Hugo](https://gohugo.io/content-management/organization/) pour plus d'informations. + +Blowfish est également flexible en ce qui concerne les taxonomies. Certaines personnes préfèrent utiliser des _tags_ et des _catégories_ pour regrouper leur contenu, d'autres préfèrent utiliser des _sujets_. + +Hugo utilise par défaut les posts, tags et catégories, et cela fonctionnera bien si c'est ce que vous voulez. Si vous souhaitez personnaliser cela, vous pouvez le faire en créant un fichier de configuration `taxonomies.toml` : + +```toml +# config/_default/taxonomies.toml + +topic = "topics" +``` + +Cela remplacera les _tags_ et _catégories_ par défaut par des _sujets_. Consultez la [documentation des taxonomies Hugo](https://gohugo.io/content-management/taxonomies/) pour plus d'informations sur la dénomination des taxonomies. + +Lorsque vous créez une nouvelle taxonomie, vous devrez ajuster les liens de navigation sur le site pour pointer vers les bonnes sections, ce qui est couvert ci-dessous. + +## Menus + +Blowfish dispose de deux menus qui peuvent être personnalisés pour s'adapter au contenu et à la mise en page de votre site. Le menu `main` apparaît dans l'en-tête du site et le menu `footer` apparaît en bas de la page, juste avant la mention de copyright. + +Les deux menus sont configurés dans le fichier `menus.fr.toml`. De même que pour le fichier de configuration de langue, si vous souhaitez utiliser une autre langue, renommez ce fichier et remplacez `en` par le code de langue que vous souhaitez utiliser. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Blog" + pageRef = "posts" + weight = 10 + +[[main]] + name = "Sujets" + pageRef = "topics" + weight = 20 + +[[main]] + pre = "github" + name = "GitHub" + url = "https://github.com/nunocoracao/blowfish" + weight = 30 + +[[main]] + identifier = "github2" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 40 + +[[footer]] + name = "Confidentialité" + url = "https://external-link" +``` + +Le paramètre `name` spécifie le texte utilisé dans le lien du menu. Vous pouvez également fournir optionnellement un `title` qui remplit l'attribut title HTML pour le lien. + +Le paramètre `pageRef` vous permet de référencer facilement les pages de contenu Hugo et les taxonomies. C'est le moyen le plus rapide de configurer le menu car vous pouvez simplement faire référence à n'importe quel élément de contenu Hugo et il construira automatiquement le lien correct. Pour créer des liens vers des URL externes, le paramètre `url` peut être utilisé. + +Le paramètre `pre` vous permet de placer une icône du [jeu d'icônes de Blowfish]({{< ref "samples/icons" >}}) sur l'entrée de menu. Ce paramètre peut être utilisé avec le paramètre `name` ou seul. Si vous souhaitez utiliser plusieurs entrées de menu avec seulement des icônes, veuillez définir le paramètre `identifier` sinon Hugo utilisera par défaut le tag de nommage comme id et n'affichera probablement pas toutes les entrées de menu. + +Les liens de menu seront triés du poids le plus bas au plus élevé, puis par ordre alphabétique de `name`. + +Les deux menus sont entièrement optionnels et peuvent être commentés s'ils ne sont pas nécessaires. Utilisez le modèle fourni dans le fichier comme guide. + +### Menus imbriqués + +Le thème prend également en charge les menus imbriqués. Pour les utiliser, il vous suffit de définir une entrée parent dans `menu.toml` et ses sous-menus en utilisant le paramètre `parent` pour référencer le parent. Toutes les propriétés peuvent être utilisées pour les sous-menus. `pageRef` et `url` peuvent également être utilisés dans l'entrée parent. Les menus imbriqués ne sont disponibles que dans le menu principal, pas pour le pied de page. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Parent" + weight = 20 + +[[main]] + name = "sous-menu 1" + parent = "Parent" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sous-menu 2" + parent = "Parent" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sous-menu 3" + parent = "Parent" + pre = "github" + pageRef = "samples" + weight = 20 +``` + +### Menu de sous-navigation + +De plus, vous pouvez également configurer un menu de sous-navigation. Définissez simplement de nouvelles entrées de menu comme `subnavigation` dans `menus.toml`. +Cela affichera une deuxième ligne avec des sous-catégories sous le menu d'en-tête principal. + +```toml +# config/_default/menus.toml + +[[subnavigation]] + name = "Un sujet intéressant" + pageRef = "tags/interesting-topic" + weight = 10 + +[[subnavigation]] + name = "Ma catégorie géniale" + pageRef = "categories/awesome" + weight = 20 +``` + +Le `name` par défaut est le `pageRef` en majuscules. + +## Vignettes et arrière-plans + +Blowfish a été conçu pour qu'il soit facile d'ajouter un support visuel à vos articles. Si vous êtes familier avec la structure des articles Hugo, il vous suffit de placer un fichier image (presque tous les formats sont pris en charge mais nous recommandons `.png` ou `.jpg`) qui commence par `feature*` dans votre dossier d'article. Et c'est tout, Blowfish pourra alors utiliser l'image à la fois comme vignette sur votre site et pour les cartes oEmbed sur les plateformes sociales. + +[Voici]({{< ref "thumbnails" >}}) également un guide avec plus d'informations et un [exemple]({{< ref "thumbnail_sample" >}}) si vous voulez voir comment vous pouvez le faire. + +De plus, Blowfish prend également en charge les images hero d'arrière-plan dans les articles et les listes. Pour utiliser une image différente de celle mise en avant, ajoutez un fichier image dont le nom commence par `background*`. + +## Configuration détaillée + +Les étapes ci-dessus sont la configuration minimale. Si vous exécutez maintenant `hugo server`, vous obtiendrez un site Blowfish vierge. La configuration détaillée est couverte dans la section [Configuration]({{< ref "configuration" >}}). diff --git a/exampleSite/content/docs/getting-started/index.pt-br.md b/exampleSite/content/docs/getting-started/index.pt-br.md new file mode 100644 index 00000000..0d640d89 --- /dev/null +++ b/exampleSite/content/docs/getting-started/index.pt-br.md @@ -0,0 +1,224 @@ +--- +title: "Primeiros Passos" +weight: 3 +draft: false +description: "Todas as variáveis de front matter disponíveis no Blowfish." +slug: "getting-started" +tags: ["instalação", "documentação"] +series: ["Documentação"] +series_order: 3 +--- + +{{< alert >}} +Esta seção assume que você já [instalou o tema Blowfish]({{< ref "docs/installation" >}}). +{{< /alert >}} + +
+{{< alert "fire" >}} +Acabamos de lançar uma ferramenta CLI para ajudá-lo a começar com o Blowfish. Ela ajudará com a instalação e configuração. Instale a ferramenta CLI globalmente usando: +```bash +npx blowfish-tools +``` +{{< /alert >}} + +Os arquivos de configuração que acompanham o Blowfish contêm todas as configurações possíveis que o tema reconhece. Por padrão, muitas delas estão comentadas, mas você pode simplesmente descomentá-las para ativar ou alterar uma funcionalidade específica. + +## Configuração básica + +Antes de criar qualquer conteúdo, há algumas coisas que você deve configurar para uma nova instalação. Começando no arquivo `hugo.toml`, defina os parâmetros `baseURL` e `languageCode`. O `languageCode` deve ser definido para o idioma principal que você usará para escrever seu conteúdo. + +```toml +# config/_default/hugo.toml + +baseURL = "https://your_domain.com/" +languageCode = "pt-br" +``` + +O próximo passo é configurar as definições de idioma. Embora o Blowfish suporte configurações multilíngues, por enquanto, apenas configure o idioma principal. + +Localize o arquivo `languages.en.toml` na pasta de configuração. Se seu idioma principal for inglês, você pode usar este arquivo como está. Caso contrário, renomeie-o para incluir o código de idioma correto no nome do arquivo. Por exemplo, para português brasileiro, renomeie o arquivo para `languages.pt-br.toml`. + +{{< alert >}} +Note que o código de idioma no nome do arquivo de configuração de idioma deve corresponder à configuração `languageCode` em `hugo.toml`. +{{< /alert >}} + +```toml +# config/_default/languages.pt-br.toml + +title = "Meu site incrível" + +[params.author] +name = "Meu nome" +image = "img/author.jpg" +headline = "Um ser humano geralmente incrível" +bio = "Um pouco sobre mim" +links = [ + { twitter = "https://twitter.com/username" } +] +``` + +A configuração `[params.author]` determina como as informações do autor são exibidas no site. A imagem deve ser colocada na pasta `assets/` do site. Os links serão exibidos na ordem em que estão listados. + +Se você precisar de mais detalhes, informações adicionais sobre cada uma dessas opções de configuração são cobertas na seção [Configuração]({{< ref "configuration" >}}). + +## Esquemas de cores + +O Blowfish vem com vários esquemas de cores prontos para uso. Você pode experimentar os esquemas integrados abaixo: + +{{< theme-switcher >}} + +Cada esquema de cores no Blowfish é construído sobre uma paleta de três cores que é usada consistentemente em todo o tema. Cada uma dessas cores principais é baseada nas paletas de cores de dez tons incluídas no [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). + +Embora esses sejam os esquemas padrão, você também pode criar os seus próprios. Consulte a seção [Personalização Avançada]({{< ref "advanced-customisation#colour-schemes" >}}) para mais detalhes. + +## Organizando conteúdo + +Por padrão, o Blowfish não força você a usar um tipo de conteúdo específico. Ao fazer isso, você é livre para definir seu conteúdo como desejar. Você pode preferir _páginas_ para um site estático, _posts_ para um blog, ou _projetos_ para um portfólio. + +Aqui está uma visão geral rápida de um projeto Blowfish básico. Todo o conteúdo é colocado dentro da pasta `content`: + +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── blowfish +``` + +É importante ter uma compreensão firme de como o Hugo espera que o conteúdo seja organizado, pois o tema é projetado para aproveitar ao máximo os bundles de páginas do Hugo. Certifique-se de ler a [documentação oficial do Hugo](https://gohugo.io/content-management/organization/) para mais informações. + +O Blowfish também é flexível quando se trata de taxonomias. Algumas pessoas preferem usar _tags_ e _categorias_ para agrupar seu conteúdo, outras preferem usar _tópicos_. + +O Hugo usa por padrão posts, tags e categorias, e isso funcionará bem se é isso que você quer. Se você deseja personalizar isso, no entanto, pode fazê-lo criando um arquivo de configuração `taxonomies.toml`: + +```toml +# config/_default/taxonomies.toml + +topic = "topics" +``` + +Isso substituirá os _tags_ e _categorias_ padrão por _tópicos_. Consulte a [documentação de taxonomias do Hugo](https://gohugo.io/content-management/taxonomies/) para mais informações sobre como nomear taxonomias. + +Quando você cria uma nova taxonomia, precisará ajustar os links de navegação no site para apontar para as seções corretas, o que é coberto abaixo. + +## Menus + +O Blowfish tem dois menus que podem ser personalizados para se adequar ao conteúdo e layout do seu site. O menu `main` aparece no cabeçalho do site e o menu `footer` aparece na parte inferior da página, logo antes do aviso de copyright. + +Ambos os menus são configurados no arquivo `menus.pt-br.toml`. De forma semelhante ao arquivo de configuração de idiomas, se você deseja usar outro idioma, renomeie este arquivo e substitua `en` pelo código de idioma que deseja usar. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Blog" + pageRef = "posts" + weight = 10 + +[[main]] + name = "Tópicos" + pageRef = "topics" + weight = 20 + +[[main]] + pre = "github" + name = "GitHub" + url = "https://github.com/nunocoracao/blowfish" + weight = 30 + +[[main]] + identifier = "github2" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 40 + +[[footer]] + name = "Privacidade" + url = "https://external-link" +``` + +O parâmetro `name` especifica o texto que é usado no link do menu. Você também pode opcionalmente fornecer um `title` que preenche o atributo title HTML para o link. + +O parâmetro `pageRef` permite que você faça referência facilmente a páginas de conteúdo e taxonomias do Hugo. É a maneira mais rápida de configurar o menu, pois você pode simplesmente se referir a qualquer item de conteúdo do Hugo e ele automaticamente construirá o link correto. Para vincular a URLs externos, o parâmetro `url` pode ser usado. + +O parâmetro `pre` permite que você coloque um ícone do [conjunto de ícones do Blowfish]({{< ref "samples/icons" >}}) na entrada do menu. Este parâmetro pode ser usado com o parâmetro `name` ou sozinho. Se você quiser usar várias entradas de menu apenas com ícones, por favor defina o parâmetro `identifier`, caso contrário o Hugo usará por padrão a tag de nome como id e provavelmente não exibirá todas as entradas do menu. + +Os links do menu serão ordenados do menor para o maior `weight`, e depois alfabeticamente por `name`. + +Ambos os menus são completamente opcionais e podem ser comentados se não forem necessários. Use o modelo fornecido no arquivo como guia. + +### Menus aninhados + +O tema também suporta menus aninhados. Para usá-los, você só precisa definir uma entrada pai em `menu.toml` e seus submenus usando o parâmetro `parent` para referenciar o pai. Todas as propriedades podem ser usadas para submenus. `pageRef` e `url` também podem ser usados na entrada pai. Menus aninhados estão disponíveis apenas no menu principal, não para o rodapé. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Pai" + weight = 20 + +[[main]] + name = "sub-menu 1" + parent = "Pai" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menu 2" + parent = "Pai" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menu 3" + parent = "Pai" + pre = "github" + pageRef = "samples" + weight = 20 +``` + +### Menu de sub-navegação + +Adicionalmente, você também pode configurar um menu de sub-navegação. Basta definir novas entradas de menu como `subnavigation` em `menus.toml`. +Isso renderizará uma segunda linha com subcategorias abaixo do menu principal do cabeçalho. + +```toml +# config/_default/menus.toml + +[[subnavigation]] + name = "Um tópico interessante" + pageRef = "tags/interesting-topic" + weight = 10 + +[[subnavigation]] + name = "Minha categoria incrível" + pageRef = "categories/awesome" + weight = 20 +``` + +O `name` padrão é o `pageRef` em formato de título. + +## Miniaturas e Fundos + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se você está familiarizado com a estrutura de artigos do Hugo, basta colocar um arquivo de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá então usar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) também há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se você quiser ver como pode fazer isso. + +Adicionalmente, o Blowfish também suporta imagens hero de fundo em artigos e listas. Para usar uma imagem diferente da destacada, adicione um arquivo de imagem cujo nome comece com `background*`. + +## Configuração detalhada + +Os passos acima são a configuração mínima. Se você agora executar `hugo server`, será apresentado um site Blowfish em branco. A configuração detalhada é coberta na seção [Configuração]({{< ref "configuration" >}}). diff --git a/exampleSite/content/docs/getting-started/index.pt-pt.md b/exampleSite/content/docs/getting-started/index.pt-pt.md new file mode 100644 index 00000000..dddd2d09 --- /dev/null +++ b/exampleSite/content/docs/getting-started/index.pt-pt.md @@ -0,0 +1,224 @@ +--- +title: "Primeiros Passos" +weight: 3 +draft: false +description: "Todas as variáveis de front matter disponíveis no Blowfish." +slug: "getting-started" +tags: ["instalação", "documentação"] +series: ["Documentação"] +series_order: 3 +--- + +{{< alert >}} +Esta secção assume que já [instalou o tema Blowfish]({{< ref "docs/installation" >}}). +{{< /alert >}} + +
+{{< alert "fire" >}} +Acabámos de lançar uma ferramenta CLI para o ajudar a começar com o Blowfish. Irá ajudá-lo com a instalação e configuração. Instale a ferramenta CLI globalmente utilizando: +```bash +npx blowfish-tools +``` +{{< /alert >}} + +Os ficheiros de configuração que acompanham o Blowfish contêm todas as definições possíveis que o tema reconhece. Por defeito, muitas delas estão comentadas, mas pode simplesmente descomentá-las para ativar ou alterar uma funcionalidade específica. + +## Configuração básica + +Antes de criar qualquer conteúdo, há algumas coisas que deve configurar para uma nova instalação. Começando no ficheiro `hugo.toml`, defina os parâmetros `baseURL` e `languageCode`. O `languageCode` deve ser definido para o idioma principal que utilizará para escrever o seu conteúdo. + +```toml +# config/_default/hugo.toml + +baseURL = "https://your_domain.com/" +languageCode = "pt-pt" +``` + +O próximo passo é configurar as definições de idioma. Embora o Blowfish suporte configurações multilingues, por agora, apenas configure o idioma principal. + +Localize o ficheiro `languages.en.toml` na pasta de configuração. Se o seu idioma principal for inglês, pode utilizar este ficheiro tal como está. Caso contrário, renomeie-o para incluir o código de idioma correto no nome do ficheiro. Por exemplo, para português europeu, renomeie o ficheiro para `languages.pt-pt.toml`. + +{{< alert >}} +Note que o código de idioma no nome do ficheiro de configuração de idioma deve corresponder à definição `languageCode` em `hugo.toml`. +{{< /alert >}} + +```toml +# config/_default/languages.pt-pt.toml + +title = "O meu site fantástico" + +[params.author] +name = "O meu nome" +image = "img/author.jpg" +headline = "Um ser humano geralmente fantástico" +bio = "Um pouco sobre mim" +links = [ + { twitter = "https://twitter.com/username" } +] +``` + +A configuração `[params.author]` determina como as informações do autor são apresentadas no site. A imagem deve ser colocada na pasta `assets/` do site. As ligações serão apresentadas na ordem em que estão listadas. + +Se precisar de mais detalhes, informações adicionais sobre cada uma destas opções de configuração são cobertas na secção [Configuração]({{< ref "configuration" >}}). + +## Esquemas de cores + +O Blowfish vem com vários esquemas de cores prontos a usar. Pode experimentar os esquemas integrados abaixo: + +{{< theme-switcher >}} + +Cada esquema de cores no Blowfish é construído sobre uma paleta de três cores que é utilizada consistentemente em todo o tema. Cada uma destas cores principais é baseada nas paletas de cores de dez tons incluídas no [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). + +Embora estes sejam os esquemas predefinidos, também pode criar os seus próprios. Consulte a secção [Personalização Avançada]({{< ref "advanced-customisation#colour-schemes" >}}) para mais detalhes. + +## Organização do conteúdo + +Por defeito, o Blowfish não o obriga a utilizar um tipo de conteúdo específico. Ao fazê-lo, é livre de definir o seu conteúdo como desejar. Pode preferir _páginas_ para um site estático, _publicações_ para um blogue, ou _projetos_ para um portfólio. + +Aqui está uma visão geral rápida de um projeto Blowfish básico. Todo o conteúdo é colocado dentro da pasta `content`: + +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── blowfish +``` + +É importante ter uma compreensão firme de como o Hugo espera que o conteúdo seja organizado, pois o tema é projetado para aproveitar ao máximo os bundles de páginas do Hugo. Certifique-se de ler a [documentação oficial do Hugo](https://gohugo.io/content-management/organization/) para mais informações. + +O Blowfish também é flexível quando se trata de taxonomias. Algumas pessoas preferem utilizar _tags_ e _categorias_ para agrupar o seu conteúdo, outras preferem utilizar _tópicos_. + +O Hugo utiliza por defeito posts, tags e categorias, e isso funcionará bem se é isso que pretende. Se desejar personalizar isto, no entanto, pode fazê-lo criando um ficheiro de configuração `taxonomies.toml`: + +```toml +# config/_default/taxonomies.toml + +topic = "topics" +``` + +Isto substituirá os _tags_ e _categorias_ predefinidos por _tópicos_. Consulte a [documentação de taxonomias do Hugo](https://gohugo.io/content-management/taxonomies/) para mais informações sobre como nomear taxonomias. + +Quando cria uma nova taxonomia, precisará de ajustar as ligações de navegação no site para apontar para as secções corretas, o que é coberto abaixo. + +## Menus + +O Blowfish tem dois menus que podem ser personalizados para se adequar ao conteúdo e layout do seu site. O menu `main` aparece no cabeçalho do site e o menu `footer` aparece na parte inferior da página, logo antes do aviso de direitos de autor. + +Ambos os menus são configurados no ficheiro `menus.pt-pt.toml`. De forma semelhante ao ficheiro de configuração de idiomas, se desejar utilizar outro idioma, renomeie este ficheiro e substitua `en` pelo código de idioma que deseja utilizar. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Blogue" + pageRef = "posts" + weight = 10 + +[[main]] + name = "Tópicos" + pageRef = "topics" + weight = 20 + +[[main]] + pre = "github" + name = "GitHub" + url = "https://github.com/nunocoracao/blowfish" + weight = 30 + +[[main]] + identifier = "github2" + pre = "github" + url = "https://github.com/nunocoracao/blowfish" + weight = 40 + +[[footer]] + name = "Privacidade" + url = "https://external-link" +``` + +O parâmetro `name` especifica o texto que é utilizado na ligação do menu. Também pode opcionalmente fornecer um `title` que preenche o atributo title HTML para a ligação. + +O parâmetro `pageRef` permite-lhe fazer referência facilmente a páginas de conteúdo e taxonomias do Hugo. É a forma mais rápida de configurar o menu, pois pode simplesmente referir-se a qualquer item de conteúdo do Hugo e este construirá automaticamente a ligação correta. Para criar ligações para URLs externos, o parâmetro `url` pode ser utilizado. + +O parâmetro `pre` permite-lhe colocar um ícone do [conjunto de ícones do Blowfish]({{< ref "samples/icons" >}}) na entrada do menu. Este parâmetro pode ser utilizado com o parâmetro `name` ou sozinho. Se quiser utilizar várias entradas de menu apenas com ícones, por favor defina o parâmetro `identifier`, caso contrário o Hugo utilizará por defeito a tag de nome como id e provavelmente não apresentará todas as entradas do menu. + +As ligações do menu serão ordenadas do menor para o maior `weight`, e depois alfabeticamente por `name`. + +Ambos os menus são completamente opcionais e podem ser comentados se não forem necessários. Utilize o modelo fornecido no ficheiro como guia. + +### Menus aninhados + +O tema também suporta menus aninhados. Para utilizá-los, só precisa de definir uma entrada pai em `menu.toml` e os seus submenus utilizando o parâmetro `parent` para referenciar o pai. Todas as propriedades podem ser utilizadas para submenus. `pageRef` e `url` também podem ser utilizados na entrada pai. Menus aninhados estão disponíveis apenas no menu principal, não para o rodapé. + +```toml +# config/_default/menus.toml + +[[main]] + name = "Pai" + weight = 20 + +[[main]] + name = "sub-menu 1" + parent = "Pai" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menu 2" + parent = "Pai" + pageRef = "samples" + weight = 20 + +[[main]] + name = "sub-menu 3" + parent = "Pai" + pre = "github" + pageRef = "samples" + weight = 20 +``` + +### Menu de sub-navegação + +Adicionalmente, também pode configurar um menu de sub-navegação. Basta definir novas entradas de menu como `subnavigation` em `menus.toml`. +Isto irá renderizar uma segunda linha com subcategorias abaixo do menu principal do cabeçalho. + +```toml +# config/_default/menus.toml + +[[subnavigation]] + name = "Um tópico interessante" + pageRef = "tags/interesting-topic" + weight = 10 + +[[subnavigation]] + name = "A minha categoria fantástica" + pageRef = "categories/awesome" + weight = 20 +``` + +O `name` predefinido é o `pageRef` em formato de título. + +## Miniaturas e Fundos + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se está familiarizado com a estrutura de artigos do Hugo, basta colocar um ficheiro de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá então utilizar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) também há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se quiser ver como pode fazer isso. + +Adicionalmente, o Blowfish também suporta imagens hero de fundo em artigos e listas. Para utilizar uma imagem diferente da destacada, adicione um ficheiro de imagem cujo nome comece com `background*`. + +## Configuração detalhada + +Os passos acima são a configuração mínima. Se agora executar `hugo server`, será apresentado um site Blowfish em branco. A configuração detalhada é coberta na secção [Configuração]({{< ref "configuration" >}}). diff --git a/exampleSite/content/docs/homepage-layout/index.de.md b/exampleSite/content/docs/homepage-layout/index.de.md new file mode 100644 index 00000000..a8e18ff5 --- /dev/null +++ b/exampleSite/content/docs/homepage-layout/index.de.md @@ -0,0 +1,89 @@ +--- +title: "Homepage-Layout" +weight: 5 +draft: false +description: "Konfiguration des Homepage-Layouts im Blowfish-Theme." +slug: "homepage-layout" +tags: ["homepage", "layouts", "dokumentation"] +series: ["Dokumentation"] +series_order: 5 +--- + +Blowfish bietet ein vollständig flexibles Homepage-Layout. Es gibt zwei Hauptvorlagen zur Auswahl mit zusätzlichen Einstellungen zur Anpassung des Designs. Alternativ können Sie auch Ihre eigene Vorlage bereitstellen und die vollständige Kontrolle über den Homepage-Inhalt haben. + +Das Layout der Homepage wird durch die Einstellung `homepage.layout` in der Konfigurationsdatei `params.toml` gesteuert. Zusätzlich haben alle Layouts die Option, eine Liste der [neuesten Artikel](#neueste-artikel) einzuschließen. + +## Profil-Layout + +Das Standard-Layout ist das Profil-Layout, das sich hervorragend für persönliche Websites und Blogs eignet. Es stellt die Details des Autors in den Vordergrund, indem es ein Bild und Links zu sozialen Profilen bereitstellt. + +{{< figure src="img/home-profile.png" class="thumbnailshadow" >}} + +Die Autoreninformationen werden in der Sprachen-Konfigurationsdatei bereitgestellt. Weitere Details zu den Parametern finden Sie in den Abschnitten [Erste Schritte]({{< ref "getting-started" >}}) und [Sprachkonfiguration]({{< ref "configuration##language-and-i18n" >}}). + +Zusätzlich wird jeder Markdown-Inhalt, der im Homepage-Inhalt bereitgestellt wird, unter dem Autorenprofil platziert. Dies ermöglicht zusätzliche Flexibilität für die Anzeige einer Biografie oder anderer benutzerdefinierter Inhalte mit Shortcodes. + +Um das Profil-Layout zu aktivieren, setzen Sie `homepage.layout = "profile"` in der Konfigurationsdatei `params.toml`. + +## Seiten-Layout + +Das Seiten-Layout ist einfach eine normale Inhaltsseite, die Ihren Markdown-Inhalt anzeigt. Es eignet sich hervorragend für statische Websites und bietet viel Flexibilität. + +{{< figure src="img/home-page.png" class="thumbnailshadow" >}} + +Um das Seiten-Layout zu aktivieren, setzen Sie `homepage.layout = "page"` in der Konfigurationsdatei `params.toml`. + +## Hero-Layout + +Das Hero-Layout vereint Ideen aus den Profil- und Card-Layouts. Es zeigt nicht nur Informationen über den Autor der Website an, sondern lädt auch Ihren Markdown darunter. + +{{< figure src="img/home-hero.png" class="thumbnailshadow" >}} + +Um das Hero-Layout zu aktivieren, setzen Sie `homepage.layout = "hero"` und `homepage.homepageImage` in der Konfigurationsdatei `params.toml`. + +## Hintergrund-Layout + +Das Hintergrund-Layout ist eine flüssigere Version des Hero-Layouts. Wie beim Hero-Layout zeigt es sowohl Informationen über den Autor der Website an als auch Ihren Markdown darunter. + +{{< figure src="img/home-background.png" class="thumbnailshadow" >}} + +Um das Hintergrund-Layout zu aktivieren, setzen Sie `homepage.layout = "background"` und `homepage.homepageImage` in der Konfigurationsdatei `params.toml`. + +## Card-Layout + +Das Card-Layout ist eine Erweiterung des Seiten-Layouts. Es bietet das gleiche Maß an Flexibilität, indem es auch Ihren Markdown-Inhalt anzeigt und ein Card-Bild zur Anzeige visueller Inhalte hinzufügt. + +{{< figure src="img/home-card.png" class="thumbnailshadow" >}} + +Um das Card-Layout zu aktivieren, setzen Sie `homepage.layout = "card"` und `homepage.homepageImage` in der Konfigurationsdatei `params.toml`. + + +## Benutzerdefiniertes Layout + +Wenn die integrierten Homepage-Layouts für Ihre Bedürfnisse nicht ausreichen, haben Sie die Möglichkeit, Ihr eigenes benutzerdefiniertes Layout bereitzustellen. Dies ermöglicht Ihnen die vollständige Kontrolle über den Seiteninhalt und gibt Ihnen im Wesentlichen eine leere Leinwand zum Arbeiten. + +Um das benutzerdefinierte Layout zu aktivieren, setzen Sie `homepage.layout = "custom"` in der Konfigurationsdatei `params.toml`. + +Nachdem der Konfigurationswert gesetzt ist, erstellen Sie eine neue Datei `custom.html` und platzieren Sie sie in `layouts/partials/home/custom.html`. Alles, was in der Datei `custom.html` steht, wird nun im Inhaltsbereich der Website-Homepage platziert. Sie können beliebiges HTML, Tailwind oder Hugo-Templating-Funktionen verwenden, um Ihr Layout zu definieren. + +Um [neueste Artikel](#neueste-artikel) im benutzerdefinierten Layout einzuschließen, verwenden Sie das Partial `recent-articles/main.html`. + +Als Beispiel verwendet die [Homepage]({{< ref "/" >}}) auf dieser Website das benutzerdefinierte Layout, um zwischen dem Profil- und Seiten-Layout zu wechseln. Besuchen Sie das [GitHub-Repository](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html), um zu sehen, wie es funktioniert. + +## Neueste Artikel + +Alle Homepage-Layouts haben die Option, neueste Artikel unter dem Hauptseiteninhalt anzuzeigen. Um dies zu aktivieren, setzen Sie einfach die Einstellung `homepage.showRecent` auf `true` in der Konfigurationsdatei `params.toml`. + +{{< figure src="img/home-list.png" class="thumbnailshadow" >}} + +Die in diesem Abschnitt aufgelisteten Artikel werden von der Einstellung `mainSections` abgeleitet, die beliebige Inhaltstypen erlaubt, die Sie auf Ihrer Website verwenden. Wenn Sie beispielsweise Inhaltsabschnitte für _posts_ und _projects_ haben, könnten Sie diese Einstellung auf `["posts", "projects"]` setzen, und alle Artikel in diesen beiden Abschnitten würden verwendet, um die Liste der neuesten Artikel zu füllen. Das Theme erwartet, dass diese Einstellung ein Array ist, also wenn Sie nur einen Abschnitt für all Ihre Inhalte verwenden, sollten Sie dies entsprechend setzen: `["blog"]`. + +## Thumbnails + +Blowfish wurde so entwickelt, dass es einfach ist, visuelle Unterstützung zu Ihren Artikeln hinzuzufügen. Wenn Sie mit der Hugo-Artikelstruktur vertraut sind, müssen Sie nur eine Bilddatei (fast alle Formate werden unterstützt, aber wir empfehlen `.png` oder `.jpg`) in Ihrem Artikelordner platzieren, die mit `feature*` beginnt. Das ist alles, Blowfish kann dann das Bild sowohl als Thumbnail innerhalb Ihrer Website als auch für oEmbed-Karten auf sozialen Plattformen verwenden. + +[Hier]({{< ref "thumbnails" >}}) finden Sie einen Leitfaden mit mehr Informationen und ein [Beispiel]({{< ref "thumbnail_sample" >}}), wenn Sie ein Beispiel sehen möchten. + +## Card-Galerie + +Blowfish unterstützt auch die Anzeige von Standard-Artikellisten als Card-Galerien. Sie können dies sowohl für den Bereich der neuesten Artikel auf der Homepage als auch für Artikellisten auf Ihrer gesamten Website konfigurieren. Für die Homepage können Sie `homepage.cardView` und `homepage.cardViewScreenWidth` verwenden; und für Listen verwenden Sie `list.cardView` und `list.cardViewScreenWidth`. Weitere Details finden Sie in der [Konfigurations-Dokumentation]({{< ref "configuration" >}}), und auf der Homepage gibt es eine Live-Demo. diff --git a/exampleSite/content/docs/homepage-layout/index.es.md b/exampleSite/content/docs/homepage-layout/index.es.md new file mode 100644 index 00000000..83974bac --- /dev/null +++ b/exampleSite/content/docs/homepage-layout/index.es.md @@ -0,0 +1,89 @@ +--- +title: "Diseño de página de inicio" +weight: 5 +draft: false +description: "Configuración del diseño de la página de inicio en el tema Blowfish." +slug: "homepage-layout" +tags: ["página de inicio", "diseños", "documentación"] +series: ["Documentación"] +series_order: 5 +--- + +Blowfish proporciona un diseño de página de inicio totalmente flexible. Hay dos plantillas principales para elegir con configuraciones adicionales para ajustar el diseño. Alternativamente, también puedes proporcionar tu propia plantilla y tener control total sobre el contenido de la página de inicio. + +El diseño de la página de inicio está controlado por la configuración `homepage.layout` en el archivo de configuración `params.toml`. Además, todos los diseños tienen la opción de incluir una lista de [artículos recientes](#artículos-recientes). + +## Diseño Perfil + +El diseño predeterminado es el diseño de perfil, que es ideal para sitios web personales y blogs. Pone los detalles del autor en primer plano proporcionando una imagen y enlaces a perfiles sociales. + +{{< figure src="img/home-profile.png" class="thumbnailshadow" >}} + +La información del autor se proporciona en el archivo de configuración de idiomas. Consulta las secciones [Primeros Pasos]({{< ref "getting-started" >}}) y [Configuración de idioma]({{< ref "configuration##language-and-i18n" >}}) para detalles de los parámetros. + +Además, cualquier contenido Markdown que se proporcione en el contenido de la página de inicio se colocará debajo del perfil del autor. Esto permite flexibilidad adicional para mostrar una biografía u otro contenido personalizado usando shortcodes. + +Para habilitar el diseño Perfil, establece `homepage.layout = "profile"` en el archivo de configuración `params.toml`. + +## Diseño Página + +El diseño de página es simplemente una página de contenido normal que muestra tu contenido Markdown. Es ideal para sitios web estáticos y proporciona mucha flexibilidad. + +{{< figure src="img/home-page.png" class="thumbnailshadow" >}} + +Para habilitar el diseño Página, establece `homepage.layout = "page"` en el archivo de configuración `params.toml`. + +## Diseño Hero + +El diseño hero combina ideas de los diseños de perfil y tarjeta. Este no solo muestra información sobre el autor del sitio sino que también carga tu markdown debajo. + +{{< figure src="img/home-hero.png" class="thumbnailshadow" >}} + +Para habilitar el diseño Hero, establece `homepage.layout = "hero"` y `homepage.homepageImage` en el archivo de configuración `params.toml`. + +## Diseño Fondo + +El diseño de fondo es una versión más suave del diseño hero. Como en el diseño Hero, este también muestra información sobre el autor del sitio y carga tu markdown debajo. + +{{< figure src="img/home-background.png" class="thumbnailshadow" >}} + +Para habilitar el diseño Fondo, establece `homepage.layout = "background"` y `homepage.homepageImage` en el archivo de configuración `params.toml`. + +## Diseño Tarjeta + +El diseño de tarjeta es una extensión del diseño de página. Proporciona el mismo nivel de flexibilidad mostrando también tu contenido markdown y añade una imagen de tarjeta para mostrar contenido visual. + +{{< figure src="img/home-card.png" class="thumbnailshadow" >}} + +Para habilitar el diseño Tarjeta, establece `homepage.layout = "card"` y `homepage.homepageImage` en el archivo de configuración `params.toml`. + + +## Diseño personalizado + +Si los diseños de página de inicio integrados no son suficientes para tus necesidades, tienes la opción de proporcionar tu propio diseño personalizado. Esto te permite tener control total sobre el contenido de la página y esencialmente te da una página en blanco para trabajar. + +Para habilitar el diseño personalizado, establece `homepage.layout = "custom"` en el archivo de configuración `params.toml`. + +Con el valor de configuración establecido, crea un nuevo archivo `custom.html` y colócalo en `layouts/partials/home/custom.html`. Ahora, lo que esté en el archivo `custom.html` se colocará en el área de contenido de la página de inicio del sitio. Puedes usar cualquier HTML, Tailwind o funciones de plantillas Hugo que desees para definir tu diseño. + +Para incluir [artículos recientes](#artículos-recientes) en el diseño personalizado, usa el partial `recent-articles/main.html`. + +Como ejemplo, la [página de inicio]({{< ref "/" >}}) de este sitio usa el diseño personalizado para permitir alternar entre los diseños de perfil y página. Visita el [repositorio de GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) para ver cómo funciona. + +## Artículos recientes + +Todos los diseños de página de inicio tienen la opción de mostrar artículos recientes debajo del contenido principal de la página. Para habilitar esto, simplemente establece la configuración `homepage.showRecent` en `true` en el archivo de configuración `params.toml`. + +{{< figure src="img/home-list.png" class="thumbnailshadow" >}} + +Los artículos listados en esta sección se derivan de la configuración `mainSections` que permite cualquier tipo de contenido que estés usando en tu sitio web. Por ejemplo, si tienes secciones de contenido para _posts_ y _projects_ podrías establecer esta configuración en `["posts", "projects"]` y todos los artículos en estas dos secciones se usarían para llenar la lista de recientes. El tema espera que esta configuración sea un array, así que si solo usas una sección para todo tu contenido, deberías establecerlo así: `["blog"]`. + +## Miniaturas + +Blowfish fue construido para que sea fácil agregar soporte visual a tus artículos. Si estás familiarizado con la estructura de artículos de Hugo, solo necesitas colocar un archivo de imagen (casi todos los formatos son compatibles pero recomendamos `.png` o `.jpg`) que comience con `feature*` dentro de tu carpeta de artículo. Y eso es todo, Blowfish podrá usar la imagen tanto como miniatura dentro de tu sitio web como para tarjetas oEmbed en plataformas sociales. + +[Aquí]({{< ref "thumbnails" >}}) hay una guía con más información y un [ejemplo]({{< ref "thumbnail_sample" >}}) si quieres ver un ejemplo. + +## Galería de tarjetas + +Blowfish también admite mostrar las listas estándar de artículos como galerías de tarjetas. Puedes configurar esto tanto para la sección de recientes en la página de inicio como para las listas de artículos en todo tu sitio web. Para la página de inicio puedes usar `homepage.cardView` y `homepage.cardViewScreenWidth`; y para las listas usa `list.cardView` y `list.cardViewScreenWidth`. Consulta la [documentación de configuración]({{< ref "configuration" >}}) para más detalles, y la página de inicio para una demostración en vivo. diff --git a/exampleSite/content/docs/homepage-layout/index.fr.md b/exampleSite/content/docs/homepage-layout/index.fr.md new file mode 100644 index 00000000..d05b978f --- /dev/null +++ b/exampleSite/content/docs/homepage-layout/index.fr.md @@ -0,0 +1,89 @@ +--- +title: "Mise en page de la page d'accueil" +weight: 5 +draft: false +description: "Configuration de la mise en page de la page d'accueil dans le thème Blowfish." +slug: "homepage-layout" +tags: ["page d'accueil", "mises en page", "documentation"] +series: ["Documentation"] +series_order: 5 +--- + +Blowfish offre une mise en page de page d'accueil entièrement flexible. Il y a deux modèles principaux à choisir avec des paramètres supplémentaires pour ajuster le design. Alternativement, vous pouvez également fournir votre propre modèle et avoir un contrôle total sur le contenu de la page d'accueil. + +La mise en page de la page d'accueil est contrôlée par le paramètre `homepage.layout` dans le fichier de configuration `params.toml`. De plus, toutes les mises en page ont l'option d'inclure une liste des [articles récents](#articles-récents). + +## Mise en page Profil + +La mise en page par défaut est la mise en page profil, idéale pour les sites web personnels et les blogs. Elle met les détails de l'auteur au premier plan en fournissant une image et des liens vers les profils sociaux. + +{{< figure src="img/home-profile.png" class="thumbnailshadow" >}} + +Les informations sur l'auteur sont fournies dans le fichier de configuration des langues. Consultez les sections [Premiers Pas]({{< ref "getting-started" >}}) et [Configuration de la langue]({{< ref "configuration##language-and-i18n" >}}) pour les détails des paramètres. + +De plus, tout contenu Markdown fourni dans le contenu de la page d'accueil sera placé sous le profil de l'auteur. Cela permet une flexibilité supplémentaire pour afficher une bio ou d'autres contenus personnalisés en utilisant des shortcodes. + +Pour activer la mise en page Profil, définissez `homepage.layout = "profile"` dans le fichier de configuration `params.toml`. + +## Mise en page Page + +La mise en page page est simplement une page de contenu normale qui affiche votre contenu Markdown. Elle est idéale pour les sites web statiques et offre beaucoup de flexibilité. + +{{< figure src="img/home-page.png" class="thumbnailshadow" >}} + +Pour activer la mise en page Page, définissez `homepage.layout = "page"` dans le fichier de configuration `params.toml`. + +## Mise en page Hero + +La mise en page hero rassemble des idées des mises en page profil et carte. Celle-ci affiche non seulement des informations sur l'auteur du site, mais charge également votre markdown en dessous. + +{{< figure src="img/home-hero.png" class="thumbnailshadow" >}} + +Pour activer la mise en page Hero, définissez `homepage.layout = "hero"` et `homepage.homepageImage` dans le fichier de configuration `params.toml`. + +## Mise en page Arrière-plan + +La mise en page arrière-plan est une version plus fluide de la mise en page hero. Comme pour la mise en page Hero, celle-ci affiche également les informations sur l'auteur du site et charge votre markdown en dessous. + +{{< figure src="img/home-background.png" class="thumbnailshadow" >}} + +Pour activer la mise en page Arrière-plan, définissez `homepage.layout = "background"` et `homepage.homepageImage` dans le fichier de configuration `params.toml`. + +## Mise en page Carte + +La mise en page carte est une extension de la mise en page page. Elle offre le même niveau de flexibilité en affichant également votre contenu markdown et ajoute une image de carte pour afficher du contenu visuel. + +{{< figure src="img/home-card.png" class="thumbnailshadow" >}} + +Pour activer la mise en page Carte, définissez `homepage.layout = "card"` et `homepage.homepageImage` dans le fichier de configuration `params.toml`. + + +## Mise en page personnalisée + +Si les mises en page de page d'accueil intégrées ne sont pas suffisantes pour vos besoins, vous avez la possibilité de fournir votre propre mise en page personnalisée. Cela vous permet d'avoir un contrôle total sur le contenu de la page et vous donne essentiellement une page blanche pour travailler. + +Pour activer la mise en page personnalisée, définissez `homepage.layout = "custom"` dans le fichier de configuration `params.toml`. + +Avec la valeur de configuration définie, créez un nouveau fichier `custom.html` et placez-le dans `layouts/partials/home/custom.html`. Maintenant, tout ce qui est dans le fichier `custom.html` sera placé dans la zone de contenu de la page d'accueil du site. Vous pouvez utiliser n'importe quel HTML, Tailwind, ou fonctions de templating Hugo que vous souhaitez pour définir votre mise en page. + +Pour inclure les [articles récents](#articles-récents) dans la mise en page personnalisée, utilisez le partial `recent-articles/main.html`. + +Par exemple, la [page d'accueil]({{< ref "/" >}}) de ce site utilise la mise en page personnalisée pour permettre de basculer entre les mises en page profil et page. Visitez le [dépôt GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) pour voir comment cela fonctionne. + +## Articles récents + +Toutes les mises en page de page d'accueil ont l'option d'afficher les articles récents sous le contenu principal de la page. Pour activer cela, définissez simplement le paramètre `homepage.showRecent` sur `true` dans le fichier de configuration `params.toml`. + +{{< figure src="img/home-list.png" class="thumbnailshadow" >}} + +Les articles listés dans cette section sont dérivés du paramètre `mainSections` qui permet d'utiliser n'importe quels types de contenu que vous utilisez sur votre site web. Par exemple, si vous avez des sections de contenu pour _posts_ et _projects_, vous pourriez définir ce paramètre sur `["posts", "projects"]` et tous les articles de ces deux sections seraient utilisés pour remplir la liste récente. Le thème s'attend à ce que ce paramètre soit un tableau, donc si vous n'utilisez qu'une seule section pour tout votre contenu, vous devriez le définir en conséquence : `["blog"]`. + +## Vignettes + +Blowfish a été conçu pour qu'il soit facile d'ajouter un support visuel à vos articles. Si vous êtes familier avec la structure des articles Hugo, il vous suffit de placer un fichier image (presque tous les formats sont pris en charge mais nous recommandons `.png` ou `.jpg`) qui commence par `feature*` dans votre dossier d'article. Et c'est tout, Blowfish pourra alors utiliser l'image à la fois comme vignette sur votre site et pour les cartes oEmbed sur les plateformes sociales. + +[Voici]({{< ref "thumbnails" >}}) un guide avec plus d'informations et un [exemple]({{< ref "thumbnail_sample" >}}) si vous voulez voir un exemple. + +## Galerie de cartes + +Blowfish prend également en charge l'affichage des listes d'articles standard sous forme de galeries de cartes. Vous pouvez configurer cela à la fois pour la section récente sur la page d'accueil et pour les listes d'articles sur tout votre site web. Pour la page d'accueil, vous pouvez utiliser `homepage.cardView` et `homepage.cardViewScreenWidth` ; et pour les listes, utilisez `list.cardView` et `list.cardViewScreenWidth`. Consultez la [documentation de configuration]({{< ref "configuration" >}}) pour plus de détails, et la page d'accueil pour une démo en direct. diff --git a/exampleSite/content/docs/homepage-layout/index.pt-br.md b/exampleSite/content/docs/homepage-layout/index.pt-br.md new file mode 100644 index 00000000..b7aa7e48 --- /dev/null +++ b/exampleSite/content/docs/homepage-layout/index.pt-br.md @@ -0,0 +1,89 @@ +--- +title: "Layout da Página Inicial" +weight: 5 +draft: false +description: "Configurando o layout da página inicial no tema Blowfish." +slug: "homepage-layout" +tags: ["página inicial", "layouts", "documentação"] +series: ["Documentação"] +series_order: 5 +--- + +O Blowfish fornece um layout de página inicial totalmente flexível. Existem dois modelos principais para escolher com configurações adicionais para ajustar o design. Alternativamente, você também pode fornecer seu próprio modelo e ter controle total sobre o conteúdo da página inicial. + +O layout da página inicial é controlado pela configuração `homepage.layout` no arquivo de configuração `params.toml`. Além disso, todos os layouts têm a opção de incluir uma lista de [artigos recentes](#artigos-recentes). + +## Layout Perfil + +O layout padrão é o layout de perfil, que é ótimo para sites pessoais e blogs. Ele coloca os detalhes do autor em primeiro plano, fornecendo uma imagem e links para perfis sociais. + +{{< figure src="img/home-profile.png" class="thumbnailshadow" >}} + +As informações do autor são fornecidas no arquivo de configuração de idiomas. Consulte as seções [Primeiros Passos]({{< ref "getting-started" >}}) e [Configuração de Idioma]({{< ref "configuration##language-and-i18n" >}}) para detalhes dos parâmetros. + +Além disso, qualquer conteúdo Markdown fornecido no conteúdo da página inicial será colocado abaixo do perfil do autor. Isso permite flexibilidade extra para exibir uma biografia ou outro conteúdo personalizado usando shortcodes. + +Para habilitar o layout Perfil, defina `homepage.layout = "profile"` no arquivo de configuração `params.toml`. + +## Layout Página + +O layout de página é simplesmente uma página de conteúdo normal que exibe seu conteúdo Markdown. É ótimo para sites estáticos e fornece muita flexibilidade. + +{{< figure src="img/home-page.png" class="thumbnailshadow" >}} + +Para habilitar o layout Página, defina `homepage.layout = "page"` no arquivo de configuração `params.toml`. + +## Layout Hero + +O layout hero combina ideias dos layouts de perfil e cartão. Este não apenas exibe informações sobre o autor do site, mas também carrega seu markdown abaixo dele. + +{{< figure src="img/home-hero.png" class="thumbnailshadow" >}} + +Para habilitar o layout Hero, defina `homepage.layout = "hero"` e `homepage.homepageImage` no arquivo de configuração `params.toml`. + +## Layout Fundo + +O layout de fundo é uma versão mais suave do layout hero. Assim como no layout Hero, este também exibe informações sobre o autor do site e carrega seu markdown abaixo dele. + +{{< figure src="img/home-background.png" class="thumbnailshadow" >}} + +Para habilitar o layout Fundo, defina `homepage.layout = "background"` e `homepage.homepageImage` no arquivo de configuração `params.toml`. + +## Layout Cartão + +O layout de cartão é uma extensão do layout de página. Ele fornece o mesmo nível de flexibilidade, também exibindo seu conteúdo markdown e adiciona uma imagem de cartão para exibir conteúdo visual. + +{{< figure src="img/home-card.png" class="thumbnailshadow" >}} + +Para habilitar o layout Cartão, defina `homepage.layout = "card"` e `homepage.homepageImage` no arquivo de configuração `params.toml`. + + +## Layout personalizado + +Se os layouts de página inicial integrados não forem suficientes para suas necessidades, você tem a opção de fornecer seu próprio layout personalizado. Isso permite que você tenha controle total sobre o conteúdo da página e essencialmente lhe dá uma tela em branco para trabalhar. + +Para habilitar o layout personalizado, defina `homepage.layout = "custom"` no arquivo de configuração `params.toml`. + +Com o valor de configuração definido, crie um novo arquivo `custom.html` e coloque-o em `layouts/partials/home/custom.html`. Agora, o que estiver no arquivo `custom.html` será colocado na área de conteúdo da página inicial do site. Você pode usar qualquer HTML, Tailwind ou funções de template Hugo que desejar para definir seu layout. + +Para incluir [artigos recentes](#artigos-recentes) no layout personalizado, use o partial `recent-articles/main.html`. + +Como exemplo, a [página inicial]({{< ref "/" >}}) deste site usa o layout personalizado para permitir alternar entre os layouts de perfil e página. Visite o [repositório GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) para ver como funciona. + +## Artigos recentes + +Todos os layouts de página inicial têm a opção de exibir artigos recentes abaixo do conteúdo principal da página. Para habilitar isso, basta definir a configuração `homepage.showRecent` como `true` no arquivo de configuração `params.toml`. + +{{< figure src="img/home-list.png" class="thumbnailshadow" >}} + +Os artigos listados nesta seção são derivados da configuração `mainSections` que permite quaisquer tipos de conteúdo que você esteja usando em seu site. Por exemplo, se você tiver seções de conteúdo para _posts_ e _projects_, você poderia definir esta configuração como `["posts", "projects"]` e todos os artigos nessas duas seções seriam usados para preencher a lista de recentes. O tema espera que esta configuração seja um array, então se você usar apenas uma seção para todo o seu conteúdo, você deve definir assim: `["blog"]`. + +## Miniaturas + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se você está familiarizado com a estrutura de artigos do Hugo, basta colocar um arquivo de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá usar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se você quiser ver um exemplo. + +## Galeria de cartões + +O Blowfish também suporta exibir as listas padrão de artigos como galerias de cartões. Você pode configurar isso tanto para a seção de recentes na página inicial quanto para listas de artigos em todo o seu site. Para a página inicial, você pode usar `homepage.cardView` e `homepage.cardViewScreenWidth`; e para listas, use `list.cardView` e `list.cardViewScreenWidth`. Consulte a [documentação de configuração]({{< ref "configuration" >}}) para mais detalhes, e a página inicial para uma demonstração ao vivo. diff --git a/exampleSite/content/docs/homepage-layout/index.pt-pt.md b/exampleSite/content/docs/homepage-layout/index.pt-pt.md new file mode 100644 index 00000000..d5b18b7d --- /dev/null +++ b/exampleSite/content/docs/homepage-layout/index.pt-pt.md @@ -0,0 +1,89 @@ +--- +title: "Layout da Página Inicial" +weight: 5 +draft: false +description: "Configuração do layout da página inicial no tema Blowfish." +slug: "homepage-layout" +tags: ["página inicial", "layouts", "documentação"] +series: ["Documentação"] +series_order: 5 +--- + +O Blowfish fornece um layout de página inicial totalmente flexível. Existem dois modelos principais para escolher com definições adicionais para ajustar o design. Alternativamente, também pode fornecer o seu próprio modelo e ter controlo total sobre o conteúdo da página inicial. + +O layout da página inicial é controlado pela definição `homepage.layout` no ficheiro de configuração `params.toml`. Além disso, todos os layouts têm a opção de incluir uma lista de [artigos recentes](#artigos-recentes). + +## Layout Perfil + +O layout predefinido é o layout de perfil, que é ótimo para sites pessoais e blogues. Coloca os detalhes do autor em primeiro plano, fornecendo uma imagem e ligações para perfis sociais. + +{{< figure src="img/home-profile.png" class="thumbnailshadow" >}} + +As informações do autor são fornecidas no ficheiro de configuração de idiomas. Consulte as secções [Primeiros Passos]({{< ref "getting-started" >}}) e [Configuração de Idioma]({{< ref "configuration##language-and-i18n" >}}) para detalhes dos parâmetros. + +Além disso, qualquer conteúdo Markdown fornecido no conteúdo da página inicial será colocado abaixo do perfil do autor. Isto permite flexibilidade extra para apresentar uma biografia ou outro conteúdo personalizado utilizando shortcodes. + +Para ativar o layout Perfil, defina `homepage.layout = "profile"` no ficheiro de configuração `params.toml`. + +## Layout Página + +O layout de página é simplesmente uma página de conteúdo normal que apresenta o seu conteúdo Markdown. É ótimo para sites estáticos e fornece muita flexibilidade. + +{{< figure src="img/home-page.png" class="thumbnailshadow" >}} + +Para ativar o layout Página, defina `homepage.layout = "page"` no ficheiro de configuração `params.toml`. + +## Layout Hero + +O layout hero combina ideias dos layouts de perfil e cartão. Este não só apresenta informações sobre o autor do site, mas também carrega o seu markdown abaixo. + +{{< figure src="img/home-hero.png" class="thumbnailshadow" >}} + +Para ativar o layout Hero, defina `homepage.layout = "hero"` e `homepage.homepageImage` no ficheiro de configuração `params.toml`. + +## Layout Fundo + +O layout de fundo é uma versão mais suave do layout hero. Tal como no layout Hero, este também apresenta informações sobre o autor do site e carrega o seu markdown abaixo. + +{{< figure src="img/home-background.png" class="thumbnailshadow" >}} + +Para ativar o layout Fundo, defina `homepage.layout = "background"` e `homepage.homepageImage` no ficheiro de configuração `params.toml`. + +## Layout Cartão + +O layout de cartão é uma extensão do layout de página. Fornece o mesmo nível de flexibilidade, também apresentando o seu conteúdo markdown e adiciona uma imagem de cartão para apresentar conteúdo visual. + +{{< figure src="img/home-card.png" class="thumbnailshadow" >}} + +Para ativar o layout Cartão, defina `homepage.layout = "card"` e `homepage.homepageImage` no ficheiro de configuração `params.toml`. + + +## Layout personalizado + +Se os layouts de página inicial integrados não forem suficientes para as suas necessidades, tem a opção de fornecer o seu próprio layout personalizado. Isto permite-lhe ter controlo total sobre o conteúdo da página e essencialmente dá-lhe uma tela em branco para trabalhar. + +Para ativar o layout personalizado, defina `homepage.layout = "custom"` no ficheiro de configuração `params.toml`. + +Com o valor de configuração definido, crie um novo ficheiro `custom.html` e coloque-o em `layouts/partials/home/custom.html`. Agora, o que estiver no ficheiro `custom.html` será colocado na área de conteúdo da página inicial do site. Pode utilizar qualquer HTML, Tailwind ou funções de template Hugo que desejar para definir o seu layout. + +Para incluir [artigos recentes](#artigos-recentes) no layout personalizado, utilize o partial `recent-articles/main.html`. + +Como exemplo, a [página inicial]({{< ref "/" >}}) deste site utiliza o layout personalizado para permitir alternar entre os layouts de perfil e página. Visite o [repositório GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) para ver como funciona. + +## Artigos recentes + +Todos os layouts de página inicial têm a opção de apresentar artigos recentes abaixo do conteúdo principal da página. Para ativar isto, basta definir a configuração `homepage.showRecent` como `true` no ficheiro de configuração `params.toml`. + +{{< figure src="img/home-list.png" class="thumbnailshadow" >}} + +Os artigos listados nesta secção são derivados da definição `mainSections` que permite quaisquer tipos de conteúdo que esteja a utilizar no seu site. Por exemplo, se tiver secções de conteúdo para _posts_ e _projects_, poderia definir esta configuração como `["posts", "projects"]` e todos os artigos nestas duas secções seriam utilizados para preencher a lista de recentes. O tema espera que esta definição seja um array, pelo que se utilizar apenas uma secção para todo o seu conteúdo, deve definir assim: `["blog"]`. + +## Miniaturas + +O Blowfish foi construído para facilitar a adição de suporte visual aos seus artigos. Se está familiarizado com a estrutura de artigos do Hugo, basta colocar um ficheiro de imagem (quase todos os formatos são suportados, mas recomendamos `.png` ou `.jpg`) que comece com `feature*` dentro da pasta do seu artigo. E é isso, o Blowfish poderá utilizar a imagem tanto como miniatura dentro do seu site quanto para cartões oEmbed em plataformas sociais. + +[Aqui]({{< ref "thumbnails" >}}) há um guia com mais informações e um [exemplo]({{< ref "thumbnail_sample" >}}) se quiser ver um exemplo. + +## Galeria de cartões + +O Blowfish também suporta apresentar as listas padrão de artigos como galerias de cartões. Pode configurar isto tanto para a secção de recentes na página inicial quanto para listas de artigos em todo o seu site. Para a página inicial, pode utilizar `homepage.cardView` e `homepage.cardViewScreenWidth`; e para listas, utilize `list.cardView` e `list.cardViewScreenWidth`. Consulte a [documentação de configuração]({{< ref "configuration" >}}) para mais detalhes, e a página inicial para uma demonstração ao vivo. diff --git a/exampleSite/content/docs/hosting-deployment/index.de.md b/exampleSite/content/docs/hosting-deployment/index.de.md new file mode 100644 index 00000000..7ac45a97 --- /dev/null +++ b/exampleSite/content/docs/hosting-deployment/index.de.md @@ -0,0 +1,148 @@ +--- +title: "Hosting & Bereitstellung" +weight: 14 +draft: false +description: "Erfahren Sie, wie Sie eine Blowfish-Website bereitstellen." +slug: "hosting-deployment" +tags: ["dokumentation", "hosting", "bereitstellung", "github", "netlify", "render"] +series: ["Dokumentation"] +series_order: 14 +--- + +Es gibt viele Möglichkeiten, Ihre mit Blowfish erstellte Hugo-Website bereitzustellen. Das Theme ist so konzipiert, dass es in fast jedem Bereitstellungsszenario flexibel einsetzbar ist. + +Blowfish verwendet durchgehend relative URLs im gesamten Theme. Dies ermöglicht es, Websites einfach in Unterordnern und auf Hosts wie GitHub Pages bereitzustellen. Normalerweise ist keine spezielle Konfiguration erforderlich, solange der `baseURL`-Parameter in der `hugo.toml`-Datei korrekt konfiguriert wurde. + +Die offizielle Hugo [Hosting und Bereitstellung](https://gohugo.io/hosting-and-deployment/) Dokumentation ist der beste Ort, um zu lernen, wie Sie Ihre Website bereitstellen. Die folgenden Abschnitte enthalten einige spezifische Theme-Konfigurationsdetails, die Ihnen helfen können, bei bestimmten Anbietern reibungslos zu deployen. + +**Wählen Sie Ihren Anbieter:** + +- [GitHub Pages](#github-pages) +- [Netlify](#netlify) +- [Render](#render) +- [Cloudflare Pages](#cloudflare-pages) +- [Shared Hosting, VPS oder privater Webserver](#shared-hosting-vps-oder-privater-webserver) + +--- + +## GitHub Pages + +GitHub ermöglicht das Hosting auf [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) mit Actions. Um diese Funktionalität zu aktivieren, aktivieren Sie Pages in Ihrem Repository und erstellen Sie einen neuen Actions-Workflow, um Ihre Website zu erstellen und bereitzustellen. + +Die Datei muss im YAML-Format sein, im Verzeichnis `.github/workflows/` Ihres GitHub-Repositories platziert und mit der Erweiterung `.yml` benannt werden. + +{{< alert >}} +**Wichtig:** Stellen Sie sicher, dass Sie den korrekten Branch-Namen unter `branches` und im Deploy-Schritt-`if`-Parameter auf den Quell-Branch setzen, der in Ihrem Projekt verwendet wird. +{{< /alert >}} + +```yaml +# .github/workflows/gh-pages.yml + +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build-deploy: + runs-on: ubuntu-24.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: true + fetch-depth: 0 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: "latest" + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/main' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Pushen Sie die Konfigurationsdatei zu GitHub und die Action sollte automatisch ausgeführt werden. Sie könnte beim ersten Mal fehlschlagen, und Sie müssen den Abschnitt **Settings > Pages** Ihres GitHub-Repos besuchen, um zu überprüfen, ob die Quelle korrekt ist. Sie sollte auf den `gh-pages`-Branch eingestellt sein. + +{{< screenshot src="github-pages-source.jpg" alt="Screenshot der GitHub Pages Quelle" >}} + +Sobald die Einstellungen konfiguriert sind, führen Sie die Action erneut aus und die Website sollte korrekt erstellt und bereitgestellt werden. Sie können die Actions-Logs einsehen, um zu überprüfen, ob alles erfolgreich bereitgestellt wurde. + +## Netlify + +Um auf [Netlify](https://www.netlify.com) bereitzustellen, erstellen Sie eine neue Continuous Deployment-Site und verknüpfen Sie sie mit Ihrem Quellcode. Die Build-Einstellungen können in der Netlify-UI leer gelassen werden. Sie müssen nur die Domain konfigurieren, die Sie verwenden werden. + +{{< screenshot src="netlify-build-settings.jpg" alt="Screenshot der Netlify Build-Einstellungen" >}} + +Erstellen Sie dann im Root-Verzeichnis Ihres Site-Repositories eine `netlify.toml`-Datei: + +```toml +# netlify.toml + +[build] + command = "hugo mod get -u && hugo --gc --minify -b $URL" + publish = "public" + +[build.environment] + NODE_ENV = "production" + GO_VERSION = "1.16" + TZ = "UTC" # Auf bevorzugte Zeitzone setzen + +[context.production.environment] + HUGO_VERSION = "0.104.1" + HUGO_ENV = "production" + +[context.deploy-preview.environment] + HUGO_VERSION = "0.104.1" +``` + +Diese Konfiguration geht davon aus, dass Sie Blowfish als Hugo-Modul bereitstellen. Wenn Sie das Theme mit einer anderen Methode installiert haben, ändern Sie den Build-Befehl einfach zu `hugo --gc --minify -b $URL`. + +Wenn Sie die Konfigurationsdatei in Ihr Repository pushen, sollte Netlify Ihre Website automatisch bereitstellen. Sie können die Deploy-Logs in der Netlify-UI überprüfen, um nach Fehlern zu suchen. + +## Render + +Die Bereitstellung auf [Render](https://render.com) ist sehr unkompliziert und die gesamte Konfiguration erfolgt über die Render-UI. + +Erstellen Sie eine neue **Static Site** und verknüpfen Sie sie mit dem Code-Repository Ihres Projekts. Konfigurieren Sie dann einfach den Build-Befehl als `hugo --gc --minify` und das Publish-Verzeichnis als `public`. + +{{< screenshot src="render-settings.jpg" alt="Screenshot der Render-Einstellungen" >}} + +Die Website wird automatisch erstellt und bereitgestellt, wenn Sie eine Änderung in Ihr Repository pushen. + +## Cloudflare Pages + +Cloudflare bietet den [Pages](https://pages.cloudflare.com/)-Dienst an, der Hugo-Blogs hosten kann. Er erstellt die Website aus einem Git-Repository und hostet sie dann auf dem CDN von Cloudflare. Folgen Sie deren [Hugo-Bereitstellungsanleitung](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site), um loszulegen. + +Die von Cloudflare angebotene Rocket Loader™-Funktion versucht, das Rendering von Webseiten mit JavaScript zu beschleunigen, aber sie unterbricht den Erscheinungsbild-Umschalter im Theme. Sie kann auch ein störendes Hell-/Dunkel-Bildschirmflackern beim Durchsuchen Ihrer Website verursachen, da Skripte in der falschen Reihenfolge geladen werden. + +Dieses Problem kann behoben werden, indem Sie es deaktivieren: + +- Gehen Sie zum [Cloudflare Dashboard](https://dash.cloudflare.com) +- Klicken Sie auf Ihren Domainnamen in der Liste +- Klicken Sie auf _Optimization_ im Abschnitt _Speed_ +- Scrollen Sie nach unten zu _Rocket Loader™_ und deaktivieren Sie es + +Hugo-Websites, die mit Blowfish erstellt wurden, laden auch mit deaktivierter Funktion immer noch sehr schnell. + +## Shared Hosting, VPS oder privater Webserver + +Die Verwendung von traditionellem Webhosting oder die Bereitstellung auf Ihrem eigenen Webserver ist so einfach wie das Erstellen Ihrer Hugo-Website und das Übertragen der Dateien auf Ihren Host. + +Stellen Sie sicher, dass der `baseURL`-Parameter in `hugo.toml` auf die vollständige URL zum Root Ihrer Website gesetzt ist (einschließlich aller Subdomains oder Unterordner). + +Erstellen Sie dann Ihre Website mit `hugo` und kopieren Sie den Inhalt des Ausgabeverzeichnisses in das Root-Verzeichnis Ihres Webservers und Sie sind bereit. Standardmäßig heißt das Ausgabeverzeichnis `public`. + +_Wenn Sie einen Hosting-Anbieter benötigen, schauen Sie sich [Vultr](https://www.vultr.com/?ref=8957394-8H) oder [DigitalOcean](https://m.do.co/c/36841235e565) an. Die Anmeldung über diese Affiliate-Links gibt Ihnen bis zu 100 $ kostenloses Guthaben, damit Sie den Service ausprobieren können._ diff --git a/exampleSite/content/docs/hosting-deployment/index.es.md b/exampleSite/content/docs/hosting-deployment/index.es.md new file mode 100644 index 00000000..499f73c2 --- /dev/null +++ b/exampleSite/content/docs/hosting-deployment/index.es.md @@ -0,0 +1,148 @@ +--- +title: "Alojamiento y despliegue" +weight: 14 +draft: false +description: "Aprende cómo desplegar un sitio Blowfish." +slug: "hosting-deployment" +tags: ["documentación", "alojamiento", "despliegue", "github", "netlify", "render"] +series: ["Documentación"] +series_order: 14 +--- + +Hay muchas formas de desplegar tu sitio web Hugo construido con Blowfish. El tema está diseñado para ser flexible en casi cualquier escenario de despliegue. + +Blowfish usa URLs relativas en todo el tema. Esto permite que los sitios se desplieguen fácilmente en subcarpetas y hosts como GitHub Pages. Normalmente no se requiere ninguna configuración especial siempre que el parámetro `baseURL` haya sido configurado en el archivo `hugo.toml`. + +La documentación oficial de Hugo [Alojamiento y Despliegue](https://gohugo.io/hosting-and-deployment/) es el mejor lugar para aprender cómo desplegar tu sitio. Las secciones siguientes contienen algunos detalles de configuración específicos del tema que pueden ayudarte a desplegar sin problemas con ciertos proveedores. + +**Elige tu proveedor:** + +- [GitHub Pages](#github-pages) +- [Netlify](#netlify) +- [Render](#render) +- [Cloudflare Pages](#cloudflare-pages) +- [Hosting compartido, VPS o servidor web privado](#hosting-compartido-vps-o-servidor-web-privado) + +--- + +## GitHub Pages + +GitHub permite alojar en [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) usando Actions. Para habilitar esta funcionalidad, activa Pages en tu repositorio y crea un nuevo workflow de Actions para construir y desplegar tu sitio. + +El archivo necesita estar en formato YAML, colocado dentro del directorio `.github/workflows/` de tu repositorio de GitHub y nombrado con extensión `.yml`. + +{{< alert >}} +**Importante:** Asegúrate de establecer el nombre de rama correcto bajo `branches` y en el parámetro `if` del paso de despliegue hacia la rama fuente usada en tu proyecto. +{{< /alert >}} + +```yaml +# .github/workflows/gh-pages.yml + +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build-deploy: + runs-on: ubuntu-24.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: true + fetch-depth: 0 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: "latest" + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/main' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Sube el archivo de configuración a GitHub y la acción debería ejecutarse automáticamente. Puede fallar la primera vez y necesitarás visitar la sección **Settings > Pages** de tu repositorio de GitHub para verificar que la fuente es correcta. Debería estar configurada para usar la rama `gh-pages`. + +{{< screenshot src="github-pages-source.jpg" alt="Captura de pantalla de la fuente de GitHub Pages" >}} + +Una vez que los ajustes estén configurados, vuelve a ejecutar la acción y el sitio debería construirse y desplegarse correctamente. Puedes consultar los logs de acciones para verificar que todo se desplegó exitosamente. + +## Netlify + +Para desplegar en [Netlify](https://www.netlify.com), crea un nuevo sitio de despliegue continuo y enlázalo a tu código fuente. Los ajustes de construcción pueden dejarse en blanco en la interfaz de Netlify. Solo necesitarás configurar el dominio que usarás. + +{{< screenshot src="netlify-build-settings.jpg" alt="Captura de pantalla de los ajustes de construcción de Netlify" >}} + +Luego en la raíz del repositorio de tu sitio, crea un archivo `netlify.toml`: + +```toml +# netlify.toml + +[build] + command = "hugo mod get -u && hugo --gc --minify -b $URL" + publish = "public" + +[build.environment] + NODE_ENV = "production" + GO_VERSION = "1.16" + TZ = "UTC" # Establecer a la zona horaria preferida + +[context.production.environment] + HUGO_VERSION = "0.104.1" + HUGO_ENV = "production" + +[context.deploy-preview.environment] + HUGO_VERSION = "0.104.1" +``` + +Esta configuración asume que estás desplegando Blowfish como un módulo de Hugo. Si has instalado el tema usando otro método, cambia el comando de construcción simplemente a `hugo --gc --minify -b $URL`. + +Cuando subas el archivo de configuración a tu repositorio, Netlify debería desplegar automáticamente tu sitio. Puedes verificar los logs de despliegue en la interfaz de Netlify para cualquier error. + +## Render + +Desplegar en [Render](https://render.com) es muy sencillo y toda la configuración se hace a través de la interfaz de Render. + +Crea un nuevo **Static Site** y enlázalo al repositorio de código de tu proyecto. Luego simplemente configura el comando de construcción como `hugo --gc --minify` y el directorio de publicación como `public`. + +{{< screenshot src="render-settings.jpg" alt="Captura de pantalla de los ajustes de Render" >}} + +El sitio se construirá y desplegará automáticamente cada vez que subas un cambio a tu repositorio. + +## Cloudflare Pages + +Cloudflare ofrece el servicio [Pages](https://pages.cloudflare.com/) que puede alojar blogs de Hugo. Construye el sitio desde un repositorio git y luego lo aloja en el CDN de Cloudflare. Sigue su [guía de despliegue de Hugo](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) para comenzar. + +La función Rocket Loader™ ofrecida por Cloudflare intenta acelerar el renderizado de páginas web con JavaScript, pero rompe el selector de apariencia en el tema. También puede causar un molesto parpadeo de pantalla claro/oscuro al navegar por tu sitio debido a que los scripts se cargan en el orden incorrecto. + +Este problema se puede solucionar desactivándolo: + +- Ve al [panel de Cloudflare](https://dash.cloudflare.com) +- Haz clic en tu nombre de dominio en la lista +- Haz clic en _Optimization_ en la sección _Speed_ +- Desplázate hacia abajo hasta _Rocket Loader™_ y desactívalo + +Los sitios Hugo construidos con Blowfish aún cargan muy rápido, incluso con esta función desactivada. + +## Hosting compartido, VPS o servidor web privado + +Usar hosting web tradicional, o desplegar en tu propio servidor web, es tan simple como construir tu sitio Hugo y transferir los archivos a tu host. + +Asegúrate de que el parámetro `baseURL` en `hugo.toml` esté establecido a la URL completa hacia la raíz de tu sitio web (incluyendo cualquier subdominio o subcarpeta). + +Luego construye tu sitio usando `hugo` y copia el contenido del directorio de salida a la raíz de tu servidor web y estarás listo. Por defecto, el directorio de salida se llama `public`. + +_Si necesitas un proveedor de hosting, echa un vistazo a [Vultr](https://www.vultr.com/?ref=8957394-8H) o [DigitalOcean](https://m.do.co/c/36841235e565). Registrarte usando estos enlaces de afiliado te dará hasta $100 en crédito gratis para que puedas probar el servicio._ diff --git a/exampleSite/content/docs/hosting-deployment/index.fr.md b/exampleSite/content/docs/hosting-deployment/index.fr.md new file mode 100644 index 00000000..c981550c --- /dev/null +++ b/exampleSite/content/docs/hosting-deployment/index.fr.md @@ -0,0 +1,148 @@ +--- +title: "Hébergement & Déploiement" +weight: 14 +draft: false +description: "Apprenez à déployer un site Blowfish." +slug: "hosting-deployment" +tags: ["documentation", "hébergement", "déploiement", "github", "netlify", "render"] +series: ["Documentation"] +series_order: 14 +--- + +Il existe de nombreuses façons de déployer votre site web Hugo construit avec Blowfish. Le thème est conçu pour être flexible dans presque tous les scénarios de déploiement. + +Blowfish utilise des URLs relatives tout au long du thème. Cela permet aux sites d'être facilement déployés dans des sous-dossiers et sur des hôtes comme GitHub Pages. Il n'y a généralement pas de configuration spéciale requise tant que le paramètre `baseURL` a été configuré dans le fichier `hugo.toml`. + +La documentation officielle Hugo [Hébergement et Déploiement](https://gohugo.io/hosting-and-deployment/) est le meilleur endroit pour apprendre à déployer votre site. Les sections ci-dessous contiennent quelques détails de configuration spécifiques au thème qui peuvent vous aider à déployer sans problème avec certains fournisseurs. + +**Choisissez votre fournisseur :** + +- [GitHub Pages](#github-pages) +- [Netlify](#netlify) +- [Render](#render) +- [Cloudflare Pages](#cloudflare-pages) +- [Hébergement partagé, VPS ou serveur web privé](#hébergement-partagé-vps-ou-serveur-web-privé) + +--- + +## GitHub Pages + +GitHub permet l'hébergement sur [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) en utilisant Actions. Pour activer cette fonctionnalité, activez Pages sur votre dépôt et créez un nouveau workflow Actions pour construire et déployer votre site. + +Le fichier doit être au format YAML, placé dans le répertoire `.github/workflows/` de votre dépôt GitHub et nommé avec une extension `.yml`. + +{{< alert >}} +**Important :** Assurez-vous de définir le bon nom de branche sous `branches` et dans le paramètre `if` de l'étape de déploiement vers la branche source utilisée dans votre projet. +{{< /alert >}} + +```yaml +# .github/workflows/gh-pages.yml + +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build-deploy: + runs-on: ubuntu-24.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: true + fetch-depth: 0 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: "latest" + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/main' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Poussez le fichier de configuration vers GitHub et l'action devrait s'exécuter automatiquement. Elle peut échouer la première fois et vous devrez visiter la section **Settings > Pages** de votre dépôt GitHub pour vérifier que la source est correcte. Elle devrait être configurée pour utiliser la branche `gh-pages`. + +{{< screenshot src="github-pages-source.jpg" alt="Capture d'écran de la source GitHub Pages" >}} + +Une fois les paramètres configurés, relancez l'action et le site devrait se construire et se déployer correctement. Vous pouvez consulter les logs d'actions pour vérifier que tout s'est déployé avec succès. + +## Netlify + +Pour déployer sur [Netlify](https://www.netlify.com), créez un nouveau site de déploiement continu et liez-le à votre code source. Les paramètres de construction peuvent être laissés vides dans l'interface Netlify. Vous n'aurez qu'à configurer le domaine que vous utiliserez. + +{{< screenshot src="netlify-build-settings.jpg" alt="Capture d'écran des paramètres de construction Netlify" >}} + +Puis dans la racine du dépôt de votre site, créez un fichier `netlify.toml` : + +```toml +# netlify.toml + +[build] + command = "hugo mod get -u && hugo --gc --minify -b $URL" + publish = "public" + +[build.environment] + NODE_ENV = "production" + GO_VERSION = "1.16" + TZ = "UTC" # Définir selon le fuseau horaire préféré + +[context.production.environment] + HUGO_VERSION = "0.104.1" + HUGO_ENV = "production" + +[context.deploy-preview.environment] + HUGO_VERSION = "0.104.1" +``` + +Cette configuration suppose que vous déployez Blowfish en tant que module Hugo. Si vous avez installé le thème en utilisant une autre méthode, changez la commande de construction simplement en `hugo --gc --minify -b $URL`. + +Lorsque vous poussez le fichier de configuration vers votre dépôt, Netlify devrait déployer automatiquement votre site. Vous pouvez vérifier les logs de déploiement dans l'interface Netlify pour toute erreur. + +## Render + +Le déploiement sur [Render](https://render.com) est très simple et toute la configuration se fait via l'interface Render. + +Créez un nouveau **Static Site** et liez-le au dépôt de code de votre projet. Puis configurez simplement la commande de construction comme `hugo --gc --minify` et le répertoire de publication comme `public`. + +{{< screenshot src="render-settings.jpg" alt="Capture d'écran des paramètres Render" >}} + +Le site se construira et se déploiera automatiquement chaque fois que vous pousserez un changement vers votre dépôt. + +## Cloudflare Pages + +Cloudflare offre le service [Pages](https://pages.cloudflare.com/) qui peut héberger des blogs Hugo. Il construit le site à partir d'un dépôt git et l'héberge ensuite sur le CDN de Cloudflare. Suivez leur [guide de déploiement Hugo](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) pour commencer. + +La fonctionnalité Rocket Loader™ offerte par Cloudflare essaie d'accélérer le rendu des pages web avec JavaScript, mais elle casse le sélecteur d'apparence dans le thème. Elle peut également causer un flash d'écran clair/sombre ennuyeux lors de la navigation sur votre site en raison du chargement des scripts dans le mauvais ordre. + +Ce problème peut être résolu en le désactivant : + +- Allez sur le [tableau de bord Cloudflare](https://dash.cloudflare.com) +- Cliquez sur votre nom de domaine dans la liste +- Cliquez sur _Optimization_ dans la section _Speed_ +- Faites défiler jusqu'à _Rocket Loader™_ et désactivez-le + +Les sites Hugo construits avec Blowfish chargent toujours très rapidement, même avec cette fonctionnalité désactivée. + +## Hébergement partagé, VPS ou serveur web privé + +Utiliser un hébergement web traditionnel, ou déployer sur votre propre serveur web, est aussi simple que de construire votre site Hugo et de transférer les fichiers vers votre hôte. + +Assurez-vous que le paramètre `baseURL` dans `hugo.toml` est défini sur l'URL complète vers la racine de votre site web (y compris les sous-domaines ou sous-dossiers). + +Puis construisez votre site en utilisant `hugo` et copiez le contenu du répertoire de sortie vers la racine de votre serveur web et vous serez prêt. Par défaut, le répertoire de sortie est nommé `public`. + +_Si vous avez besoin d'un fournisseur d'hébergement, consultez [Vultr](https://www.vultr.com/?ref=8957394-8H) ou [DigitalOcean](https://m.do.co/c/36841235e565). L'inscription via ces liens d'affiliation vous donnera jusqu'à 100$ de crédit gratuit pour essayer le service._ diff --git a/exampleSite/content/docs/hosting-deployment/index.pt-br.md b/exampleSite/content/docs/hosting-deployment/index.pt-br.md new file mode 100644 index 00000000..e679e51b --- /dev/null +++ b/exampleSite/content/docs/hosting-deployment/index.pt-br.md @@ -0,0 +1,148 @@ +--- +title: "Hospedagem e implantação" +weight: 14 +draft: false +description: "Aprenda como implantar um site Blowfish." +slug: "hosting-deployment" +tags: ["documentação", "hospedagem", "implantação", "github", "netlify", "render"] +series: ["Documentação"] +series_order: 14 +--- + +Existem muitas formas de implantar seu site Hugo construído com Blowfish. O tema é projetado para ser flexível em quase qualquer cenário de implantação. + +O Blowfish usa URLs relativas em todo o tema. Isso permite que sites sejam facilmente implantados em subpastas e hosts como GitHub Pages. Normalmente não há configuração especial necessária, desde que o parâmetro `baseURL` tenha sido configurado no arquivo `hugo.toml`. + +A documentação oficial do Hugo [Hospedagem e Implantação](https://gohugo.io/hosting-and-deployment/) é o melhor lugar para aprender como implantar seu site. As seções abaixo contêm alguns detalhes de configuração específicos do tema que podem ajudá-lo a implantar sem problemas com certos provedores. + +**Escolha seu provedor:** + +- [GitHub Pages](#github-pages) +- [Netlify](#netlify) +- [Render](#render) +- [Cloudflare Pages](#cloudflare-pages) +- [Hospedagem compartilhada, VPS ou servidor web privado](#hospedagem-compartilhada-vps-ou-servidor-web-privado) + +--- + +## GitHub Pages + +O GitHub permite hospedagem no [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) usando Actions. Para habilitar essa funcionalidade, ative o Pages em seu repositório e crie um novo workflow de Actions para construir e implantar seu site. + +O arquivo precisa estar no formato YAML, colocado dentro do diretório `.github/workflows/` do seu repositório GitHub e nomeado com extensão `.yml`. + +{{< alert >}} +**Importante:** Certifique-se de definir o nome correto da branch em `branches` e no parâmetro `if` da etapa de implantação para a branch de origem usada em seu projeto. +{{< /alert >}} + +```yaml +# .github/workflows/gh-pages.yml + +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build-deploy: + runs-on: ubuntu-24.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: true + fetch-depth: 0 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: "latest" + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/main' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Envie o arquivo de configuração para o GitHub e a action deve ser executada automaticamente. Pode falhar na primeira vez e você precisará visitar a seção **Settings > Pages** do seu repositório GitHub para verificar se a origem está correta. Ela deve estar configurada para usar a branch `gh-pages`. + +{{< screenshot src="github-pages-source.jpg" alt="Captura de tela da origem do GitHub Pages" >}} + +Uma vez que as configurações estejam definidas, execute novamente a action e o site deve ser construído e implantado corretamente. Você pode consultar os logs das actions para verificar se tudo foi implantado com sucesso. + +## Netlify + +Para implantar no [Netlify](https://www.netlify.com), crie um novo site de implantação contínua e vincule-o ao seu código-fonte. As configurações de build podem ser deixadas em branco na interface do Netlify. Você só precisará configurar o domínio que usará. + +{{< screenshot src="netlify-build-settings.jpg" alt="Captura de tela das configurações de build do Netlify" >}} + +Em seguida, na raiz do repositório do seu site, crie um arquivo `netlify.toml`: + +```toml +# netlify.toml + +[build] + command = "hugo mod get -u && hugo --gc --minify -b $URL" + publish = "public" + +[build.environment] + NODE_ENV = "production" + GO_VERSION = "1.16" + TZ = "UTC" # Definir para o fuso horário preferido + +[context.production.environment] + HUGO_VERSION = "0.104.1" + HUGO_ENV = "production" + +[context.deploy-preview.environment] + HUGO_VERSION = "0.104.1" +``` + +Esta configuração assume que você está implantando o Blowfish como um módulo Hugo. Se você instalou o tema usando outro método, altere o comando de build simplesmente para `hugo --gc --minify -b $URL`. + +Quando você enviar o arquivo de configuração para seu repositório, o Netlify deve implantar automaticamente seu site. Você pode verificar os logs de implantação na interface do Netlify para quaisquer erros. + +## Render + +Implantar no [Render](https://render.com) é muito simples e toda a configuração é feita através da interface do Render. + +Crie um novo **Static Site** e vincule-o ao repositório de código do seu projeto. Em seguida, simplesmente configure o comando de build como `hugo --gc --minify` e o diretório de publicação como `public`. + +{{< screenshot src="render-settings.jpg" alt="Captura de tela das configurações do Render" >}} + +O site será construído e implantado automaticamente sempre que você enviar uma alteração para seu repositório. + +## Cloudflare Pages + +A Cloudflare oferece o serviço [Pages](https://pages.cloudflare.com/) que pode hospedar blogs Hugo. Ele constrói o site a partir de um repositório git e o hospeda no CDN da Cloudflare. Siga o [guia de implantação Hugo](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) deles para começar. + +O recurso Rocket Loader™ oferecido pela Cloudflare tenta acelerar a renderização de páginas web com JavaScript, mas ele quebra o seletor de aparência no tema. Também pode causar um flash irritante de tela clara/escura ao navegar em seu site devido aos scripts carregando na ordem errada. + +Este problema pode ser corrigido desativando-o: + +- Vá para o [painel da Cloudflare](https://dash.cloudflare.com) +- Clique no nome do seu domínio na lista +- Clique em _Optimization_ na seção _Speed_ +- Role até _Rocket Loader™_ e desative-o + +Sites Hugo construídos com Blowfish ainda carregam muito rápido, mesmo com este recurso desativado. + +## Hospedagem compartilhada, VPS ou servidor web privado + +Usar hospedagem web tradicional, ou implantar em seu próprio servidor web, é tão simples quanto construir seu site Hugo e transferir os arquivos para seu host. + +Certifique-se de que o parâmetro `baseURL` em `hugo.toml` esteja definido para a URL completa para a raiz do seu site (incluindo quaisquer subdomínios ou subpastas). + +Em seguida, construa seu site usando `hugo` e copie o conteúdo do diretório de saída para a raiz do seu servidor web e você estará pronto. Por padrão, o diretório de saída é chamado `public`. + +_Se você precisa de um provedor de hospedagem, confira [Vultr](https://www.vultr.com/?ref=8957394-8H) ou [DigitalOcean](https://m.do.co/c/36841235e565). Cadastrar-se usando esses links de afiliado lhe dará até $100 em crédito grátis para que você possa experimentar o serviço._ diff --git a/exampleSite/content/docs/hosting-deployment/index.pt-pt.md b/exampleSite/content/docs/hosting-deployment/index.pt-pt.md new file mode 100644 index 00000000..27d651f7 --- /dev/null +++ b/exampleSite/content/docs/hosting-deployment/index.pt-pt.md @@ -0,0 +1,148 @@ +--- +title: "Alojamento e implementação" +weight: 14 +draft: false +description: "Aprenda como implementar um site Blowfish." +slug: "hosting-deployment" +tags: ["documentação", "alojamento", "implementação", "github", "netlify", "render"] +series: ["Documentação"] +series_order: 14 +--- + +Existem muitas formas de implementar o seu website Hugo construído com Blowfish. O tema é concebido para ser flexível em quase qualquer cenário de implementação. + +O Blowfish utiliza URLs relativos em todo o tema. Isto permite que os sites sejam facilmente implementados em subpastas e hosts como GitHub Pages. Normalmente não é necessária nenhuma configuração especial desde que o parâmetro `baseURL` tenha sido configurado no ficheiro `hugo.toml`. + +A documentação oficial do Hugo [Alojamento e Implementação](https://gohugo.io/hosting-and-deployment/) é o melhor local para aprender como implementar o seu site. As secções abaixo contêm alguns detalhes de configuração específicos do tema que podem ajudá-lo a implementar sem problemas com certos fornecedores. + +**Escolha o seu fornecedor:** + +- [GitHub Pages](#github-pages) +- [Netlify](#netlify) +- [Render](#render) +- [Cloudflare Pages](#cloudflare-pages) +- [Alojamento partilhado, VPS ou servidor web privado](#alojamento-partilhado-vps-ou-servidor-web-privado) + +--- + +## GitHub Pages + +O GitHub permite alojamento no [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) utilizando Actions. Para ativar esta funcionalidade, ative o Pages no seu repositório e crie um novo workflow de Actions para construir e implementar o seu site. + +O ficheiro precisa de estar no formato YAML, colocado dentro do diretório `.github/workflows/` do seu repositório GitHub e nomeado com extensão `.yml`. + +{{< alert >}} +**Importante:** Certifique-se de definir o nome correto da branch em `branches` e no parâmetro `if` da etapa de implementação para a branch de origem utilizada no seu projeto. +{{< /alert >}} + +```yaml +# .github/workflows/gh-pages.yml + +name: GitHub Pages + +on: + push: + branches: + - main + +jobs: + build-deploy: + runs-on: ubuntu-24.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: true + fetch-depth: 0 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: "latest" + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/main' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Envie o ficheiro de configuração para o GitHub e a action deve ser executada automaticamente. Pode falhar na primeira vez e precisará de visitar a secção **Settings > Pages** do seu repositório GitHub para verificar se a origem está correta. Deve estar configurada para utilizar a branch `gh-pages`. + +{{< screenshot src="github-pages-source.jpg" alt="Captura de ecrã da origem do GitHub Pages" >}} + +Assim que as definições estejam configuradas, execute novamente a action e o site deve ser construído e implementado corretamente. Pode consultar os logs das actions para verificar se tudo foi implementado com sucesso. + +## Netlify + +Para implementar no [Netlify](https://www.netlify.com), crie um novo site de implementação contínua e vincule-o ao seu código-fonte. As definições de build podem ser deixadas em branco na interface do Netlify. Só precisará de configurar o domínio que utilizará. + +{{< screenshot src="netlify-build-settings.jpg" alt="Captura de ecrã das definições de build do Netlify" >}} + +Em seguida, na raiz do repositório do seu site, crie um ficheiro `netlify.toml`: + +```toml +# netlify.toml + +[build] + command = "hugo mod get -u && hugo --gc --minify -b $URL" + publish = "public" + +[build.environment] + NODE_ENV = "production" + GO_VERSION = "1.16" + TZ = "UTC" # Definir para o fuso horário preferido + +[context.production.environment] + HUGO_VERSION = "0.104.1" + HUGO_ENV = "production" + +[context.deploy-preview.environment] + HUGO_VERSION = "0.104.1" +``` + +Esta configuração assume que está a implementar o Blowfish como um módulo Hugo. Se instalou o tema utilizando outro método, altere o comando de build simplesmente para `hugo --gc --minify -b $URL`. + +Quando enviar o ficheiro de configuração para o seu repositório, o Netlify deve implementar automaticamente o seu site. Pode verificar os logs de implementação na interface do Netlify para quaisquer erros. + +## Render + +Implementar no [Render](https://render.com) é muito simples e toda a configuração é feita através da interface do Render. + +Crie um novo **Static Site** e vincule-o ao repositório de código do seu projeto. Em seguida, simplesmente configure o comando de build como `hugo --gc --minify` e o diretório de publicação como `public`. + +{{< screenshot src="render-settings.jpg" alt="Captura de ecrã das definições do Render" >}} + +O site será construído e implementado automaticamente sempre que enviar uma alteração para o seu repositório. + +## Cloudflare Pages + +A Cloudflare oferece o serviço [Pages](https://pages.cloudflare.com/) que pode alojar blogues Hugo. Constrói o site a partir de um repositório git e depois aloja-o na CDN da Cloudflare. Siga o [guia de implementação Hugo](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) deles para começar. + +A funcionalidade Rocket Loader™ oferecida pela Cloudflare tenta acelerar a renderização de páginas web com JavaScript, mas quebra o seletor de aparência no tema. Também pode causar um flash irritante de ecrã claro/escuro ao navegar no seu site devido aos scripts a carregar na ordem errada. + +Este problema pode ser corrigido desativando-o: + +- Vá ao [painel da Cloudflare](https://dash.cloudflare.com) +- Clique no nome do seu domínio na lista +- Clique em _Optimization_ na secção _Speed_ +- Desloque-se até _Rocket Loader™_ e desative-o + +Sites Hugo construídos com Blowfish ainda carregam muito rapidamente, mesmo com esta funcionalidade desativada. + +## Alojamento partilhado, VPS ou servidor web privado + +Utilizar alojamento web tradicional, ou implementar no seu próprio servidor web, é tão simples como construir o seu site Hugo e transferir os ficheiros para o seu host. + +Certifique-se de que o parâmetro `baseURL` em `hugo.toml` está definido para o URL completo para a raiz do seu website (incluindo quaisquer subdomínios ou subpastas). + +Em seguida, construa o seu site utilizando `hugo` e copie o conteúdo do diretório de saída para a raiz do seu servidor web e estará pronto. Por predefinição, o diretório de saída chama-se `public`. + +_Se precisa de um fornecedor de alojamento, confira [Vultr](https://www.vultr.com/?ref=8957394-8H) ou [DigitalOcean](https://m.do.co/c/36841235e565). Registar-se utilizando estes links de afiliado dar-lhe-á até $100 em crédito grátis para que possa experimentar o serviço._ diff --git a/exampleSite/content/docs/installation/index.de.md b/exampleSite/content/docs/installation/index.de.md new file mode 100644 index 00000000..02ed900c --- /dev/null +++ b/exampleSite/content/docs/installation/index.de.md @@ -0,0 +1,211 @@ +--- +title: "Installation" +weight: 2 +draft: false +description: "Wie man das Blowfish-Theme installiert." +slug: "installation" +tags: ["installation", "dokumentation"] +series: ["Dokumentation"] +series_order: 2 +--- + +Folgen Sie einfach dem standardmäßigen Hugo [Schnellstart](https://gohugo.io/getting-started/quick-start/)-Verfahren, um schnell loszulegen. + +Detaillierte Installationsanweisungen finden Sie unten. Anweisungen zum [Aktualisieren des Themes](#updates-installieren) sind ebenfalls verfügbar. + +## Installation + +Diese Anweisungen bringen Sie von einem komplett leeren Zustand mit Hugo und Blowfish zum Laufen. Die meisten der in diesem Leitfaden erwähnten Abhängigkeiten können mit dem Paketmanager Ihrer Wahl für Ihre Plattform installiert werden. + +### Hugo installieren + +Wenn Sie Hugo noch nicht verwendet haben, müssen Sie es [auf Ihrem lokalen Computer installieren](https://gohugo.io/getting-started/installing). Sie können überprüfen, ob es bereits installiert ist, indem Sie den Befehl `hugo version` ausführen. + +{{< alert >}} +Stellen Sie sicher, dass Sie **Hugo Version 0.87.0** oder höher verwenden, da das Theme einige der neuesten Hugo-Funktionen nutzt. +{{< /alert >}} + +Sie finden detaillierte Installationsanweisungen für Ihre Plattform in der [Hugo-Dokumentation](https://gohugo.io/getting-started/installing). + +### Blowfish Tools (empfohlen) + +Wir haben gerade ein neues CLI-Tool veröffentlicht, das Ihnen beim Einstieg mit Blowfish hilft. Es erstellt ein neues Hugo-Projekt, installiert das Theme und richtet die Theme-Konfigurationsdateien für Sie ein. Es befindet sich noch in der Beta-Phase, also [melden Sie bitte alle Probleme, die Sie finden](https://github.com/nunocoracao/blowfish-tools). + +Installieren Sie das CLI-Tool global mit npm (oder einem anderen Paketmanager): +```shell +npx blowfish-tools +``` +oder + +```shell +npm i -g blowfish-tools +``` + +Führen Sie dann den Befehl `blowfish-tools` aus, um einen interaktiven Durchlauf zu starten, der Sie durch Erstellungs- und Konfigurationsanwendungsfälle führt. +```shell +blowfish-tools +``` + +Sie können auch den Befehl `blowfish-tools new` ausführen, um ein neues Hugo-Projekt zu erstellen und das Theme in einem Schritt zu installieren. Weitere Informationen finden Sie in der CLI-Hilfe. +```shell +blowfish-tools new mynewsite +``` + +Hier ist ein kurzes Video, das zeigt, wie schnell Sie mit dem CLI-Tool mit Blowfish starten können: + + + +### Installation ohne CLI + +#### Eine neue Website erstellen + +Führen Sie den Befehl `hugo new site mywebsite` aus, um eine neue Hugo-Website in einem Verzeichnis namens `mywebsite` zu erstellen. + +Beachten Sie, dass Sie das Projektverzeichnis beliebig benennen können, aber die folgenden Anweisungen gehen davon aus, dass es `mywebsite` heißt. Wenn Sie einen anderen Namen verwenden, stellen Sie sicher, dass Sie ihn entsprechend ersetzen. + +#### Das Blowfish-Theme herunterladen + +Es gibt verschiedene Möglichkeiten, das Blowfish-Theme in Ihre Hugo-Website zu installieren. Von der einfachsten bis zur schwierigsten Installation und Wartung sind dies: + +- [Git-Submodul](#installation-mit-git) (empfohlen) +- [Hugo-Modul](#installation-mit-hugo) +- [Manuelle Dateikopie](#manuelle-installation) + +Wenn Sie unsicher sind, wählen Sie die Git-Submodul-Methode. + +#### Installation mit Git + +Diese Methode ist die schnellste und einfachste, um das Theme aktuell zu halten. Neben **Hugo** und **Go** müssen Sie auch sicherstellen, dass **Git** auf Ihrem lokalen Computer installiert ist. + +Wechseln Sie in das Verzeichnis Ihrer Hugo-Website (das Sie oben erstellt haben), initialisieren Sie ein neues `git`-Repository und fügen Sie Blowfish als Submodul hinzu. + +```bash +cd mywebsite +git init +git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish +``` + +Fahren Sie dann mit dem [Einrichten der Theme-Konfigurationsdateien](#theme-konfigurationsdateien-einrichten) fort. + +#### Installation mit Hugo + +Für diese Methode verwenden Sie Hugo zur Verwaltung Ihrer Themes. Hugo verwendet **Go** zum Initialisieren und Verwalten von Modulen, stellen Sie also sicher, dass `go` installiert ist, bevor Sie fortfahren. + +1. [Laden Sie](https://golang.org/dl/) Go herunter und installieren Sie es. Sie können überprüfen, ob es bereits installiert ist, indem Sie den Befehl `go version` verwenden. + + {{< alert >}} + Stellen Sie sicher, dass Sie **Go Version 1.12** oder höher verwenden, da Hugo dies für die korrekte Funktion von Modulen benötigt. + {{< /alert >}} + +2. Initialisieren Sie von Ihrem Hugo-Projektverzeichnis (das Sie oben erstellt haben) Module für Ihre Website: + + ```shell + # Wenn Sie Ihr Projekt auf GitHub verwalten + hugo mod init github.com// + + # Wenn Sie Ihr Projekt lokal verwalten + hugo mod init my-project + ``` + +3. Fügen Sie das Theme zu Ihrer Konfiguration hinzu, indem Sie eine neue Datei `config/_default/module.toml` erstellen und Folgendes hinzufügen: + + ```toml + [[imports]] + disable = false + path = "github.com/nunocoracao/blowfish/v2" + ``` + +4. Starten Sie Ihren Server mit `hugo server` und das Theme wird automatisch heruntergeladen. +5. Fahren Sie mit dem [Einrichten der Theme-Konfigurationsdateien](#theme-konfigurationsdateien-einrichten) fort. + +#### Manuelle Installation + +1. Laden Sie die neueste Version des Theme-Quellcodes herunter. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Von Github herunterladen{{< /button >}} + +2. Entpacken Sie das Archiv, benennen Sie den Ordner in `blowfish` um und verschieben Sie ihn in das Verzeichnis `themes/` im Stammordner Ihres Hugo-Projekts. +3. Fahren Sie mit dem [Einrichten der Theme-Konfigurationsdateien](#theme-konfigurationsdateien-einrichten) fort. + +#### Theme-Konfigurationsdateien einrichten + +Löschen Sie im Stammordner Ihrer Website die von Hugo generierte Datei `hugo.toml`. Kopieren Sie die `*.toml`-Konfigurationsdateien aus dem Theme in Ihren Ordner `config/_default/`. Dadurch wird sichergestellt, dass Sie alle korrekten Theme-Einstellungen haben und das Theme einfach an Ihre Bedürfnisse anpassen können. + +{{< alert >}} +**Hinweis:** Sie sollten die Datei `module.toml` nicht überschreiben, wenn in Ihrem Projekt bereits eine vorhanden ist! +{{< /alert >}} + +Je nachdem, wie Sie das Theme installiert haben, finden Sie die Theme-Konfigurationsdateien an verschiedenen Stellen: + +- **Hugo-Module:** Im Hugo-Cache-Verzeichnis oder [laden Sie eine Kopie herunter](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) von GitHub +- **Git-Submodul oder manuelle Installation:** `themes/blowfish/config/_default` + +Nachdem Sie die Dateien kopiert haben, sollte Ihr Konfigurationsordner so aussehen: + +```shell +config/_default/ +├─ hugo.toml +├─ languages.en.toml +├─ markup.toml +├─ menus.en.toml +├─ module.toml # wenn Sie Hugo-Module zur Installation verwendet haben +└─ params.toml +``` + +{{< alert >}} +**Wichtig:** Wenn Sie Blowfish nicht mit Hugo-Modulen installiert haben, müssen Sie die Zeile `theme = "blowfish"` am Anfang Ihrer `hugo.toml`-Datei hinzufügen. +{{< /alert >}} + +### Nächste Schritte + +Die grundlegende Blowfish-Installation ist nun abgeschlossen. Fahren Sie mit dem Abschnitt [Erste Schritte]({{< ref "getting-started" >}}) fort, um mehr über die Konfiguration des Themes zu erfahren. + +--- + +## Updates installieren + +Von Zeit zu Zeit werden [neue Versionen](https://github.com/nunocoracao/blowfish/releases) veröffentlicht, die Fehlerbehebungen anwenden und neue Funktionen zum Theme hinzufügen. Um diese Änderungen zu nutzen, müssen Sie die Theme-Dateien auf Ihrer Website aktualisieren. + +Wie Sie dabei vorgehen, hängt von der Installationsmethode ab, die Sie bei der ursprünglichen Installation des Themes gewählt haben. Anweisungen für jede Methode finden Sie unten. + +- [Git-Submodul](#update-mit-git) +- [Hugo-Modul](#update-mit-hugo) +- [Manuelle Dateikopie](#manuelles-update) + +### Update mit Git + +Git-Submodule können mit dem `git`-Befehl aktualisiert werden. Führen Sie einfach den folgenden Befehl aus und die neueste Version des Themes wird in Ihr lokales Repository heruntergeladen: + +```shell +git submodule update --remote --merge +``` + +Nachdem das Submodul aktualisiert wurde, erstellen Sie Ihre Website neu und überprüfen Sie, ob alles wie erwartet funktioniert. + +### Update mit Hugo + +Hugo macht das Aktualisieren von Modulen super einfach. Wechseln Sie einfach in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus: + +```shell +hugo mod get -u +``` + +Hugo aktualisiert automatisch alle Module, die für Ihr Projekt erforderlich sind. Dies geschieht durch Überprüfung Ihrer `module.toml`- und `go.mod`-Dateien. Wenn Sie Probleme mit dem Update haben, überprüfen Sie, ob diese Dateien noch korrekt konfiguriert sind. + +Erstellen Sie dann einfach Ihre Website neu und überprüfen Sie, ob alles wie erwartet funktioniert. + +### Manuelles Update + +Das manuelle Aktualisieren von Blowfish erfordert, dass Sie die neueste Kopie des Themes herunterladen und die alte Version in Ihrem Projekt ersetzen. + +{{< alert >}} +Beachten Sie, dass alle lokalen Anpassungen, die Sie an den Theme-Dateien vorgenommen haben, bei diesem Vorgang verloren gehen. +{{< /alert >}} + +1. Laden Sie die neueste Version des Theme-Quellcodes herunter. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Von Github herunterladen{{< /button >}} + +2. Entpacken Sie das Archiv, benennen Sie den Ordner in `blowfish` um und verschieben Sie ihn in das Verzeichnis `themes/` im Stammordner Ihres Hugo-Projekts. Sie müssen das vorhandene Verzeichnis überschreiben, um alle Theme-Dateien zu ersetzen. + +3. Erstellen Sie Ihre Website neu und überprüfen Sie, ob alles wie erwartet funktioniert. diff --git a/exampleSite/content/docs/installation/index.es.md b/exampleSite/content/docs/installation/index.es.md new file mode 100644 index 00000000..f0673522 --- /dev/null +++ b/exampleSite/content/docs/installation/index.es.md @@ -0,0 +1,211 @@ +--- +title: "Instalación" +weight: 2 +draft: false +description: "Cómo instalar el tema Blowfish." +slug: "installation" +tags: ["instalación", "documentación"] +series: ["Documentación"] +series_order: 2 +--- + +Simplemente sigue el procedimiento estándar de Hugo [Inicio Rápido](https://gohugo.io/getting-started/quick-start/) para ponerte en marcha rápidamente. + +Las instrucciones de instalación detalladas se encuentran a continuación. También están disponibles instrucciones para [actualizar el tema](#instalación-de-actualizaciones). + +## Instalación + +Estas instrucciones te ayudarán a empezar con Hugo y Blowfish desde un estado completamente vacío. La mayoría de las dependencias mencionadas en esta guía se pueden instalar utilizando el gestor de paquetes de tu elección para tu plataforma. + +### Instalar Hugo + +Si nunca has usado Hugo antes, necesitarás [instalarlo en tu máquina local](https://gohugo.io/getting-started/installing). Puedes verificar si ya está instalado ejecutando el comando `hugo version`. + +{{< alert >}} +Asegúrate de estar usando **Hugo versión 0.87.0** o posterior, ya que el tema aprovecha algunas de las últimas características de Hugo. +{{< /alert >}} + +Puedes encontrar instrucciones de instalación detalladas para tu plataforma en la [documentación de Hugo](https://gohugo.io/getting-started/installing). + +### Blowfish Tools (recomendado) + +Acabamos de lanzar una nueva herramienta CLI para ayudarte a empezar con Blowfish. Creará un nuevo proyecto Hugo, instalará el tema y configurará los archivos de configuración del tema por ti. Todavía está en beta, así que por favor [reporta cualquier problema que encuentres](https://github.com/nunocoracao/blowfish-tools). + +Instala la herramienta CLI globalmente usando npm (u otro gestor de paquetes): +```shell +npx blowfish-tools +``` +o + +```shell +npm i -g blowfish-tools +``` + +Luego ejecuta el comando `blowfish-tools` para iniciar una ejecución interactiva que te guiará a través de los casos de uso de creación y configuración. +```shell +blowfish-tools +``` + +También puedes ejecutar el comando `blowfish-tools new` para crear un nuevo proyecto Hugo e instalar el tema de una sola vez. Consulta la ayuda del CLI para más información. +```shell +blowfish-tools new mynewsite +``` + +Aquí hay un video corto de lo rápido que es empezar con Blowfish usando la herramienta CLI: + + + +### Instalación sin CLI + +#### Crear un nuevo sitio + +Ejecuta el comando `hugo new site mywebsite` para crear un nuevo sitio Hugo en un directorio llamado `mywebsite`. + +Ten en cuenta que puedes nombrar el directorio del proyecto como quieras, pero las instrucciones a continuación asumen que se llama `mywebsite`. Si usas un nombre diferente, asegúrate de sustituirlo en consecuencia. + +#### Descargar el tema Blowfish + +Hay varias formas diferentes de instalar el tema Blowfish en tu sitio Hugo. De la más fácil a la más difícil de instalar y mantener, son: + +- [Submódulo Git](#instalación-con-git) (recomendado) +- [Módulo Hugo](#instalación-con-hugo) +- [Copia manual de archivos](#instalación-manual) + +Si no estás seguro, elige el método del submódulo Git. + +#### Instalación con Git + +Este método es el más rápido y fácil para mantener el tema actualizado. Además de **Hugo** y **Go**, también necesitarás asegurarte de tener **Git** instalado en tu máquina local. + +Cambia al directorio de tu sitio Hugo (que creaste arriba), inicializa un nuevo repositorio `git` y añade Blowfish como submódulo. + +```bash +cd mywebsite +git init +git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish +``` + +Luego continúa para [configurar los archivos de configuración del tema](#configurar-archivos-de-configuración-del-tema). + +#### Instalación con Hugo + +Para este método usarás Hugo para gestionar tus temas. Hugo usa **Go** para inicializar y gestionar módulos, así que asegúrate de tener `go` instalado antes de continuar. + +1. [Descarga](https://golang.org/dl/) e instala Go. Puedes verificar si ya está instalado usando el comando `go version`. + + {{< alert >}} + Asegúrate de estar usando **Go versión 1.12** o posterior, ya que Hugo lo requiere para que los módulos funcionen correctamente. + {{< /alert >}} + +2. Desde el directorio de tu proyecto Hugo (que creaste arriba), inicializa los módulos para tu sitio: + + ```shell + # Si estás gestionando tu proyecto en GitHub + hugo mod init github.com// + + # Si estás gestionando tu proyecto localmente + hugo mod init my-project + ``` + +3. Añade el tema a tu configuración creando un nuevo archivo `config/_default/module.toml` y añadiendo lo siguiente: + + ```toml + [[imports]] + disable = false + path = "github.com/nunocoracao/blowfish/v2" + ``` + +4. Inicia tu servidor usando `hugo server` y el tema se descargará automáticamente. +5. Continúa para [configurar los archivos de configuración del tema](#configurar-archivos-de-configuración-del-tema). + +#### Instalación manual + +1. Descarga la última versión del código fuente del tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Descargar desde Github{{< /button >}} + +2. Extrae el archivo, renombra la carpeta a `blowfish` y muévela al directorio `themes/` dentro de la carpeta raíz de tu proyecto Hugo. +3. Continúa para [configurar los archivos de configuración del tema](#configurar-archivos-de-configuración-del-tema). + +#### Configurar archivos de configuración del tema + +En la carpeta raíz de tu sitio, elimina el archivo `hugo.toml` que fue generado por Hugo. Copia los archivos de configuración `*.toml` del tema en tu carpeta `config/_default/`. Esto asegurará que tengas todas las configuraciones correctas del tema y te permitirá personalizar fácilmente el tema según tus necesidades. + +{{< alert >}} +**Nota:** ¡No debes sobrescribir el archivo `module.toml` si ya existe uno en tu proyecto! +{{< /alert >}} + +Dependiendo de cómo instalaste el tema, encontrarás los archivos de configuración del tema en diferentes lugares: + +- **Módulos Hugo:** En el directorio de caché de Hugo, o [descarga una copia](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) desde GitHub +- **Submódulo Git o instalación manual:** `themes/blowfish/config/_default` + +Una vez que hayas copiado los archivos, tu carpeta de configuración debería verse así: + +```shell +config/_default/ +├─ hugo.toml +├─ languages.en.toml +├─ markup.toml +├─ menus.en.toml +├─ module.toml # si instalaste usando Módulos Hugo +└─ params.toml +``` + +{{< alert >}} +**Importante:** Si no usaste Módulos Hugo para instalar Blowfish, debes añadir la línea `theme = "blowfish"` en la parte superior de tu archivo `hugo.toml`. +{{< /alert >}} + +### Siguientes pasos + +La instalación básica de Blowfish está ahora completa. Continúa a la sección [Primeros Pasos]({{< ref "getting-started" >}}) para aprender más sobre la configuración del tema. + +--- + +## Instalación de actualizaciones + +De vez en cuando se publicarán [nuevas versiones](https://github.com/nunocoracao/blowfish/releases) que aplican correcciones y añaden nuevas funcionalidades al tema. Para aprovechar estos cambios, necesitarás actualizar los archivos del tema en tu sitio. + +Cómo hagas esto dependerá del método de instalación que elegiste cuando se instaló originalmente el tema. Las instrucciones para cada método se encuentran a continuación. + +- [Submódulo Git](#actualización-con-git) +- [Módulo Hugo](#actualización-con-hugo) +- [Copia manual de archivos](#actualización-manual) + +### Actualización con Git + +Los submódulos Git se pueden actualizar usando el comando `git`. Simplemente ejecuta el siguiente comando y la última versión del tema se descargará en tu repositorio local: + +```shell +git submodule update --remote --merge +``` + +Una vez que el submódulo se haya actualizado, reconstruye tu sitio y verifica que todo funcione como se esperaba. + +### Actualización con Hugo + +Hugo hace que actualizar módulos sea super fácil. Simplemente cambia a tu directorio de proyecto y ejecuta el siguiente comando: + +```shell +hugo mod get -u +``` + +Hugo actualizará automáticamente cualquier módulo requerido para tu proyecto. Lo hace inspeccionando tus archivos `module.toml` y `go.mod`. Si tienes problemas con la actualización, verifica que estos archivos todavía estén configurados correctamente. + +Luego simplemente reconstruye tu sitio y verifica que todo funcione como se esperaba. + +### Actualización manual + +Actualizar Blowfish manualmente requiere que descargues la última copia del tema y reemplaces la versión antigua en tu proyecto. + +{{< alert >}} +Ten en cuenta que cualquier personalización local que hayas hecho a los archivos del tema se perderá durante este proceso. +{{< /alert >}} + +1. Descarga la última versión del código fuente del tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Descargar desde Github{{< /button >}} + +2. Extrae el archivo, renombra la carpeta a `blowfish` y muévela al directorio `themes/` dentro de la carpeta raíz de tu proyecto Hugo. Necesitarás sobrescribir el directorio existente para reemplazar todos los archivos del tema. + +3. Reconstruye tu sitio y verifica que todo funcione como se esperaba. diff --git a/exampleSite/content/docs/installation/index.fr.md b/exampleSite/content/docs/installation/index.fr.md new file mode 100644 index 00000000..a0ba3fdd --- /dev/null +++ b/exampleSite/content/docs/installation/index.fr.md @@ -0,0 +1,211 @@ +--- +title: "Installation" +weight: 2 +draft: false +description: "Comment installer le thème Blowfish." +slug: "installation" +tags: ["installation", "documentation"] +series: ["Documentation"] +series_order: 2 +--- + +Suivez simplement la procédure standard Hugo [Démarrage Rapide](https://gohugo.io/getting-started/quick-start/) pour être opérationnel rapidement. + +Des instructions d'installation détaillées sont disponibles ci-dessous. Des instructions pour [mettre à jour le thème](#installation-des-mises-à-jour) sont également disponibles. + +## Installation + +Ces instructions vous permettront de démarrer avec Hugo et Blowfish à partir d'un état complètement vierge. La plupart des dépendances mentionnées dans ce guide peuvent être installées à l'aide du gestionnaire de paquets de votre choix pour votre plateforme. + +### Installer Hugo + +Si vous n'avez jamais utilisé Hugo auparavant, vous devrez [l'installer sur votre machine locale](https://gohugo.io/getting-started/installing). Vous pouvez vérifier s'il est déjà installé en exécutant la commande `hugo version`. + +{{< alert >}} +Assurez-vous d'utiliser **Hugo version 0.87.0** ou ultérieure car le thème tire parti de certaines des dernières fonctionnalités de Hugo. +{{< /alert >}} + +Vous pouvez trouver des instructions d'installation détaillées pour votre plateforme dans la [documentation Hugo](https://gohugo.io/getting-started/installing). + +### Blowfish Tools (recommandé) + +Nous venons de lancer un nouvel outil CLI pour vous aider à démarrer avec Blowfish. Il créera un nouveau projet Hugo, installera le thème et configurera les fichiers de configuration du thème pour vous. Il est encore en bêta, veuillez donc [signaler tout problème que vous rencontrez](https://github.com/nunocoracao/blowfish-tools). + +Installez l'outil CLI globalement en utilisant npm (ou un autre gestionnaire de paquets) : +```shell +npx blowfish-tools +``` +ou + +```shell +npm i -g blowfish-tools +``` + +Exécutez ensuite la commande `blowfish-tools` pour démarrer une exécution interactive qui vous guidera à travers les cas d'utilisation de création et de configuration. +```shell +blowfish-tools +``` + +Vous pouvez également exécuter la commande `blowfish-tools new` pour créer un nouveau projet Hugo et installer le thème en une seule fois. Consultez l'aide CLI pour plus d'informations. +```shell +blowfish-tools new mynewsite +``` + +Voici une courte vidéo montrant à quelle vitesse vous pouvez démarrer avec Blowfish en utilisant l'outil CLI : + + + +### Installation sans CLI + +#### Créer un nouveau site + +Exécutez la commande `hugo new site mywebsite` pour créer un nouveau site Hugo dans un répertoire nommé `mywebsite`. + +Notez que vous pouvez nommer le répertoire du projet comme vous le souhaitez, mais les instructions ci-dessous supposent qu'il s'appelle `mywebsite`. Si vous utilisez un autre nom, assurez-vous de le remplacer en conséquence. + +#### Télécharger le thème Blowfish + +Il existe plusieurs façons d'installer le thème Blowfish dans votre site Hugo. De la plus facile à la plus difficile à installer et à maintenir, ce sont : + +- [Sous-module Git](#installation-avec-git) (recommandé) +- [Module Hugo](#installation-avec-hugo) +- [Copie manuelle des fichiers](#installation-manuelle) + +Si vous n'êtes pas sûr, choisissez la méthode du sous-module Git. + +#### Installation avec Git + +Cette méthode est la plus rapide et la plus facile pour maintenir le thème à jour. En plus de **Hugo** et **Go**, vous devez également vous assurer que **Git** est installé sur votre machine locale. + +Accédez au répertoire de votre site Hugo (que vous avez créé ci-dessus), initialisez un nouveau dépôt `git` et ajoutez Blowfish comme sous-module. + +```bash +cd mywebsite +git init +git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish +``` + +Continuez ensuite à [configurer les fichiers de configuration du thème](#configurer-les-fichiers-de-configuration-du-thème). + +#### Installation avec Hugo + +Pour cette méthode, vous utiliserez Hugo pour gérer vos thèmes. Hugo utilise **Go** pour initialiser et gérer les modules, assurez-vous donc d'avoir `go` installé avant de continuer. + +1. [Téléchargez](https://golang.org/dl/) et installez Go. Vous pouvez vérifier s'il est déjà installé en utilisant la commande `go version`. + + {{< alert >}} + Assurez-vous d'utiliser **Go version 1.12** ou ultérieure car Hugo l'exige pour que les modules fonctionnent correctement. + {{< /alert >}} + +2. Depuis le répertoire de votre projet Hugo (que vous avez créé ci-dessus), initialisez les modules pour votre site : + + ```shell + # Si vous gérez votre projet sur GitHub + hugo mod init github.com// + + # Si vous gérez votre projet localement + hugo mod init my-project + ``` + +3. Ajoutez le thème à votre configuration en créant un nouveau fichier `config/_default/module.toml` et en ajoutant ce qui suit : + + ```toml + [[imports]] + disable = false + path = "github.com/nunocoracao/blowfish/v2" + ``` + +4. Démarrez votre serveur en utilisant `hugo server` et le thème sera téléchargé automatiquement. +5. Continuez à [configurer les fichiers de configuration du thème](#configurer-les-fichiers-de-configuration-du-thème). + +#### Installation manuelle + +1. Téléchargez la dernière version du code source du thème. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Télécharger depuis Github{{< /button >}} + +2. Extrayez l'archive, renommez le dossier en `blowfish` et déplacez-le dans le répertoire `themes/` à l'intérieur du dossier racine de votre projet Hugo. +3. Continuez à [configurer les fichiers de configuration du thème](#configurer-les-fichiers-de-configuration-du-thème). + +#### Configurer les fichiers de configuration du thème + +Dans le dossier racine de votre site, supprimez le fichier `hugo.toml` qui a été généré par Hugo. Copiez les fichiers de configuration `*.toml` du thème dans votre dossier `config/_default/`. Cela garantira que vous avez tous les paramètres de thème corrects et vous permettra de personnaliser facilement le thème selon vos besoins. + +{{< alert >}} +**Note :** Vous ne devez pas écraser le fichier `module.toml` si un existe déjà dans votre projet ! +{{< /alert >}} + +Selon la façon dont vous avez installé le thème, vous trouverez les fichiers de configuration du thème à différents endroits : + +- **Modules Hugo :** Dans le répertoire de cache Hugo, ou [téléchargez une copie](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) depuis GitHub +- **Sous-module Git ou installation manuelle :** `themes/blowfish/config/_default` + +Une fois que vous avez copié les fichiers, votre dossier de configuration devrait ressembler à ceci : + +```shell +config/_default/ +├─ hugo.toml +├─ languages.en.toml +├─ markup.toml +├─ menus.en.toml +├─ module.toml # si vous avez installé en utilisant les modules Hugo +└─ params.toml +``` + +{{< alert >}} +**Important :** Si vous n'avez pas utilisé les modules Hugo pour installer Blowfish, vous devez ajouter la ligne `theme = "blowfish"` en haut de votre fichier `hugo.toml`. +{{< /alert >}} + +### Étapes suivantes + +L'installation de base de Blowfish est maintenant terminée. Continuez vers la section [Premiers Pas]({{< ref "getting-started" >}}) pour en savoir plus sur la configuration du thème. + +--- + +## Installation des mises à jour + +De temps en temps, de [nouvelles versions](https://github.com/nunocoracao/blowfish/releases) seront publiées avec des corrections de bugs et de nouvelles fonctionnalités pour le thème. Pour profiter de ces changements, vous devrez mettre à jour les fichiers du thème sur votre site. + +La façon de procéder dépendra de la méthode d'installation que vous avez choisie lors de l'installation initiale du thème. Les instructions pour chaque méthode sont disponibles ci-dessous. + +- [Sous-module Git](#mise-à-jour-avec-git) +- [Module Hugo](#mise-à-jour-avec-hugo) +- [Copie manuelle des fichiers](#mise-à-jour-manuelle) + +### Mise à jour avec Git + +Les sous-modules Git peuvent être mis à jour en utilisant la commande `git`. Exécutez simplement la commande suivante et la dernière version du thème sera téléchargée dans votre dépôt local : + +```shell +git submodule update --remote --merge +``` + +Une fois le sous-module mis à jour, reconstruisez votre site et vérifiez que tout fonctionne comme prévu. + +### Mise à jour avec Hugo + +Hugo rend la mise à jour des modules super facile. Accédez simplement à votre répertoire de projet et exécutez la commande suivante : + +```shell +hugo mod get -u +``` + +Hugo mettra automatiquement à jour tous les modules requis pour votre projet. Il le fait en inspectant vos fichiers `module.toml` et `go.mod`. Si vous avez des problèmes avec la mise à jour, vérifiez que ces fichiers sont toujours configurés correctement. + +Reconstruisez ensuite simplement votre site et vérifiez que tout fonctionne comme prévu. + +### Mise à jour manuelle + +La mise à jour manuelle de Blowfish nécessite de télécharger la dernière copie du thème et de remplacer l'ancienne version dans votre projet. + +{{< alert >}} +Notez que toutes les personnalisations locales que vous avez apportées aux fichiers du thème seront perdues au cours de ce processus. +{{< /alert >}} + +1. Téléchargez la dernière version du code source du thème. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Télécharger depuis Github{{< /button >}} + +2. Extrayez l'archive, renommez le dossier en `blowfish` et déplacez-le dans le répertoire `themes/` à l'intérieur du dossier racine de votre projet Hugo. Vous devrez écraser le répertoire existant pour remplacer tous les fichiers du thème. + +3. Reconstruisez votre site et vérifiez que tout fonctionne comme prévu. diff --git a/exampleSite/content/docs/installation/index.pt-br.md b/exampleSite/content/docs/installation/index.pt-br.md new file mode 100644 index 00000000..5fc4a4fd --- /dev/null +++ b/exampleSite/content/docs/installation/index.pt-br.md @@ -0,0 +1,211 @@ +--- +title: "Instalação" +weight: 2 +draft: false +description: "Como instalar o tema Blowfish." +slug: "installation" +tags: ["instalação", "documentação"] +series: ["Documentação"] +series_order: 2 +--- + +Simplesmente siga o procedimento padrão do Hugo [Início Rápido](https://gohugo.io/getting-started/quick-start/) para começar rapidamente. + +Instruções detalhadas de instalação podem ser encontradas abaixo. Instruções para [atualizar o tema](#instalando-atualizações) também estão disponíveis. + +## Instalação + +Estas instruções vão te ajudar a começar com Hugo e Blowfish a partir de um estado completamente vazio. A maioria das dependências mencionadas neste guia pode ser instalada usando o gerenciador de pacotes de sua escolha para sua plataforma. + +### Instalar Hugo + +Se você nunca usou Hugo antes, precisará [instalá-lo em sua máquina local](https://gohugo.io/getting-started/installing). Você pode verificar se já está instalado executando o comando `hugo version`. + +{{< alert >}} +Certifique-se de estar usando **Hugo versão 0.87.0** ou posterior, pois o tema aproveita alguns dos recursos mais recentes do Hugo. +{{< /alert >}} + +Você pode encontrar instruções de instalação detalhadas para sua plataforma na [documentação do Hugo](https://gohugo.io/getting-started/installing). + +### Blowfish Tools (recomendado) + +Acabamos de lançar uma nova ferramenta CLI para ajudá-lo a começar com o Blowfish. Ela criará um novo projeto Hugo, instalará o tema e configurará os arquivos de configuração do tema para você. Ainda está em beta, então por favor [reporte quaisquer problemas que encontrar](https://github.com/nunocoracao/blowfish-tools). + +Instale a ferramenta CLI globalmente usando npm (ou outro gerenciador de pacotes): +```shell +npx blowfish-tools +``` +ou + +```shell +npm i -g blowfish-tools +``` + +Em seguida, execute o comando `blowfish-tools` para iniciar uma execução interativa que irá guiá-lo através dos casos de uso de criação e configuração. +```shell +blowfish-tools +``` + +Você também pode executar o comando `blowfish-tools new` para criar um novo projeto Hugo e instalar o tema de uma só vez. Verifique a ajuda do CLI para mais informações. +```shell +blowfish-tools new mynewsite +``` + +Aqui está um vídeo curto de quão rápido é começar com o Blowfish usando a ferramenta CLI: + + + +### Instalação sem CLI + +#### Criar um novo site + +Execute o comando `hugo new site mywebsite` para criar um novo site Hugo em um diretório chamado `mywebsite`. + +Note que você pode nomear o diretório do projeto como quiser, mas as instruções abaixo assumem que ele se chama `mywebsite`. Se você usar um nome diferente, certifique-se de substituí-lo adequadamente. + +#### Baixar o tema Blowfish + +Existem várias maneiras diferentes de instalar o tema Blowfish em seu site Hugo. Da mais fácil para a mais difícil de instalar e manter, são: + +- [Submódulo Git](#instalação-com-git) (recomendado) +- [Módulo Hugo](#instalação-com-hugo) +- [Cópia manual de arquivos](#instalação-manual) + +Se você não tem certeza, escolha o método do submódulo Git. + +#### Instalação com Git + +Este método é o mais rápido e fácil para manter o tema atualizado. Além do **Hugo** e **Go**, você também precisará garantir que o **Git** esteja instalado em sua máquina local. + +Mude para o diretório do seu site Hugo (que você criou acima), inicialize um novo repositório `git` e adicione o Blowfish como submódulo. + +```bash +cd mywebsite +git init +git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish +``` + +Em seguida, continue para [configurar os arquivos de configuração do tema](#configurar-arquivos-de-configuração-do-tema). + +#### Instalação com Hugo + +Para este método, você usará o Hugo para gerenciar seus temas. O Hugo usa **Go** para inicializar e gerenciar módulos, então certifique-se de ter o `go` instalado antes de prosseguir. + +1. [Baixe](https://golang.org/dl/) e instale o Go. Você pode verificar se já está instalado usando o comando `go version`. + + {{< alert >}} + Certifique-se de estar usando **Go versão 1.12** ou posterior, pois o Hugo exige isso para que os módulos funcionem corretamente. + {{< /alert >}} + +2. Do diretório do seu projeto Hugo (que você criou acima), inicialize os módulos para seu site: + + ```shell + # Se você está gerenciando seu projeto no GitHub + hugo mod init github.com// + + # Se você está gerenciando seu projeto localmente + hugo mod init my-project + ``` + +3. Adicione o tema à sua configuração criando um novo arquivo `config/_default/module.toml` e adicionando o seguinte: + + ```toml + [[imports]] + disable = false + path = "github.com/nunocoracao/blowfish/v2" + ``` + +4. Inicie seu servidor usando `hugo server` e o tema será baixado automaticamente. +5. Continue para [configurar os arquivos de configuração do tema](#configurar-arquivos-de-configuração-do-tema). + +#### Instalação manual + +1. Baixe a versão mais recente do código-fonte do tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Baixar do Github{{< /button >}} + +2. Extraia o arquivo, renomeie a pasta para `blowfish` e mova-a para o diretório `themes/` dentro da pasta raiz do seu projeto Hugo. +3. Continue para [configurar os arquivos de configuração do tema](#configurar-arquivos-de-configuração-do-tema). + +#### Configurar arquivos de configuração do tema + +Na pasta raiz do seu site, exclua o arquivo `hugo.toml` que foi gerado pelo Hugo. Copie os arquivos de configuração `*.toml` do tema para sua pasta `config/_default/`. Isso garantirá que você tenha todas as configurações corretas do tema e permitirá personalizar facilmente o tema de acordo com suas necessidades. + +{{< alert >}} +**Nota:** Você não deve sobrescrever o arquivo `module.toml` se já existir um em seu projeto! +{{< /alert >}} + +Dependendo de como você instalou o tema, você encontrará os arquivos de configuração do tema em lugares diferentes: + +- **Módulos Hugo:** No diretório de cache do Hugo, ou [baixe uma cópia](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) do GitHub +- **Submódulo Git ou instalação manual:** `themes/blowfish/config/_default` + +Depois de copiar os arquivos, sua pasta de configuração deve ficar assim: + +```shell +config/_default/ +├─ hugo.toml +├─ languages.en.toml +├─ markup.toml +├─ menus.en.toml +├─ module.toml # se você instalou usando Módulos Hugo +└─ params.toml +``` + +{{< alert >}} +**Importante:** Se você não usou Módulos Hugo para instalar o Blowfish, você deve adicionar a linha `theme = "blowfish"` no topo do seu arquivo `hugo.toml`. +{{< /alert >}} + +### Próximos passos + +A instalação básica do Blowfish está agora completa. Continue para a seção [Primeiros Passos]({{< ref "getting-started" >}}) para saber mais sobre a configuração do tema. + +--- + +## Instalando atualizações + +De tempos em tempos, [novas versões](https://github.com/nunocoracao/blowfish/releases) serão publicadas que aplicam correções e adicionam novas funcionalidades ao tema. Para aproveitar essas mudanças, você precisará atualizar os arquivos do tema em seu site. + +Como você fará isso dependerá do método de instalação que você escolheu quando o tema foi originalmente instalado. Instruções para cada método podem ser encontradas abaixo. + +- [Submódulo Git](#atualização-com-git) +- [Módulo Hugo](#atualização-com-hugo) +- [Cópia manual de arquivos](#atualização-manual) + +### Atualização com Git + +Submódulos Git podem ser atualizados usando o comando `git`. Simplesmente execute o seguinte comando e a versão mais recente do tema será baixada em seu repositório local: + +```shell +git submodule update --remote --merge +``` + +Depois que o submódulo for atualizado, reconstrua seu site e verifique se tudo funciona como esperado. + +### Atualização com Hugo + +O Hugo torna a atualização de módulos super fácil. Simplesmente mude para o diretório do seu projeto e execute o seguinte comando: + +```shell +hugo mod get -u +``` + +O Hugo atualizará automaticamente quaisquer módulos necessários para seu projeto. Ele faz isso inspecionando seus arquivos `module.toml` e `go.mod`. Se você tiver problemas com a atualização, verifique se esses arquivos ainda estão configurados corretamente. + +Em seguida, simplesmente reconstrua seu site e verifique se tudo funciona como esperado. + +### Atualização manual + +Atualizar o Blowfish manualmente requer que você baixe a cópia mais recente do tema e substitua a versão antiga em seu projeto. + +{{< alert >}} +Note que quaisquer personalizações locais que você tenha feito nos arquivos do tema serão perdidas durante este processo. +{{< /alert >}} + +1. Baixe a versão mais recente do código-fonte do tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Baixar do Github{{< /button >}} + +2. Extraia o arquivo, renomeie a pasta para `blowfish` e mova-a para o diretório `themes/` dentro da pasta raiz do seu projeto Hugo. Você precisará sobrescrever o diretório existente para substituir todos os arquivos do tema. + +3. Reconstrua seu site e verifique se tudo funciona como esperado. diff --git a/exampleSite/content/docs/installation/index.pt-pt.md b/exampleSite/content/docs/installation/index.pt-pt.md new file mode 100644 index 00000000..10082cbc --- /dev/null +++ b/exampleSite/content/docs/installation/index.pt-pt.md @@ -0,0 +1,211 @@ +--- +title: "Instalação" +weight: 2 +draft: false +description: "Como instalar o tema Blowfish." +slug: "installation" +tags: ["instalação", "documentação"] +series: ["Documentação"] +series_order: 2 +--- + +Simplesmente siga o procedimento padrão do Hugo [Início Rápido](https://gohugo.io/getting-started/quick-start/) para começar rapidamente. + +Instruções detalhadas de instalação podem ser encontradas abaixo. Instruções para [atualizar o tema](#instalar-atualizações) também estão disponíveis. + +## Instalação + +Estas instruções irão ajudá-lo a começar com Hugo e Blowfish a partir de um estado completamente vazio. A maioria das dependências mencionadas neste guia pode ser instalada utilizando o gestor de pacotes da sua escolha para a sua plataforma. + +### Instalar Hugo + +Se nunca utilizou Hugo antes, precisará de [instalá-lo na sua máquina local](https://gohugo.io/getting-started/installing). Pode verificar se já está instalado executando o comando `hugo version`. + +{{< alert >}} +Certifique-se de que está a utilizar **Hugo versão 0.87.0** ou posterior, pois o tema aproveita algumas das funcionalidades mais recentes do Hugo. +{{< /alert >}} + +Pode encontrar instruções de instalação detalhadas para a sua plataforma na [documentação do Hugo](https://gohugo.io/getting-started/installing). + +### Blowfish Tools (recomendado) + +Acabámos de lançar uma nova ferramenta CLI para o ajudar a começar com o Blowfish. Irá criar um novo projeto Hugo, instalar o tema e configurar os ficheiros de configuração do tema por si. Ainda está em beta, por isso [reporte quaisquer problemas que encontrar](https://github.com/nunocoracao/blowfish-tools). + +Instale a ferramenta CLI globalmente utilizando npm (ou outro gestor de pacotes): +```shell +npx blowfish-tools +``` +ou + +```shell +npm i -g blowfish-tools +``` + +Em seguida, execute o comando `blowfish-tools` para iniciar uma execução interativa que o guiará através dos casos de uso de criação e configuração. +```shell +blowfish-tools +``` + +Também pode executar o comando `blowfish-tools new` para criar um novo projeto Hugo e instalar o tema de uma só vez. Consulte a ajuda do CLI para mais informações. +```shell +blowfish-tools new mynewsite +``` + +Aqui está um vídeo curto de quão rápido é começar com o Blowfish utilizando a ferramenta CLI: + + + +### Instalação sem CLI + +#### Criar um novo site + +Execute o comando `hugo new site mywebsite` para criar um novo site Hugo num diretório chamado `mywebsite`. + +Note que pode nomear o diretório do projeto como quiser, mas as instruções abaixo assumem que se chama `mywebsite`. Se utilizar um nome diferente, certifique-se de o substituir adequadamente. + +#### Transferir o tema Blowfish + +Existem várias formas diferentes de instalar o tema Blowfish no seu site Hugo. Da mais fácil para a mais difícil de instalar e manter, são: + +- [Submódulo Git](#instalação-com-git) (recomendado) +- [Módulo Hugo](#instalação-com-hugo) +- [Cópia manual de ficheiros](#instalação-manual) + +Se não tem a certeza, escolha o método do submódulo Git. + +#### Instalação com Git + +Este método é o mais rápido e fácil para manter o tema atualizado. Além do **Hugo** e **Go**, também precisará de garantir que o **Git** está instalado na sua máquina local. + +Mude para o diretório do seu site Hugo (que criou acima), inicialize um novo repositório `git` e adicione o Blowfish como submódulo. + +```bash +cd mywebsite +git init +git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish +``` + +Em seguida, continue para [configurar os ficheiros de configuração do tema](#configurar-ficheiros-de-configuração-do-tema). + +#### Instalação com Hugo + +Para este método, utilizará o Hugo para gerir os seus temas. O Hugo utiliza **Go** para inicializar e gerir módulos, por isso certifique-se de ter o `go` instalado antes de prosseguir. + +1. [Transfira](https://golang.org/dl/) e instale o Go. Pode verificar se já está instalado utilizando o comando `go version`. + + {{< alert >}} + Certifique-se de que está a utilizar **Go versão 1.12** ou posterior, pois o Hugo exige isto para que os módulos funcionem corretamente. + {{< /alert >}} + +2. A partir do diretório do seu projeto Hugo (que criou acima), inicialize os módulos para o seu site: + + ```shell + # Se está a gerir o seu projeto no GitHub + hugo mod init github.com// + + # Se está a gerir o seu projeto localmente + hugo mod init my-project + ``` + +3. Adicione o tema à sua configuração criando um novo ficheiro `config/_default/module.toml` e adicionando o seguinte: + + ```toml + [[imports]] + disable = false + path = "github.com/nunocoracao/blowfish/v2" + ``` + +4. Inicie o seu servidor utilizando `hugo server` e o tema será transferido automaticamente. +5. Continue para [configurar os ficheiros de configuração do tema](#configurar-ficheiros-de-configuração-do-tema). + +#### Instalação manual + +1. Transfira a versão mais recente do código-fonte do tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Transferir do Github{{< /button >}} + +2. Extraia o arquivo, renomeie a pasta para `blowfish` e mova-a para o diretório `themes/` dentro da pasta raiz do seu projeto Hugo. +3. Continue para [configurar os ficheiros de configuração do tema](#configurar-ficheiros-de-configuração-do-tema). + +#### Configurar ficheiros de configuração do tema + +Na pasta raiz do seu site, elimine o ficheiro `hugo.toml` que foi gerado pelo Hugo. Copie os ficheiros de configuração `*.toml` do tema para a sua pasta `config/_default/`. Isto garantirá que tem todas as configurações corretas do tema e permitirá personalizar facilmente o tema de acordo com as suas necessidades. + +{{< alert >}} +**Nota:** Não deve sobrescrever o ficheiro `module.toml` se já existir um no seu projeto! +{{< /alert >}} + +Dependendo de como instalou o tema, encontrará os ficheiros de configuração do tema em locais diferentes: + +- **Módulos Hugo:** No diretório de cache do Hugo, ou [transfira uma cópia](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) do GitHub +- **Submódulo Git ou instalação manual:** `themes/blowfish/config/_default` + +Depois de copiar os ficheiros, a sua pasta de configuração deve ficar assim: + +```shell +config/_default/ +├─ hugo.toml +├─ languages.en.toml +├─ markup.toml +├─ menus.en.toml +├─ module.toml # se instalou utilizando Módulos Hugo +└─ params.toml +``` + +{{< alert >}} +**Importante:** Se não utilizou Módulos Hugo para instalar o Blowfish, deve adicionar a linha `theme = "blowfish"` no topo do seu ficheiro `hugo.toml`. +{{< /alert >}} + +### Próximos passos + +A instalação básica do Blowfish está agora completa. Continue para a secção [Primeiros Passos]({{< ref "getting-started" >}}) para saber mais sobre a configuração do tema. + +--- + +## Instalar atualizações + +De tempos a tempos, [novas versões](https://github.com/nunocoracao/blowfish/releases) serão publicadas que aplicam correções e adicionam novas funcionalidades ao tema. Para tirar partido destas alterações, precisará de atualizar os ficheiros do tema no seu site. + +Como fará isto dependerá do método de instalação que escolheu quando o tema foi originalmente instalado. Instruções para cada método podem ser encontradas abaixo. + +- [Submódulo Git](#atualização-com-git) +- [Módulo Hugo](#atualização-com-hugo) +- [Cópia manual de ficheiros](#atualização-manual) + +### Atualização com Git + +Submódulos Git podem ser atualizados utilizando o comando `git`. Simplesmente execute o seguinte comando e a versão mais recente do tema será transferida para o seu repositório local: + +```shell +git submodule update --remote --merge +``` + +Depois de o submódulo ser atualizado, reconstrua o seu site e verifique se tudo funciona como esperado. + +### Atualização com Hugo + +O Hugo torna a atualização de módulos super fácil. Simplesmente mude para o diretório do seu projeto e execute o seguinte comando: + +```shell +hugo mod get -u +``` + +O Hugo atualizará automaticamente quaisquer módulos necessários para o seu projeto. Faz isto inspecionando os seus ficheiros `module.toml` e `go.mod`. Se tiver problemas com a atualização, verifique se estes ficheiros ainda estão configurados corretamente. + +Em seguida, simplesmente reconstrua o seu site e verifique se tudo funciona como esperado. + +### Atualização manual + +Atualizar o Blowfish manualmente requer que transfira a cópia mais recente do tema e substitua a versão antiga no seu projeto. + +{{< alert >}} +Note que quaisquer personalizações locais que tenha feito aos ficheiros do tema serão perdidas durante este processo. +{{< /alert >}} + +1. Transfira a versão mais recente do código-fonte do tema. + + {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Transferir do Github{{< /button >}} + +2. Extraia o arquivo, renomeie a pasta para `blowfish` e mova-a para o diretório `themes/` dentro da pasta raiz do seu projeto Hugo. Precisará de sobrescrever o diretório existente para substituir todos os ficheiros do tema. + +3. Reconstrua o seu site e verifique se tudo funciona como esperado. diff --git a/exampleSite/content/docs/multi-author/index.de.md b/exampleSite/content/docs/multi-author/index.de.md new file mode 100644 index 00000000..901e6f1f --- /dev/null +++ b/exampleSite/content/docs/multi-author/index.de.md @@ -0,0 +1,102 @@ +--- +title: "Mehrere Autoren" +weight: 8 +draft: false +description: "Konfigurieren Sie mehrere Autoren für Ihre Artikel." +slug: "multi-author" +tags: ["autoren", "konfiguration", "dokumentation"] +series: ["Dokumentation"] +series_order: 10 +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- + + +Einige Websites haben mehr als einen Autor, der Inhalte beisteuert, und benötigen daher mehr als einen einzelnen Standardautor für die gesamte Website. Für diese Anwendungsfälle ermöglicht Blowfish den Benutzern, die Liste der Autoren mithilfe der Funktion für mehrere Autoren zu erweitern. + +Um alles abwärtskompatibel zu halten, ermöglicht diese Funktion nur die Definition zusätzlicher Autoren und ändert in keiner Weise die vorherige Autorenfunktionalität, die über Konfigurationsdateien verwendet wird. + + +## Autoren erstellen + +Der erste Schritt zum Erstellen neuer Autoren ist das Einrichten eines neuen Ordners in `./data/authors`. Dann können Sie einfach neue `json`-Dateien darin hinzufügen, eine für jeden neuen Autor. Der Name der Datei wird der `key` für diesen Autor sein, wenn Sie ihn in Ihren Artikeln referenzieren. + +Lassen Sie uns als Beispiel eine Datei namens `nunocoracao.json` in `./data/authors` erstellen. Der Inhalt der Datei sollte dem unten stehenden ähneln. `name`, `image`, `bio` und `social` sind die 4 Parameter, die derzeit für Autoren unterstützt werden. Sie spiegeln die Konfigurationen wider, die für den Standardautor in den Konfigurationsdateien verfügbar sind. + +_Hinweis: Der Schlüssel im Social-Objekt wird verwendet, um eines der Theme-Icons abzurufen. Sie können jedes der in Ihrer Installation verfügbaren Icons verwenden._ + +```json +{ + "name": "Nuno Coração", + "image" : "img/nuno_avatar.jpg", + "bio": "Theme Creator", + "social": [ + { "linkedin": "https://linkedin.com/in/nunocoracao" }, + { "twitter": "https://twitter.com/nunocoracao" }, + { "instagram": "https://instagram.com/nunocoracao" }, + { "medium": "https://medium.com/@nunocoracao" }, + { "github": "https://github.com/nunocoracao" }, + { "goodreads": "http://goodreads.com/nunocoracao" }, + { "keybase": "https://keybase.io/nunocoracao" }, + { "reddit": "https://reddit.com/user/nunoheart" } + ] +} +``` + + +## Autoren in Artikeln referenzieren + +Nachdem Sie einen Autor erstellt haben, ist der nächste Schritt, ihn in einem oder mehreren Artikeln zu referenzieren. Im folgenden Beispiel referenzieren wir den im vorherigen Schritt erstellten Autor mit seinem `key`. + +Dies wird einen zusätzlichen Autor mit den in der `json`-Datei bereitgestellten Daten rendern. Diese Funktion ändert in keiner Weise den für die gesamte Website konfigurierten Standardautor, und daher können Sie beide separat steuern. Mit dem Parameter `showAuthor` können Sie konfigurieren, ob der Standardautor angezeigt werden soll - das ist der normale Anwendungsfall für einen Einzelautoren-Blog. Der neue Front-Matter-Parameter `authors` ermöglicht es Ihnen, Autoren speziell für einen Artikel zu definieren, und sie werden unabhängig von den Konfigurationen für den Standard-Website-Autor gerendert. + +```md +--- +title: "Multiple Authors" +date: 2020-08-10 +draft: false +description: "Configure multiple authors for your articles." +slug: "multi-author" +tags: ["authors", "config", "docs"] +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- +``` + +Im Beispiel, das dem Markdown der aktuellen Seite entspricht, werden sowohl der Standardautor als auch der neue angezeigt. Sie können jetzt nach unten scrollen, um das Ergebnis zu sehen. + +## Die Autoren-Taxonomie erstellen + +Um Listen von Artikeln für jeden Ihrer Autoren zu erhalten, können Sie die `authors`-Taxonomie konfigurieren, die einige weitere interessante Konfigurationen eröffnet. Dies ist ein optionaler Schritt im Prozess, der nicht erforderlich ist, um die Autoren in Ihren Artikeln anzuzeigen. + +Der erste Schritt ist die Konfiguration der `authors`-Taxonomie in Ihrer `hugo.toml`-Datei, wie im folgenden Beispiel. Obwohl `tag` und `category` standardmäßig mit Hugo definiert sind, müssen Sie sie erneut hinzufügen, sobald Sie einen spezifischen Taxonomie-Abschnitt hinzufügen, da die Website sie sonst nicht verarbeitet. + +```toml +[taxonomies] + tag = "tags" + category = "categories" + author = "authors" +``` + +Und das war's im Grunde. Jetzt haben Sie Seiten, die Ihre Autoren referenzieren und für jeden die entsprechende Liste von Artikeln anzeigen, an denen sie teilnehmen. Sie können auch `article.showAuthorsBadges` in der Konfigurationsdatei oder `showAuthorsBadges` in jedem Artikel verwenden, um zu wählen, ob die `authors`-Taxonomie als Badges in jedem Beitragselement angezeigt werden soll. Diese Dokumentation ist so konfiguriert, dass keine Autoren angezeigt werden, aber wenn Sie sich das unten referenzierte Beispiel ansehen, werden Sie die Autoren als Badges sehen. + +Schließlich können Sie jeder Autorenseite mehr Details hinzufügen, sodass sie eine kleine Bio, Links oder andere Informationen anzeigt, die zu Ihrem Anwendungsfall passen. Um dies zu erreichen, erstellen Sie einen Ordner mit dem `key` für jeden Autor in `./content/authors` und platzieren Sie darin eine `_index.md`-Datei. Für das obige Beispiel würden wir mit einer Datei `.content/authors/nunocoracao/_index.md` enden. Darin können Sie den tatsächlichen Namen des Autors und den Inhalt seiner Seite konfigurieren. Autoren auf dieser Dokumentations-Website sind so konfiguriert, sodass Sie einen Blick darauf werfen können, indem Sie auf der Website herumspielen. + +```md +--- +title: "Nuno Coração" +--- + +Nuno's awesome dummy bio. + +``` + +## Beispiel + +Dieses Beispiel unten zeigt einen Fall, bei dem der Standard-Website-Autor deaktiviert ist und der Artikel mehrere Autoren hat. + +{{< article link="/samples/multiple-authors/" >}} diff --git a/exampleSite/content/docs/multi-author/index.es.md b/exampleSite/content/docs/multi-author/index.es.md new file mode 100644 index 00000000..49b7f0a5 --- /dev/null +++ b/exampleSite/content/docs/multi-author/index.es.md @@ -0,0 +1,102 @@ +--- +title: "Múltiples autores" +weight: 8 +draft: false +description: "Configura múltiples autores para tus artículos." +slug: "multi-author" +tags: ["autores", "configuración", "documentación"] +series: ["Documentación"] +series_order: 10 +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- + + +Algunos sitios web tienen más de un autor contribuyendo con contenido y por lo tanto requieren más de un único autor predeterminado para todo el sitio. Para esos casos de uso, Blowfish permite a los usuarios extender la lista de autores usando la función de múltiples autores. + +Para mantener todo compatible hacia atrás, esta función solo permite la definición de autores adicionales y no cambia de ninguna manera la funcionalidad de autor anterior que se usa a través de archivos de configuración. + + +## Crear autores + +El primer paso para crear nuevos autores es configurar una nueva carpeta en `./data/authors`. Luego puedes simplemente añadir nuevos archivos `json` dentro, uno para cada nuevo autor. El nombre del archivo será la `clave` para ese autor al referenciarlo en tus artículos. + +Como ejemplo, vamos a crear un archivo llamado `nunocoracao.json` dentro de `./data/authors`. El contenido del archivo debería ser similar al de abajo. `name`, `image`, `bio` y `social` son los 4 parámetros soportados actualmente para autores. Reflejan las configuraciones disponibles para el autor predeterminado en los archivos de configuración. + +_Nota: la clave en el objeto social se usará para obtener uno de los iconos del tema, siéntete libre de usar cualquiera de los iconos disponibles en tu instalación._ + +```json +{ + "name": "Nuno Coração", + "image" : "img/nuno_avatar.jpg", + "bio": "Theme Creator", + "social": [ + { "linkedin": "https://linkedin.com/in/nunocoracao" }, + { "twitter": "https://twitter.com/nunocoracao" }, + { "instagram": "https://instagram.com/nunocoracao" }, + { "medium": "https://medium.com/@nunocoracao" }, + { "github": "https://github.com/nunocoracao" }, + { "goodreads": "http://goodreads.com/nunocoracao" }, + { "keybase": "https://keybase.io/nunocoracao" }, + { "reddit": "https://reddit.com/user/nunoheart" } + ] +} +``` + + +## Referenciar autores en artículos + +Ahora que has creado un autor, el siguiente paso es referenciarlo en uno o más artículos. En el ejemplo de abajo, referenciamos el autor creado en el paso anterior usando su `clave`. + +Esto renderizará un autor adicional usando los datos proporcionados en el archivo `json`. Esta función no cambia de ninguna manera el autor predeterminado configurado para el sitio general, y por lo tanto, puedes controlar ambos por separado. Usando el parámetro `showAuthor`, puedes configurar si mostrar el autor predeterminado, ese es el caso de uso normal para un blog de un solo autor. El nuevo parámetro front matter `authors` te permite definir autores específicamente para un artículo, y serán renderizados independientemente de las configuraciones para el autor del sitio predeterminado. + +```md +--- +title: "Multiple Authors" +date: 2020-08-10 +draft: false +description: "Configure multiple authors for your articles." +slug: "multi-author" +tags: ["authors", "config", "docs"] +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- +``` + +En el ejemplo, que coincide con el markdown de la página actual, tanto el autor predeterminado como el nuevo serán mostrados. Puedes desplazarte hacia abajo ahora para ver el resultado. + +## Crear la taxonomía de autores + +Para obtener listas de artículos para cada uno de tus autores puedes configurar la taxonomía `authors`, que abre algunas configuraciones más que podrían ser interesantes. Este es un paso opcional en el proceso que no es requerido para mostrar los autores en tus artículos. + +El primer paso es configurar la taxonomía `authors` en tu archivo `hugo.toml`, como en el ejemplo de abajo. Aunque `tag` y `category` están definidos por defecto con Hugo, una vez que añades una sección de taxonomías específica necesitas añadirlos de nuevo, de lo contrario el sitio no los procesará. + +```toml +[taxonomies] + tag = "tags" + category = "categories" + author = "authors" +``` + +Y eso es básicamente todo. Ahora tendrás páginas que referencian a tus autores y, para cada uno, muestran la lista respectiva de artículos donde participan. También puedes usar `article.showAuthorsBadges` en el archivo de configuración, o `showAuthorsBadges` en cada artículo para elegir si mostrar la taxonomía `authors` como badges en cada elemento de publicación. Como ejemplo, esta documentación está configurada para no mostrar autores pero si miras la muestra referenciada abajo verás los autores mostrados como badges. + +Por último, puedes añadir más detalle a cada página de autor para que muestre una pequeña bio, enlaces, o cualquier información que se ajuste a tu caso de uso. Para lograr eso, crea una carpeta con la `clave` para cada autor dentro de `./content/authors` y dentro de cada carpeta coloca un archivo `_index.md`. Para el ejemplo de arriba, terminaríamos con un archivo `.content/authors/nunocoracao/_index.md`. Dentro, puedes configurar el nombre real del autor y el contenido de su página. Los autores en este sitio de documentación están configurados así, por lo que puedes echar un vistazo jugando con el sitio. + +```md +--- +title: "Nuno Coração" +--- + +Nuno's awesome dummy bio. + +``` + +## Ejemplo + +Esta muestra de abajo muestra un ejemplo donde el autor del sitio predeterminado está desactivado y el artículo tiene múltiples autores. + +{{< article link="/samples/multiple-authors/" >}} diff --git a/exampleSite/content/docs/multi-author/index.fr.md b/exampleSite/content/docs/multi-author/index.fr.md new file mode 100644 index 00000000..5992dab4 --- /dev/null +++ b/exampleSite/content/docs/multi-author/index.fr.md @@ -0,0 +1,102 @@ +--- +title: "Auteurs multiples" +weight: 8 +draft: false +description: "Configurez plusieurs auteurs pour vos articles." +slug: "multi-author" +tags: ["auteurs", "configuration", "documentation"] +series: ["Documentation"] +series_order: 10 +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- + + +Certains sites web ont plus d'un auteur contribuant au contenu et nécessitent donc plus qu'un seul auteur par défaut pour l'ensemble du site. Pour ces cas d'utilisation, Blowfish permet aux utilisateurs d'étendre la liste des auteurs en utilisant la fonctionnalité d'auteurs multiples. + +Pour garder tout rétrocompatible, cette fonctionnalité permet uniquement la définition d'auteurs supplémentaires et ne change en rien la fonctionnalité d'auteur précédente qui est utilisée via les fichiers de configuration. + + +## Créer des auteurs + +La première étape pour créer de nouveaux auteurs est de configurer un nouveau dossier dans `./data/authors`. Ensuite, vous pouvez simplement ajouter de nouveaux fichiers `json` à l'intérieur, un pour chaque nouvel auteur. Le nom du fichier sera la `clé` pour cet auteur lors de sa référence dans vos articles. + +Par exemple, créons un fichier appelé `nunocoracao.json` dans `./data/authors`. Le contenu du fichier devrait être similaire à celui ci-dessous. `name`, `image`, `bio` et `social` sont les 4 paramètres actuellement supportés pour les auteurs. Ils reflètent les configurations disponibles pour l'auteur par défaut dans les fichiers de configuration. + +_Note : la clé dans l'objet social sera utilisée pour récupérer l'une des icônes du thème, n'hésitez pas à utiliser n'importe quelle icône disponible dans votre installation._ + +```json +{ + "name": "Nuno Coração", + "image" : "img/nuno_avatar.jpg", + "bio": "Theme Creator", + "social": [ + { "linkedin": "https://linkedin.com/in/nunocoracao" }, + { "twitter": "https://twitter.com/nunocoracao" }, + { "instagram": "https://instagram.com/nunocoracao" }, + { "medium": "https://medium.com/@nunocoracao" }, + { "github": "https://github.com/nunocoracao" }, + { "goodreads": "http://goodreads.com/nunocoracao" }, + { "keybase": "https://keybase.io/nunocoracao" }, + { "reddit": "https://reddit.com/user/nunoheart" } + ] +} +``` + + +## Référencer les auteurs dans les articles + +Maintenant que vous avez créé un auteur, l'étape suivante est de le référencer dans un ou plusieurs articles. Dans l'exemple ci-dessous, nous référençons l'auteur créé à l'étape précédente en utilisant sa `clé`. + +Cela affichera un auteur supplémentaire en utilisant les données fournies dans le fichier `json`. Cette fonctionnalité ne change en rien l'auteur par défaut configuré pour l'ensemble du site, et donc, vous pouvez contrôler les deux séparément. En utilisant le paramètre `showAuthor`, vous pouvez configurer s'il faut afficher l'auteur par défaut, c'est le cas d'utilisation normal pour un blog à auteur unique. Le nouveau paramètre front matter `authors` vous permet de définir des auteurs spécifiquement pour un article, et ils seront rendus indépendamment des configurations pour l'auteur du site par défaut. + +```md +--- +title: "Multiple Authors" +date: 2020-08-10 +draft: false +description: "Configure multiple authors for your articles." +slug: "multi-author" +tags: ["authors", "config", "docs"] +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- +``` + +Dans l'exemple, qui correspond au markdown de la page actuelle, à la fois l'auteur par défaut et le nouveau seront affichés. Vous pouvez faire défiler vers le bas maintenant pour voir le résultat. + +## Créer la taxonomie des auteurs + +Pour obtenir des listes d'articles pour chacun de vos auteurs, vous pouvez configurer la taxonomie `authors`, qui ouvre quelques configurations supplémentaires qui pourraient être intéressantes. C'est une étape optionnelle dans le processus qui n'est pas requise pour afficher les auteurs dans vos articles. + +La première étape est de configurer la taxonomie `authors` dans votre fichier `hugo.toml`, comme dans l'exemple ci-dessous. Même si `tag` et `category` sont définis par défaut avec Hugo, une fois que vous ajoutez une section taxonomies spécifique, vous devez les ajouter à nouveau sinon le site ne les traitera pas. + +```toml +[taxonomies] + tag = "tags" + category = "categories" + author = "authors" +``` + +Et c'est à peu près tout. Maintenant vous aurez des pages qui référencent vos auteurs et, pour chacun, affichent la liste respective d'articles où ils participent. Vous pouvez également utiliser `article.showAuthorsBadges` dans le fichier de configuration, ou `showAuthorsBadges` sur chaque article pour choisir d'afficher ou non la taxonomie `authors` comme badges dans chaque élément de publication. Par exemple, cette documentation est configurée pour ne pas afficher les auteurs mais si vous regardez l'exemple référencé ci-dessous, vous verrez les auteurs affichés comme badges. + +Enfin, vous pouvez ajouter plus de détails à chaque page d'auteur pour qu'elle affiche une petite bio, des liens, ou toute information qui correspond à votre cas d'utilisation. Pour y parvenir, créez un dossier avec la `clé` pour chaque auteur dans `./content/authors` et placez à l'intérieur un fichier `_index.md`. Pour l'exemple ci-dessus, nous finirions avec un fichier `.content/authors/nunocoracao/_index.md`. À l'intérieur, vous pouvez configurer le nom réel de l'auteur et le contenu de sa page. Les auteurs sur ce site de documentation sont configurés ainsi, donc vous pouvez y jeter un œil en jouant avec le site. + +```md +--- +title: "Nuno Coração" +--- + +Nuno's awesome dummy bio. + +``` + +## Exemple + +Cet exemple ci-dessous montre un cas où l'auteur du site par défaut est désactivé et l'article a plusieurs auteurs. + +{{< article link="/samples/multiple-authors/" >}} diff --git a/exampleSite/content/docs/multi-author/index.pt-br.md b/exampleSite/content/docs/multi-author/index.pt-br.md new file mode 100644 index 00000000..58471298 --- /dev/null +++ b/exampleSite/content/docs/multi-author/index.pt-br.md @@ -0,0 +1,102 @@ +--- +title: "Múltiplos autores" +weight: 8 +draft: false +description: "Configure múltiplos autores para seus artigos." +slug: "multi-author" +tags: ["autores", "configuração", "documentação"] +series: ["Documentação"] +series_order: 10 +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- + + +Alguns sites têm mais de um autor contribuindo com conteúdo e, portanto, requerem mais de um único autor padrão para todo o site. Para esses casos de uso, o Blowfish permite aos usuários estender a lista de autores usando o recurso de múltiplos autores. + +Para manter tudo compatível com versões anteriores, este recurso permite apenas a definição de autores adicionais e não altera de nenhuma forma a funcionalidade de autor anterior que é usada através dos arquivos de configuração. + + +## Criar autores + +O primeiro passo para criar novos autores é configurar uma nova pasta em `./data/authors`. Então você pode simplesmente adicionar novos arquivos `json` dentro, um para cada novo autor. O nome do arquivo será a `chave` para aquele autor ao referenciá-lo em seus artigos. + +Como exemplo, vamos criar um arquivo chamado `nunocoracao.json` dentro de `./data/authors`. O conteúdo do arquivo deve ser semelhante ao abaixo. `name`, `image`, `bio` e `social` são os 4 parâmetros suportados atualmente para autores. Eles espelham as configurações disponíveis para o autor padrão nos arquivos de configuração. + +_Nota: a chave no objeto social será usada para buscar um dos ícones do tema, sinta-se à vontade para usar qualquer um dos ícones disponíveis em sua instalação._ + +```json +{ + "name": "Nuno Coração", + "image" : "img/nuno_avatar.jpg", + "bio": "Theme Creator", + "social": [ + { "linkedin": "https://linkedin.com/in/nunocoracao" }, + { "twitter": "https://twitter.com/nunocoracao" }, + { "instagram": "https://instagram.com/nunocoracao" }, + { "medium": "https://medium.com/@nunocoracao" }, + { "github": "https://github.com/nunocoracao" }, + { "goodreads": "http://goodreads.com/nunocoracao" }, + { "keybase": "https://keybase.io/nunocoracao" }, + { "reddit": "https://reddit.com/user/nunoheart" } + ] +} +``` + + +## Referenciar autores em artigos + +Agora que você criou um autor, o próximo passo é referenciá-lo em um ou mais artigos. No exemplo abaixo, referenciamos o autor criado no passo anterior usando sua `chave`. + +Isso renderizará um autor adicional usando os dados fornecidos no arquivo `json`. Este recurso não altera de nenhuma forma o autor padrão configurado para o site geral, e portanto, você pode controlar ambos separadamente. Usando o parâmetro `showAuthor`, você pode configurar se deseja mostrar o autor padrão, esse é o caso de uso normal para um blog de autor único. O novo parâmetro front matter `authors` permite definir autores especificamente para um artigo, e eles serão renderizados independentemente das configurações para o autor padrão do site. + +```md +--- +title: "Multiple Authors" +date: 2020-08-10 +draft: false +description: "Configure multiple authors for your articles." +slug: "multi-author" +tags: ["authors", "config", "docs"] +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- +``` + +No exemplo, que corresponde ao markdown da página atual, tanto o autor padrão quanto o novo serão exibidos. Você pode rolar para baixo agora para ver o resultado. + +## Criar a taxonomia de autores + +Para obter listas de artigos para cada um de seus autores, você pode configurar a taxonomia `authors`, que abre algumas configurações mais que podem ser interessantes. Este é um passo opcional no processo que não é necessário para exibir os autores em seus artigos. + +O primeiro passo é configurar a taxonomia `authors` em seu arquivo `hugo.toml`, como no exemplo abaixo. Embora `tag` e `category` sejam definidos por padrão com Hugo, uma vez que você adiciona uma seção de taxonomias específica, você precisa adicioná-los novamente, caso contrário o site não os processará. + +```toml +[taxonomies] + tag = "tags" + category = "categories" + author = "authors" +``` + +E é basicamente isso. Agora você terá páginas que referenciam seus autores e, para cada um, mostram a respectiva lista de artigos onde eles participam. Você também pode usar `article.showAuthorsBadges` no arquivo de configuração, ou `showAuthorsBadges` em cada artigo para escolher se deseja exibir a taxonomia `authors` como badges em cada item de postagem. Como exemplo, esta documentação está configurada para não exibir autores, mas se você olhar a amostra referenciada abaixo, verá os autores exibidos como badges. + +Por último, você pode adicionar mais detalhes a cada página de autor para que ela exiba uma pequena bio, links ou qualquer informação que se adeque ao seu caso de uso. Para conseguir isso, crie uma pasta com a `chave` para cada autor dentro de `./content/authors` e dentro de cada pasta coloque um arquivo `_index.md`. Para o exemplo acima, terminaríamos com um arquivo `.content/authors/nunocoracao/_index.md`. Dentro, você pode configurar o nome real do autor e o conteúdo de sua página. Os autores neste site de documentação estão configurados assim, então você pode dar uma olhada jogando com o site. + +```md +--- +title: "Nuno Coração" +--- + +Nuno's awesome dummy bio. + +``` + +## Exemplo + +Esta amostra abaixo mostra um exemplo onde o autor padrão do site está desativado e o artigo tem múltiplos autores. + +{{< article link="/samples/multiple-authors/" >}} diff --git a/exampleSite/content/docs/multi-author/index.pt-pt.md b/exampleSite/content/docs/multi-author/index.pt-pt.md new file mode 100644 index 00000000..7cd459c8 --- /dev/null +++ b/exampleSite/content/docs/multi-author/index.pt-pt.md @@ -0,0 +1,102 @@ +--- +title: "Múltiplos autores" +weight: 8 +draft: false +description: "Configure múltiplos autores para os seus artigos." +slug: "multi-author" +tags: ["autores", "configuração", "documentação"] +series: ["Documentação"] +series_order: 10 +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- + + +Alguns websites têm mais do que um autor a contribuir com conteúdo e, portanto, requerem mais do que um único autor predefinido para todo o site. Para esses casos de uso, o Blowfish permite aos utilizadores estender a lista de autores utilizando a funcionalidade de múltiplos autores. + +Para manter tudo compatível com versões anteriores, esta funcionalidade apenas permite a definição de autores adicionais e não altera de nenhuma forma a funcionalidade de autor anterior que é utilizada através dos ficheiros de configuração. + + +## Criar autores + +O primeiro passo para criar novos autores é configurar uma nova pasta em `./data/authors`. Depois pode simplesmente adicionar novos ficheiros `json` dentro, um para cada novo autor. O nome do ficheiro será a `chave` para esse autor ao referenciá-lo nos seus artigos. + +Como exemplo, vamos criar um ficheiro chamado `nunocoracao.json` dentro de `./data/authors`. O conteúdo do ficheiro deve ser semelhante ao abaixo. `name`, `image`, `bio` e `social` são os 4 parâmetros suportados atualmente para autores. Eles espelham as configurações disponíveis para o autor predefinido nos ficheiros de configuração. + +_Nota: a chave no objeto social será utilizada para obter um dos ícones do tema, sinta-se à vontade para utilizar qualquer um dos ícones disponíveis na sua instalação._ + +```json +{ + "name": "Nuno Coração", + "image" : "img/nuno_avatar.jpg", + "bio": "Theme Creator", + "social": [ + { "linkedin": "https://linkedin.com/in/nunocoracao" }, + { "twitter": "https://twitter.com/nunocoracao" }, + { "instagram": "https://instagram.com/nunocoracao" }, + { "medium": "https://medium.com/@nunocoracao" }, + { "github": "https://github.com/nunocoracao" }, + { "goodreads": "http://goodreads.com/nunocoracao" }, + { "keybase": "https://keybase.io/nunocoracao" }, + { "reddit": "https://reddit.com/user/nunoheart" } + ] +} +``` + + +## Referenciar autores em artigos + +Agora que criou um autor, o próximo passo é referenciá-lo em um ou mais artigos. No exemplo abaixo, referenciamos o autor criado no passo anterior utilizando a sua `chave`. + +Isto irá renderizar um autor adicional utilizando os dados fornecidos no ficheiro `json`. Esta funcionalidade não altera de nenhuma forma o autor predefinido configurado para o site geral, e portanto, pode controlar ambos separadamente. Utilizando o parâmetro `showAuthor`, pode configurar se deseja mostrar o autor predefinido, esse é o caso de uso normal para um blogue de autor único. O novo parâmetro front matter `authors` permite definir autores especificamente para um artigo, e eles serão renderizados independentemente das configurações para o autor predefinido do site. + +```md +--- +title: "Multiple Authors" +date: 2020-08-10 +draft: false +description: "Configure multiple authors for your articles." +slug: "multi-author" +tags: ["authors", "config", "docs"] +showAuthor: true +authors: + - "nunocoracao" +showAuthorsBadges : false +--- +``` + +No exemplo, que corresponde ao markdown da página atual, tanto o autor predefinido quanto o novo serão apresentados. Pode fazer scroll para baixo agora para ver o resultado. + +## Criar a taxonomia de autores + +Para obter listas de artigos para cada um dos seus autores, pode configurar a taxonomia `authors`, que abre algumas configurações mais que podem ser interessantes. Este é um passo opcional no processo que não é necessário para apresentar os autores nos seus artigos. + +O primeiro passo é configurar a taxonomia `authors` no seu ficheiro `hugo.toml`, como no exemplo abaixo. Embora `tag` e `category` sejam definidos por predefinição com Hugo, assim que adiciona uma secção de taxonomias específica, precisa de adicioná-los novamente, caso contrário o site não os processará. + +```toml +[taxonomies] + tag = "tags" + category = "categories" + author = "authors" +``` + +E é basicamente isso. Agora terá páginas que referenciam os seus autores e, para cada um, mostram a respetiva lista de artigos onde participam. Também pode utilizar `article.showAuthorsBadges` no ficheiro de configuração, ou `showAuthorsBadges` em cada artigo para escolher se deseja apresentar a taxonomia `authors` como badges em cada item de publicação. Como exemplo, esta documentação está configurada para não apresentar autores, mas se olhar para a amostra referenciada abaixo, verá os autores apresentados como badges. + +Por último, pode adicionar mais detalhes a cada página de autor para que apresente uma pequena bio, ligações ou qualquer informação que se adeque ao seu caso de uso. Para conseguir isso, crie uma pasta com a `chave` para cada autor dentro de `./content/authors` e dentro de cada pasta coloque um ficheiro `_index.md`. Para o exemplo acima, terminaríamos com um ficheiro `.content/authors/nunocoracao/_index.md`. Dentro, pode configurar o nome real do autor e o conteúdo da sua página. Os autores neste website de documentação estão configurados assim, portanto pode dar uma vista de olhos navegando pelo site. + +```md +--- +title: "Nuno Coração" +--- + +Nuno's awesome dummy bio. + +``` + +## Exemplo + +Esta amostra abaixo mostra um exemplo onde o autor predefinido do site está desativado e o artigo tem múltiplos autores. + +{{< article link="/samples/multiple-authors/" >}} diff --git a/exampleSite/content/docs/partials/index.de.md b/exampleSite/content/docs/partials/index.de.md new file mode 100644 index 00000000..8be9c382 --- /dev/null +++ b/exampleSite/content/docs/partials/index.de.md @@ -0,0 +1,147 @@ +--- +title: "Partials" +weight: 9 +draft: false +description: "Alle verfügbaren Partials in Blowfish." +slug: "partials" +tags: ["partials", "analytics", "datenschutz", "kommentare", "favicons", "icon", "dokumentation"] +series: ["Dokumentation"] +series_order: 9 +--- + +## Analytics + +Blowfish bietet integrierte Unterstützung für Fathom Analytics, Google Analytics und Umami Analytics. Fathom ist eine kostenpflichtige Alternative zu Google Analytics, die die Privatsphäre der Benutzer respektiert. + +### Fathom Analytics + +Um die Fathom Analytics-Unterstützung zu aktivieren, geben Sie einfach Ihren Fathom-Site-Code in der Datei `config/_default/params.toml` an. Wenn Sie auch die benutzerdefinierte Domain-Funktion von Fathom verwenden und deren Skript von Ihrer Domain bereitstellen möchten, können Sie zusätzlich den Konfigurationswert `domain` angeben. Wenn Sie keinen `domain`-Wert angeben, wird das Skript direkt von Fathom DNS geladen. + +```toml +# config/_default/params.toml + +[fathomAnalytics] + site = "ABC12345" + domain = "llama.yoursite.com" +``` + +### Google Analytics + +Die Google Analytics-Unterstützung wird über das interne Hugo-Partial bereitgestellt. Geben Sie einfach den `googleAnalytics`-Schlüssel in der Datei `config/_default/hugo.toml` an und das Skript wird automatisch hinzugefügt. + +Sowohl Version 3 (analytics.js) als auch Version 4 (gtag.js) werden unterstützt, basierend auf dem angegebenen Konfigurationswert: + +```toml +# config/_default/hugo.toml + +# Version 3 +googleAnalytics = "UA-PROPERTY_ID" +# Version 4 +googleAnalytics = "G-MEASUREMENT_ID" +``` + +### Umami Analytics + +Um die Umami Analytics-Unterstützung zu aktivieren, geben Sie einfach Ihren [Umami-Tracking-Code](https://umami.is/docs/collect-data) in der Datei `config/_default/params.toml` an. +Wenn Sie auch die benutzerdefinierte Domain-Funktion von Umami verwenden und deren Skript von Ihrer Domain bereitstellen möchten, können Sie zusätzlich den Konfigurationswert `domain` angeben. Wenn Sie keinen `domain`-Wert angeben, wird das Skript direkt von Umami DNS (analytics.umami.is) geladen. +Wenn Sie möchten, dass der Tracker nur auf bestimmten Domains ausgeführt wird, können Sie den Konfigurationswert `dataDomains` angeben. Wenn Sie keinen `dataDomains`-Wert angeben, wird das Skript auf jeder Website ausgeführt, bei der `domain` und `websiteid` übereinstimmen. Wenn die Umgebungsvariable `TRACKER_SCRIPT_NAME` konfiguriert ist, können Sie einen benutzerdefinierten Skriptnamen `scriptName` angeben. Wenn sie nicht konfiguriert ist, kommentieren Sie sie entweder aus oder verwenden Sie den Standard `script.js`. + +{{< alert >}} +**Hinweis:** Wenn Sie Umami Analytics aktivieren, unterstützt Blowfish [Umami Track Event](https://umami.is/docs/track-events) automatisch. Wenn Sie Track Event nicht unterstützen möchten, muss der Parameter `enableTrackEvent` auf `false` gesetzt werden. +{{< /alert >}} + +```toml +# config/_default/params.toml + +[umamiAnalytics] + websiteid = "ABC12345" + domain = "llama.yoursite.com" + dataDomains = "yoursite.com,yoursite2.com" + scriptName = "TRACKER_SCRIPT_NAME" + enableTrackEvent = true +``` + +### Seline Analytics + +Um die Seline Analytics-Unterstützung zu aktivieren, geben Sie einfach Ihren [Seline-Token](https://seline.so/docs/install-seline) in der Datei `config/_default/params.toml` an. + +{{< alert >}} +**Hinweis:** Wenn Sie Seline Analytics aktivieren, unterstützt Blowfish [Seline Track Event](https://seline.so/docs/custom-events) automatisch. Wenn Sie Track Event nicht unterstützen möchten, muss der Parameter `enableTrackEvent` auf `false` gesetzt werden. +{{< /alert >}} + +```toml +# config/_default/params.toml + +[selineAnalytics] + token = "XXXXXX" + enableTrackEvent = true +``` + +### Benutzerdefinierte Analytics-Anbieter + +Wenn Sie einen anderen Analytics-Anbieter auf Ihrer Website verwenden möchten, können Sie auch das Analytics-Partial überschreiben und Ihr eigenes Skript bereitstellen. Erstellen Sie einfach die Datei `layouts/partials/extend-head.html` in Ihrem Projekt und sie wird automatisch in den `` der Website eingefügt. + +## Kommentare + +Um Kommentare zu Ihren Artikeln hinzuzufügen, enthält Blowfish Unterstützung für ein Kommentar-Partial, das am Ende jeder Artikelseite eingefügt wird. Stellen Sie einfach eine `layouts/partials/comments.html` bereit, die den Code enthält, der zum Anzeigen Ihrer gewählten Kommentare erforderlich ist. + +Sie können entweder die integrierte Hugo Disqus-Vorlage verwenden oder Ihren eigenen benutzerdefinierten Code bereitstellen. Weitere Informationen finden Sie in der [Hugo-Dokumentation](https://gohugo.io/content-management/comments/). + +Sobald das Partial bereitgestellt wurde, wird die feinere Kontrolle darüber, wo Kommentare angezeigt werden, über den Parameter `showComments` verwaltet. Dieser Wert kann auf Theme-Ebene in der `params.toml` [Konfigurationsdatei]({{< ref "configuration#theme-parameters" >}}) oder pro Artikel durch Einbeziehung in das [Front Matter]({{< ref "front-matter" >}}) festgelegt werden. Der Parameter ist standardmäßig `false`, daher muss er an einem dieser Orte auf `true` gesetzt werden, damit Kommentare angezeigt werden. + +## Favicons + +Blowfish stellt einen Standardsatz leerer Favicons zum Einstieg bereit, aber Sie können Ihre eigenen Assets bereitstellen, um sie zu überschreiben. Der einfachste Weg, neue Favicon-Assets zu erhalten, ist die Generierung über einen Drittanbieter wie [favicon.io](https://favicon.io). + +Icon-Assets sollten direkt im `static/`-Ordner Ihrer Website platziert und wie in der folgenden Auflistung benannt werden. Wenn Sie [favicon.io](https://favicon.io) verwenden, werden dies die Dateinamen sein, die automatisch für Sie generiert werden, aber Sie können Ihre eigenen Assets bereitstellen, wenn Sie möchten. + +```shell +static/ +├─ android-chrome-192x192.png +├─ android-chrome-512x512.png +├─ apple-touch-icon.png +├─ favicon-16x16.png +├─ favicon-32x32.png +├─ favicon.ico +└─ site.webmanifest +``` + +Alternativ können Sie auch das Standard-Favicon-Verhalten vollständig überschreiben und Ihre eigenen Favicon-HTML-Tags und Assets bereitstellen. Erstellen Sie einfach eine `layouts/partials/favicons.html`-Datei in Ihrem Projekt und diese wird anstelle der Standard-Assets in den `` der Website eingefügt. + +## Icon + +Ähnlich wie beim [Icon-Shortcode]({{< ref "shortcodes#icon" >}}) können Sie Icons in Ihren eigenen Templates und Partials einbinden, indem Sie Blowfishs `icon.html`-Partial verwenden. Das Partial nimmt einen Parameter entgegen, der der Name des einzufügenden Icons ist. + +**Beispiel:** + +```go + {{ partial "icon.html" "github" }} +``` + +Icons werden mit Hugo-Pipelines gefüllt, was sie sehr flexibel macht. Blowfish enthält eine Reihe von integrierten Icons für soziale Netzwerke, Links und andere Zwecke. Auf der Seite [Icon-Beispiele]({{< ref "samples/icons" >}}) finden Sie eine vollständige Liste der unterstützten Icons. + +Benutzerdefinierte Icons können hinzugefügt werden, indem Sie Ihre eigenen Icon-Assets im Verzeichnis `assets/icons/` Ihres Projekts bereitstellen. Das Icon kann dann im Partial mit dem SVG-Dateinamen ohne die Erweiterung `.svg` referenziert werden. + +Icons können auch im Artikelinhalt verwendet werden, indem Sie den [Icon-Shortcode]({{< ref "shortcodes#icon" >}}) aufrufen. + +## Erweiterungen + +Blowfish bietet auch eine Reihe von Erweiterungs-Partials, die eine Erweiterung der Basisfunktionalität ermöglichen. + +### Artikel-Link + +Wenn Sie zusätzlichen Code nach Artikel-Links einfügen möchten, erstellen Sie eine `layouts/partials/extend-article-link.html`-Datei. Dies ist besonders leistungsstark in Kombination mit dem [`badge`]({{< ref "shortcodes#badge" >}})-Shortcode, der verwendet werden kann, um Metadaten für bestimmte Artikel hervorzuheben. + +### Head und Footer + +Das Theme ermöglicht das Einfügen von zusätzlichem Code direkt in die ``- und `