r1d39 - GoHugo et After-Dark

After-Dark (dans le logiciel) est une série de logiciels économiseur d’écran lancée par Berkeley Systems en 1989 pour le Mac. L’économiseur d’écran le plus connu était l’icônique Flying Toasters conçu par Jack Eastman.

(hack-memo à imaginer pour les enfants : animation css des grille pains volants)

Dans le contexte de mon apprentissage des générateurs de site statique, After-Dark est un thème simple et robuste assemblé par Josh Habdas, nomade numérique à Bali. C’est un thème construit sur hack.css et que j’ai choisi pour sa lisibilité de rendu brut très proche du code markdown. Un thème que je conserverai un certain temps dans ce nouveau “ tipi numérique ” motorisé par GoHugo.

Présentation After-Dark

Fonctionnalités

Démo & Tutoriel

Rendez-vous sur Hack Cabin pour un exemple de production à partir duquel l’architecture du site peut être recréée en utilisant un guide pas-à-pas. Et si vous cherchez des exemples, regardez-en quelques autres pour inspiration.

Si vous démarrez

Installez Hugo et elinks (si vous n’avez jamais essayé un navigateur terminal) sur votre machine. Les instructions pour installer les deux en utilisant Homebrew sur macOS :

brew install hugo elinks

Puis lancez le script d’installation situé dans bin/install.sh, ou collez simplement ça dans un terminal et pressez Entrée :

curl -s https://raw.githubusercontent.com/comfusion/after-dark/master/bin/install.sh | sh

L’installation devrait être terminée en quelques secondes.

Personnalisation

Section Menu

After Dark utilise la Section Menu pour Blogueurs Paresseux d’Hugo pour produire une navigation globale du site si c’est activé.

Pour personnaliser le menu, mettez à jour les réglages dans config.toml comme suit :

[[menu.main]]
  name = "Accueil"
  weight = 1
  identifier = "accueil"
  url = "/"
[[menu.main]]
  name = "Posts"
  weight = 2
  identifier = "post"
  url = "/post/"

Ou mettez à jour le menu en utilisant le front matter à partir de vos pages :

menu = "main"
weight = 3

Chargement Paresseux Intelligent

Le chargement paresseux met la priorité sur quand et comment les images et plus encore seront téléchargées, améliorant la performance perçue et réduisant le temps de chargement des pages. Si c’est activé, le chargement paresseux fonctionnera automatiquement. Aucune configuration JavaScript n’est nécessaire.

Ce qui le rend Intelligent ? Si aucun contenu en chargement paresseux n’est détecté sur une page quand le site est généré, la fonctionnalité ne sera pas activée et aucun téléchargement supplémentaire ne se produira.

Pour activer le chargement paresseux avec lazysizes, ajoutez lazyload à l’attribut de classe de vos images/iframes associé à un attribut data-src et/ou data-srcset :

<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">

<!-- responsive avec calcul automatique des tailles -->
<img
  data-sizes="auto"
  data-src="image2.jpg"
  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
  class="lazyload">

<!-- exemple iframe -->
<iframe frameborder="0"
  class="lazyload"
  allowfullscreen
  data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Afin de vous aider à démarrer, After Dark inclut un Shortcode tirant profit de cette fonctionnalité, vous permettant de créer facilement des éléments figure chargés paresseusement dans votre contenu markdown.

De l’info complémentaire et des exemples, incluant comment régler et utiliser LQIP (Low-Quality Image Placeholders), sont disponibles sur le repo lazysizes sur GitHub.

Contenu en Rapport

Valorisez davantage votre contenu auprès de vos visiteurs. En offrant à vos lecteurs plus de contenus pertinents, vous pouvez augmenter les vues, le temps consacré à votre site et la fidélité du lecteur.

Le contenu connexe contribue au contenu à travers les sections en associant les marqueurs de taxonomie. Si After Dark trouve un contenu connexe, il affichera automatiquement une liste de liens vers ce contenu dans un ordre chronologique inversée en-dessous du sous-titre du contenu de votre publication.

Par défaut, After Dark affiche jusqu’à 7 éléments par titre avec leurs temps de lecture. Vous pouvez limiter le nombre d’éléments affichés en définissant le paramètre facultatif suivant dans la section [params] de votre fichier config.toml :

related_content_limit = 5

