hugo theme fiber

Un thème Hugo pour les minimalistes. Fiber utilise un minimum de JavaScript et de CSS pour que votre site puisse se charger plus rapidement ! Possède également une interface utilisateur propre, idéale pour les yeux !!

Table des matières

• Installation
  • Utilisation du sous-module
  • Thème à télécharger directement
• Caractéristiques
  • Prêt pour le référencement
  • Codes courts
    • ASCIINEma
    • Puis-je utiliser
  • Cliquez pour copier le code
  • Belles notes
• Captures d'écran
• Configuration du thème
  • Liste du contenu sur la page d'accueil
    • Liste des blogs, notes, etc.
    • Liste du contenu personnalisé
  • Mise en évidence du code
  • Éléments de menu
  • Titre du site
• Rédaction de contenu
  • Rédaction de notes
  • Frontière

Installation

Ce thème peut être utilisé de deux manières avec n'importe quel site basé sur Hugo.

1. Utilisation des sous-modules Git (recommandé)
2. Téléchargement direct du thème sur <hugo-site-root>/themes/

Utilisation du sous-module

1. Créez votre site en utilisant hugo new site SITE_NAME
2. cd sur SITE_NAME
3. Initialisez un dépôt git : git init . Ceci est nécessaire car nous devons ajouter un sous-module git.
4. Ajoutez un sous-module en exécutant git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
5. Maintenant, démarrez le serveur Hugo localement en utilisant hugo serve

S'il y a une mise à jour dans le référentiel de thèmes, vous pouvez les extraire en utilisant git submodule update --remote

Thème à télécharger directement

Utilisez cette méthode si vous ne pouvez pas utiliser Git pour une raison quelconque.

1. Téléchargez-le et extrayez son contenu dans SITE_ROOT/themes/hugo-theme-fiber/ .
2. Démarrez Hugo localement en exécutant hugo serve depuis le terminal.

Caractéristiques

Prêt pour le référencement

Ce thème est chargé de référencement de base ainsi que de données JSON-LD minimales de Schema.org

Codes courts

Outre les codes courts prêts à l'emploi, il contient quelques autres codes courts utiles qui peuvent parfois s'avérer utiles.

ASCIINEma

Intégrez un casting AsciiNema. Shortcode à utiliser : {{< asciinema id="id of a public cast" >}}

Puis-je utiliser

Ce shortcode affiche les dernières données du site Web caniuse.com. Utile pour les développeurs Web. Exemple:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Cliquez pour copier le code

Les visiteurs du site Web peuvent copier le contenu de n’importe quel bloc de code en un seul clic. Cela ne brisera pas les indentations de code !

Belles notes

Tout ce que vous mettez dans content/notes recevra des annotations approximatives. Cela facilite la reconnaissance des éléments importants à partir des notes.

Les annotations brutes sont contrôlées à l'aide de balises telles que strong , em et strikethrough . Pour générer une nouvelle entrée notes , vous devez d'abord créer le répertoire content/notes . Utilisez ensuite hugo new notes/file-name.md pour générer une note. Ce fichier contiendrait des informations sur la façon d'annoter les éléments avec les balises mentionnées ci-dessus.

Captures d'écran

Configuration du thème

Liste du contenu sur la page d'accueil

La page d'accueil peut être configurée de deux manières différentes. Vous pouvez soit répertorier votre section préférée/la plus importante dans le répertoire content .

Ou placez-y du contenu personnalisé.

Ou vous pouvez faire les deux ! Assurez-vous de créer un fichier content/_index.md contenant un title de propriété à l'intérieur de fromtmatter. Cette propriété title est utile pour le référencement. Exemple:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Liste des blogs, notes, etc.

Afin de créer une liste de contenu sur la page d'accueil, vous devez définir une variable appelée mainSections dans le fichier config.toml . Exemple:

[ params ]
mainSections = [ " posts " ]

Liste du contenu personnalisé

Pour répertorier le contenu personnalisé, placez-le simplement dans content/_index.md avec le frontmatter approprié.

Mise en évidence du code

Par défaut, Hugo n'utiliserait aucune classe. Mais cela ne fonctionnerait pas pour ce thème car certaines fonctionnalités en dépendent.

Vous devez exécuter des classes pour les blocs de code. Voici comment procéder :

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Éléments de menu

Par défaut, il n'y a qu'un seul élément de menu dans le menu supérieur. Pour y ajouter plus d'éléments, il faut définir des éléments de menu dans config.toml . Voici un exemple tiré du config.toml de mon site :

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Titre du site

Le titre du site est contrôlé par les paramètres suivants dans config.toml :

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Rédaction de contenu

Rédaction de notes

Notes est un type spécial codé en dur dans ce thème. Les contenus de ce type recevraient des annotations approximatives (ce qui facilite la gestion des notes).

Générez une page de notes à l'aide de la commande hugo new notes/your-filename.md pour apprendre à utiliser les annotations approximatives dans la page de notes.

L'archétype des notes aimables est inclus.

Frontière

Ce thème utilise du frontmatter pour gérer la description de publication personnalisée et la méta-image pour le référencement. S'il ne trouve pas meta.image et meta.description , il reviendra respectivement à /images/default-meta-image.png et .Summary .

Utilisez ces deux champs en première ligne comme ceci :

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->