diff options
Diffstat (limited to 'content')
34 files changed, 1002 insertions, 343 deletions
diff --git a/content/blog/_index.fr.md b/content/blog/_index.fr.md deleted file mode 100644 index 0b72ce0..0000000 --- a/content/blog/_index.fr.md +++ /dev/null @@ -1,5 +0,0 @@ -+++ -template = "index.html" -paginate_by = 3 -sort_by = "date" -+++ diff --git a/content/blog/_index.md b/content/blog/_index.md deleted file mode 100644 index 0b72ce0..0000000 --- a/content/blog/_index.md +++ /dev/null @@ -1,5 +0,0 @@ -+++ -template = "index.html" -paginate_by = 3 -sort_by = "date" -+++ diff --git a/content/blog/blog-section.fr.md b/content/blog/blog-section.fr.md deleted file mode 100644 index 6c1fe97..0000000 --- a/content/blog/blog-section.fr.md +++ /dev/null @@ -1,29 +0,0 @@ -+++ -title = "Blog Section" -date = 2021-05-04 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -Vous pouvez placer votre contenu dans content/blog/ au lieu de content/ cela fera des URL de publication example.com/blog/post-title -<!-- more --> -Dans le répertoire du blog, vous verrez le _index.md: - -```md -+++ -template = "index.html" -paginate_by = 3 -sort_by = "date" -+++ -``` - -Au lieu de index.html, vous pouvez également spécifier archive.html, les deux modèles prennent en charge les sections: - -```md -+++ -template = "archive.html" -+++ -``` diff --git a/content/blog/blog-section.md b/content/blog/blog-section.md deleted file mode 100644 index 71bb0f5..0000000 --- a/content/blog/blog-section.md +++ /dev/null @@ -1,29 +0,0 @@ -+++ -title = "Blog Section" -date = 2021-05-04 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -You can place your content in content/blog/ instead of content/ this will make post urls example.com/blog/post-title -<!-- more --> -In the blog directory you will see the _index.md: - -```md -+++ -template = "index.html" -paginate_by = 3 -sort_by = "date" -+++ -``` - -Instead of index.html you can also specify archive.html, both templates support sections: - -```md -+++ -template = "archive.html" -+++ -``` diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md deleted file mode 100644 index 388ff69..0000000 --- a/content/overview-abridge.fr.md +++ /dev/null @@ -1,65 +0,0 @@ -+++ -title = "Abridge Zola Thème" -date = 2022-05-17 -updated = 2023-07-21 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -Abridge est un thème Zola rapide et léger utilisant du HTML sémantique, seulement ~6kb css avant les icônes svg et la coloration syntaxique, pas de JS obligatoire, et des scores parfaits [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Voici une page [de références des thèmes Zola](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md). -<!-- more --> -Pour une configuration rapide, copiez le fichier config.toml du thème abrégé à la racine de votre site zola, cela vous donnera une configuration de base avec toutes les valeurs de configuration utilisées. - -Vous pouvez ensuite modifier ou commenter les valeurs de ce fichier si nécessaire. - -Vous devez également décommenter la ligne #theme = "abridge" dans votre fichier racine zola config.toml. Cela indique à votre site racine zola d'utiliser le thème abrégé dans le dossier des thèmes. - -## Pagination - -Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `content\_index.md` le fichier et en ajustant `paginate_by = 3` - -## Sass Overrides - -Les variables SCSS abrégées peuvent être remplacées en modifiant `sass\abridge.scss` fichier dans le dossier sass racine de votre projet. - -### Page Width - -```scss -$mw:75%,// largeur maximale -``` - -### Abridge Theme Modes - -```scss -$abridgeMode: "switcher",//valeurs valides : switcher, auto, dark, light -``` - -### Colors and Styles - -Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base: -```scss -$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade -``` - -Remplacez ensuite les couleurs individuelles si nécessaire: -```scss -/// Dark Colors -$f1d: #ccc,// Font Color Primary -$f2d: #ddd,// Font Color Headers -$c1d: #111,// Background Color Primary -$c2d: #222,// Background Color Secondary -... -``` - -### Footer Social Icons - -Vous devez configurer les icônes sociales que vous prévoyez d'utiliser. (rend la taille du fichier css plus petite) - -Pour les désactiver tous simplement, vous pouvez définir `$enable-icons: false` - -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 icônes que vous n'utilisez pas. diff --git a/content/overview-abridge.md b/content/overview-abridge.md deleted file mode 100644 index e3f0b58..0000000 --- a/content/overview-abridge.md +++ /dev/null @@ -1,65 +0,0 @@ -+++ -title = "Abridge Zola Theme" -date = 2022-05-17 -updated = 2023-07-21 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page. -<!-- more --> -For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used. - -You can then edit or comment out the values in this file as necessary. - -You should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder. - -## Pagination - -You can set the number of items that appear on the home page by editing `content\_index.md` file and adjusting `paginate_by = 3` - -## Sass Overrides - -Abridge SCSS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder. - -### Page Width - -```scss -$mw:75%,// max-width -``` - -### Abridge Theme Modes - -```scss -$abridgeMode: "switcher",//valid values: switcher, auto, dark, light -``` - -### Colors and Styles - -You can specify which color template you want to use as a base: -```scss -$color: "orange",// color template to use/override: orange, blue, blueshade -``` - -Then override individual colors as needed: -```scss -/// Dark Colors -$f1d: #ccc,// Font Color Primary -$f2d: #ddd,// Font Color Headers -$c1d: #111,// Background Color Primary -$c2d: #222,// Background Color Secondary -... -``` - -### Footer Social Icons - -You should configure which social icons you plan to use. (makes the css file size smaller) - -To simply turn them all off you can set `$enable-icons: false` - -Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true` - -You should then disable all the icons that you do not use. diff --git a/content/overview-abridge/index.fr.md b/content/overview-abridge/index.fr.md new file mode 100644 index 0000000..8e70eef --- /dev/null +++ b/content/overview-abridge/index.fr.md @@ -0,0 +1,452 @@ ++++ +title = "Abridge Zola Thème" +description = "Abridge est un thème Zola rapide et léger utilisant du HTML sémantique, du CSS léger de classe abridge.css et No Mandatory JS." +date = 2022-05-17 +updated = 2023-07-21 +draft = false + +[taxonomies] +tags = ["Features","Config"] +[extra] +toc = true ++++ + +A fast, lightweight, and modern [Zola](https://getzola.org) theme utilizing [abridge.css](https://github.com/Jieiku/abridge.css) (a class-light semantic HTML CSS Framework). Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page. + +Un thème [Zola](https://getzola.org) rapide, léger et moderne utilisant [abridge.css](https://github.com/Jieiku/abridge.css) (un framework HTML CSS sémantique léger en classe ). Scores parfait [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app). Voici une page [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md). +<!-- more --> + + + +## Features + +- [X] Scores parfait [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) +- [X] [Prise en charge des PWA](#pwa-application-web-progressive) (Application Web progressive). +- [X] Tout JavaScript peut être [entièrement désactivé](https://abridge.netlify.app/overview-abridge/#javascript-files). +- [X] Thèmes sombre, clair, automatique et Switcher. (les couleurs peuvent être personnalisées, variables CSS) +- [X] Code [surlignage de la syntaxe](https://abridge.netlify.app/overview-code-blocks/). (les couleurs peuvent être personnalisées, variables CSS) +- [X] Blocs de code numérotés avec [mise en évidence des lignes](https://abridge.netlify.app/overview-code-blocks/#toml). +- [X] Prise en charge multilingue. +- [X] Aide à la recherche. (elasticlunr, tinysearch, cigogne) +- [X] Suggestions de recherche touches de navigation, focus `/`, déplacement `flèche`, sélection `entrée`, fermeture `évasion`. +- [X] Page des résultats de recherche, tapez la requête de recherche, puis appuyez sur `Entrée` ou `cliquez` sur l'icône du bouton de recherche. +- [X] [SEO](#seo-et-balises-d-en-tete) soutien. (Optimisation du moteur de recherche) +- [X] [Pagination](#pagination) avec paginateur numéroté sur index. +- [X] Liens vers les articles précédents et suivants basés sur le titre au bas de l'article. +- [X] Table des matières dans la page Index (liens facultatifs cliquables) +- [X] Blocage des messages récents. (Facultatif) +- [X] Bouton Retour en haut. (utilise uniquement CSS) +- [X] Bouton de copie des blocs de code. +- [X] Lien d’e-mail dans l’obscurcissement du pied de page. (anti-spam) +- [X] [KaTeX](https://katex.org/) soutien. +- [X] [Page d'archives](https://abridge.netlify.app/archive/). +- [x] [Mots clés](https://abridge.netlify.app/tags/). +- [x] Catégories. (similaire aux Tags, désactivés/commentés par défaut) +- [x] Liens vers les icônes sociales dans le pied de page. +- [X] Conception réactive. (mobile d'abord) +- [X] Vidéo Shortcodes: [Youtube](https://abridge.netlify.app/overview-embed-youtube/), [Vimeo](https://abridge.netlify.app/overview-embed-vimeo/), [Streamable](https://abridge.netlify.app/overview-embed-streamable/). +- [X] Médias Shortcodes: [video](https://abridge.netlify.app/overview-rich-content/#video), [img](https://abridge.netlify.app/overview-images/#img-shortcode), [imgswap](https://abridge.netlify.app/overview-images/#imgswap-shortcode), [image](https://abridge.netlify.app/overview-rich-content/#image), [gif](https://abridge.netlify.app/overview-rich-content/#gif), [audio](https://abridge.netlify.app/overview-rich-content/#audio). +- [X] Autre Shortcodes: [showdata](https://abridge.netlify.app/overview-showdata/), [katex](https://abridge.netlify.app/overview-math/#usage-1). + +## Démarrage rapide + +Ce thème nécessite une version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" key="min_version" type="toml") }} ou plus tard de [Zola](https://www.getzola.org/documentation/getting-started/installation/) + +```bash +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 + +```bash +zola init mysite +cd mysite +``` + +### 2: Installer abridge + +Ajoutez le thème en tant que sous-module git : + +```bash +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: + +```bash +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: + +```bash +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.json package.json +rsync -r themes/abridge/content/static content/ +``` + +- `templates/.gitkeep` le répertoire des modèles est requis dans votre site de base. [#2150](https://github.com/getzola/zola/issues/2150) +- `config.toml` configuration de base avec toutes les valeurs de configuration. +- `content/_index.md` requis pour définir la pagination. +- `COPY-TO-ROOT-SASS/abridge.scss` remplace pour personnaliser les variables Abridge. +- `netlify.toml` paramètres pour déployer votre dépôt avec netlify +- `package.json` pour basculer entre nosearch, elasticlunr, tinysearch, stork. +- `content/static` fichiers pour générer des index tinysearch et stork. + +Décommentez la ligne de thème dans le fichier racine config.toml de votre projet: +```bash +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: + +```bash +rsync -r themes/abridge/content . +``` + +### 5: Exécuter le projet + +Exécutez simplement `zola serve` dans le chemin racine du projet: + +```bash +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 + +```scss +$mw:75%,// largeur maximale +``` + +### Modes thématiques abrégés + +```scss +$abridgeMode: "switcher",//valeurs valides: switcher, auto, dark, light +``` + +- switcher: affiche automatiquement une version sombre ou claire en fonction des paramètres du navigateur/système d'exploitation et dispose d'un sélecteur de thème javascript cliquable par l'utilisateur. +- auto: affiche automatiquement une version sombre ou claire en fonction des paramètres du navigateur/système d'exploitation. +- dark: est toujours le thème sombre. +- light: est toujours le thème de la lumière. + +### Couleurs et styles + +Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base: +```scss +$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade +``` + +Remplacez ensuite les couleurs individuelles si nécessaire: +```scss +/// 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`: + +```scss +$switcherDefault: "dark",// mode de commutation nojs par défaut: dark, light (assurez-vous de définir également js_switcher_default dans config.toml) +``` + +```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`) + +```toml +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](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) à titre d'exemple: +```md ++++ +title = "Codes courts d'image" +description = "Les images peuvent être intégrées directement à l'aide de markdown ``, 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](https://abridge.netlify.app/overview-math/). + +Pour de meilleures performances, je recommande d'activer uniquement les mathématiques sur une [base par page dans vos fichiers post.md](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), 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](https://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 pwa`. 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`: + +```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 : + +- search_index.en.js: index de recherche généré par zola à chaque build pour elasticlunr. +- elasticlunr.min.js: bibliothèque de recherche pour la recherche côté client. +- search.js: pour utiliser elasticlunr depuis le champ de recherche de nos sites pour les suggestions et la page de résultats. +- email.js: utilise javascript pour masquer votre véritable adresse e-mail grâce à l'icône de courrier en bas de la page. +- codecopy.js: ajoutez un bouton Copier aux blocs de code, pour copier le contenu du bloc de code dans le presse-papiers. +- theme.js: petit script pour faciliter le stockage local du sélecteur de thème. (jamais groupé, toujours séparé) +- theme_button.js: petit script pour la fonction de changement de thème lorsque vous cliquez sur le bouton de changement de thème. +- prestyle.js: Utilisé pour précharger les fichiers CSS `<link rel="preload"` - ce script les change en `<link rel="stylesheet"` une fois le chargement de la page terminé, cela nous permet de charger des feuilles de style pour les polices externes , fontawesome ou katex de manière non bloquante. +- sw.js: il s'agit du fichier Service Worker pour la PWA. +- sw_load.js: ce fichier gère le chargement du Service Worker pour la PWA. + +#### option js_bundle + +`js_bundle` lorsqu'il est défini sur true, il sert un fichier bundle au lieu de tous les fichiers js individuels. + +Tous les bundles sont définis dans [package.json](https://github.com/Jieiku/abridge/blob/master/package.json) + +Un Bundle peut être généré à partir des scripts package.json en utilisant npm: + +- `npm run nosearch` - génère un bundle sans recherche. +- `npm run elasticlunr` - génère un bundle de tous les js avec elasticlunr. +- `npm run tinysearch` - génère un bundle de tous les js avec tinysearch. +- `npm run stork` - génère un bundle de tous les js avec stork. + +#### 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: + +```bash +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: +```bash +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: + +```bash +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: + +```bash +npm run stork +zola build +stork build --input public/data_stork/index.html --output static/stork.st +# zola serve +``` + +**Basculer vers elasticlunr:** + +```bash +npm run elasticlunr +``` + +**Basculer vers nosearch:** + +```bash +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](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-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](https://maskable.app/editor) + +Tous les fichiers png peuvent être optimisés à l'aide de [oxipng](https://github.com/shssoichiro/oxipng): + +```bash +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. + +```bash +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: + +```bash +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: + +```bash +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: + +```bash +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. diff --git a/content/overview-abridge/index.md b/content/overview-abridge/index.md new file mode 100644 index 0000000..b36c9d3 --- /dev/null +++ b/content/overview-abridge/index.md @@ -0,0 +1,451 @@ ++++ +title = "Abridge Zola Theme" +description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." +date = 2022-05-17 +updated = 2023-07-21 +draft = false + +[taxonomies] +tags = ["Features","Config"] +[extra] +toc = true ++++ + +A fast, lightweight, and modern [Zola](https://getzola.org) theme utilizing [abridge.css](https://github.com/Jieiku/abridge.css) (a class-light semantic HTML CSS Framework). Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page. +<!-- more --> + + + +## Features + +- [X] Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. +- [X] [PWA support](#pwa-progressive-web-app) (Progressive Web Application). +- [X] All JavaScript can be [fully disabled](https://abridge.netlify.app/overview-abridge/#javascript-files). +- [X] Dark, Light, Auto, and Switcher themes. (colors can be customized, css variables) +- [X] Code [syntax highlighting](https://abridge.netlify.app/overview-code-blocks/). (colors can be customized, css variables) +- [X] Numbered code blocks with [line highlighting](https://abridge.netlify.app/overview-code-blocks/#toml). +- [X] Multi-language support. +- [X] Search support. (elasticlunr, tinysearch, stork) +- [X] Search Suggestions navigation keys, `/` focus, `arrow` move, `enter` select, `escape` close. +- [X] Search Results Page, type search query then hit `Enter Key` or `click` the search button icon. +- [X] [SEO](#seo-and-header-tags) support. (Search Engine Optimization) +- [X] [Pagination](#pagination) with numbered paginator on index. +- [X] Title Based Previous and Next Article links at bottom of Article. +- [X] Table of Contents in page Index (Optional, clickable links) +- [X] Recent Posts Block. (Optional) +- [X] Back to Top button. (uses css only) +- [X] Code Blocks copy button. +- [X] Email link in footer obfuscation. (anti-spam) +- [X] [KaTeX](https://katex.org/) support. +- [X] [Archive page](https://abridge.netlify.app/archive/). +- [x] [Tags](https://abridge.netlify.app/tags/). +- [x] Categories. (similar to Tags, disabled/commented out by default) +- [x] Social icon links in footer. +- [X] Responsive design. (mobile first) +- [X] Video Shortcodes: [Youtube](https://abridge.netlify.app/overview-embed-youtube/), [Vimeo](https://abridge.netlify.app/overview-embed-vimeo/), [Streamable](https://abridge.netlify.app/overview-embed-streamable/). +- [X] Media Shortcodes: [video](https://abridge.netlify.app/overview-rich-content/#video), [img](https://abridge.netlify.app/overview-images/#img-shortcode), [imgswap](https://abridge.netlify.app/overview-images/#imgswap-shortcode), [image](https://abridge.netlify.app/overview-rich-content/#image), [gif](https://abridge.netlify.app/overview-rich-content/#gif), [audio](https://abridge.netlify.app/overview-rich-content/#audio). +- [X] Other Shortcodes: [showdata](https://abridge.netlify.app/overview-showdata/), [katex](https://abridge.netlify.app/overview-math/#usage-1). + +## Quick Start + +This theme requires version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" key="min_version" type="toml") }} or later of [Zola](https://www.getzola.org/documentation/getting-started/installation/) + +```bash +git clone https://github.com/jieiku/abridge.git +cd abridge +zola serve +# open http://127.0.0.1:1111/ in the browser +``` + +## Installation + +The Quick Start shows how to run the theme directly. Next we will use abridge as a theme to a NEW site. + +### 1: Create a new zola site + +```bash +zola init mysite +cd mysite +``` + +### 2: Install Abridge + +Add the theme as a git submodule: + +```bash +git init # if your project is a git repository already, ignore this command +git submodule add https://github.com/jieiku/abridge.git themes/abridge +``` + +Or clone the theme into your themes directory: + +```bash +git clone https://github.com/jieiku/abridge.git themes/abridge +``` + +### 3: Configuration + +Copy some files from the theme directory to your project's root directory: + +```bash +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.json package.json +rsync -r themes/abridge/content/static content/ +``` + +- `templates/.gitkeep` the templates directory is required in your base site. [#2150](https://github.com/getzola/zola/issues/2150) +- `config.toml` base configuration with all config values. +- `content/_index.md` required to set pagination. +- `COPY-TO-ROOT-SASS/abridge.scss` overrides to customize Abridge variables. +- `netlify.toml` settings to deploy your repo with netlfiy. +- `package.json` to switch between nosearch, elasticlunr, tinysearch, stork. +- `content/static` files for generating tinysearch and stork indexes. + +Uncomment the theme line in your project's root config.toml: + +```bash +sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml +``` + +### 4: Add new content + +Copy the content from the theme directory to your project or make a new post: + +```bash +rsync -r themes/abridge/content . +``` + +### 5: Run the project + +Just run `zola serve` in the root path of the project: + +```bash +zola serve +``` + +Zola will start the dev web server, accessible by default at `http://127.0.0.1:1111`. + +Saved changes will live reload in the browser. (press `ctrl+f5`, or while developing set `pwa=false` in `config.toml`) + +## Pagination + +You can set the number of home page items by editing `content\_index.md` file and adjusting `paginate_by` + +## Sass Overrides + +Abridge SASS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder. + +### Page Width + +```scss +$mw:75%,// max-width +``` + +### Abridge Theme Modes + +```scss +$abridgeMode: "switcher",//valid values: switcher, auto, dark, light +``` + +- switcher: automatically displays a dark or light version depending on browser/OS settings, and has a javascript user clickable theme switcher. +- auto: automatically displays a dark or light version depending on browser/OS settings. +- dark: is the dark theme always. +- light: is the light theme always. + +### Colors and Styles + +You can specify which color template you want to use as a base: +```scss +$color: "orange",// color template to use/override: orange, blue, blueshade +``` + +Then override individual colors as needed: +```scss +/// Dark Colors +$f1d: #ccc,// Font Color Primary +$f2d: #ddd,// Font Color Headers +$c1d: #111,// Background Color Primary +$c2d: #222,// Background Color Secondary +... +``` + +### Footer Social Icons + +You should configure which social icons you plan to use. (makes the css file size smaller) + +To simply turn them all off you can set `$enable-icons: false` (disables ALL icons, navigation, search, etc.) + +Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true` + +You should then disable all the other icons that you do not use. + +### Theme for noscript visits + +If you have abridge configured to use the switcher mode instead of auto/dark/light, then your site will have a button that allows the visitor to toggle the theme. + +If your visitor uses noscript or some other javascript blocking browser addon, then they will be stuck with whatever the configured default theme is for the switcher mode. + +To adjust this mode you would set the following two config values in `abridge.scss` **AND** `config.toml`: + +```scss +$switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in config.toml) +``` + +```toml +js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss) +``` + +By default abridge uses dark mode for the switcher, so unless you want to set the default mode to light for nojs/noscript visitors, then you do not need to worry about these settings. + +## Config.toml Configuration + +Most Options in `config.toml` are self documenting. (obvious between name of config value and comments) + +Abridge will work with a barebones `config.toml` because default values are provided in the template files. + +I recommend copying the entire config.toml file as outlined in Step 3 as it provides all configurable values. + +### Top and Footer menus + +Set a field in `extra` with a key of `menu` and `menu_footer`. +If you want the link to open in a new tab/browser then set `blank = true`. +If a link should have a trailing slash at the end of the url set `slash = true`. +(generally all links should have a trailing slash unless its a file link such as `sitemap.xml`) + +```toml +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 and Header Tags + +You can review the SEO tags in the head macro located at `templates/macros/head.html`, all configurable values should be in `config.toml` under `config.extra` or in the content markdown files. + +In your post markdown file you should set a title less than 60 characters and a description between 80 and 160 characters in length. The description is what is displayed in search results below the page title. Anywhere that you do not set a page description, the primary site config.description will be used instead. + +You should also set page specific keywords unless your keywords defined in config.toml suffice, any keywords that you add to the page are in addition to the ones defined in config.toml, so do not add those same keywords to your page keywords. + +You can optionally also set a page specific image for search results by using page.extra.thumbnail. Facebook, Twitter, and OpenGraph Cards are supported (automatic image & description for posted links). OpenGraph recommends 1200 x 630 (1.9:1). Twitter recommends 2:1 for large and 1:1 for small. If you do not set a page specific thumbnail then the banner defined in config.toml will be used instead. + +Refer to [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) for an example: +```md ++++ +title = "Image Shortcodes" +description = "Images can be embedded directly using markdown ``, but using a shortcode prevents CLS by explicitly setting the width and height." +date = 2021-05-19 +draft = false + +[taxonomies] +tags = ["Features","Shortcodes","Images"] +[extra] +toc = true +keywords = "Image, Markdown, Shortcodes, Swap" +thumbnail = "ferris-gesture.png" ++++ +``` + +### KaTeX Math Notation + +KaTeX can be used to display complex mathematics, it is a "Fast math typesetting for the web." + +You can see a demo on [this page](https://abridge.netlify.app/overview-math/). + +For better performance I recommend only enabling math on a [per page bases in your post.md files](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), instead of in your main config.toml file. + +### PWA, Progressive Web App + +Abridge theme has PWA support. You can install the entire site as an app and have it work offline. To try it out simply use google chrome or your phone and go here: [abridge.netlify.app](https://abridge.netlify.app/) + +If using Chrome on desktop then look at the end of the address bar for the install button. On Android you should get a popup to install, you can also install from the 3 dot menu in the top right corner. Once you have the PWA installed, you can go completely offline and you will still be able to browse or search the site! + +To use it in your own instance you will need to edit `static/sw.js` for the list of files to cache. Technically you do not need to edit `sw.js`, but if even a single file in the cache list is missing then it wont pre cache the list, so it will only cache as you browse. + +There is an npm script to generate the file cache list and minification `npm run pwa`. My `netlify.toml` file automatically runs this npm script during site deployment, so everything is automatic. If Zola was able to template a js file then it might be possible to generate the list of cache files dynamically at build. + +The PWA feature is also easy to disable by simply setting `pwa = false` in `config.toml` + +## Performance Optimization + +### Javascript files + +All javascript can be disabled in `config.toml`: + +```toml +build_search_index = false + +js_bundle = false +js_copycode = false +js_email_encode = false +js_prestyle = false +js_switcher = false +``` + +These are the javascript files used by Abridge: + +- search_index.en.js: search index generated by zola at each build for elasticlunr. +- elasticlunr.min.js: search library for client side searching. +- search.js: to make use of elasticlunr from our sites search box for both suggestions and the results page. +- email.js: uses javascript to obfuscate your real email address for the mail icon at the bottom of the page. +- codecopy.js: add a Copy Button to code blocks, to copy contents of the code block to clipboard. +- theme.js: tiny script to facilitate local storage for the theme switcher. (never bundle, always separate) +- theme_button.js: tiny script for the theme switcher function when you click the theme switch button. +- prestyle.js: Used to preload css files `<link rel="preload"` - this script changes these to `<link rel="stylesheet"` once the page has finished loading, this allows us to load stylesheets for external fonts, fontawesome, or katex in a non blocking fashion. +- sw.js: this is the Service Worker file for the PWA. +- sw_load.js: this file handles loading the Service Worker for the PWA. + +#### js_bundle option + +`js_bundle` when set to true serves a bundle file instead of all of the individual js files. + +All Bundles are defined in [package.json](https://github.com/Jieiku/abridge/blob/master/package.json) + +A Bundle can be generated from the package.json scripts using npm: + +- `npm run nosearch` - generates a bundle without search. +- `npm run elasticlunr` - generates a bundle of all js with elasticlunr. +- `npm run tinysearch` - generates a bundle of all js with tinysearch. +- `npm run stork` - generates a bundle of all js with stork. + +#### Switch Search Library + +In addition to elasticlunr abridge also supports tinysearch and stork. + +tinysearch demo: https://jieiku.github.io/abridge-tinysearch/ + +stork demo: https://jieiku.github.io/abridge-stork/ + +To use tinysearch/stork extra steps are required. + +**Switch to tinysearch:** + +First you have to install tinysearch so that you can build the index: + +```bash +git clone https://github.com/tinysearch/tinysearch +cd tinysearch +cargo build --release +sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch +exit # reload shell environment +``` + +Switch Abridge to tinysearch: +```bash +npm run tinysearch +zola build +tinysearch --optimize --path static public/data_tinysearch/index.html +# zola serve +``` + +**Switch to stork:** + +First you have to install stork so that you can build the index: + +```bash +git clone https://github.com/jameslittle230/stork +cd stork +cargo build --release +sudo cp ./target/release/stork /usr/local/bin/stork +exit # reload shell environment +``` + +Switch Abridge to stork: + +```bash +npm run stork +zola build +stork build --input public/data_stork/index.html --output static/stork.st +# zola serve +``` + +**Switch to elasticlunr:** + +```bash +npm run elasticlunr +``` + +**Switch to nosearch:** + +```bash +npm run nosearch +``` + +#### Theme-Switcher + +The theme switcher relies on javascript to work, it applies the .light class to the root documentElement. The file that handles this (`theme.js`) is tiny and optimized and it is the first file loaded in the head, so the performance hit is minimal. Without the Theme switcher you can still use The automatic Theme which uses the Browser/OS preference settings. You can even install a [Firefox plugin](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-firefox/) to quickly switch between the two. + +### Optimize PNG/ICO files + +Good tool to generate maskable icons for `manifest.json`: [maskable.app](https://maskable.app/editor) + +All png files can be optimized using [oxipng](https://github.com/shssoichiro/oxipng): + +```bash +cd static +oxipng -o max --strip all -a -Z *.png +``` + +With larger displays and greater pixel density becoming common it is probably a good idea to use atleast a littly bit of lossy compression. For example you can use pngquant with a 93% quality and you will often get images around 1/2 the size. Understand that pngquant is cumulative, so you should keep your original images somewhere, and only ever use pngquant once per image, if you use it again and again on the same image then you will lower the image quality each time. Always use oxipng afterwards, oxipng is lossless. + +```bash +pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png +oxipng -o max --strip all -a -Z *.png +``` + +leanify can compress farther for both png and ico files: + +```bash +git clone https://github.com/JayXon/Leanify +cd Leanify +make +sudo cp leanify /usr/local/bin/leanify +exit #launch new terminal +leanify -i 7777 *.png +leanify -i 7777 *.ico +``` + +### Pre gzip/brotli content + +If you are serving your site with nginx, you can pre gzip your content. + +(Netlify brotli gzips your files automatically, no exta work required.) + +First configure nginx: + +```bash +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; +``` + +Then you can gzip/brotli your files: + +```bash +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 does not come by default with brotli support, but adding it was not difficult. diff --git a/content/overview-abridge/lighthouse.png b/content/overview-abridge/lighthouse.png Binary files differnew file mode 100644 index 0000000..bf5434d --- /dev/null +++ b/content/overview-abridge/lighthouse.png diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md index b640069..bc0462e 100644 --- a/content/overview-code-blocks.fr.md +++ b/content/overview-code-blocks.fr.md @@ -5,8 +5,7 @@ date = 2022-05-16 draft = false [taxonomies] -categories = ["Features"] -tags = ["Markdown"] +tags = ["Features","Markdown"] [extra] toc = true keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme" diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md index 46f5922..af1d406 100644 --- a/content/overview-code-blocks.md +++ b/content/overview-code-blocks.md @@ -5,8 +5,7 @@ date = 2022-05-16 draft = false [taxonomies] -categories = ["Features"] -tags = ["Markdown"] +tags = ["Features","Markdown"] [extra] toc = true keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme" diff --git a/content/overview-embed-streamable.fr.md b/content/overview-embed-streamable.fr.md index 0a4779a..808fddc 100644 --- a/content/overview-embed-streamable.fr.md +++ b/content/overview-embed-streamable.fr.md @@ -5,8 +5,7 @@ date = 2021-05-06 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Streamable" +++ diff --git a/content/overview-embed-streamable.md b/content/overview-embed-streamable.md index 2478d06..3423672 100644 --- a/content/overview-embed-streamable.md +++ b/content/overview-embed-streamable.md @@ -5,8 +5,7 @@ date = 2021-05-06 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Streamable" +++ diff --git a/content/overview-embed-vimeo.fr.md b/content/overview-embed-vimeo.fr.md index 3c9ec47..0cd972f 100644 --- a/content/overview-embed-vimeo.fr.md +++ b/content/overview-embed-vimeo.fr.md @@ -5,8 +5,7 @@ date = 2021-05-07 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Vimeo" +++ diff --git a/content/overview-embed-vimeo.md b/content/overview-embed-vimeo.md index bc8cd93..f72ae85 100644 --- a/content/overview-embed-vimeo.md +++ b/content/overview-embed-vimeo.md @@ -5,8 +5,7 @@ date = 2021-05-07 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Vimeo" +++ diff --git a/content/overview-embed-youtube.fr.md b/content/overview-embed-youtube.fr.md index 3655b9a..4cded7e 100644 --- a/content/overview-embed-youtube.fr.md +++ b/content/overview-embed-youtube.fr.md @@ -5,8 +5,7 @@ date = 2021-05-08 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Youtube" +++ diff --git a/content/overview-embed-youtube.md b/content/overview-embed-youtube.md index f247a7f..e99ab20 100644 --- a/content/overview-embed-youtube.md +++ b/content/overview-embed-youtube.md @@ -5,8 +5,7 @@ date = 2021-05-08 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] +tags = ["Features","Shortcodes","Video"] [extra] keywords = "Video, Shortcodes, Embed, Embedded, Youtube" +++ diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png Binary files differindex 67f6cd1..dc242bf 100644 --- a/content/overview-images/ferris-gesture.png +++ b/content/overview-images/ferris-gesture.png diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index 956fdcd..3e2b5f3 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -5,8 +5,7 @@ date = 2021-05-19 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","images"] +tags = ["Features","Shortcodes","Images"] [extra] toc = true keywords = "Image, Markdown, Shortcodes, Swap" diff --git a/content/overview-images/index.md b/content/overview-images/index.md index cd3181c..1545193 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -5,8 +5,7 @@ date = 2021-05-19 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","images"] +tags = ["Features","Shortcodes","Images"] [extra] toc = true keywords = "Image, Markdown, Shortcodes, Swap" diff --git a/content/overview-markdown-and-style.fr.md b/content/overview-markdown-and-style.fr.md index 827c2e6..a991fed 100644 --- a/content/overview-markdown-and-style.fr.md +++ b/content/overview-markdown-and-style.fr.md @@ -5,8 +5,7 @@ date = 2022-05-15 draft = false [taxonomies] -categories = ["Features"] -tags = ["Markdown"] +tags = ["Features","Markdown"] [extra] toc = true keywords = "Markdown, Style, Syntax, Syntax Highlighting" @@ -116,7 +115,7 @@ Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlightin </html> ``` -## Numéros de ligne, mise en surbrillance +## Numéros de ligne, faits saillants ```html,linenos,hl_lines=5 7-9 <!doctype html> @@ -180,18 +179,7 @@ de Rob Pike lors du Gopherfest, le 18 novembre 2015. ## Navs -Le menu principal du site est créé en imbriquant la navigation sous une balise d'en-tête. Reportez-vous au haut de ce site pour un exemple. - -Si la balise de navigation se trouve sous la balise principale au lieu de la balise d'en-tête, les liens auront une bordure : - -<header> - <nav> - <ul> - <li><a href="#">< Précédent</a></li> - <li><a href="#">Suivant ></a></li> - </ul> - </nav> -</header> +Le menu principal du site est créé en imbriquant la navigation sous une balise d'en-tête. Reportez-vous au haut de ce site pour un exemple. La navigation est réactive, réduisez la largeur de la page pour la voir en action. ## Formes @@ -262,7 +250,7 @@ Si la balise de navigation se trouve sous la balise principale au lieu de la bal </fieldset> <br> <!-- Search --> - <input type="search" id="search" name="search" placeholder="Search" title="Search"> + <p><input type="search" id="search" name="search" placeholder="Search" title="Search"></p> <!-- File browser --> <label for="file">Navigateur de fichiers <input type="file" id="file" name="file"> diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md index 78177db..20f4a9e 100644 --- a/content/overview-markdown-and-style.md +++ b/content/overview-markdown-and-style.md @@ -5,8 +5,7 @@ date = 2022-05-15 draft = false [taxonomies] -categories = ["Features"] -tags = ["Markdown"] +tags = ["Features","Markdown"] [extra] toc = true keywords = "Markdown, Style, Syntax, Syntax Highlighting" @@ -53,7 +52,7 @@ and optionally with in-line changes such as annotations and abbreviations. > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use *Markdown syntax* within a blockquote. -## Blockquote with attribution +## Blockquote attribution > Don't communicate by sharing memory, share memory by communicating.<br> > — <cite>Rob Pike[^1]</cite> @@ -77,14 +76,14 @@ out-of-the-box. John | 59 Kerry | 23 -## Table with Inline Markdown +## Table Inline Markdown | Italics | Bold | Code | StrikeThrough | | -------- | -------- | ------ | ----------------- | | *italics* | **bold** | `code` | ~~strikethrough~~ | -## Large table within figure tag +## Large table within figure Surround very Large tables with `<figure></figure>` so they can scroll horizontally. <figure> @@ -129,7 +128,7 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting </html> ``` -## Line Numbers, Highlighting +## Line Numbers, Highlights ```html,linenos,hl_lines=5 7-9 <!doctype html> @@ -195,18 +194,7 @@ during Gopherfest, November 18, 2015. ## Navs -Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. - -If the nav tag is under the main tag instead of the header tag then the links will have a border: - -<header> - <nav> - <ul> - <li><a href="#">< Previous</a></li> - <li><a href="#">Next ></a></li> - </ul> - </nav> -</header> +Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. Navigation is responsive, shrink the page width to see it in action. ## Forms @@ -277,7 +265,7 @@ If the nav tag is under the main tag instead of the header tag then the links wi </fieldset> <br> <!-- Search --> - <input type="search" id="search" name="search" placeholder="Search" title="Search"> + <p><input type="search" id="search" name="search" placeholder="Search" title="Search"></p> <!-- File browser --> <label for="file">File browser <input type="file" id="file" name="file"> diff --git a/content/overview-math.fr.md b/content/overview-math.fr.md index ed0720a..4729e5a 100644 --- a/content/overview-math.fr.md +++ b/content/overview-math.fr.md @@ -6,9 +6,9 @@ updated = 2022-01-01 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","Mathematics"] +tags = ["Features","Shortcodes","Mathematics"] [extra] +toc = true math = true math_auto_render = true keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" @@ -66,7 +66,7 @@ Enveloppez tout [valide](https://katex.org/docs/supported.html) $\KaTeX$ syntaxe ### Mathématiques en ligne -C'est la plus belle équation que j'aie jamais vue : +C'est la plus belle équation que j'ai jamais vue: ### Usage ```rs @@ -78,9 +78,9 @@ C'est la plus belle équation que j'aie jamais vue : ``` {% katex(block=false) %} e^{i\pi}+1=0 {% end %} -### Bloc Mathématiques +### Bloquer les mathématiques -Quelques Mathématiques en mode affichage sont assez justes : +Certaines mathématiques en mode affichage sont assez justes : ### Usage ```rs @@ -92,14 +92,14 @@ Quelques Mathématiques en mode affichage sont assez justes : ``` {% katex(block=true) %} \int_0^1 x^2 dx {% end %} -### Exemple de rendu automatique en ligne +### Rendu automatique en ligne ``` $ e^{i\pi}+1=0 $ ``` $ e^{i\pi}+1=0 $ -### Exemple de bloc de rendu automatique +### Bloc de rendu automatique ``` $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi diff --git a/content/overview-math.md b/content/overview-math.md index 4082c9d..0a9931d 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -6,9 +6,9 @@ updated = 2022-01-01 draft = false [taxonomies] -categories = ["Features"] -tags = ["shortcodes","Mathematics"] +tags = ["Features","Shortcodes","Mathematics"] [extra] +toc = true math = true math_auto_render = true keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" @@ -95,14 +95,14 @@ Some Mathematics in display mode is fair enough: ``` {% katex(block=true) %} \int_0^1 x^2 dx {% end %} -### Auto Render Inline Example +### Auto Render Inline ``` $ e^{i\pi}+1=0 $ ``` $ e^{i\pi}+1=0 $ -### Auto Render Block Example +### Auto Render Block ``` $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md index e768252..8b1b4f7 100644 --- a/content/overview-rich-content/index.fr.md +++ b/content/overview-rich-content/index.fr.md @@ -5,14 +5,13 @@ date = 2021-05-15 draft = false [taxonomies] -categories = ["Features"] -tags = ["video", "audio", "images", "shortcodes"] +tags = ["Features","Video","Audio","Images","Shortcodes"] [extra] toc = true keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" +++ -Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (avec l'aimable autorisation du [theme d3c3nt](https://d3c3nt.figbert.com/posts/rich-content/)), en plus de ceux [déjà fournis par Zola][built-in]. `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture. +Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (avec l'aimable autorisation du [theme d3c3nt](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture. <!-- more --> @@ -49,7 +48,7 @@ Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d ## GIF -Le `gif` shortcode est exactement le même que le [shortcode vidéo][video] +Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video] – il prend un tableau de chaînes appelées `sources` et renvoie une `<video>` balise. La seule différence réside dans la balise la plus à l'extérieur, qui a quatre propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`. L'utilisation de la `<video>` balise à la place des gifs permet de réduire la taille des fichiers, ce qui est particulièrement important dans les régions où Internet est plus lent ou moins fiable. @@ -77,6 +76,3 @@ Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<aud {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }} ``` {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }} - -[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes -[video]: @/overview-rich-content/index.md#video diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index 4dc2285..b216654 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -5,14 +5,13 @@ date = 2021-05-15 draft = false [taxonomies] -categories = ["Features"] -tags = ["video", "audio", "images", "shortcodes"] +tags = ["Features","Video","Audio","Images","Shortcodes"] [extra] toc = true keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" +++ -Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)), in addition to those [already provided by Zola][built-in]. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing. +Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing. <!-- more --> @@ -57,7 +56,7 @@ back on if the other formats aren't yet supported, fw and fh set the width and h ## GIF -The `gif` shortcode is exactly the same as the [video shortcode][video] +The `gif` shortcode is exactly the same as the [video shortcode](#video) – it takes an array of strings called `sources` and returns a `<video>` tag. The only difference is in the outermost tag, which has four additional properties: `autoplay`, `loop`, `muted`, `playsinline`. @@ -92,6 +91,3 @@ The browser will play the first type it supports, so placing them in order of si {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }} ``` {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }} - -[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes -[video]: @/overview-rich-content/index.md#video diff --git a/content/overview-showdata.fr.md b/content/overview-showdata.fr.md new file mode 100644 index 0000000..0c27886 --- /dev/null +++ b/content/overview-showdata.fr.md @@ -0,0 +1,29 @@ ++++ +title = "Code court Showdata" +description = "Une brève description d'un shortcode personnalisé pour Zola qui implémente le chargement et l'affichage de données externes." +date = 2021-05-04 +draft = false + +[taxonomies] +tags = ["Features","Data","Shortcodes"] +[extra] +keywords = "Data, Load, External, Shortcodes" ++++ + +Le shortcode `showdata` peut charger et afficher des données provenant d'une source externe via la fonction [load_data()](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola. + +<!-- more --> + +Ce sont les paramètres, actuellement tous les 3 sont requis. + +- `src` chemin ou URL du fichier (si URL, doit inclure le préfixe http(s)://). +- `type` le type de fichier à charger. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data)) +- `key` le champ dans les données que vous souhaitez afficher. + +### Usage + +Ce thème nécessite une version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" type="toml" key="min_version") }} ou plus tard de Zola. + +### Sortir + +Ce thème nécessite une version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" type="toml" key="min_version") }} ou plus tard de Zola. diff --git a/content/overview-showdata.md b/content/overview-showdata.md new file mode 100644 index 0000000..90e4406 --- /dev/null +++ b/content/overview-showdata.md @@ -0,0 +1,29 @@ ++++ +title = "Showdata Shortcode" +description = "A brief description of a custom Shortcode for Zola that implements loading and displaying external data." +date = 2021-05-04 +draft = false + +[taxonomies] +tags = ["Features","Data","Shortcodes"] +[extra] +keywords = "Data, Load, External, Shortcodes" ++++ + +The `showdata` shortcode can load and display data from an external source via Zola's [load_data()](https://www.getzola.org/documentation/templates/overview/#load-data) function. + +<!-- more --> + +These are the parameters, currently all 3 are required. + +- `src` path or url to file (if url, must include the http(s):// prefix). +- `type` the type of file to load. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data)) +- `key` the field in the data that you want to display. + +### Usage + +This theme requires version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" type="toml" key="min_version") }} or later of Zola. + +### Output + +This theme requires version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" type="toml" key="min_version") }} or later of Zola. diff --git a/content/pages/about.fr.md b/content/pages/about.fr.md index 94989bb..c5656a2 100644 --- a/content/pages/about.fr.md +++ b/content/pages/about.fr.md @@ -7,15 +7,8 @@ draft = false Ce site fournit une démo pour le thème [Abridge](https://github.com/Jieiku/abridge) de [Zola](https://www.getzola.org/), le générateur de site statique. -Abridge a été créé par [Jake G (jieiku)](https://github.com/Jieiku) pour être rapide et léger, en utilisant du HTML sémantique, un [abridge.css](https://github.com/Jieiku/abridge.css), léger de classe et No Mandatory JS. - -Quelques faits amusants sur le thème : - -* Note parfaite sur l'audit Lighthouse de Google -* Seulement ~6 Ko de CSS avant d'activer les icônes SVG CSS et la coloration syntaxique. -* Pas de JavaScript obligatoire. -* Maintenant avec le référencement ! +Abridge a été créé par [Jake G (jieiku)](https://github.com/Jieiku) pour être rapide et léger, en utilisant du HTML sémantique, un [abridge.css](https://github.com/Jieiku/abridge.css) léger de classe et No Mandatory JS. Près de la moitié des thèmes Zola MIT existants ont inspiré les fonctionnalités et la conception de ce thème. -Le thème et ce site sont sous licence [MIT](https://opensource.org/licenses/MIT) . +Abridge est sous licence [MIT](https://opensource.org/licenses/MIT). diff --git a/content/pages/about.md b/content/pages/about.md index ca00fb6..2134fa8 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -9,13 +9,6 @@ This site provides a demo for the [abridge theme](https://github.com/Jieiku/abri Abridge was created by [Jake G (jieiku)](https://github.com/Jieiku) to be fast and lightweight, using semantic html, a class-light [abridge.css](https://github.com/Jieiku/abridge.css), and No Mandatory JS. -Some fun facts about the theme: - -* Perfect score on Google's Lighthouse audit -* Only ~6 KB of CSS before enabling the SVG CSS icons and syntax highlighting. -* No mandatory JavaScript. -* Now with SEO! - Nearly half of the existing Zola MIT themes were inspiration for features and design of this theme. -Both the theme and this site are licensed under the [MIT license](https://opensource.org/licenses/MIT).
\ No newline at end of file +Abridge is licensed under the [MIT license](https://opensource.org/licenses/MIT). diff --git a/content/posts/_index.fr.md b/content/posts/_index.fr.md deleted file mode 100644 index 6b70666..0000000 --- a/content/posts/_index.fr.md +++ /dev/null @@ -1,4 +0,0 @@ -+++ -transparent = true -redirect_to = "/" -+++ diff --git a/content/posts/_index.md b/content/posts/_index.md deleted file mode 100644 index 6b70666..0000000 --- a/content/posts/_index.md +++ /dev/null @@ -1,4 +0,0 @@ -+++ -transparent = true -redirect_to = "/" -+++ diff --git a/content/posts/posts-section.fr.md b/content/posts/posts-section.fr.md deleted file mode 100644 index 63e71af..0000000 --- a/content/posts/posts-section.fr.md +++ /dev/null @@ -1,20 +0,0 @@ -+++ -title = "Posts Transparent Section" -date = 2021-05-04 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -Vous pouvez placer votre contenu dans content/posts/ au lieu de content/ cela fera des URL de publication example.com/posts/post-title -<!-- more --> -Dans le répertoire des articles, vous verrez le _index.md : - -```md -+++ -transparent = true -redirect_to = "/" -+++ -``` diff --git a/content/posts/posts-section.md b/content/posts/posts-section.md deleted file mode 100644 index c90ec99..0000000 --- a/content/posts/posts-section.md +++ /dev/null @@ -1,20 +0,0 @@ -+++ -title = "Posts Transparent Section" -date = 2021-05-04 -draft = false - -[taxonomies] -categories = ["Features"] -tags = ["config"] -+++ - -You can place your content in content/posts/ instead of content/ this will make post urls example.com/posts/post-title -<!-- more --> -In the posts directory you will see the _index.md: - -```md -+++ -transparent = true -redirect_to = "/" -+++ -``` |