Table des Matières

Aidez les utilisateurs à localiser et à partager des informations sur votre site. En fournissant une TDM, les utilisateurs passent moins de temps à défiler pour localiser des informations dans des documents plus importants et sont plus susceptibles d’accéder aux informations spécifiques et approfondies sur une page.

Pour générer automatiquement une TDM pour un post basée sur l’outline de page, ajoutez ce qui suit au front matter de votre post :

toc = true

Pour cacher la Table des matières, réglez toc = false, ou enlevez simplement le réglage sur le front matter du post.

After Dark utlise les éléments HTML5 details et summary pour fournir une TDM qui ne requiert pas l’usage de CSS ou JavaScript pour fonctionner.

Quand une page est chargée la première fois, la TDM sera repliée, ainsi elle n’encombre pas la page. Une fois étendue, sélectionner un item dans la TDM amènera un défilement tout en douceur vers cette section dans le document, mettra en surbrillance le titre de section et mettra à jour la barre d’endroit du navigateur pour un lien profond et un support du bouton retour.

Open Graph

After Dark tire profit des tags Open Graph en utilisant le template interne non-documenté pour parvenir à des cartes de partage riches pour Facebook et d’autres réseaux sociaux, comme affiché ici :

Pour créer une carte de partage social comme celle montrée au-dessus, spécifiez author dans config.toml et, remplacez-la à partir de votre front matter comme suit :

title: Devenez un Nomade Digital à Bali : The Lost Guide
description: Tout ce que vous devez savoir pour devenir un Nomade Digital à Bali.
author: After Dark
date: 2017-02-02T11:57:24+08:00
publishdate: 2017-01-28T02:31:22+08:00
images: [
  https://source.unsplash.com/-09QE4q0ezw/2000x1322
]

Pourquoi utiliser la notation en array pour une image ? Le Protocole Open Graph supporte les arrays et les utilisateurs pourraient vouloir augmenter les templates internes Hugo pour faire ainsi.

Pour configurer les images Open Graph sur tout le site pour utilisation comme ressorts pour les posts qui ne spécifient pas leurs propres images open graph, ajoutez un array d’URLs à la section [params] dans le fichier config.toml :

images = [
  "https://source.unsplash.com/-09QE4q0ezw/2000x1322" # Image par Défaut Open Graph pour le site
]

Voir Source Unsplash pour les options de configuration d’images.

Note : Bien que ce puisse être possible, After Dark ne supporte pas les liens relatifs vers les images. Si vous souhaitez disposer de cette fonctionnalité, ouvrez une nouvelle issue.

Optimisation Moteur de Recherche

After Dark est construit avec le SEO en tête. Schéma de Données Structurées et autres meta sont appliqués pour donner aux robots ce qu’ils veulent, automatiquement et sans configuration nécessaire.

Le paramétrage par défaut assure que votre site Hugo-After-Dark se classera bien dans les SERPs et empêchera les crawlers web d’indexer du contenu non désirable. Affinez vos réglages “ search ” en utilisant les options suivantes disponibles.

Vérification Webmaster

Vérifiez votre site avec plusieurs outils de webmaster comme Google, Bing, Alexa et Yandex. Pour autoriser la vérification de votre site avec tout ou partie de de ces fournisseurs, ajoutez ce qui suit à votre config.toml et remplissez avec leurs valeurs respectives :

[params.seo.webmaster_verifications]
  google = "" # Optionnel, Google verification code
  bing = "" # Optionnel, Bing verification code
  alexa = "" # Optionnel, Alexa verification code
  yandex = "" # Optionnel, Yandex verification code

Note : La revendication de votre site avec Alexa a été retirée en may 2016. Cependant, la vérification Alexa a été ajoutée comme une commodité pour les sites existants migrant vers After Dark.

Descriptions Meta

Les titres de page bien conçus aident à attirer l’attention sur les pages de résultats de recherche. Et les méta-descriptions fournissent un résumé du contenu et pourquoi il est pertinent pour le lecteur, la conduite des clics.

Afin d’ajouter une description meta à vos pages et posts, ajoutez description au front matter :

description = "Tout ce que vous devez savoir pour devenir un Nomade Digital à Bali."

En plus d’apparaître dans les moteurs de recherche, les descriptions meta apparaissent aussi sur les pages individuelles et dans les résumés de contenu, ajoutant de la transparence sur leur façon d’apparaître sur vos pages dans le “ search ”.

