Site de démonstration | Journal des modifications
Yue est un thème Hugo minimal, multilingue et personnalisable, adapté aux blogs.
Les captures d'écran peuvent être obsolètes, il est donc préférable de visiter le site Web de démonstration.
Mode lumière sur le bureau
Mode sombre sur le bureau
Mode lumière sur mobile
Mode sombre sur mobile
Apparence minimale
Facile à installer (avec Git et Hugo installés, créez un site web en quelques secondes)
Documentation détaillée
Mode sombre automatique
Multilingue
Liste de traduction sur une seule page
Sélecteur de langue (aller à la page correspondante ou à la page d'accueil)
Plusieurs auteurs
Table des matières (pliable, générée uniquement lorsqu'elle est disponible)
Date de modification sur la page d'accueil, la page unique, la page de section et la page de termes
Format de date personnalisé
Pagination sur la page d'accueil et la page de section
RSS en texte intégral
Balises et catégories
Avis de droit d'auteur (l'auteur et la durée de l'année peuvent être définis)
Lien RSS
Lien d'ancrage du titre
Adapté aux mobiles et réactif
SCSS
Optimisation des moteurs de recherche
Microdonnées
méta description
Ouvrir le graphique
Nombre de pages dans les sections ( /posts/ , /tags/ , etc.)
Personnalisation
Icône de favori
Styles (SCSS)
Contenu (HTML)
Pour découvrir toutes les fonctionnalités, consultez hugo.yaml (configuration par défaut) et exampleSite/hugo.yaml (configuration du site de démonstration).
Installez Git et la dernière extension Hugo.
# Créer un site Webgit init my-websitecd my-website# Installer le sous-module themegit add --degree=1 https://github.com/CyrusYip/hugo-theme-yue thèmes/hugo-theme-yue git commit --message "ajouter un thème"# Créer du contenu de démonstrationcp --recursive Themes/hugo-theme-yue/exampleSite/* .# Aperçu du serveur Hugo
Nous avons maintenant un site Web de démonstration fonctionnel. Le répertoire content contient le contenu et hugo.yaml est le fichier de configuration. N'hésitez pas à jouer avec eux.
cd mon-site web mise à jour du sous-module git --remote
Il est recommandé de lire CHANGELOG.md avant de mettre à jour le thème.
Vous pouvez vous abonner aux mises à jour et au changelog dans un agrégateur de flux (par exemple Inoreader).
Mises à jour : https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
Journal des modifications : https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
Vous devez utiliser des options supplémentaires lorsque vous clonez votre projet de site Web.
git clone --recurse-submodules --shallow-submodules [email protected]:votre-nom-d'utilisateur/my-website.git
Après avoir configuré le site Web, vous souhaiterez probablement l'héberger sur Internet. Il existe de nombreuses méthodes pour le faire, voir Hébergement et déploiement | Hugo. Si vous ne savez pas quoi choisir, vous pouvez démarrer depuis Netlify, voir Héberger sur Netlify | Hugo.
Assurez-vous de remplacer baseURL par votre nom de domaine (par exemple https://my-cool-domain.org/ ) dans hugo.yaml .
-baseURL : https://yue.cyrusyip.org/+baseURL : https://my-cool-domain.org/
Commande de build recommandée :
Hugo --gc --minifier
--gc supprime les fichiers de cache inutilisés et --minify réduit la taille du site Web (principalement HTML).
Créez un nouveau message.
hugo new content content/en/posts/my-first-post.md
Pour en savoir plus sur l'utilisation, consultez :
Utilisation de base | Hugo
Structure du répertoire | Hugo
Les paramètres sont répertoriés dans exampleSite/hugo.yaml (configuration du site de démonstration) et hugo.yaml (configuration par défaut, importée par le premier).
À la racine de votre projet de site Web, hugo.yaml est le fichier de configuration, qui est une copie de exampleSite/hugo.yaml.
Pour apprendre la configuration, voir Configurer Hugo | Hugo.
Langues prises en charge :
en : anglais
fr : français
zh-CN : chinois simplifié
Pour créer un site Web multilingue, voir Mode multilingue | Hugo et exampleSite/hugo.yaml.
Les fichiers de traduction se trouvent dans le répertoire i18n et data/i18n.yaml. Les contributions pour des langues supplémentaires sont les bienvenues.
Pour contribuer une nouvelle langue :
Créez un fichier de langue (par exemple fr.yaml pour le français) dans le répertoire i18n.
Copiez le contenu de i18n/en.yaml dans le nouveau fichier.
Supprimez tous les commentaires ( # ... ) et traduisez le contenu.
Traduisez également le contenu dans data/i18n.yaml.
Si vous souhaitez continuer à contribuer à la traduction, vous pouvez obtenir les dernières modifications en vous abonnant au flux i18n/en.yaml (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml .atom) à l’aide d’un lecteur RSS.
Si votre site Web n'est pas en anglais, vous souhaiterez probablement personnaliser le titre des /tags et /categories .
Par exemple, pour personnaliser le titre /tags du site Web zh-CN , créez content/zh-CN/tags/_index.md et ajoutez le contenu suivant dans le fichier.
--- title: Chinese Tags ---
Yue vous permet de personnaliser le favicon, les styles (SCSS) et le contenu (HTML).
Favicon est l'icône à côté du titre dans un onglet du navigateur. Pour utiliser votre favicon, placez favicon.ico dans le répertoire static . Vous pouvez créer favicon.ico sur les générateurs favicon.ico en ligne.
Yue utilise SCSS (libsass) pour ajouter des styles. Tous les fichiers sont dans Assets/scss. Pour personnaliser les styles, créez assets/scss/_style-start.scss et assets/scss/_style-end.scss .
_style-start.scss est appliqué en premier et vous pouvez remplacer les variables de ce fichier.
$base-font-size : 15px ;
_style-end.scss est appliqué en dernier et vous pouvez ajouter des styles dans ce fichier.
Vanilla CSS est également valable dans SCSS.
Références :
CSS : Feuilles de style en cascade | MDN
Sass : les bases de Sass
Structure du répertoire | Hugo
Vous pouvez créer ces fichiers pour insérer du code HTML.
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.html est ajouté près du début de l'élément <head> .
Cas d'utilisation :
Scripts de préchargement
Charger des scripts
Charger les styles
Voici un exemple de scripts de préchargement :
<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2"><link rel="preload" as="script" href="https : //unpkg.com/@swup/preload-plugin@3"><link rel="preload" as="script" href="https://unpkg.com/swup@4">
head-end.html est ajouté à la fin de l'élément <head> .
Cas d'utilisation :
Charger des scripts
Charger les styles
Voici un exemple d'ajout de Google Analytics et d'un script local :
<!-- Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-F46B15BRUF"></script><script> window.dataLayer = window.dataLayer || [] ; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-F46B15BRUF');</script><!-- Script local, chemin : assets/js/my-script.js -->{{ avec resources.Get "js/my-script .js" | js.Build }} <script defer src="{{ .RelPermalink }}"></script>{{ end }} single-end.html est ajouté à la fin de l'élément <main> dans une publication.
Cas d'utilisation :
services de commentaires, par exemple Disqus et giscus
Voici un exemple d'ajout de Giscus :
{{ $langue := "" }}
{{- /*
Solution de contournement pour LanguagePrefix minuscule,
voir https://github.com/gohugoio/hugo/issues/9404
*/ -}}
{{ if eq site.LanguagePrefix "/zh-cn" }}
{{ $langue = "zh-CN" }}
{{ autre }}
{{ $langue = "fr" }}
{{ end }}<script src="https://giscus.app/client.js" data-repo="CyrusYip/yue-test" data-repo-id="P_9hJMbXtqr" data-category="Données générales" -category-id="SIB_ldsflk712ldRsjf7" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="preferred_color_scheme" data-lang="{{ $langue }}" crossorigin="anonymous" async></script>Liste des services de commentaires : Commentaires | Hugo.
body-end.html est ajouté à la fin de l'élément <body> .
Cas d'utilisation :
Charger dynamiquement des scripts
Pour signaler des bogues, soumettez un problème. Pour poser des questions, lancez une discussion.
Hugo a de nombreuses fonctionnalités, lisez la documentation Hugo pour en savoir plus.
Voir CHANGELOG.md.
Ce projet utilise hugo-bin - npm pour gérer la version Hugo. Prérequis : Node.js et npm.
Clonez ce référentiel.
installation npm npm run clean: serveur: partagé
Il existe d'autres commandes utiles répertoriées dans package.json. Pour utiliser la version Hugo recommandée, exécutez npx hugo .
Si Node.js et npm ne sont pas installés, installez simplement la version répertoriée dans package.json.
"hugo-bin": { "buildTags": "extended", "version": "x.yyy.z"},CHANGELOG.md doit être mis à jour à chaque validation.
Si vous utilisez Yue et que le code source de votre site Web est hébergé sur GitHub, vous pouvez ajouter le sujet hugo-theme-yue à votre référentiel.
Lien vers le sujet hugo-theme-yue .
J'ai beaucoup appris de nombreux projets. Merci, développeurs.
hugo-xmin (modèles minimaux)
Hugo-thème-Jane (modèle RSS)
hugo-theme-zen (sélecteur de langue)
Hugo-thème-gruvbox (couleur)
boîte à gruv (couleur)
hugo-theme-stack (code source, documentation et configuration)
hugo-PaperMod (code source, documentation et configuration)
Ce projet est sous licence MIT.
