Hugo thème quint

Quint : l'essence du minimalisme

Quint est un thème Hugo minimaliste conçu pour évoquer une sensation propre et aérée, mettant l'accent sur la clarté et la facilité de lecture. Il comporte d'élégantes bannières d'images intégrées et un design léger, ce qui le rend idéal pour afficher votre contenu au centre de la scène.

Consultez le référentiel du site de démonstration, que vous pouvez également utiliser comme modèle de démarrage pour un nouveau site. (Psst... il y a un bouton de déploiement en un clic sur Netlify.)

Démo en direct ici.

Caractéristiques

• Design minimaliste : axé sur la lisibilité du contenu avec un minimum de distractions.

• Modes sombre et clair : changement de thème automatique qui respecte les paramètres du navigateur/appareil du spectateur.

• Mise en page réactive : convient parfaitement aux appareils mobiles et de bureau.

• Bannières d'images incluses : livré avec de superbes bannières d'images minimalistes qui donnent le ton à votre site. Remplacez-les ou ajoutez les vôtres à tout moment.

• Recherche sur site : recherche intégrée sur votre site statique à l'aide de Lunr.js.

• Icônes sociales : liens configurables vers vos réseaux sociaux dans le pied de page.

Démarrage rapide

Pour démarrer avec Quint, vous devez avoir installé Hugo sur votre ordinateur. Pour plus d'informations sur l'installation de Hugo, consultez la documentation officielle de Hugo.

Pour un guide étape par étape sur la création d'un nouveau site avec Hugo, lisez le Démarrage rapide.

Étape 1 : Installer le thème

Une fois Hugo installé, ajoutez Quint au répertoire de thèmes de votre site. Depuis la racine de votre site, exécutez :

 sous-module git ajouter https://github.com/victoriadrake/hugo-theme-quint.git thèmes/quint

Étape 2 : Ajoutez le thème à votre configuration

Ouvrez le fichier de configuration de votre site Hugo (soit hugo.toml , hugo.yaml , soit hugo.json ) et mettez à jour le paramètre theme pour utiliser quint :

Pour hugo.toml :

 thème = "quinte"

Pour hugo.yaml :

 thème : "quinte"

Étape 3 : Configurer

Quint a fière allure dès le départ. Vous pouvez éventuellement copier les valeurs de configuration de yoursite/themes/quint/hugo.toml vers la configuration de votre site ( yoursite/hugo.toml ) pour personnaliser davantage Quint.

Étape 4 : Exécutez le serveur

Exécutez Hugo pour générer votre site et démarrez le serveur. Depuis la racine de votre site, exécutez :

 serveur Hugo

Accédez à http://localhost:1313 dans votre navigateur Web pour voir votre site en action avec le thème Quint.

Obtenir des mises à jour

Pour télécharger la dernière version de Quint, exécutez :

 mise à jour du sous-module git --remote thèmes/quint

Personnalisation

Quint est conçu pour être simple à personnaliser.

CSS

Ajoutez facilement vos propres fichiers CSS personnalisés en les nommant dans votre configuration Hugo :

 [params]css = ["css/custom.css"] # Vos remplacements CSS personnalisés, stockés dans votre site/static/

Mises en page

Vous pouvez remplacer n'importe quelle mise en page en utilisant un fichier du même nom dans le répertoire de votre projet. Par exemple, le fichier yoursite/layouts/partials/contact.html remplacera yoursite/themes/quint/layouts/partials/contact.html .

Ajoutez ou supprimez des sections de la page d'accueil en remplaçant le fichier yoursite/themes/quint/layouts/index.html . Créez simplement une copie de ce fichier dans le répertoire de votre projet ( yoursite/layouts/index.html ) et supprimez ou ajoutez les fichiers partial que vous souhaitez.

Bannières d'images

Si une page ou un article ne spécifie pas d' image dans le texte de présentation, Quint affichera une belle bannière d'image en choisissant une image aléatoire dans le répertoire themes/quint/static/images .

Ceci est accompli en choisissant un nombre aléatoire entre 1 et 10, qui correspond à un nom de fichier image. Vous pouvez ajouter à cette collection ou remplacer n'importe quelle image de votre choix. Mettez simplement à jour le nombre aléatoire maximum pour qu'il corresponde au nombre d'images dont vous disposez.

 [params]numImages = 12 # Nombre d'images aléatoires parmi lesquelles choisir pour les bannières (dans thèmes/quint/static/images)

Contribuer

Les contributions à Quint sont les bienvenues ! N'hésitez pas à soumettre des problèmes ou des pull request sur GitHub pour améliorer les fonctionnalités ou la documentation du thème.

Vous voulez des idées pour commencer ? Voici une liste rapide des fonctionnalités que j'aimerais voir ajoutées :

• Boutons de copie de bloc de code

• Mise en évidence de la syntaxe Chroma de Hugo

• Le générateur d'actifs de Hugo avec pipeline, empreintes digitales, regroupement et minification

• Prise en charge multilingue

• Fil d'Ariane

Licence

Ce thème est publié sous la licence MIT. Pour plus de détails, consultez le fichier LICENSE.

Attribution

• Quint utilise l'excellente police Open Sauce.

• Maquette d'appareil créée à partir de deviceframes.com.