Abridge Zola Thème

Jake G May 17, 2022 Modifié: July 21, 2023 #Features #Config
Features (Series)
  1. Code court Showdata
  2. Notation mathématiques
  3. Streamable intégrées
  4. Vimeo intégrées
  5. Youtube intégrées
  6. Contenu riche
  7. Codes courts d'image
  8. Markdown et Style
  9. Blocs de code et thème
  10. Abridge Zola Thème

Un thème Zola rapide, léger et moderne utilisant abridge.css (un framework HTML CSS sémantique léger en classe ). Scores parfait Lighthouse, YellowLabTools et Observatory. Voici une page Zola Themes Benchmarks.

lighthouse

Features

Démarrage rapide

Ce thème nécessite une version 0.17.2 ou plus tard de Zola

git clone https://github.com/jieiku/abridge.git
cd abridge
zola serve
# open http://127.0.0.1:1111/ in the browser

Installation

Le démarrage rapide montre comment exécuter le thème directement. Ensuite, nous utiliserons abridge comme thème pour un NOUVEAU site.

1: Créer un nouveau site zola

zola init mysite
cd mysite

2: Installer abridge

Ajoutez le thème en tant que sous-module git :

git init  # si votre projet est déjà un dépôt git, ignorez cette commande
git submodule add https://github.com/jieiku/abridge.git themes/abridge

Ou clonez le thème dans votre répertoire de thèmes:

git clone https://github.com/jieiku/abridge.git themes/abridge

3: Configuration

Copiez certains fichiers du répertoire du thème vers le répertoire racine de votre projet:

touch templates/.gitkeep
rsync themes/abridge/config.toml config.toml
rsync themes/abridge/content/_index.md content/
rsync themes/abridge/COPY-TO-ROOT-SASS/* sass/
rsync themes/abridge/netlify.toml netlify.toml
rsync themes/abridge/package_abridge.js package_abridge.js
rsync themes/abridge/package.json package.json

Décommentez la ligne de thème dans le fichier racine config.toml de votre projet:

sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml

4: Ajouter du nouveau contenu

Copiez le contenu du répertoire du thème dans votre projet ou créez un nouveau message:

rsync -r themes/abridge/content .

5: Exécuter le projet

Exécutez simplement zola serve dans le chemin racine du projet:

zola serve

Zola démarrera le serveur web de développement, accessible par défaut à http://127.0.0.1:1111.

Les modifications enregistrées seront rechargées en direct dans le navigateur. (appuyez sur ctrl+f5, ou pendant le développement, définissez pwa=false dans config.toml)

Pagination

Vous pouvez définir le nombre d'éléments de la page d'accueil en éditant le fichier content\_index.md et en ajustant paginate_by

Remplacements Sass

Les variables Abridge SASS peuvent être remplacées en éditant le fichier sass\abridge.scss dans le dossier sass racine de votre projet.

Largeur de page

$mw:75%,// largeur maximale

Modes thématiques abrégés

$abridgeMode: "switcher",//valeurs valides: switcher, auto, dark, light

Couleurs et styles

Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base:

$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade

Remplacez ensuite les couleurs individuelles si nécessaire:

/// Couleurs sombres
$f1d: #ccc,// Couleur de police principale
$f2d: #ddd,// En-têtes de couleur de police
$c1d: #111,// Couleur d'arrière-plan primaire
$c2d: #222,// Couleur d'arrière-plan secondaire
...

Icônes sociales de pied de page

Vous devez configurer les icônes sociales que vous envisagez d'utiliser. (rend la taille du fichier CSS plus petite)

Pour simplement les désactiver tous, vous pouvez définir $enable-icons: false (désactive TOUTES les icônes, la navigation, la recherche, etc.)

Sinon, activez uniquement les icônes dont vous avez besoin, par exemple pour le courrier que vous définiriez $icon-mail: true

Vous devez ensuite désactiver toutes les autres icônes que vous n'utilisez pas.

Thème des visites noscript

Si vous avez configuré Abridge pour utiliser le mode de commutation au lieu de auto/dark/light, alors votre site aura un bouton qui permettra au visiteur de basculer le thème.

Si votre visiteur utilise noscript ou un autre module complémentaire de navigateur bloquant Javascript, il sera alors bloqué avec le thème par défaut configuré pour le mode de commutation.

Pour ajuster ce mode, vous devez définir les deux valeurs de configuration suivantes dans abridge.scss ET config.toml:

$switcherDefault: "dark",// mode de commutation nojs par défaut: dark, light (assurez-vous de définir également js_switcher_default dans config.toml)

js_switcher_default = "dark" # mode de commutation nojs par défaut: dark, light (assurez-vous de définir également $switcherDefault dans abridge.scss)

Par défaut, abridge utilise le mode sombre pour le sélecteur, donc à moins que vous ne souhaitiez définir le mode par défaut sur clair pour les visiteurs nojs/noscript, vous n'avez pas à vous soucier de ces paramètres.

Config.toml Configuration

La plupart des options de config.toml sont auto-documentées. (évident entre le nom de la valeur de configuration et les commentaires)

Abridge fonctionnera avec un config.toml barebones car les valeurs par défaut sont fournies dans les fichiers modèles.

Je recommande de copier l'intégralité du fichier config.toml comme indiqué à l'étape 3 car il fournit toutes les valeurs configurables.

Menus du haut et du pied de page

Définissez un champ dans extra avec une clé de menu et menu_footer. Si vous souhaitez que le lien s'ouvre dans un nouvel onglet/navigateur, définissez blank = true. Si un lien doit avoir une barre oblique à la fin de l'URL définie slash = true. (généralement, tous les liens doivent avoir une barre oblique finale, sauf s'il s'agit d'un lien de fichier tel que sitemap.xml)

menu = [
  {url = "about", name = "About", slash = true, blank = false},
  {url = "posts", name = "Posts", slash = true, blank = false},
  {url = "categories", name = "Categories", slash = true, blank = false},
  {url = "tags", name = "Tags", slash = true, blank = false},
]
menu_footer = [
  {url = "about", name = "About", slash = true, blank = false},
  {url = "contact", name = "Contact", slash = true, blank = false},
  {url = "privacy", name = "Privacy", slash = true, blank = false},
  {url = "sitemap.xml", name = "Sitemap", slash = false, blank = true},
]

SEO et balises d’en-tête

Vous pouvez consulter les balises SEO dans la macro principale située dans templates/macros/head.html, toutes les valeurs configurables doivent être dans config.toml sous config.extra ou dans les fichiers de démarque de contenu.

Dans votre fichier de démarque, vous devez définir un titre de moins de 60 caractères et une description entre 80 et 160 caractères. La description est ce qui est affiché dans les résultats de recherche sous le titre de la page. Partout où vous ne définissez pas de description de page, le fichier config.description du site principal sera utilisé à la place.

Vous devez également définir des mots-clés spécifiques à la page, à moins que vos mots-clés définis dans config.toml suffisent, tous les mots-clés que vous ajoutez à la page s'ajoutent à ceux définis dans config.toml, n'ajoutez donc pas ces mêmes mots-clés aux mots-clés de votre page.

Vous pouvez éventuellement également définir une image spécifique à la page pour les résultats de recherche en utilisant page.extra.thumbnail. Les cartes Facebook, Twitter et OpenGraph sont prises en charge (image et description automatiques pour les liens publiés). OpenGraph recommande 1200 x 630 (1,9:1). Twitter recommande 2:1 pour les grands et 1:1 pour les petits. Si vous ne définissez pas de miniature spécifique à la page, la bannière définie dans config.toml sera utilisée à la place.

Faire référence à overview-images à titre d'exemple:

+++
title = "Codes courts d'image"
description = "Les images peuvent être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais l'utilisation d'un shortcode empêche CLS en définissant explicitement la largeur et la hauteur."
date = 2021-05-19
draft = false

[taxonomies]
tags = ["Features","Shortcodes","Images"]
[extra]
toc = true
keywords = "Image, Markdown, Shortcodes, Swap"
thumbnail = "ferris-gesture.png"
+++

Notation mathématique KaTeX

KaTeX peut être utilisé pour afficher des mathématiques complexes, il s'agit d'une « composition mathématique rapide pour le Web ».

Vous pouvez voir une démo sur cette page.

Pour de meilleures performances, je recommande d'activer uniquement les mathématiques sur une base par page dans vos fichiers post.md, au lieu de dans votre fichier config.toml principal.

PWA, application Web progressive

Le thème Abridge prend en charge PWA. Vous pouvez installer l’intégralité du site en tant qu’application et le faire fonctionner hors ligne. Pour l'essayer, utilisez simplement Google Chrome ou votre téléphone et allez ici: abridge.netlify.app

Si vous utilisez Chrome sur un ordinateur de bureau, regardez à la fin de la barre d'adresse le bouton d'installation. Sur Android, vous devriez obtenir une fenêtre contextuelle à installer, vous pouvez également installer à partir du menu à 3 points dans le coin supérieur droit. Une fois la PWA installée, vous pouvez vous déconnecter complètement et vous pourrez toujours parcourir ou rechercher sur le site!

Pour l'utiliser dans votre propre instance, vous devrez éditer static/sw.js pour la liste des fichiers à mettre en cache. Techniquement, vous n'avez pas besoin de modifier sw.js, mais si même un seul fichier est manquant dans la liste de cache, la liste ne sera pas pré-mise en cache, elle ne sera donc mise en cache que pendant votre navigation.

Il existe un script npm pour générer la liste de cache de fichiers et la minification npm run abridge. Mon fichier netlify.toml exécute automatiquement ce script npm lors du déploiement du site, donc tout est automatique. Si Zola était capable de modéliser un fichier js, il serait peut-être possible de générer dynamiquement la liste des fichiers cache lors de la construction.

La fonctionnalité PWA est également facile à désactiver en définissant simplement pwa = false dans config.toml

Optimisation des performances

Fichiers Javascript

Tout javascript peut être désactivé dans config.toml:

build_search_index = false

js_bundle = false
js_copycode = false
js_email_encode = false
js_prestyle = false
js_switcher = false

Voici les fichiers javascript utilisés par Abridge :

option js_bundle

js_bundle lorsqu'il est défini sur true sert un fichier bundle au lieu de tous les fichiers js individuels.

Tous les bundles nécessaires sont générés dynamiquement par le script de nœud package_abridge.js

Le script de nœud analysera votre config.toml pour rechercher les valeurs de configuration pertinentes, puis, en fonction de votre config.tomnl, générera les bundles requis.

Tout ce qui est nécessaire est zola build && npm run abridge.

Changer de bibliothèque de recherche

En plus d'elasticlunr, abridge prend également en charge tinysearch et stork.

tinysearch démo: https://jieiku.github.io/abridge-tinysearch/

stork démo: https://jieiku.github.io/abridge-stork/

Pour utiliser tinysearch/stork, des étapes supplémentaires sont nécessaires.

Basculer vers tinysearch:

Vous devez d’abord installer tinysearch pour pouvoir créer l’index:

git clone https://github.com/tinysearch/tinysearch
cd tinysearch
cargo build --release
sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch
exit # recharger l'environnement shell

Basculer Abridge vers tinysearch:

npm run tinysearch
zola build
tinysearch --optimize --path static public/data_tinysearch/index.html
# zola serve

Basculer vers stork:

Vous devez d’abord installer stork pour pouvoir construire l’index:

git clone https://github.com/jameslittle230/stork
cd stork
cargo build --release
sudo cp ./target/release/stork /usr/local/bin/stork
exit # recharger l'environnement shell

Remplacer Abréger par Cigogne:

npm run stork
zola build
stork build --input public/data_stork/index.html --output static/stork.st
# zola serve

Basculer vers elasticlunr:

npm run elasticlunr

Basculer vers nosearch:

npm run nosearch

Changeur de thème

Le sélecteur de thème s'appuie sur javascript pour fonctionner, il applique la classe .light au documentElement racine. Le fichier qui gère cela (theme.js) est petit et optimisé et c'est le premier fichier chargé dans la tête, donc l'impact sur les performances est minime. Sans le sélecteur de thème, vous pouvez toujours utiliser le thème automatique qui utilise les paramètres de préférence du navigateur/système d'exploitation. Vous pouvez même installer un plugin Firefox pour basculer rapidement entre les deux.

Optimiser les fichiers PNG/ICO

Bon outil pour générer des icônes masquables pour manifest.json: maskable.app

Tous les fichiers png peuvent être optimisés à l'aide de oxipng:

cd static
oxipng -o max --strip all -a -Z *.png

Avec des écrans plus grands et une plus grande densité de pixels devenant monnaie courante, c'est probablement une bonne idée d'utiliser au moins un peu de compression avec perte. Par exemple, vous pouvez utiliser pngquant avec une qualité de 93% et vous obtiendrez souvent des images environ la moitié de la taille. Comprenez que pngquant est cumulatif, vous devez donc conserver vos images originales quelque part et n'utiliser pngquant qu'une seule fois par image, si vous l'utilisez encore et encore sur la même image, vous réduirez la qualité de l'image à chaque fois. Utilisez toujours oxipng par la suite, l'oxipng est sans perte.

pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png
oxipng -o max --strip all -a -Z *.png

leanify peut compresser davantage pour les fichiers png et ico:

git clone https://github.com/JayXon/Leanify
cd Leanify
make
sudo cp leanify /usr/local/bin/leanify
exit  #lancer un nouveau terminal
leanify -i 7777 *.png
leanify -i 7777 *.ico

Contenu pré-gzip/brotli

Si vous diffusez votre site avec nginx, vous pouvez pré-gzipper votre contenu.

(Netlify brotli compresse automatiquement vos fichiers, aucun travail supplémentaire n'est requis.)

Configurez d’abord nginx:

sudo nano /etc/nginx/nginx.conf

gzip on;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
#gzip_proxied any;
gzip_comp_level 9;
gzip_buffers 64 16k;
#gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml application/xhtml+xml application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;
#gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Ensuite, vous pouvez gzip/brotli vos fichiers:

zola build
find ~/.dev/abridge/public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip --best -k -f {} \+ -exec brotli --best -f {} \;
rsync -zvrh ~/.dev/abridge/public/ web:/var/www/abridge

Nginx n'est pas livré par défaut avec le support brotli, mais l'ajouter n'a pas été difficile.

Series
  1. Code court Showdata
    2. More...
  2. Notation mathématiques
  3. Streamable intégrées
  4. Vimeo intégrées
  5. Youtube intégrées
  6. Contenu riche
  7. Codes courts d'image
  8. Markdown et Style
  9. Blocs de code et thème
  10. Abridge Zola Thème
Indice
Features
Démarrage rapide
Installation
- 1: Créer un nouveau site zola
- 2: Installer abridge
- 3: Configuration
- 4: Ajouter du nouveau contenu
- 5: Exécuter le projet
Pagination
Remplacements Sass
- Largeur de page
- Modes thématiques abrégés
- Couleurs et styles
- Icônes sociales de pied de page
- Thème des visites noscript
Config.toml Configuration
- Menus du haut et du pied de page
- SEO et balises d’en-tête
- Notation mathématique KaTeX
- PWA, application Web progressive
Optimisation des performances
- Fichiers Javascript
- Optimiser les fichiers PNG/ICO
- Contenu pré-gzip/brotli