mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-10-10 22:09:31 +00:00
📝 Overhaul Blowfish welcome guide
This commit is contained in:
Friday authored and Nuno C. committed
1 parent
5e53deb6f7
commit
c44c4b1532
9 files changed
+216
-470
No files matched your search
@@ -3,7 +3,7 @@ title: "Willkommen bei Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Beginnen Sie mit der aktuellen Version von Blowfish, einem modernen Hugo-Theme für Blogs, Dokumentation, Portfolios und mehr."
|
||||
description: "Erstelle eine schnelle, ausdrucksstarke Hugo-Website mit flexiblen Layouts, Werkzeugen für reichhaltige Inhalte und einem agentenfähigen Workflow."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["neu", "dokumentation"]
|
||||
series: ["Dokumentation"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 ist ein modernes Hugo-Theme für Blogs, Dokumentation, Portfolios und mehr.
|
||||
Blowfish 3 ist ein modernes Hugo-Theme für Blogs, Dokumentation, Portfolios und Websites, die in keine starre Vorlage passen.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Sie möchten möglichst schnell eine neue Website erstellen? Führen Sie `npx blowfish-tools new <site>` aus und folgen Sie anschließend der [Installationsanleitung]({{< ref "docs/installation" >}}). Die folgenden Abschnitte dokumentieren die wichtigsten Funktionen aus Blowfish 2, die auch in der aktuellen Version verfügbar sind.
|
||||
Starte eine neue Website mit `npx blowfish-tools new <site>` und folge dann der [Installationsanleitung]({{< ref "docs/installation" >}}). Bestehende Blowfish-Websites können ohne inkompatible Konfigurationsänderungen auf v3 wechseln.
|
||||
{{< /alert >}}
|
||||
|
||||
Das ursprüngliche Ziel von Blowfish war es, ein Theme zu entwickeln, das einfach und leichtgewichtig ist. Das Theme ist ein Fork von <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> und erweitert dessen ursprüngliche Vision.
|
||||
## Erstelle die Website, die du im Kopf hast
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish bietet einen starken Ausgangspunkt, ohne das Ergebnis festzulegen. Wähle zwischen Profil-, Landing-, Hero-, Karten- oder Hintergrund-Homepage-Layouts. Farben, Typografie, Navigation, Dark Mode und Artikelansicht steuerst du in der Konfiguration deiner Website. Für einzelne Seiten steht Front Matter bereit.
|
||||
|
||||
Tailwind CSS ist das Herzstück von Blowfish und diese Version enthält die neueste [Tailwind CSS Version 3](https://tailwindcss.com/blog/tailwindcss-v3). Sie bringt Leistungsoptimierungen und Unterstützung für einige großartige neue CSS-Funktionen mit sich.
|
||||
Deine Inhalte bleiben portable Hugo-Inhalte: Markdown, Page Bundles, Taxonomien, Menüs und Konfigurationsdateien in deinem Repository. Es gibt keinen proprietären Editor und keinen Lock-in.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Reichhaltige Inhalte ohne viel eigenen Code
|
||||
|
||||
## Mehrsprachige Unterstützung
|
||||
Schreibe in Markdown und nutze bei Bedarf [mehr als 40 Shortcodes]({{< ref "docs/shortcodes" >}}). Füge Buttons, Hinweise, Icons, Tabs, Galerien, Charts, Diagramme, GitHub-Karten, Videos und Codebeispiele hinzu, ohne eigene Templates pflegen zu müssen.
|
||||
|
||||
Eine häufig angefragte Funktion: Blowfish ist jetzt mehrsprachig! Wenn Sie Ihre Inhalte in mehreren Sprachen veröffentlichen, wird die Website mit allen verfügbaren Übersetzungen erstellt.
|
||||
Blowfish übernimmt auch die Arbeit drumherum: responsive Feature-Bilder und Thumbnails, Suche, Lesewerkzeuge, Inhaltsverzeichnisse, Social- und SEO-Metadaten, strukturierte Daten, Accessibility-Einstellungen sowie optionale Analysen, Kommentare oder Firebase-basierte Aufrufe und Likes.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Für alle Leserinnen und Leser
|
||||
|
||||
Dank der Beiträge aus der Community wurde Blowfish bereits in [dreißig Sprachen](https://github.com/nunocoracao/blowfish/tree/main/i18n) übersetzt, und weitere werden im Laufe der Zeit hinzugefügt. Übrigens sind [Pull Requests](https://github.com/nunocoracao/blowfish/pulls) für neue Sprachen immer willkommen!
|
||||
Erstelle mehrsprachige Websites mit übersetzten Inhalten, sprachspezifischen Menüs und integrierten UI-Übersetzungen. Blowfish unterstützt RTL- und LTR-Sprachen im selben Projekt. Hinzu kommen ein Darstellungsumschalter, responsive Navigation und tastaturfreundliche Suche.
|
||||
|
||||
## RTL-Sprachunterstützung
|
||||
Unter der Haube nutzt Blowfish aktuelle Hugo-Funktionen und Tailwind CSS 4. Das Konfigurations- und Inhaltsmodell bleibt dabei leicht verständlich und vollständig in deiner Hand.
|
||||
|
||||
Einer der Vorteile der neuen Tailwind- und Mehrsprachigkeitsfunktionen ist die Möglichkeit, RTL-Sprachunterstützung hinzuzufügen. Wenn aktiviert, wird der gesamte Seiteninhalt von rechts nach links neu angeordnet. Jedes Element im Theme wurde umgestaltet, um in diesem Modus großartig auszusehen, was Autoren hilft, die Inhalte in RTL-Sprachen erstellen möchten.
|
||||
## Gib deinem Coding-Agent den richtigen Kontext
|
||||
|
||||
RTL wird pro Sprache gesteuert, sodass Sie sowohl RTL- als auch LTR-Inhalte in Ihren Projekten mischen können und das Theme entsprechend reagiert.
|
||||
Blowfish enthält einen [Agent-Skill](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) für KI-Coding-Agents wie Claude Code. Er erklärt, wo die Konfiguration liegt, wie Layouts und Front Matter funktionieren, welche Shortcodes verfügbar sind und wie Blowfish-Websites ohne Raten angepasst werden.
|
||||
|
||||
## Automatische Bildgrößenanpassung
|
||||
Installiere ihn in Claude Code:
|
||||
|
||||
Eine große Änderung in Blowfish 2.0 ist die Hinzufügung der automatischen Bildgrößenanpassung. Mithilfe der Leistung von Hugo Pipes werden Bilder in Markdown-Inhalten jetzt automatisch auf verschiedene Ausgabegrößen skaliert. Diese werden dann mit HTML `srcset`-Attributen präsentiert, wodurch optimierte Dateigrößen an Ihre Websitebesucher geliefert werden.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="Mein Bild"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
Das Beste daran ist, dass Sie nichts ändern müssen! Verwenden Sie einfach die Standard-Markdown-Bildsyntax und lassen Sie das Theme den Rest erledigen. Wenn Sie etwas mehr Kontrolle wünschen, wurde der `figure`-Shortcode komplett überarbeitet, um die gleichen Größenanpassungsvorteile zu bieten.
|
||||
Oder kopiere den Skill nach `.claude/skills/blowfish/` in dein Projekt. Danach kann dein Agent bei Setup, Konfiguration, Inhaltsstruktur, Seitendesign und theme-bewusster Umsetzung helfen, während deine Website in deinem Repository bleibt.
|
||||
|
||||
## Dein nächster Schritt
|
||||
|
||||
## Website-Suche
|
||||
|
||||
Angetrieben von [Fuse.js](https://fusejs.io) ermöglicht die Website-Suche Besuchern, Ihre Inhalte schnell und einfach zu finden. Alle Suchen werden clientseitig durchgeführt, was bedeutet, dass auf dem Server nichts konfiguriert werden muss und Abfragen superschnell ausgeführt werden. Aktivieren Sie einfach die Funktion in Ihrer Site-Konfiguration und schon kann es losgehen. Ach ja, und sie unterstützt auch die vollständige Tastaturnavigation!
|
||||
|
||||
## Inhaltsverzeichnisse
|
||||
|
||||
Eine häufig angefragte Funktion: Blowfish unterstützt jetzt Inhaltsverzeichnisse auf Artikelseiten. Sie können es auf dieser Seite in Aktion sehen. Die Inhalte sind vollständig responsiv und passen sich an, um den verfügbaren Platz bei verschiedenen Bildschirmauflösungen optimal zu nutzen.
|
||||
|
||||
Verfügbar auf globaler oder pro-Artikel-Basis, kann das Inhaltsverzeichnis mithilfe der Standard-Hugo-Konfigurationswerte vollständig angepasst werden, sodass Sie das Verhalten an Ihr Projekt anpassen können.
|
||||
|
||||
## Verbesserungen der Barrierefreiheit
|
||||
|
||||
Von der Hinzufügung von ARIA-Beschreibungen zu mehr Elementen bis hin zur einfachen Anpassung des Kontrasts bestimmter Textelemente ist diese Version die bisher barrierefreieste.
|
||||
|
||||
Version 2 führt auch "Zum Inhalt springen"- und "Nach oben scrollen"-Links ein, die eine schnelle Navigation ermöglichen. Es gibt auch Tastaturkürzel zum Aktivieren von Elementen wie der Suche, ohne zur Maus greifen zu müssen.
|
||||
|
||||
Die neuen Bildgrößenanpassungsfunktionen bieten auch volle Kontrolle über `alt`- und `title`-Elemente, was ein barrierefreies Erlebnis für alle Besucher ermöglicht.
|
||||
|
||||
## Und vieles mehr
|
||||
|
||||
Es gibt unzählige weitere Funktionen zu entdecken. Von der Möglichkeit, Taxonomien auf Artikeln und Listenseiten anzuzeigen, bis hin zur Verwendung des neuen `headline`-Autorenparameters zur Anpassung Ihrer Homepage. Es gibt auch verbesserte JSON-LD-strukturierte Daten, die die SEO-Leistung weiter optimieren.
|
||||
- Neu bei Blowfish? Beginne mit der [Installation]({{< ref "docs/installation" >}}).
|
||||
- Bereit zum Gestalten? Lies [Erste Schritte]({{< ref "docs/getting-started" >}}) und [Konfiguration]({{< ref "docs/configuration" >}}).
|
||||
- Du möchtest Möglichkeiten sehen? Entdecke [Shortcodes]({{< ref "docs/shortcodes" >}}), [Samples]({{< ref "samples" >}}) und den [Showcase]({{< ref "examples" >}}).
|
||||
- Du migrierst eine bestehende Website? Folge der [Upgrade-Anleitung für Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Bienvenido a Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Empieza a crear con la versión actual de Blowfish, un tema Hugo moderno para blogs, documentación, portafolios y más."
|
||||
description: "Crea un sitio Hugo rápido y expresivo con layouts flexibles, herramientas de contenido enriquecido y un flujo preparado para agentes."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["nuevo", "documentación"]
|
||||
series: ["Documentación"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 es un tema Hugo moderno para blogs, documentación, portafolios y más.
|
||||
Blowfish 3 es un tema Hugo moderno para blogs, documentación, portafolios y sitios que no encajan en una plantilla rígida.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
¿Buscas la forma más rápida de crear un sitio? Ejecuta `npx blowfish-tools new <site>` y luego sigue la [guía de instalación]({{< ref "docs/installation" >}}). Las secciones siguientes documentan las principales funciones introducidas en Blowfish 2, que siguen disponibles en la versión actual.
|
||||
Crea un sitio nuevo con `npx blowfish-tools new <site>` y sigue la [guía de instalación]({{< ref "docs/installation" >}}). Los sitios Blowfish existentes pueden pasar a v3 sin cambios incompatibles de configuración.
|
||||
{{< /alert >}}
|
||||
|
||||
El objetivo original de Blowfish era desarrollar un tema simple y ligero. El tema es un fork de <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> y expande su visión inicial.
|
||||
## Crea el sitio que tienes en mente
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish ofrece un punto de partida sólido sin fijar el resultado. Elige layouts de portada de perfil, landing, hero, tarjetas o fondo. Configura colores, tipografía, navegación, modo oscuro y presentación de artículos desde el sitio. Usa front matter cuando una página necesite ser diferente.
|
||||
|
||||
Tailwind CSS es el corazón de Blowfish y esta versión contiene la última [Tailwind CSS versión 3](https://tailwindcss.com/blog/tailwindcss-v3). Trae optimizaciones de rendimiento y soporte para algunas nuevas y geniales características CSS.
|
||||
Tu contenido sigue siendo Hugo portátil: Markdown, page bundles, taxonomías, menús y archivos de configuración en tu repositorio. No hay editor propietario ni dependencia de plataforma.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Publica contenido más rico con menos código
|
||||
|
||||
## Soporte multilingüe
|
||||
Escribe en Markdown y usa los [más de 40 shortcodes]({{< ref "docs/shortcodes" >}}) cuando lo necesites. Añade botones, avisos, iconos, pestañas, galerías, gráficos, diagramas, tarjetas de GitHub, vídeos y ejemplos de código sin mantener plantillas puntuales.
|
||||
|
||||
Una característica muy solicitada: ¡Blowfish ahora es multilingüe! Si publicas tu contenido en varios idiomas, el sitio se construirá con todas las traducciones disponibles.
|
||||
Blowfish también resuelve lo que rodea al contenido: imágenes destacadas y miniaturas responsivas, búsqueda, herramientas de lectura, tablas de contenido, metadatos sociales y SEO, datos estructurados, controles de accesibilidad y análisis, comentarios o vistas y reacciones con Firebase opcionales.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Para cada lector
|
||||
|
||||
Gracias a las contribuciones de la comunidad, Blowfish ya ha sido traducido a [treinta y dos idiomas](https://github.com/nunocoracao/blowfish/tree/main/i18n), y se añadirán más con el tiempo. Por cierto, ¡los [pull requests](https://github.com/nunocoracao/blowfish/pulls) para nuevos idiomas siempre son bienvenidos!
|
||||
Crea sitios multilingües con contenido traducido, menús específicos por idioma y traducciones de interfaz incluidas. Blowfish admite idiomas RTL y LTR en el mismo proyecto, además de selector de apariencia, navegación responsiva y búsqueda accesible por teclado.
|
||||
|
||||
## Soporte para idiomas RTL
|
||||
Bajo el capó, Blowfish usa capacidades actuales de Hugo y Tailwind CSS 4, manteniendo un modelo de contenido y configuración claro y bajo tu control.
|
||||
|
||||
Uno de los beneficios de las nuevas características de Tailwind y multilingüe es la capacidad de añadir soporte para idiomas RTL. Cuando está habilitado, todo el contenido del sitio se reorganizará de derecha a izquierda. Cada elemento en el tema ha sido rediseñado para asegurar que se vea genial en este modo, lo que ayuda a los autores que desean generar contenido en idiomas RTL.
|
||||
## Da a tu agente el contexto que necesita
|
||||
|
||||
RTL se controla por idioma, por lo que puedes mezclar contenido RTL y LTR en tus proyectos y el tema responderá en consecuencia.
|
||||
Blowfish incluye un [skill para agentes](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) para agentes de programación con IA como Claude Code. Le enseña dónde va la configuración, cómo funcionan los layouts y el front matter, qué shortcodes existen y cómo crear un sitio Blowfish sin adivinar.
|
||||
|
||||
## Redimensionamiento automático de imágenes
|
||||
Instálalo en Claude Code:
|
||||
|
||||
Un gran cambio en Blowfish 2.0 es la adición del redimensionamiento automático de imágenes. Usando el poder de Hugo Pipes, las imágenes en el contenido Markdown ahora se escalan automáticamente a diferentes tamaños de salida. Estos se presentan usando atributos HTML `srcset`, permitiendo servir tamaños de archivo optimizados a los visitantes de tu sitio.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="Mi imagen"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
¡Lo mejor de todo es que no necesitas cambiar nada! Simplemente inserta la sintaxis estándar de imagen Markdown y deja que el tema haga el resto. Si quieres un poco más de control, el shortcode `figure` ha sido completamente reescrito para proporcionar los mismos beneficios de redimensionamiento.
|
||||
También puedes copiar el skill a `.claude/skills/blowfish/` en tu proyecto. Así, el agente puede ayudarte con la configuración, estructura de contenido, diseño de páginas e implementación consciente del tema, mientras el sitio sigue en tu repositorio.
|
||||
|
||||
## Elige tu siguiente paso
|
||||
|
||||
## Búsqueda en el sitio
|
||||
|
||||
Impulsada por [Fuse.js](https://fusejs.io), la búsqueda del sitio permite a los visitantes encontrar tu contenido rápida y fácilmente. Todas las búsquedas se realizan del lado del cliente, lo que significa que no hay nada que configurar en el servidor y las consultas se realizan súper rápido. Simplemente habilita la función en la configuración de tu sitio y listo. ¡Ah, y también soporta navegación completa por teclado!
|
||||
|
||||
## Tablas de contenido
|
||||
|
||||
Una característica muy solicitada: Blowfish ahora soporta tablas de contenido en las páginas de artículos. Puedes verla en acción en esta página. Los contenidos son completamente responsivos y se ajustarán para aprovechar el espacio disponible en diferentes resoluciones de pantalla.
|
||||
|
||||
Disponible de forma global o por artículo, la tabla de contenidos puede personalizarse completamente usando los valores de configuración estándar de Hugo, permitiéndote ajustar el comportamiento a tu proyecto.
|
||||
|
||||
## Mejoras de accesibilidad
|
||||
|
||||
Desde añadir descripciones ARIA a más elementos hasta simplemente ajustar el contraste de ciertos elementos de texto, esta versión es la más accesible hasta ahora.
|
||||
|
||||
La versión 2 también introduce enlaces de "saltar al contenido" y "volver arriba" que permiten una navegación rápida. También hay atajos de teclado para activar elementos como la búsqueda sin necesidad de usar el ratón.
|
||||
|
||||
Las nuevas funciones de redimensionamiento de imágenes también proporcionan control total sobre los elementos `alt` y `title`, permitiendo una experiencia accesible para todos los visitantes.
|
||||
|
||||
## Y mucho más
|
||||
|
||||
Hay innumerables otras funciones para explorar. Desde poder mostrar taxonomías en artículos y páginas de lista, hasta usar el nuevo parámetro de autor `headline` para personalizar tu página de inicio. También hay datos estructurados JSON-LD mejorados que optimizan aún más el rendimiento SEO.
|
||||
- ¿Eres nuevo en Blowfish? Empieza con [Instalación]({{< ref "docs/installation" >}}).
|
||||
- ¿Quieres dar forma al sitio? Lee [Primeros pasos]({{< ref "docs/getting-started" >}}) y [Configuración]({{< ref "docs/configuration" >}}).
|
||||
- ¿Quieres ver las posibilidades? Explora [Shortcodes]({{< ref "docs/shortcodes" >}}), [Muestras]({{< ref "samples" >}}) y la [Galería]({{< ref "examples" >}}).
|
||||
- ¿Vas a migrar un sitio existente? Sigue la [guía de actualización a Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Bienvenue sur Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Commencez à créer avec la version actuelle de Blowfish, un thème Hugo moderne pour les blogs, la documentation, les portfolios et plus encore."
|
||||
description: "Créez un site Hugo rapide et expressif avec des layouts flexibles, des outils de contenu riche et un flux de travail prêt pour les agents."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["nouveau", "documentation"]
|
||||
series: ["Documentation"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 est un thème Hugo moderne pour les blogs, la documentation, les portfolios et plus encore.
|
||||
Blowfish 3 est un thème Hugo moderne pour les blogs, la documentation, les portfolios et les sites qui ne rentrent pas dans un modèle figé.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Vous cherchez le moyen le plus rapide de créer un site ? Exécutez `npx blowfish-tools new <site>`, puis suivez le [guide d'installation]({{< ref "docs/installation" >}}). Les sections ci-dessous présentent les principales fonctionnalités introduites avec Blowfish 2, toujours disponibles dans la version actuelle.
|
||||
Créez un nouveau site avec `npx blowfish-tools new <site>`, puis suivez le [guide d'installation]({{< ref "docs/installation" >}}). Les sites Blowfish existants peuvent passer à v3 sans changement de configuration incompatible.
|
||||
{{< /alert >}}
|
||||
|
||||
L'objectif initial de Blowfish était de développer un thème simple et léger. Le thème est un fork de <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> et étend sa vision initiale.
|
||||
## Créez le site que vous imaginez
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish offre un point de départ solide sans imposer le résultat. Choisissez un accueil profil, landing, hero, cartes ou arrière-plan. Réglez les couleurs, la typographie, la navigation, le mode sombre et la présentation des articles depuis la configuration de votre site. Utilisez le front matter lorsqu'une page doit être différente.
|
||||
|
||||
Tailwind CSS est au cœur de Blowfish et cette version contient la toute dernière [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). Elle apporte des optimisations de performances et la prise en charge de nouvelles fonctionnalités CSS intéressantes.
|
||||
Votre contenu reste du contenu Hugo portable : Markdown, page bundles, taxonomies, menus et fichiers de configuration dans votre dépôt. Il n'y a ni éditeur propriétaire ni dépendance à une plateforme.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Publiez un contenu plus riche avec moins de code
|
||||
|
||||
## Support multilingue
|
||||
Écrivez en Markdown, puis utilisez les [plus de 40 shortcodes]({{< ref "docs/shortcodes" >}}) lorsque le contenu le demande. Ajoutez des boutons, alertes, icônes, onglets, galeries, graphiques, diagrammes, cartes GitHub, vidéos et exemples de code sans entretenir de templates ponctuels.
|
||||
|
||||
Une fonctionnalité très demandée : Blowfish est maintenant multilingue ! Si vous publiez votre contenu dans plusieurs langues, le site sera construit avec toutes les traductions disponibles.
|
||||
Blowfish s'occupe aussi de l'environnement du contenu : images et miniatures responsives, recherche, outils de lecture, tables des matières, métadonnées sociales et SEO, données structurées, contrôles d'accessibilité, ainsi que commentaires, analytics ou vues et likes Firebase optionnels.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Pour chaque lecteur
|
||||
|
||||
Grâce aux contributions de la communauté, Blowfish a déjà été traduit en [trente langues](https://github.com/nunocoracao/blowfish/tree/main/i18n), et d'autres seront ajoutées au fil du temps. D'ailleurs, les [pull requests](https://github.com/nunocoracao/blowfish/pulls) pour de nouvelles langues sont toujours les bienvenues !
|
||||
Créez des sites multilingues avec du contenu traduit, des menus par langue et des traductions d'interface intégrées. Blowfish prend en charge les langues RTL et LTR dans le même projet, avec sélecteur d'apparence, navigation responsive et recherche au clavier.
|
||||
|
||||
## Support des langues RTL
|
||||
Sous le capot, Blowfish utilise les capacités actuelles de Hugo et Tailwind CSS 4, tout en conservant un modèle de contenu et de configuration simple à comprendre et à maîtriser.
|
||||
|
||||
L'un des avantages des nouvelles fonctionnalités Tailwind et multilingues est la possibilité d'ajouter le support des langues RTL. Lorsqu'elle est activée, tout le contenu du site sera réorganisé de droite à gauche. Chaque élément du thème a été restylé pour s'assurer qu'il a fière allure dans ce mode, ce qui aide les auteurs qui souhaitent générer du contenu dans des langues RTL.
|
||||
## Donnez à votre agent le bon contexte
|
||||
|
||||
Le RTL est contrôlé par langue, vous pouvez donc mélanger du contenu RTL et LTR dans vos projets et le thème répondra en conséquence.
|
||||
Blowfish propose un [skill pour agents](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) pour les agents de codage IA comme Claude Code. Il lui apprend où placer la configuration, comment fonctionnent les layouts et le front matter, quels shortcodes sont disponibles et comment créer un site Blowfish sans deviner.
|
||||
|
||||
## Redimensionnement automatique des images
|
||||
Installez-le dans Claude Code :
|
||||
|
||||
Un grand changement dans Blowfish 2.0 est l'ajout du redimensionnement automatique des images. En utilisant la puissance de Hugo Pipes, les images dans le contenu Markdown sont maintenant automatiquement redimensionnées à différentes tailles de sortie. Celles-ci sont ensuite présentées en utilisant les attributs HTML `srcset`, permettant de servir des tailles de fichiers optimisées à vos visiteurs.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="Mon image"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
Le meilleur, c'est qu'il n'y a rien à changer ! Utilisez simplement la syntaxe d'image Markdown standard et laissez le thème faire le reste. Si vous voulez un peu plus de contrôle, le shortcode `figure` a été entièrement réécrit pour offrir les mêmes avantages de redimensionnement.
|
||||
Vous pouvez aussi copier le skill dans `.claude/skills/blowfish/` de votre projet. L'agent peut alors aider à la configuration, à la structure du contenu, au design des pages et à une implémentation adaptée au thème, tandis que votre site reste dans votre dépôt.
|
||||
|
||||
## Choisissez la suite
|
||||
|
||||
## Recherche sur le site
|
||||
|
||||
Alimentée par [Fuse.js](https://fusejs.io), la recherche sur le site permet aux visiteurs de trouver rapidement et facilement votre contenu. Toutes les recherches sont effectuées côté client, ce qui signifie qu'il n'y a rien à configurer sur le serveur et que les requêtes sont exécutées super rapidement. Activez simplement la fonctionnalité dans la configuration de votre site et c'est tout. Ah, et elle prend également en charge la navigation complète au clavier !
|
||||
|
||||
## Tables des matières
|
||||
|
||||
Une fonctionnalité très demandée : Blowfish prend maintenant en charge les tables des matières sur les pages d'articles. Vous pouvez la voir en action sur cette page. Le contenu est entièrement responsive et s'adaptera pour tirer parti de l'espace disponible à différentes résolutions d'écran.
|
||||
|
||||
Disponible globalement ou par article, la table des matières peut être entièrement personnalisée en utilisant les valeurs de configuration standard de Hugo, vous permettant d'adapter le comportement à votre projet.
|
||||
|
||||
## Améliorations de l'accessibilité
|
||||
|
||||
De l'ajout de descriptions ARIA à plus d'éléments au simple ajustement du contraste de certains éléments de texte, cette version est la plus accessible à ce jour.
|
||||
|
||||
La version 2 introduit également des liens "passer au contenu" et "retour en haut" qui permettent une navigation rapide. Il y a également des raccourcis clavier pour activer des éléments comme la recherche sans avoir à utiliser la souris.
|
||||
|
||||
Les nouvelles fonctionnalités de redimensionnement d'images offrent également un contrôle total sur les éléments `alt` et `title`, permettant une expérience accessible pour tous les visiteurs.
|
||||
|
||||
## Et bien plus encore
|
||||
|
||||
Il y a d'innombrables autres fonctionnalités à explorer. De la possibilité d'afficher des taxonomies sur les articles et les pages de liste, à l'utilisation du nouveau paramètre d'auteur `headline` pour personnaliser votre page d'accueil. Il y a également des données structurées JSON-LD améliorées qui optimisent davantage les performances SEO.
|
||||
- Nouveau sur Blowfish ? Commencez par l'[Installation]({{< ref "docs/installation" >}}).
|
||||
- Prêt à façonner le site ? Lisez [Bien démarrer]({{< ref "docs/getting-started" >}}) et [Configuration]({{< ref "docs/configuration" >}}).
|
||||
- Vous voulez voir les possibilités ? Explorez les [Shortcodes]({{< ref "docs/shortcodes" >}}), les [Exemples]({{< ref "samples" >}}) et la [Vitrine]({{< ref "examples" >}}).
|
||||
- Vous migrez un site existant ? Suivez le [guide de mise à niveau vers Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Benvenuti a Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Inizia a creare con la versione attuale di Blowfish, un tema Hugo moderno per blog, documentazione, portfolio e altro."
|
||||
description: "Crea un sito Hugo veloce ed espressivo con layout flessibili, strumenti per contenuti ricchi e un flusso di lavoro pronto per gli agenti."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["novità", "documenti"]
|
||||
series: ["Documentazione"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 è un tema Hugo moderno per blog, documentazione, portfolio e altro.
|
||||
Blowfish 3 è un tema Hugo moderno per blog, documentazione, portfolio e siti che non rientrano in un modello rigido.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Cerchi il modo più rapido per creare un nuovo sito? Esegui `npx blowfish-tools new <site>`, quindi segui la [guida all'installazione]({{< ref "docs/installation" >}}). Le sezioni seguenti documentano le principali funzionalità introdotte con Blowfish 2, ancora disponibili nella versione attuale.
|
||||
Crea un nuovo sito con `npx blowfish-tools new <site>`, quindi segui la [guida all'installazione]({{< ref "docs/installation" >}}). I siti Blowfish esistenti possono passare a v3 senza modifiche incompatibili alla configurazione.
|
||||
{{< /alert >}}
|
||||
|
||||
Lo scopo originale di Blowfish era quello di sviluppare un tema semplice e leggero. Il tema è un fork del <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> e ne espande la visione iniziale.
|
||||
## Crea il sito che hai in mente
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish offre una solida base di partenza senza fissare il risultato. Scegli layout homepage profilo, landing, hero, a schede o con sfondo. Imposta colori, tipografia, navigazione, modalità scura e presentazione degli articoli dalla configurazione del sito. Usa il front matter quando una pagina deve essere diversa.
|
||||
|
||||
Tailwind CSS è il cuore di Blowfish e questa versione contiene l'ultima [Tailwind CSS versione 3](https://tailwindcss.com/blog/tailwindcss-v3). Porta con sé ottimizzazioni delle prestazioni e supporto per alcune nuove fantastiche funzionalità CSS.
|
||||
I contenuti restano Hugo portabile: Markdown, page bundle, tassonomie, menu e file di configurazione nel tuo repository. Non ci sono editor proprietari né vincoli di piattaforma.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Pubblica contenuti più ricchi con meno codice
|
||||
|
||||
## Supporto multilingue
|
||||
Scrivi in Markdown e usa gli [oltre 40 shortcode]({{< ref "docs/shortcodes" >}}) quando servono. Aggiungi pulsanti, avvisi, icone, schede, gallerie, grafici, diagrammi, card GitHub, video ed esempi di codice senza mantenere template specifici.
|
||||
|
||||
Blowfish è ora multilingue! Una funzionalità molto richiesta. Se pubblichi i tuoi contenuti in più lingue, il sito verrà realizzato con tutte le traduzioni disponibili.
|
||||
Blowfish gestisce anche ciò che circonda il contenuto: immagini e miniature responsive, ricerca, strumenti di lettura, indici, metadati social e SEO, dati strutturati, controlli di accessibilità e analytics, commenti oppure visualizzazioni e like Firebase opzionali.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Per ogni lettore
|
||||
|
||||
Grazie ai contributi della community, Blowfish è già stato tradotto in [trenta lingue](https://github.com/nunocoracao/blowfish/tree/main/i18n) e altre verranno aggiunte nel tempo. A proposito, le [richieste pull](https://github.com/nunocoracao/blowfish/pulls) per nuove lingue sono sempre benvenute!
|
||||
Crea siti multilingue con contenuti tradotti, menu specifici per lingua e traduzioni dell'interfaccia incluse. Blowfish supporta lingue RTL e LTR nello stesso progetto, con selettore dell'aspetto, navigazione responsive e ricerca utilizzabile da tastiera.
|
||||
|
||||
## Supporto per la lingua RTL
|
||||
Sotto il cofano, Blowfish usa funzionalità attuali di Hugo e Tailwind CSS 4, mantenendo un modello di configurazione e contenuti semplice da capire e sotto il tuo controllo.
|
||||
|
||||
Uno dei vantaggi delle nuove funzionalità Tailwind e Multilingual è la possibilità di aggiungere il supporto della lingua RTL. Se abilitato, l'intero sito ridiscorrerà i contenuti da destra a sinistra. Ogni elemento del tema è stato ridisegnato per garantire che abbia un bell'aspetto in questa modalità che aiuta gli autori che desiderano generare contenuti nelle lingue RTL.
|
||||
## Dai al tuo agente il contesto giusto
|
||||
|
||||
RTL è controllato in base alla lingua, quindi puoi mescolare e abbinare sia il contenuto RTL che LTR nei tuoi progetti e il tema risponderà di conseguenza.
|
||||
Blowfish include una [skill per agenti](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) per agenti di programmazione IA come Claude Code. Insegna dove collocare la configurazione, come funzionano layout e front matter, quali shortcode esistono e come creare un sito Blowfish senza supposizioni.
|
||||
|
||||
## Ridimensionamento automatico delle immagini
|
||||
Installala in Claude Code:
|
||||
|
||||
Un grande cambiamento in Blowfish 2.0 è l'aggiunta del ridimensionamento automatico delle immagini. Utilizzando la potenza di Hugo Pipes, le immagini nei contenuti Markdown vengono ora ridimensionate automaticamente in diverse dimensioni di output. Questi vengono poi presentati utilizzando gli attributi HTML "srcset" che consentono di offrire dimensioni di file ottimizzate ai visitatori del tuo sito.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="My image"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
La cosa interessante è che non c'è nulla che devi cambiare! Inserisci semplicemente la sintassi standard dell'immagine Markdown e lascia che il tema faccia il resto. Se desideri un po' più di controllo, lo shortcode `figure` è stato completamente riscritto per fornire gli stessi vantaggi di ridimensionamento.
|
||||
Puoi anche copiare la skill in `.claude/skills/blowfish/` nel tuo progetto. L'agente potrà così aiutare con configurazione, struttura dei contenuti, design delle pagine e implementazione consapevole del tema, mentre il sito resta nel tuo repository.
|
||||
|
||||
## Scegli il prossimo passo
|
||||
|
||||
## Ricerca nel sito
|
||||
|
||||
Basata su [Fuse.js](https://fusejs.io), la ricerca sul sito consente ai visitatori di trovare rapidamente e facilmente i tuoi contenuti. Tutte le ricerche vengono eseguite lato client, il che significa che non c'è nulla da configurare sul server e le query vengono eseguite molto velocemente. Abilita semplicemente la funzione nella configurazione del tuo sito e tutto è pronto. Oh, e supporta anche la navigazione completa tramite tastiera!
|
||||
|
||||
## Sommario
|
||||
|
||||
Una funzionalità molto richiesta, Blowfish ora supporta i sommari nelle pagine degli articoli. Puoi vedere come funziona in questa pagina. I contenuti sono completamente reattivi e si adatteranno per sfruttare lo spazio disponibile con diverse risoluzioni dello schermo.
|
||||
|
||||
Disponibile su base globale o per articolo, il sommario può essere completamente personalizzato utilizzando i valori di configurazione Hugo standard, consentendoti di adattare il comportamento al tuo progetto.
|
||||
|
||||
## Miglioramenti dell'accessibilità
|
||||
|
||||
Dall'aggiunta di descrizioni ARIA a più elementi o semplicemente dalla regolazione del contrasto di alcuni elementi di testo, questa versione è la più accessibile finora.
|
||||
|
||||
La versione 2 introduce anche i collegamenti "salta al contenuto" e "scorri verso l'alto" che consentono una navigazione rapida. Ci sono anche scorciatoie da tastiera per abilitare elementi come la ricerca senza raggiungere il mouse.
|
||||
|
||||
Le nuove funzionalità di ridimensionamento delle immagini forniscono inoltre il pieno controllo sugli elementi "alt" e "titolo" consentendo un'esperienza accessibile a tutti i visitatori.
|
||||
|
||||
## Molto altro ancora
|
||||
|
||||
Ci sono innumerevoli altre funzioni da esplorare. Dalla possibilità di visualizzare tassonomie su articoli e pagine di elenchi, all'uso del nuovo parametro autore `headline` per personalizzare la propria homepage. Sono stati inoltre migliorati i dati strutturati JSON-LD, che ottimizzano ulteriormente le prestazioni SEO.
|
||||
- Sei nuovo su Blowfish? Inizia da [Installazione]({{< ref "docs/installation" >}}).
|
||||
- Vuoi dare forma al sito? Leggi [Per iniziare]({{< ref "docs/getting-started" >}}) e [Configurazione]({{< ref "docs/configuration" >}}).
|
||||
- Vuoi vedere le possibilità? Esplora [Shortcode]({{< ref "docs/shortcodes" >}}), [Esempi]({{< ref "samples" >}}) e la [Galleria]({{< ref "examples" >}}).
|
||||
- Stai migrando un sito esistente? Segui la [guida di aggiornamento a Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Blowfish へようこそ"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "ブログ、ドキュメント、ポートフォリオなどに使えるモダンな Hugo テーマ、Blowfish の現行バージョンでサイトを作り始めましょう。"
|
||||
description: "柔軟なレイアウト、豊かなコンテンツ機能、エージェント対応のワークフローで、高速で表現力ある Hugo サイトを作りましょう。"
|
||||
lastmod: 2026-08-30
|
||||
tags: ["new", "docs"]
|
||||
series: ["Documentation"]
|
||||
@@ -11,73 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 は、ブログ、ドキュメント、ポートフォリオなどに使えるモダンな Hugo テーマです。
|
||||
Blowfish 3 は、ブログ、ドキュメント、ポートフォリオ、そして決まったテンプレートに収まらないサイトのためのモダンな Hugo テーマです。
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
新しいサイトを最短で始めるには、`npx blowfish-tools new <site>` を実行してから[インストールガイド]({{< ref "docs/installation" >}})に従ってください。以下のセクションでは、現行リリースでも利用できる Blowfish 2 で導入された主な機能を紹介します。
|
||||
`npx blowfish-tools new <site>` で新しいサイトを始め、[インストールガイド]({{< ref "docs/installation" >}})に進んでください。既存の Blowfish サイトは互換性を損なう設定変更なしに v3 へ移行できます。
|
||||
{{< /alert >}}
|
||||
|
||||
元々、Blowfish の目標は、シンプルで軽量なテーマを開発することでした。このテーマは <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> をフォークし、その当初のビジョンを発展させたものです。
|
||||
## 思い描いたサイトを作る
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish は結果を固定せず、しっかりした出発点を提供します。プロフィール、ランディング、ヒーロー、カード、背景などのホームページレイアウトを選べます。配色、タイポグラフィ、ナビゲーション、ダークモード、記事表示はサイト設定で制御し、個別ページはフロントマターで変更できます。
|
||||
|
||||
Tailwind CSS は Blowfish の中核であり、今回のリリースには最新の [Tailwind CSS バージョン 3](https://tailwindcss.com/blog/tailwindcss-v3) が含まれています。パフォーマンスの最適化と、いくつかの素晴らしい新しい CSS 機能のサポートが追加されています。
|
||||
コンテンツはポータブルな Hugo コンテンツのままです。Markdown、ページバンドル、タクソノミー、メニュー、設定ファイルはすべてリポジトリに置かれます。専用エディタもプラットフォームへのロックインもありません。
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## 少ない独自コードで豊かなコンテンツを公開する
|
||||
|
||||
## 多言語対応
|
||||
Markdown で書き、必要に応じて[40 以上のショートコード]({{< ref "docs/shortcodes" >}})を使いましょう。ボタン、通知、アイコン、タブ、ギャラリー、グラフ、図、GitHub カード、動画、コード例を、単発のテンプレートを保守せずに追加できます。
|
||||
|
||||
多くの要望が寄せられていた多言語対応が Blowfish に追加されました！コンテンツを複数の言語で公開すると、サイトは利用可能なすべての翻訳で構築されます。
|
||||
Blowfish はコンテンツ周辺も支えます。レスポンシブなアイキャッチとサムネイル、検索、読書機能、目次、ソーシャル・SEO メタデータ、構造化データ、アクセシビリティ設定、任意の分析、コメント、Firebase による閲覧数といいねに対応します。
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## すべての読者のために
|
||||
|
||||
コミュニティからの貢献のおかげで、Blowfish はすでに[30の言語](https://github.com/nunocoracao/blowfish/tree/main/i18n)に翻訳されており、今後も追加される予定です。ちなみに、新しい言語の[プルリクエスト](https://github.com/nunocoracao/blowfish/pulls)はいつでも大歓迎です！
|
||||
翻訳コンテンツ、言語ごとのメニュー、組み込みの UI 翻訳を備えた多言語サイトを作れます。Blowfish は同じプロジェクトで RTL と LTR の言語をサポートし、表示切替、レスポンシブなナビゲーション、キーボードで使える検索を提供します。
|
||||
|
||||
## RTL 言語対応
|
||||
Blowfish は現行の Hugo 機能と Tailwind CSS 4 を使いながら、設定とコンテンツのモデルを分かりやすく、自分で管理できる形に保ちます。
|
||||
|
||||
新しい Tailwind と多言語機能の利点の1つは、RTL 言語サポートを追加できることです。有効にすると、サイト全体のコンテンツが右から左に並べ替えられます。テーマ内のすべての要素が、このモードで見栄えが良くなるように再スタイルされており、RTL 言語でコンテンツを生成したい制作者を支援します。
|
||||
## コーディングエージェントに必要な文脈を渡す
|
||||
|
||||
RTL は言語ごとに制御されるため、プロジェクト内で RTL と LTR の両方のコンテンツを混在させることができ、テーマはそれに応じて対応します。
|
||||
Blowfish には、Claude Code などの AI コーディングエージェント向け[エージェントスキル](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish)が含まれています。設定の場所、レイアウトとフロントマターの仕組み、利用可能なショートコード、推測せずに Blowfish サイトを作る方法をエージェントに教えます。
|
||||
|
||||
## 自動画像リサイズ
|
||||
Claude Code でインストールします。
|
||||
|
||||
Blowfish 2.0 の大きな変更点は、自動画像リサイズ機能の追加です。Hugo Pipes の力を使って、Markdown コンテンツ内の画像が自動的に異なる出力サイズにスケーリングされるようになりました。これらは HTML の `srcset` 属性を使用して表示され、最適化されたファイルサイズをサイト訪問者に提供できます。
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="私の画像"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
何よりも、何も変更する必要はありません！標準の Markdown 画像構文を挿入するだけで、あとはテーマが処理してくれます。もう少し細かく制御したい場合は、`figure` ショートコードが完全に書き変えれば、同じリサイズ機能が利用できます。
|
||||
または、プロジェクトの `.claude/skills/blowfish/` にコピーしてください。セットアップ、設定、コンテンツ構成、ページデザイン、テーマを理解した実装をエージェントに手伝わせながら、サイトはリポジトリで管理できます。
|
||||
|
||||
## サイト内検索
|
||||
## 次の一歩を選ぶ
|
||||
|
||||
[Fuse.js](https://fusejs.io) を搭載したサイト内検索により、訪問者はコンテンツをすばやく簡単に見つけることができます。すべての検索はクライアント側で実行されるため、サーバー側で設定する必要はなく、クエリは非常に高速に実行されます。サイト設定で機能を有効にするだけで、準備完了です。もちろん、完全なキーボードナビゲーションもサポートされています！
|
||||
|
||||
## 目次
|
||||
|
||||
多くの要望が寄せられていた機能である、記事ページに目次を表示できるようになりました。このページで実際に動作を確認できます。目次は完全にレスポンシブ対応で、さまざまな画面解像度で利用可能なスペースを活用するように調整されます。
|
||||
|
||||
グローバルまたは記事ごとに利用可能な目次は、標準の Hugo 設定値を使用して完全にカスタマイズでき、プロジェクトに合わせて動作を調整できます。
|
||||
|
||||
## アクセシビリティの改善
|
||||
|
||||
ARIA 属性説明をより多くの項目に追加したり、特定のテキスト要素のコントラストを調整したりするなど、今回のリリースはこれまでで最もアクセシブルなものとなっています。
|
||||
|
||||
バージョン2では、「コンテンツへスキップ」リンクと「トップへスクロール」リンクも導入され、すばやく移動できるようになりました。マウスを使わずに検索などの項目を有効にするためのキーボードショートカットもあります。
|
||||
|
||||
新しい画像リサイズ機能では、`alt` 属性と `title` 属性を完全に制御できるため、すべての訪問者にアクセシブルなエクスペリエンスを提供できます。
|
||||
|
||||
## その他にもたくさん
|
||||
|
||||
他にもたくさんの新機能があります。記事やリストページにタクソノミーを表示したり、新しい `headline` 著者パラメータを使用してホームページをカスタマイズしたりできます。また、JSON-LD 構造化データが改善され、SEO パフォーマンスがさらに最適化されています。
|
||||
- Blowfish が初めてなら、[インストール]({{< ref "docs/installation" >}})から始めましょう。
|
||||
- サイトを形にするなら、[はじめに]({{< ref "docs/getting-started" >}})と[設定]({{< ref "docs/configuration" >}})を読んでください。
|
||||
- 可能性を見るなら、[ショートコード]({{< ref "docs/shortcodes" >}})、[サンプル]({{< ref "samples" >}})、[ショーケース]({{< ref "examples" >}})を探索してください。
|
||||
- 既存サイトを移行するなら、[Blowfish 3 アップグレードガイド]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}})に従ってください。
|
||||
@@ -3,7 +3,7 @@ title: "Welcome to Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Start building with the current version of Blowfish, a modern Hugo theme for blogs, documentation, portfolios, and more."
|
||||
description: "Build a fast, expressive Hugo site with flexible layouts, rich content tools, and an agent-ready workflow."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["new", "docs"]
|
||||
series: ["Documentation"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 is a modern Hugo theme for blogs, documentation, portfolios, and more.
|
||||
Blowfish 3 is a modern Hugo theme for blogs, documentation, portfolios, and the sites that do not fit neatly into a template.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Looking for the fastest path to a new site? Run `npx blowfish-tools new <site>`, then follow the [installation guide]({{< ref "docs/installation" >}}). The sections below document the major features introduced with Blowfish 2, which remain available in the current release.
|
||||
Start a new site with `npx blowfish-tools new <site>`, then follow the [installation guide]({{< ref "docs/installation" >}}). Existing Blowfish sites can move to v3 without breaking configuration changes.
|
||||
{{< /alert >}}
|
||||
|
||||
The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> and expands its initial vision.
|
||||
## Build the site you have in mind
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish gives you a strong starting point without fixing the outcome for you. Choose from profile, landing, hero, card, background, and other homepage layouts. Set your colour scheme, typography, navigation, dark-mode behaviour, and article presentation from your site configuration. Use front matter when a single page needs to be different.
|
||||
|
||||
Tailwind CSS is at the heart of Blowfish and this release contains the very latest [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). It brings with it performance optimisations and support for some great new CSS features.
|
||||
Your content remains portable Hugo content: Markdown, page bundles, taxonomies, menus, and configuration files that live in your repository. There is no proprietary editor or platform lock-in.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Publish richer content with less custom code
|
||||
|
||||
## Multilingual support
|
||||
Write in Markdown, then reach for [40+ shortcodes]({{< ref "docs/shortcodes" >}}) when the story needs more. Add buttons, callouts, icons, tabs, galleries, charts, diagrams, GitHub cards, videos, code examples, and more without maintaining one-off templates.
|
||||
|
||||
A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.
|
||||
Blowfish also handles the work around the content: responsive feature images and thumbnails, search, reading tools, tables of contents, social and SEO metadata, structured data, accessibility controls, and optional analytics, comments, or Firebase-powered views and likes.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Make it work for every reader
|
||||
|
||||
Thanks to submissions from the community, Blowfish has already been translated into [thirty-two languages](https://github.com/nunocoracao/blowfish/tree/main/i18n) with more to be added over time. By the way, [pull requests](https://github.com/nunocoracao/blowfish/pulls) for new languages are always welcome!
|
||||
Build multilingual sites with translated content, language-specific menus, and built-in interface translations. Blowfish supports RTL and LTR languages in the same project, so the layout adapts with the content. Visitors can also use a site-wide appearance toggle, responsive navigation, and keyboard-friendly search.
|
||||
|
||||
## RTL language support
|
||||
Under the hood, Blowfish uses current Hugo capabilities and Tailwind CSS 4, while keeping the theme’s configuration and content model easy to inspect and own.
|
||||
|
||||
One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.
|
||||
## Give your coding agent the context it needs
|
||||
|
||||
RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.
|
||||
Blowfish ships an [agent skill](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) for AI coding agents such as Claude Code. It teaches the agent where configuration belongs, how layouts and front matter work, which shortcodes exist, and how to build and customize a Blowfish site without guessing.
|
||||
|
||||
## Automatic image resizing
|
||||
Install it in Claude Code with:
|
||||
|
||||
A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML `srcset` attributes enabling optimised file sizes to be served to your site visitors.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="My image"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
Best of all there's nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the `figure` shortcode has been completely rewritten to provide the same resizing benefits.
|
||||
Or copy the skill into your project at `.claude/skills/blowfish/`. From there, your agent can help with setup, configuration, content structure, page design, and theme-aware implementation while your site stays in your repository.
|
||||
|
||||
## Choose your next step
|
||||
|
||||
## Site search
|
||||
|
||||
Powered by [Fuse.js](https://fusejs.io), site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there's nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you're all set. Oh, and it also supports full keyboard navigation!
|
||||
|
||||
## Tables of contents
|
||||
|
||||
A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.
|
||||
|
||||
Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.
|
||||
|
||||
## Accessibility improvements
|
||||
|
||||
From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.
|
||||
|
||||
Version 2 also introduces "skip to content" and "scroll to top" links that enable quick navigation. There's also keyboard shortcuts for enabling items like search without reaching for the mouse.
|
||||
|
||||
The new image resizing features also provide full control over `alt` and `title` elements enabling an accessible experience for all visitors.
|
||||
|
||||
## A whole lot more
|
||||
|
||||
There's countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD structured data which further optimises SEO performance.
|
||||
- New to Blowfish? Start with [Installation]({{< ref "docs/installation" >}}).
|
||||
- Ready to shape the site? Read [Getting Started]({{< ref "docs/getting-started" >}}) and [Configuration]({{< ref "docs/configuration" >}}).
|
||||
- Want to see what is possible? Explore [Shortcodes]({{< ref "docs/shortcodes" >}}), [Samples]({{< ref "samples" >}}), and the [Showcase]({{< ref "examples" >}}).
|
||||
- Moving an existing site? Follow the [Blowfish 3 upgrade guide]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Bem-vindo ao Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Comece a criar com a versão atual do Blowfish, um tema Hugo moderno para blogs, documentação, portfólios e muito mais."
|
||||
description: "Crie um site Hugo rápido e expressivo com layouts flexíveis, ferramentas de conteúdo rico e um fluxo de trabalho pronto para agentes."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["novo", "documentação"]
|
||||
series: ["Documentação"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
O Blowfish 3 é um tema Hugo moderno para blogs, documentação, portfólios e muito mais.
|
||||
O Blowfish 3 é um tema Hugo moderno para blogs, documentação, portfólios e sites que não cabem em um modelo rígido.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Quer o caminho mais rápido para um novo site? Execute `npx blowfish-tools new <site>` e siga o [guia de instalação]({{< ref "docs/installation" >}}). As seções abaixo documentam os principais recursos introduzidos no Blowfish 2, que continuam disponíveis na versão atual.
|
||||
Crie um novo site com `npx blowfish-tools new <site>` e siga o [guia de instalação]({{< ref "docs/installation" >}}). Sites Blowfish existentes podem migrar para a v3 sem mudanças incompatíveis na configuração.
|
||||
{{< /alert >}}
|
||||
|
||||
O objetivo original do Blowfish era desenvolver um tema simples e leve. O tema é um fork do <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> e expande sua visão inicial.
|
||||
## Crie o site que você imagina
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
O Blowfish oferece uma base sólida sem determinar o resultado. Escolha layouts de página inicial de perfil, landing, hero, cartões ou fundo. Defina cores, tipografia, navegação, modo escuro e apresentação de artigos na configuração do site. Use front matter quando uma página precisar ser diferente.
|
||||
|
||||
O Tailwind CSS é o coração do Blowfish e esta versão contém a mais recente [Tailwind CSS versão 3](https://tailwindcss.com/blog/tailwindcss-v3). Ela traz otimizações de desempenho e suporte para alguns novos recursos CSS incríveis.
|
||||
Seu conteúdo continua sendo Hugo portátil: Markdown, page bundles, taxonomias, menus e arquivos de configuração no repositório. Não há editor proprietário ou dependência de plataforma.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Publique conteúdo mais rico com menos código
|
||||
|
||||
## Suporte multilíngue
|
||||
Escreva em Markdown e use os [mais de 40 shortcodes]({{< ref "docs/shortcodes" >}}) quando precisar. Adicione botões, alertas, ícones, abas, galerias, gráficos, diagramas, cards do GitHub, vídeos e exemplos de código sem manter templates pontuais.
|
||||
|
||||
Um recurso muito solicitado: o Blowfish agora é multilíngue! Se você publica seu conteúdo em vários idiomas, o site será construído com todas as traduções disponíveis.
|
||||
O Blowfish também cuida do que está ao redor do conteúdo: imagens de destaque e miniaturas responsivas, busca, ferramentas de leitura, índices, metadados sociais e de SEO, dados estruturados, controles de acessibilidade e analytics, comentários ou visualizações e curtidas com Firebase opcionais.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Para cada leitor
|
||||
|
||||
Graças às contribuições da comunidade, o Blowfish já foi traduzido para [trinta idiomas](https://github.com/nunocoracao/blowfish/tree/main/i18n), e mais serão adicionados com o tempo. A propósito, [pull requests](https://github.com/nunocoracao/blowfish/pulls) para novos idiomas são sempre bem-vindos!
|
||||
Crie sites multilíngues com conteúdo traduzido, menus por idioma e traduções de interface incluídas. O Blowfish suporta idiomas RTL e LTR no mesmo projeto, além de alternância de aparência, navegação responsiva e busca acessível por teclado.
|
||||
|
||||
## Suporte a idiomas RTL
|
||||
Por baixo do capô, o Blowfish usa recursos atuais do Hugo e Tailwind CSS 4, mantendo o modelo de conteúdo e configuração claro e sob seu controle.
|
||||
|
||||
Um dos benefícios dos novos recursos do Tailwind e multilíngue é a capacidade de adicionar suporte a idiomas RTL. Quando habilitado, todo o conteúdo do site será reorganizado da direita para a esquerda. Cada elemento no tema foi re-estilizado para garantir uma ótima aparência neste modo, o que ajuda autores que desejam gerar conteúdo em idiomas RTL.
|
||||
## Dê ao seu agente o contexto necessário
|
||||
|
||||
O RTL é controlado por idioma, então você pode misturar conteúdo RTL e LTR em seus projetos e o tema responderá adequadamente.
|
||||
O Blowfish inclui uma [skill para agentes](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) para agentes de programação com IA como o Claude Code. Ela ensina onde fica a configuração, como funcionam layouts e front matter, quais shortcodes existem e como criar um site Blowfish sem adivinhações.
|
||||
|
||||
## Redimensionamento automático de imagens
|
||||
Instale-a no Claude Code:
|
||||
|
||||
Uma grande mudança no Blowfish 2.0 é a adição do redimensionamento automático de imagens. Usando o poder do Hugo Pipes, as imagens no conteúdo Markdown agora são automaticamente redimensionadas para diferentes tamanhos de saída. Estes são então apresentados usando atributos HTML `srcset`, permitindo que tamanhos de arquivo otimizados sejam servidos aos visitantes do seu site.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="Minha imagem"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
O melhor de tudo é que você não precisa mudar nada! Simplesmente insira a sintaxe padrão de imagem Markdown e deixe o tema fazer o resto. Se você quiser um pouco mais de controle, o shortcode `figure` foi completamente reescrito para fornecer os mesmos benefícios de redimensionamento.
|
||||
Você também pode copiar a skill para `.claude/skills/blowfish/` no projeto. O agente poderá ajudar com configuração, estrutura de conteúdo, design de páginas e implementação consciente do tema, enquanto seu site continua no repositório.
|
||||
|
||||
## Escolha o próximo passo
|
||||
|
||||
## Busca no site
|
||||
|
||||
Alimentada pelo [Fuse.js](https://fusejs.io), a busca do site permite que os visitantes encontrem seu conteúdo rápida e facilmente. Todas as buscas são realizadas no lado do cliente, o que significa que não há nada para configurar no servidor e as consultas são executadas super rápido. Simplesmente habilite o recurso na configuração do seu site e pronto. Ah, e também suporta navegação completa por teclado!
|
||||
|
||||
## Índices
|
||||
|
||||
Um recurso muito solicitado: o Blowfish agora suporta índices em páginas de artigos. Você pode vê-lo em ação nesta página. O conteúdo é totalmente responsivo e se ajustará para aproveitar o espaço disponível em diferentes resoluções de tela.
|
||||
|
||||
Disponível globalmente ou por artigo, o índice pode ser totalmente personalizado usando os valores de configuração padrão do Hugo, permitindo que você ajuste o comportamento ao seu projeto.
|
||||
|
||||
## Melhorias de acessibilidade
|
||||
|
||||
Desde adicionar descrições ARIA a mais itens até simplesmente ajustar o contraste de certos elementos de texto, esta versão é a mais acessível até agora.
|
||||
|
||||
A versão 2 também introduz links de "pular para o conteúdo" e "voltar ao topo" que permitem navegação rápida. Também há atalhos de teclado para ativar itens como a busca sem precisar usar o mouse.
|
||||
|
||||
Os novos recursos de redimensionamento de imagens também fornecem controle total sobre os elementos `alt` e `title`, permitindo uma experiência acessível para todos os visitantes.
|
||||
|
||||
## E muito mais
|
||||
|
||||
Há inúmeros outros recursos para explorar. Desde poder exibir taxonomias em artigos e páginas de lista, até usar o novo parâmetro de autor `headline` para personalizar sua página inicial. Também há dados estruturados JSON-LD aprimorados que otimizam ainda mais o desempenho de SEO.
|
||||
- Novo no Blowfish? Comece pela [Instalação]({{< ref "docs/installation" >}}).
|
||||
- Quer dar forma ao site? Leia [Primeiros passos]({{< ref "docs/getting-started" >}}) e [Configuração]({{< ref "docs/configuration" >}}).
|
||||
- Quer ver as possibilidades? Explore [Shortcodes]({{< ref "docs/shortcodes" >}}), [Amostras]({{< ref "samples" >}}) e a [Galeria]({{< ref "examples" >}}).
|
||||
- Vai migrar um site existente? Siga o [guia de atualização para o Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "Bem-vindo ao Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "Comece a criar com a versão atual do Blowfish, um tema Hugo moderno para blogs, documentação, portefólios e muito mais."
|
||||
description: "Crie um site Hugo rápido e expressivo com layouts flexíveis, ferramentas de conteúdo rico e um fluxo de trabalho preparado para agentes."
|
||||
lastmod: 2026-08-30
|
||||
tags: ["novo", "documentação"]
|
||||
series: ["Documentação"]
|
||||
@@ -11,74 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
O Blowfish 3 é um tema Hugo moderno para blogs, documentação, portefólios e muito mais.
|
||||
O Blowfish 3 é um tema Hugo moderno para blogs, documentação, portefólios e sites que não cabem num modelo rígido.
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
Procura a forma mais rápida de criar um novo site? Execute `npx blowfish-tools new <site>` e siga o [guia de instalação]({{< ref "docs/installation" >}}). As secções abaixo documentam as principais funcionalidades introduzidas no Blowfish 2, que continuam disponíveis na versão atual.
|
||||
Crie um novo site com `npx blowfish-tools new <site>` e siga o [guia de instalação]({{< ref "docs/installation" >}}). Sites Blowfish existentes podem passar para a v3 sem alterações incompatíveis na configuração.
|
||||
{{< /alert >}}
|
||||
|
||||
O objetivo original do Blowfish era desenvolver um tema simples e leve. O tema é um fork do <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> e expande a sua visão inicial.
|
||||
## Crie o site que imagina
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
O Blowfish oferece uma base sólida sem determinar o resultado. Escolha layouts de página inicial de perfil, landing, hero, cartões ou fundo. Defina cores, tipografia, navegação, modo escuro e apresentação de artigos na configuração do site. Use front matter quando uma página precisar de ser diferente.
|
||||
|
||||
O Tailwind CSS é o coração do Blowfish e esta versão contém a mais recente [Tailwind CSS versão 3](https://tailwindcss.com/blog/tailwindcss-v3). Traz otimizações de desempenho e suporte para algumas novas funcionalidades CSS fantásticas.
|
||||
O seu conteúdo continua a ser Hugo portátil: Markdown, page bundles, taxonomias, menus e ficheiros de configuração no repositório. Não há editor proprietário nem dependência de plataforma.
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
## Publique conteúdo mais rico com menos código
|
||||
|
||||
## Suporte multilingue
|
||||
Escreva em Markdown e use os [mais de 40 shortcodes]({{< ref "docs/shortcodes" >}}) quando precisar. Adicione botões, alertas, ícones, separadores, galerias, gráficos, diagramas, cartões GitHub, vídeos e exemplos de código sem manter templates pontuais.
|
||||
|
||||
Uma funcionalidade muito solicitada: o Blowfish é agora multilingue! Se publicar o seu conteúdo em vários idiomas, o site será construído com todas as traduções disponíveis.
|
||||
O Blowfish também trata do que está à volta do conteúdo: imagens de destaque e miniaturas responsivas, pesquisa, ferramentas de leitura, índices, metadados sociais e de SEO, dados estruturados, controlos de acessibilidade e analytics, comentários ou visualizações e gostos Firebase opcionais.
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
## Para cada leitor
|
||||
|
||||
Graças às contribuições da comunidade, o Blowfish já foi traduzido para [trinta idiomas](https://github.com/nunocoracao/blowfish/tree/main/i18n), e mais serão adicionados ao longo do tempo. Aliás, [pull requests](https://github.com/nunocoracao/blowfish/pulls) para novos idiomas são sempre bem-vindos!
|
||||
Crie sites multilingues com conteúdo traduzido, menus por idioma e traduções de interface incluídas. O Blowfish suporta idiomas RTL e LTR no mesmo projeto, além de alternância de aparência, navegação responsiva e pesquisa acessível por teclado.
|
||||
|
||||
## Suporte a idiomas RTL
|
||||
Por baixo do capô, o Blowfish usa recursos atuais do Hugo e Tailwind CSS 4, mantendo o modelo de conteúdo e configuração claro e sob o seu controlo.
|
||||
|
||||
Um dos benefícios das novas funcionalidades do Tailwind e multilingue é a capacidade de adicionar suporte a idiomas RTL. Quando ativado, todo o conteúdo do site será reorganizado da direita para a esquerda. Cada elemento no tema foi re-estilizado para garantir uma ótima aparência neste modo, o que ajuda autores que desejam gerar conteúdo em idiomas RTL.
|
||||
## Dê ao seu agente o contexto necessário
|
||||
|
||||
O RTL é controlado por idioma, pelo que pode misturar conteúdo RTL e LTR nos seus projetos e o tema responderá adequadamente.
|
||||
O Blowfish inclui uma [skill para agentes](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish) para agentes de programação com IA como o Claude Code. Ensina onde fica a configuração, como funcionam layouts e front matter, que shortcodes existem e como criar um site Blowfish sem adivinhar.
|
||||
|
||||
## Redimensionamento automático de imagens
|
||||
Instale-a no Claude Code:
|
||||
|
||||
Uma grande mudança no Blowfish 2.0 é a adição do redimensionamento automático de imagens. Utilizando o poder do Hugo Pipes, as imagens no conteúdo Markdown são agora automaticamente redimensionadas para diferentes tamanhos de saída. Estes são então apresentados utilizando atributos HTML `srcset`, permitindo que tamanhos de ficheiro otimizados sejam servidos aos visitantes do seu site.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="A minha imagem"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
O melhor de tudo é que não precisa de alterar nada! Simplesmente insira a sintaxe padrão de imagem Markdown e deixe o tema fazer o resto. Se quiser um pouco mais de controlo, o shortcode `figure` foi completamente reescrito para fornecer os mesmos benefícios de redimensionamento.
|
||||
Também pode copiar a skill para `.claude/skills/blowfish/` no seu projeto. O agente poderá ajudar com configuração, estrutura de conteúdo, design de páginas e implementação consciente do tema, enquanto o seu site continua no repositório.
|
||||
|
||||
## Escolha o próximo passo
|
||||
|
||||
## Pesquisa no site
|
||||
|
||||
Alimentada pelo [Fuse.js](https://fusejs.io), a pesquisa do site permite que os visitantes encontrem o seu conteúdo rápida e facilmente. Todas as pesquisas são realizadas do lado do cliente, o que significa que não há nada para configurar no servidor e as consultas são executadas super rápido. Simplesmente ative a funcionalidade na configuração do seu site e está pronto. Ah, e também suporta navegação completa por teclado!
|
||||
|
||||
## Índices
|
||||
|
||||
Uma funcionalidade muito solicitada: o Blowfish agora suporta índices em páginas de artigos. Pode vê-lo em ação nesta página. O conteúdo é totalmente responsivo e ajustar-se-á para aproveitar o espaço disponível em diferentes resoluções de ecrã.
|
||||
|
||||
Disponível globalmente ou por artigo, o índice pode ser totalmente personalizado utilizando os valores de configuração padrão do Hugo, permitindo-lhe ajustar o comportamento ao seu projeto.
|
||||
|
||||
## Melhorias de acessibilidade
|
||||
|
||||
Desde adicionar descrições ARIA a mais itens até simplesmente ajustar o contraste de certos elementos de texto, esta versão é a mais acessível até agora.
|
||||
|
||||
A versão 2 também introduz ligações de "saltar para o conteúdo" e "voltar ao topo" que permitem navegação rápida. Também há atalhos de teclado para ativar itens como a pesquisa sem precisar de utilizar o rato.
|
||||
|
||||
As novas funcionalidades de redimensionamento de imagens também fornecem controlo total sobre os elementos `alt` e `title`, permitindo uma experiência acessível para todos os visitantes.
|
||||
|
||||
## E muito mais
|
||||
|
||||
Há inúmeras outras funcionalidades para explorar. Desde poder apresentar taxonomias em artigos e páginas de lista, até utilizar o novo parâmetro de autor `headline` para personalizar a sua página inicial. Também há dados estruturados JSON-LD melhorados que otimizam ainda mais o desempenho de SEO.
|
||||
- Novo no Blowfish? Comece pela [Instalação]({{< ref "docs/installation" >}}).
|
||||
- Quer dar forma ao site? Leia [Primeiros passos]({{< ref "docs/getting-started" >}}) e [Configuração]({{< ref "docs/configuration" >}}).
|
||||
- Quer ver as possibilidades? Explore [Shortcodes]({{< ref "docs/shortcodes" >}}), [Amostras]({{< ref "samples" >}}) e a [Galeria]({{< ref "examples" >}}).
|
||||
- Vai migrar um site existente? Siga o [guia de atualização para o Blowfish 3]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}}).
|
||||
@@ -3,7 +3,7 @@ title: "欢迎来到 Blowfish"
|
||||
featureimage: "images/v3/welcome.png"
|
||||
weight: 1
|
||||
draft: false
|
||||
description: "使用 Blowfish 当前版本开始构建网站，它是一款适用于博客、文档、作品集等的现代 Hugo 主题。"
|
||||
description: "借助灵活的布局、丰富的内容工具和面向智能体的工作流，构建快速且富有表现力的 Hugo 网站。"
|
||||
lastmod: 2026-08-30
|
||||
tags: ["新手", "文档"]
|
||||
series: ["部署教程"]
|
||||
@@ -11,86 +11,47 @@ series_order: 1
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Blowfish 3 是一款适用于博客、文档、作品集等的现代 Hugo 主题。
|
||||
Blowfish 3 是一款现代 Hugo 主题，适用于博客、文档、作品集，以及不适合套用固定模板的网站。
|
||||
{{< /lead >}}
|
||||
|
||||
{{< alert >}}
|
||||
想最快创建新网站？运行 `npx blowfish-tools new <site>`，然后按照[安装指南]({{< ref "docs/installation" >}})操作。以下章节介绍 Blowfish 2 新增的主要功能，这些功能在当前版本中仍然可用。
|
||||
使用 `npx blowfish-tools new <site>` 创建新网站，然后按照[安装指南]({{< ref "docs/installation" >}})操作。现有 Blowfish 网站可以在不进行破坏性配置更改的情况下迁移到 v3。
|
||||
{{< /alert >}}
|
||||
|
||||
Blowfish 的目标是开发一个简单且轻量级的主题。 该主题是 <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> 的一个分支，并进行了大量扩展。
|
||||
## 构建你心中的网站
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
Blowfish 提供了坚实的起点，但不会替你决定最终效果。你可以选择个人资料、落地页、Hero、卡片、背景等首页布局，并从站点配置中设置配色、排版、导航、深色模式和文章呈现方式。单个页面需要不同效果时，可以使用 front matter。
|
||||
|
||||
Tailwind CSS 是 Blowfish 的核心，当前版本包含了最新的[Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3)。
|
||||
Tailwind CSS 带来了性能优化，并提供了一些出色的新的 CSS 特性。
|
||||
你的内容仍然是可移植的 Hugo 内容：Markdown、页面包、分类法、菜单和配置文件都保存在你的仓库中。没有专有编辑器，也没有平台锁定。
|
||||
|
||||
## 用更少自定义代码发布更丰富的内容
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
用 Markdown 写作，需要时使用[40 多个短代码]({{< ref "docs/shortcodes" >}})。无需维护一次性模板，就能添加按钮、提示、图标、标签页、画廊、图表、流程图、GitHub 卡片、视频和代码示例。
|
||||
|
||||
## 多语言支持
|
||||
Blowfish 也处理内容周边的工作：响应式特色图片和缩略图、搜索、阅读工具、目录、社交与 SEO 元数据、结构化数据、无障碍控制，以及可选的分析、评论或 Firebase 驱动的浏览量和点赞。
|
||||
|
||||
这是一个高频需求，Blowfish 现在支持多语言！
|
||||
如果你使用多语言发布你的内容，网站将会构建包含所有可用翻译的版本。
|
||||
## 为每位读者而建
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
|
||||
你可以构建包含翻译内容、语言专属菜单和内置界面翻译的多语言网站。Blowfish 支持在同一项目中混合 RTL 和 LTR 语言，同时提供外观切换、响应式导航和键盘友好的搜索。
|
||||
|
||||
感谢社区的贡献，目前 Blowfish 已经翻译成三十种语言，并且随着时间的推移还会支持更多。 顺便一提，欢迎你为支持新语言提交 [PR](https://github.com/nunocoracao/blowfish/pulls)。
|
||||
在底层，Blowfish 使用当前 Hugo 功能和 Tailwind CSS 4，同时保持清晰、可检查且完全由你掌控的配置与内容模型。
|
||||
|
||||
## 支持 RTL 语言
|
||||
## 给编程智能体所需的上下文
|
||||
|
||||
新版本的Tailwind和多语言特性可以支持 RTL 语言。
|
||||
Blowfish 附带一个面向 Claude Code 等 AI 编程智能体的[智能体技能](https://github.com/nunocoracao/blowfish/tree/main/.claude/skills/blowfish)。它会告诉智能体配置应放在哪里、布局和 front matter 如何工作、有哪些短代码，以及如何无需猜测地构建和定制 Blowfish 网站。
|
||||
|
||||
启用 RTL 后，整个网站将会从右到左重新生成内容。主题中的所有元素都会重新风格化，以适应这种模式，有助于 RTL 语言者。
|
||||
在 Claude Code 中安装：
|
||||
|
||||
RTL 是基于单独语言控制的，所以你可以在项目中通过支持多语言来混合使用 RTL 和 LTR，主题会相应做出适配。
|
||||
|
||||
## 自动调整图片大小
|
||||
|
||||
Blowfish 2.0版本的重大变化是增加了自动调整图片大小的功能。基于 Hugo Pipes 提供的能力，实现了 Markdown 中的图片自动缩放到不同尺寸的功能。同时 Blowfish 2.0 还支持了 HTML `srcset` 以实现响应式图像，这能够为访问者优化图片大小。
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="My image"
|
||||
/>
|
||||
```shell
|
||||
/plugin marketplace add nunocoracao/blowfish
|
||||
/plugin install blowfish@blowfish
|
||||
```
|
||||
|
||||
当然这一切都不需要你做任何改动！只需要在 Markdown 中插入标准的图片元素，Blowfish 主题会自动帮你完成这些。
|
||||
你也可以将该技能复制到项目的 `.claude/skills/blowfish/`。之后，智能体可以协助完成设置、配置、内容结构、页面设计和理解主题的实现，而你的网站始终保留在仓库中。
|
||||
|
||||
如果你想要图片变得更可控一些，你可以使用短代码 `figure` 。 `figure` 已经被完全重写，用于提供类似调整大小的功能优势。
|
||||
## 选择下一步
|
||||
|
||||
## 站点搜索
|
||||
|
||||
基于 [Fuse.js](https://fusejs.io) 提供的模糊搜索，访问者可以快速轻松地找到想要的内容。所有的模糊搜索都在客户端完成，不需要服务端做任何配置，同时保证了搜索的执行速度。只需要你在网站配置中启用这个功能就可以运行！哦，它甚至还支持全键盘导航！
|
||||
|
||||
## 目录
|
||||
|
||||
这也是一个高频的需求，Blowfish 现在支持在文章内容页面中使用目录。你可以在本页面看到它的实际效果。目录完全是响应式的，并且会在不同屏幕分辨率下进行自动调整。
|
||||
|
||||
目录可以给予全局或者每篇文章，也可以使用标准的 Hugo 配置来完全定制化，允许你根据自己的项目调整。
|
||||
|
||||
## 可访问性改进
|
||||
|
||||
这个版本是至今为止最易访问的！Blowfish 不仅为更多项目提供了 ARIA 描述，还简单地调整了某些文本元素的对比度。
|
||||
|
||||
不仅如此，Blowfish 2.0 引入了 “跳转到内容” 和 “滚动到顶部” 的功能，使得导航更加便捷。你甚至可以仅用键盘快捷键来使用像搜索这样的功能，不需要使用鼠标哦~
|
||||
|
||||
新功能图片大小调节还提供了对 `alt` 和 `title` 元素的完全控制，为所有访问者提供一个无障碍的体验。
|
||||
|
||||
## 更多更多
|
||||
|
||||
当然还有无数其他的功能等待你的探索。例如在文章和列表页面显示分类、使用 `headline` 作者参数来定制你的主页，还有使用改进 JSON-LD 结构化数据，从而进一步优化了 SEO 性能等等。
|
||||
|
||||
## 结语
|
||||
|
||||
欢迎来尝试和探索强大而轻量的 Blowfish 2.0，打造优雅、个性化的创作之旅！
|
||||
|
||||
如果你对 Blowfish 有更加创意的想法，欢迎随时[提交](https://github.com/nunocoracao/blowfish/discussions)，期待与你共同营造 Blowfish 的开源文化！
|
||||
- 初次使用 Blowfish？从[安装]({{< ref "docs/installation" >}})开始。
|
||||
- 准备塑造网站？阅读[快速开始]({{< ref "docs/getting-started" >}})和[配置]({{< ref "docs/configuration" >}})。
|
||||
- 想了解各种可能性？浏览[短代码]({{< ref "docs/shortcodes" >}})、[示例]({{< ref "samples" >}})和[展示案例]({{< ref "examples" >}})。
|
||||
- 要迁移现有网站？请按照 [Blowfish 3 升级指南]({{< ref "guides/202608-upgrade-to-blowfish-v3" >}})操作。
|
||||
Reference in new issue
Block a user