Administrer votre site sans code

Ce qui se change sans code

Dans les sept thèmes, moteur allumé (le site tourne alors sur Cloudflare, avec l'offre Workers Paid), tout ceci se change depuis le back office et se voit en ligne dès la publication. Seule exception : le catalogue de Kona et de Nalu (produits, prix, rayons) se change chez Shopify ou WooCommerce et se voit après « Mettre le site à jour ».

• tous les textes de toutes les pages, directement sur la page ou dans le back office
• les photos, les vidéos et leur affiche, et l'image de partage de chaque page
• le texte des boutons et l'adresse où mène chaque bouton
• les blocs à masquer ou à réafficher, un interrupteur par bloc
• les menus, le menu du téléphone, les colonnes du pied de page et leurs liens
• le nom du site, le logo, la favicon, les réseaux sociaux
• la couleur de la marque, au choix parmi cinq couleurs
• les prix, les produits, les témoignages, les questions, selon le thème
• les pages ajoutées, avec leur propre adresse, et le référencement de chaque page
• les redirections d'une ancienne adresse vers une nouvelle

Moteur éteint, le thème se construit en fichiers statiques et les mêmes contenus vivent dans des fichiers texte, comme avant.

Le guide livré avec votre thème

Chaque zip contient docs/administrer.md (en français) et docs/administer.md (en anglais) : un guide pas à pas, numéroté, écrit pour quelqu'un qui n'a jamais ouvert le code, avec les libellés exacts de chaque écran. Il commence à la connexion et dit aussi ce qui demande encore un développeur. Si vous livrez le site à un client, transmettez-lui le guide tel quel : il est écrit pour lui.

Lire en ligne le guide de Reef, le thème gratuit

Se connecter

Ouvrez l'adresse du site suivie de /_emdash/admin et connectez-vous avec votre clé d'accès (empreinte, visage ou code de l'appareil). Deux rôles comptent : un éditeur change les contenus, les menus et les redirections ; un administrateur change en plus les réglages du site, les utilisateurs et, quand le thème en a, les courriels et les commandes.

La barre d'édition, sur le site lui-même

Connecté, ouvrez n'importe quelle page du site : une petite barre apparaît en bas de l'écran, sur toutes les pages, page introuvable comprise. Basculez « Edit », cliquez un texte, tapez, Entrée : c'est enregistré en brouillon, les visiteurs ne voient encore rien. « Publish » le met en ligne. Les mots de la barre viennent du moteur et restent en anglais.

En mode édition, de petites pastilles apparaissent sur les blocs pour ce qui n'est pas un texte : l'adresse d'un bouton, la photo, la vidéo, l'interrupteur qui masque le bloc. Le panneau « Cadre du site », en bas à gauche, mène droit aux menus, aux réglages du site, aux textes de l'en-tête et du pied de page, aux pages, aux redirections et à la médiathèque.

Les courriels du site

Dans les sept thèmes, les courriels du site (le formulaire de contact, la lettre d'information de Reef, d'Aloha et de Swell, les commandes et les alertes de stock de Kai) partent par Cloudflare et se gèrent dans quatre écrans du back office : « Courriels » (ce qui est parti, ce qui a échoué, la consommation du mois contre le forfait), « Journal des courriels » (chaque envoi, avec un bouton pour le renvoyer), « Brancher les courriels » (ce qui manque encore, les enregistrements DNS du domaine d'envoi relus en direct) et « Réglages des courriels » (expéditeur, destinataires, accusé de réception au visiteur, plafonds).

Le domaine d'envoi s'inscrit une seule fois chez Cloudflare Email Sending, par la personne qui a installé le site : l'écran lui dit quoi faire. Les adresses sont masquées à l'écran, et rien n'est écrit en dur : ce que le client ne peut pas changer depuis l'écran n'existe pas.

Vendre en ligne, de Kai à la boutique alohapixel.app

Kai encaisse par Stripe Checkout et gère ses commandes dans le back office : « Tableau de bord », « Commandes », « Clients », « Réglages de boutique », « Brancher Stripe », « Journal des gestes », « Stock » et « Factures ». Seul un administrateur les voit. Un produit s'ajoute dans « Produits », « Ajouter » (guide de Kai, partie 12). Son stock se compte dans « Stock » : une quantité par produit, et par option si besoin, un seuil d'alerte et la précommande. Chaque commande payée retire ce qui est vendu, deux clients ne peuvent pas acheter ensemble le dernier exemplaire, un courriel prévient au seuil et à la rupture, et la fiche passe en stock faible puis en rupture. Une quantité laissée vide n'est pas comptée.

Les réglages de boutique sont lus par la fiche produit, la boutique et le panier : prix saisis et affichés TTC ou HT, taux de TVA, franchise en base (article 293 B), devise, livraison (offerte, prix unique ou par zone, offerte à partir d'un montant), délai d'expédition et mention sous le prix. Un remboursement, total ou partiel, se fait chez Stripe depuis la fiche de la commande, après confirmation. Sans les deux secrets Stripe, le panier reste celui de démonstration et personne ne peut payer. Chez Kona et Nalu, les produits, les prix, les taxes et le paiement restent ceux de Shopify ou de WooCommerce, dont la caisse fait foi : leur écran « Produits » renvoie à la boutique, et la disponibilité est relue à la visite.

La boutique alohapixel.app, qui vend ces thèmes, tourne elle aussi sur un back office EmDash : nous vendons ce que nous utilisons.

Ce qui passe par un service extérieur dépend de votre compte chez lui et de ses conditions : le paiement et les remboursements de Kai chez Stripe, les courriels chez Cloudflare, le catalogue et la caisse de Kona et de Nalu chez Shopify ou WooCommerce. Le back office pilote ces services, il ne les remplace pas : l'ouverture du compte, les frais, les délais de versement et de remboursement restent ceux du fournisseur.

Le back office de chaque thème, en images

Trois vraies captures du back office EmDash de chaque thème, prises dans sa démo. Chaque fiche du catalogue montre les siennes, en grand, sous la capture du site.

• Aloha
• Reef
• Swell
• Koa
• Kai
• Nalu
• Kona

Mettre à jour un site déjà en ligne

Une base en ligne garde ce que l'éditeur a changé : une nouvelle version ne l'écrase jamais. Une version qui change la base livre un fichier migrations/import-<version>-<thème>.sql, passé une version après l'autre, dans l'ordre. Sans --appliquer, rien n'est écrit : vous voyez d'abord tout ce qui va changer, et ce que l'éditeur a déjà modifié est laissé tel quel.

Depuis le dossier du thème, avec le nom de la base du site (<thème>-moteur par défaut) :

npx wrangler d1 time-travel info <thème>-moteur        # le signet de retour arrière, à noter
node scripts/base-3.4.0.mjs --remote <thème>-moteur --sql migrations/import-<version>-<thème>.sql              # le plan, rien n'est écrit
node scripts/base-3.4.0.mjs --remote <thème>-moteur --sql migrations/import-<version>-<thème>.sql --appliquer  # les colonnes, puis le SQL
pnpm build:moteur && bash scripts/deployer-frontal.sh   # le moteur, puis le frontal qui sert les pages

Le docs/moteur.md de chaque thème donne les mêmes étapes avec les noms du thème.

Un seul socle pour les sept thèmes

Les sept thèmes partagent le même socle : les mêmes écrans de back office, la même barre d'édition, le même module de courriels, la même mise à niveau. Vous apprenez un thème, vous savez administrer les autres.

Ce qui demande encore un développeur

• l'ordre des blocs d'une page, un nouveau type de bloc, la mise en page et le dessin du site
• une police de caractères différente de celle du thème
• les textes d'interface génériques (accessibilité, changement de langue, bouton du menu) et le bandeau de cookies
• les adresses des pages du thème et le fichier robots.txt
• les branchements faits une seule fois : le domaine d'envoi des courriels, les deux secrets Stripe de Kai

Retour à la documentation