Si aucune description personnalisée n’est fournie, After Dark utilisera la description fournie dans config.toml. Apprenez-en plus en lisant Comment créer vos descriptions meta.

Modification de la Date

Aidez les agents utilisateur à savoir quand les posts ont été modifiés pour la dernière fois. Pour faire ainsi, ajoutez publishdate au front matter de votre page et mettez à jour date à chaque fois que vous faites une mise à jour sur un post.

Les mises à jour seront rendues visibles aux lecteurs en mettant le contenu en haut dans votre page et dans les listes de posts, et en utilisant des appels visibles sur les résumés de contenu. Pour les robots, faire une telle modification provoquera une mise à jour automatique des “ Schema Structured Data ” et feeds Web, tout comme le réglage lastmod dans votre fichier sitemap.xml.

Vous pouvez être spécifique et utiliser un datetime (avec décalage horaire) comme suit :

date = "2017-02-02T01:20:56-06:00"
publishdate = "2016-11-21T10:32:33+08:00"

Ou moins spécifique et utiliser simplement les dates :

date = "2017-02-02"
publishdate = "2016-11-21"

En plus de date et publishdate, il est également possible de définir une date de péremption. Les messages expirés disparaîtront automatiquement lorsque le site sera construit, mais le contenu sera conservé. Pour le contenu futur ou passé pour expiration, définissez le champ expirydate dans le front matter.

Blocage Index

Le fait qu’une page apparaisse dans votre sitemap.xml ne signifie pas que vous souhaitez la faire apparaître dans un SERP. Les exemples de pages qui apparaîtront dans votre fichier sitemap.xml que vous ne voulez généralement pas indexer par les robots d’exploration incluent les pages d’erreur, les pages de recherche, les pages légales et les pages qui contiennent simplement des résumés d’autres pages.

Bien qu’il soit possible de bloquer l’indexation de la recherche à partir d’un fichier robots.txt, After-Dark permet de bloquer l’indexation des pages en utilisant également la configuration Hugo. Par défaut, les types de page suivants seront bloqués :

• Pages Section (par ex. les listes de posts)
• Pages Taxonomie (par ex. les listes de catégories et tags)
• Pages de définitions de taxonomie (par ex. les Pages de listes de taxonomies)

Pour personnaliser le blocage par défaut, configurez le réglage noindex_kinds dans la section [params] de votre fichier config.toml.

Par exemple, si vous voulez activer le crawling pour les sections apparaissant dans Section Menu, ajoutez ce qui suit à vore fichier de configuration :

[params]
  noindex_kinds = [
    "taxonomy",
    "taxonomyTerm"
  ]

Pour bloquer les pages individuelles de l’indexation, ajoutez noindex au front matter de votre page et réglez la valeur sur true, comme :

noindex: true

Et pour finir, si vous utilisez Hugo v0.18 ou une version plus récente, vous pouvez ajouter un fichier _index.md avec le front matter noindex afin de contrôler l’indexation des layouts de listes pour les sections spécifiques :

├── content
│   ├── modules
│   │   ├── starry-night.md
│   │   └── toilettes-volantes.md
│   └── news
│       ├── _index.md
│       └── retour-flying-toasters.md

Pour en savoir plus sur la façon dont les crawlers utilisent cette fonctionnalité, lisez Bloquer l’indexation de la recherche avec l’instruction “ noindex ”.

Types de Liens

Pour le contenu contextuel découpé sur plusieurs pages dans une séquence, After Dark supporte l’utilisation des réglages prev et next dans votre front matter. Utilisez-les pour fournir des relations sémantiques entre les pages dans un article segmenté ou une série ou un LiveBlogPosting.

prev: /series/apprendre-a-coder/partie-un/
next: /series/apprendre-a-coder/partie-trois/

Les “ Link Types ” sont communément affichés en haut de la page dans les browsers terminal comme moyens auxiliaires de navigation. Ils peuvent aussi aider les crawlers à mieux comprendre les relations dans votre contenu.

Vous pouvez en savoir plus sur les link types et comment personnaliser les taxonomies Hugo.

Mots-clé Meta

