terminal hugo theme

terminal-hugo-thème

Un thème pour Hugo créé à l'aide de la bibliothèque CSS tailwind et de la famille de polices mono

Démo en direct

https://nayanseth.com

Installation

1. Ce thème utilise le CSS tailwind
2. [Facultatif] Comment utiliser Tailwind
   1. Par défaut, le fichier tailwind.css existant sera utilisé dans le thème, mais si vous souhaitez jouer avec Tailwind, suivez les étapes mentionnées ci-dessous.
   2. Il existe deux fichiers de configuration pour Tailwind situés dans le répertoire assets/csss/tailwind
      1. Pour dev, exécutez npm run dev -> Cela génère toutes les classes CSS possibles à partir de tailwind. Certains peuvent encore être laissés de côté
      2. Pour prod, run npm run prod -> Cela génère uniquement les classes CSS de tailwind que vous utilisez dans le thème
3. hugo new site <SITE_NAME>
4. cd <SITE_NAME>
5. git submodule add [email protected]:techbarrack/terminal-hugo-theme.git themes/terminal
6. Remplacez le contenu de <SITE_NAME>/hugo.yaml par <SITE_NAME>/themes/terminal/hugo.yaml
7. Dans le répertoire racine du site Hugo, créez le répertoire : mkdir -p layouts/partials/third_party_js . Ce répertoire est destiné à stocker toute sorte de javascript tiers comme Google Analytics, Disqus, etc.
8. Exécutez le hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w

Modifier le contenu

1. Décommentez l'attribut ignoreFiles dans <SITE_NAME>/hugo.yaml
2. Commencez à ajouter les fichiers dans <SITE_NAME>/content en répliquant ce qui est présent dans <SITE_NAME>/themes/terminal/content
3. Mettre à jour le méta-contenu dans head.html

JS tiers

1. Créez des partiels dans <SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
2. Tous les fichiers du dossier third_party_js seront inclus avant la balise </body>

Codes courts

• {{< svg logo="blah" >}} -> Utilisez le code suivant pour ajouter svg dans les fichiers markdown
  1. Ajouter svg en tant que fichier .html dans layouts/content/svg
• HTML brut

 {{< rawhtml >}}
  <div>This is raw HTML content</div>
{{< /rawhtml >}}

Références

Quelques liens de référence pour des informations supplémentaires sur la façon de faire les choses dans Hugo :

• https://gohugo.io/methods/page/
• https://gohugo.io/methods/pages/groupbydate/
• https://gohugo.io/content-management/taxonomies/
• https://gohugo.io/templates/taxonomy-templates/
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/methods/page/scratch/
• https://gohugo.io/functions/collections/dictionary/
• https://gohugo.io/methods/page/paginate/
• https://discourse.gohugo.io/t/better-term-listing/10261
• https://gohugo.io/templates/partials/
• https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
• Icônes SVG