Configuration

L’objectif des configurations est de rendre les thèmes personnalisables dans une certaine mesure sans avoir à modifier le code du thème. Les configurations peuvent être utilisées pour permettre au blogueur d’activer ou de désactiver des fonctionnalités, changer les couleurs et les polices, ou même définir des clés API pour des services externes.

Toutes les configurations sont ajoutées à config.yaml avec leurs valeurs par défaut. Il existe deux types de configurations.

• Configurations connues de HB - HB est conscient de ces configurations et prendra des décisions en fonction de leurs valeurs. Vous pouvez aussi utiliser leurs valeurs dans les modèles.
• Configurations de thème - HB n’est pas conscient de ces configurations. Vous pouvez les utiliser dans les modèles pour du contenu ou des styles dynamiques.

Toutes les configurations sont accessibles dans les modèles à partir de la variable de route _config.

Configurations connues de HB

Les configurations connues de HB doivent être écrites en ENGLISH_UPPER_SNAKE_CASE dans config.yaml.

• THEME_NAME - Nom du thème
  • Requis : Uniquement si publié
• THEME_VERSION - Version sémantique du thème
  • Requis : Uniquement si publié
• THEME_FONTS - Polices à charger dans le blog. Voir polices.
  • Requis : Uniquement si publié
• DEMO_URL - Peut être utilisé pour définir une URL de démonstration personnalisée lors de la publication
  • Requis : Non
  • Valeur par défaut : Générée automatiquement
• POSTS_PER_PAGINATION - Nombre d’articles chargés initialement dans la variable de route _posts
  • Requis : Non
  • Valeur par défaut : 10

Configurations de thème

Les configurations de thème (couleurs, polices, etc.) doivent être écrites en english_lower_snake_case.

Exemple de config.yaml

Bien que vous puissiez utiliser des configurations YAML imbriquées à plusieurs niveaux, nous vous recommandons de n’utiliser qu’un ou deux niveaux d’imbrication.

THEME_NAME: hello
THEME_VERSION: 1.0.0
THEME_FONTS: 'mulish:400,700'
POSTS_PER_PAGINATION: 15

dark_theme: Yes
accent_color: 0000000
image_service:
  api_key:
  api_version: 2

Dans cet exemple, les 3 premières lignes sont des configurations connues de HB. Les autres sont des configurations de thème. Vous pouvez ajouter autant de configurations de thème que nécessaire.

Définitions de configuration

config.def.yaml « décrit » vos configurations de thème. Cela aide le blogueur à comprendre ce que fait chaque configuration. Cela permet également de rendre le fichier config.yaml dans Console → Thème sous forme d’interface utilisateur plutôt que sous forme de fichier.

Voici un exemple de fichier config.def.yaml qui explique les configurations de l’exemple précédent.

dark_theme:
  $name: Dark theme
  $description: Turn on dark theme for this blog
  $type: checkbox

accent_color:
  $name: Accent Color
  $description: Main color of the blog
  $type: color

image_service:
  $name: Image Service API Details

  api_key:
    $name: API Key
    $description: ...
    $type: text
    $maxlength: 255

  api_version:
    $name: API Version
    $description: ...
    $type: number
    $min: 1
    $max: 2

Définitions de configuration

Voici les définitions prises en charge pour les configurations de thème :

• $type - Type de la configuration. Voir Types de $type pris en charge.
• $name - Nom de la configuration.
• $description - Description de la configuration.
• $minlength - Nombre minimum de caractères dans une entrée.
• $maxlength - Nombre maximum de caractères dans une entrée.
• $min - Valeur minimale pour un nombre.
• $max - Valeur maximale pour un nombre.

Types de $type pris en charge

Voici les types pris en charge pour les configurations de thème :

Exemple de bouton radio

Vous pouvez définir des options radio dans $options, qui est une liste de paires clé : étiquette. clé est la valeur réelle qui sera enregistrée dans le fichier config.yaml . étiquette est ce que l’utilisateur verra.

some_key:
  $title: When to use caching
  $type: radio
  $options:
    all: For All Posts and Pages
    posts: Only Posts
    pages: Only Pages

Utilisation des configurations dans les modèles

Après avoir défini les configurations, vous pouvez les utiliser dans vos modèles. Vous pouvez accéder aux configurations via la variable de route _config.

Exemple : Variables CSS configurables.

config.yaml :

colors:
  accent: '#896c6b'

font:
  size: 16
  family: 'Nunito, sans-serif'

line_height: 24

box:
  radius: 20
  shadow: '0 0 30px rgba(0,0,0,0.05)'

Ensuite, utilisez les configurations dans vos modèles.

<style>
	:root {
	    --color-accent: {{ _config.colors.accent }};
	    --font-size: {{ _config.font.size }}px;
	    --font-family: {{ _config.font.family }};
	    --line-height: {{ _config.line_height }}px;
	    --box-radius: {{ _config.box.radius }}px;
	    --box-shadow: {{ _config.box.shadow }};
	}
</style>