Les mots-clés meta offrent un détail sémantique aaux crawlers concernant l’importance du sujet de votre contenu. Les mots-clés meta sont générés automatiquement pour les pages avec les tags utilisés pour cette page, et pour les autres pages utilisant la taxonomie des catégories du site. Les mots-clés et phrases-clés peuvent se personnaliser en réglant une array keywords dans votre front matter :

keywords = [
  "transformation digitale"
  "developpement web",
  "digital marketing",
  "social media",
  "link building"
]

Bien qu’ils ne soient pas considérés comme pertinents pour certains robots d’indexation, les mots-clés peuvent être utiles pour documenter les termes de recherche cibles à utiliser dans la publicité en ligne PPC et fournir une valeur sémantique à vos pages.

Contrôlez mieux la conversion de markdown en HTML. En modifiant les paramètres du processeur de markdown, vous pouvez profiter des fonctionnalités de Blackfriday non activées par défaut.

Pour personnaliser l’output de conversion, ajoutez une section [blackfriday] au fichier config.toml de votre site comme suit :

[blackfriday]
  hrefTargetBlank = true
  fractions = false

Les remplacements du processus par défaut du thème Markdown sont disponibles à partir du front matter, ce qui vous permet de contrôler à un niveau page par page.

Regardez la documentation Hugo pour des options de configuration supplémentaires.

Shortcodes

Gardez votre contenu DRY et augmentez la cohérence thématique sur tout votre site. Pour aider à atteindre cet objectif, Hugo fournit des Shortcodes.

Les shortcodes sont très puissants et peuvent être utilisés pour parvenir à des fonctionnalités qui ne pourraient être disponibles autrement dans le processeur markdown. Hugo dispose de shortcodes intégrés que vous pouvez utiliser sur votre site et le thème After Dark en fournit aussi d’autres.

Voici le shortcode blockquote fourni par After Dark :

<blockquote {{ with .Get "class" }}class="{{ . }}"{{ end }} {{ with .Get "citelink" }}cite="{{ . }}"{{ end }}>
  {{ .Inner }}
  {{ with .Get "citelink" }}
    <cite><a target="_blank" href="{{ . }}">{{ $.Get "cite" }}</a></cite>
  {{ else }}
    <cite>{{ .Get "cite" }}</cite>
  {{ end }}
</blockquote>

Utilisez-le dans vos fichiers markdown comme suit :

{{< blockquote cite="Bitly" citelink="https://bitly.is/2mkxskj" >}}
  <p>Quand vous créez votre propre Domaine Raccourci à Votre Marque, vous pouvez vous attendre à une augmentation de 34% de CTR comparé aux liens standards bit.ly.</p>
{{< /blockquote >}}

Voici les shortcodes supplémentaires fournis par le thème qui sont à votre disposition :

• figure - Similaire à celui intégré dans Hugo, mais avec le Chargement Paresseux Intelligent, un titre de miniature ajusté et un texte de miniature plus petit.

Sont aussi inclus un certain nombre de shortcodes pour les composants hackcss qui fonctionnent sur les variantes de thème After-Dark :

• hackcss-alert - Fournit des boîtes d’alerte thématiques. Voir hackcss-alert.html pour les notes d’usage.
• hackcss-button - Fournit des boutons thématiques. Voir hackcss-button.html pour les notes d’usage.
• hackcss-buttongroup - Permet aux boutons d’être groupés ensemble. Voir hackcss-buttongroup.html pour les notes d’usage.
• hackcss-card - Fournit un élément de carte dans le thème. Voir hackcss-card.html pour les notes d’usage.
• hackcss-progress - Fournit un compteur de progrès dans le thème. Voir hackcss-progress.html pour les notes d’usage.
• hackcss-throbber - Fournit un indicateur de chargement dans le thème. Voir hackcss-throbber.html pour les notes d’usage.

Pour créer vos propres shortcodes personnalisés, ajoutez un dossier layouts/shortcodes sur votre site, placez vos shortcodes dedeans et commencez à les utiliser dans votre contenu markdown.

La référence dans la doc Hugo pour les instructions d’usage d’un shortcode.

Surbrillance de Syntaxe

Fournissez une expérience améliorée quand vous partagez des échantillons de code sur votre site. After Dark fournit un support en opt-in pour la surbrillance de code en utilisant les jolis thèmes One Dark et One Light de Pygments.

Pour régler la surbrillance de syntaxe pour votre site After Dark :

• Suivez les instructions d’installation Pygments d’Hugo.
• Ouvrez le dossier themes/after-dark et lancez npm i (suppose que NPM soit installé).
• Puis ouvrez ./node_modules/atom-one-pygments et npm i.
• Une fois les dépendances installées, lancez npm run build dans le module pour générer les feuilles de style vers le dossier ./dist du module.

Puis choisissez soit ./dist/light.css ou dark.css selon votre Variante de Thème et copiez les contenus du fichier dans votre fichier Styles Personnalisés.

Une fois configuré, la surbrillance de syntaxe avec Pygments peut être activée en utilisant le shortcode highlight intégré dans Hugo. Référence à la doc de Surbrillance de Syntaxe pour les instructions d’usage.

Pas entièrement satisfait ? Atom One Pygments est construit comme un thème, rendant possible la modification du résultat de la surbrillance de syntaxe. Fabriquez la vôtre. Regardez le README pour plus de détails.

Personnalisation

After Dark utilise hack.css pour styliser automatiquement votre markup, vous donnant accès aux grilles flexbox, aux variantes de thème clair/foncé, et d’autres composants pré-construits. Utilisez-les pour créer de nouvelles sections tirant avantage des modèles block. Options de personnalisation supplémentaires listées ci-dessous.

Styles personnalisés

Pour ajouter vos propres styles au thème ou remplacer la CSS existante sans avoir à modifier les fichiers du thème, faites ce qui suit :

1. Créez un fichier critical-custom.css dans votre dossier du site layouts/partials.
2. Ajoutez vos styles personnalisés dans le fichier.

Exemple de personnalisation de fichier :

/* override theme defaults */
.muted {
  color: rgba(255, 255, 255, 0.5);
}
/* custom styles */
figure {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
figure img {
  max-width: 80%;
}
figure a {
  border-bottom: none !important;
}
figure a:hover {
  background-color: inherit !important;
}

Vos personnalisations devront être placées dans la ligne à l’intérieur de la section head de chaque page, remplaçant les styles existants si spécifiés.

Variantes de Thème

hack.css fournit quelques variantes que vous pourriez utiliser au lieu du thème par défaut After Dark. Pour télécharger les variantes, faites un npm i à partir de /themes/after-dark/ (suppose que vous ayez installé NPM).

Une fois téléchargé, ouvrez le dossier node_modules/hack/dist et remplacez les contenus de critical-vendor.css avec la CSS que vous souhaitez utiliser, en mettant à jour le réglage theme_variant dans le fichier de config du site comme suit :

theme_variant = "standard dark-grey"

Pourquoi ne pas utiliser des fichiers externes CSS ? After Dark est optimisé pour la vitesse, et limite par conséquent le nombre de requêtes HTTP à chaque fois que cela est possible. Les concessions pour les CSS externes pour le support HTTP/2 Push State seront produites sur demande.

Une fois le fichier du fournisseur mis à jour, ouvrez vos outils de développement préférés et testez les modifications en prévisualisant votre site sur le mobile, la tablette et le bureau à différentes résolutions et orientations d’affichage, en faisant les réglages nécessaires sur critical-theme.css.

Et pour finir, ajustez si besoin vos Styles Personnalisés, votre page 404 et /meta/theme-color.

Favicon

After Dark est livré pré-installé avec une toute petite favicon SVG embarquée dans chaque page. Pour la personnaliser, créez un fichier appelé favicon.html sous /layouts/partials dans votre site et placez un lien icon à l’intérieur.

Pourquoi SVG ? Simple. Les favicons ont une taille de fichier plus petite et sont plus flexibles. Les favicons SVG peuvent être stylées avec CSS ou même animées avec JavaScript. Firefox les supporte depuis la Version 41, et vous pouvez prévisualiser l’icône actuelle sur bien d’autres navigateurs.

Licence du thème

Le thème After-Dark est sous Copyright © 2016-2017 Josh Habdas josh@habd.as.
Vous pouvez le redistribuer ou le modifier sous les termes de la Licence “ Do What The Fuck You Want To Public License ”, Version 2,
telle que publiée par Sam Hocevar.

Conclusion

Un magnifique thème à bricoler et à prescrire à tous les enfants de hackers faisant leurs premiers pas dans le code.