Atelier du Pignon — site statique (Zola)

Site vitrine de l'association : HTML, CSS et un JS minimal, généré avec Zola

Démarrage

zola serve      # prévisualisation locale (http://127.0.0.1:1111)
zola check      # vérifie liens internes et gabarits
zola build      # génère le dossier public/
# ou enchaîné (géocodage adresse → build) :
make            # = python3 tools/geocode.py && zola build

Prérequis : binaire zola ≥ 0.23, python3 (stdlib uniquement, pour le géocodage). Le dossier public/ généré est seul à déployer.

Arborescence

config.toml            # URL prod, langue, contact, adresse, coords carte
content/
  _index.md            # accueil (hero + sections, via composants)
  association.md       # page simple en Markdown
  lieu.md
  velos.md             # grille HTML (1 figure par vélo)
  galerie/index.md     # bundle : intro + photos colocalisées
  galerie/photos/<dossier>/  # 1 dossier = 1 section de galerie
templates/
  base.html            # squelette (head + header + footer)
  index.html           # accueil : rend section.content
  page.html            # pages simples : titre + contenu
  galerie.html         # grille auto depuis page.assets + vignettes
  components.html      # composants fond(src) et bloc(id)
  partials/header.html # menu persistant (logo + nav + contact)
  partials/footer.html # contact + carte OSM + sites copains
  partials/social.html # liens réseaux (source unique)
static/img/            # logo, fonds, photos vélos/lieu (chemin /img/...)
static/scrollspy.js    # surligne la section courante du fil d'Ariane
tools/geocode.py       # adresse → lat/lon dans config.toml (API data.geopf.fr)

Éditer le contenu

Quoi	Où
Textes association / lieu / vélos	content/association.md, lieu.md, velos.md
Accueil (hero, objet, activités, permanences, adhésion)	content/_index.md (composants fond / bloc)
Menu, logo	templates/partials/header.html
Footer, sites copains	templates/partials/footer.html
Réseaux sociaux (header + footer)	templates/partials/social.html uniquement
Email, tél, adresse	config.toml → [extra]
Fil d'Ariane basé sur le TOC	[extra] breadcrumb = true dans le front matter de la page/section
Styles	static/style.css

Liens internes en Markdown : [voir](@/velos.md) (Zola résout l'URL au build ; exception : la galerie, bundle, se lie via @/galerie/index.md).

Images

• Fichiers en static/img/..., référencés en chemin absolu : ![Alt](/img/lieu.png) (relatif img/... casse : la page vit sous /lieu/).
• alt obligatoire entre crochets ; ![](...) vide = image décorative.
• Grille vélos : HTML brut (Markdown ignoré dans blocs HTML) — <figure class="velo"><img src="/img/velos/nom.jpg" alt="..."><figcaption>….
• Vignettes vélos/galerie uniformisées en 4/3 (object-fit: cover + resize_image).
• Nommage : pas d'espaces, accents, © ni [1] — le nom de fichier fait office de légende/URL (vente-velos-zazou.jpeg, pas vente velos zazou.jpeg).

Galerie

Dépose des photos en content/galerie/photos/<Dossier>/ : chaque dossier devient une section titrée de son nom, chaque photo une figure (vignette webp 600×450 cliquable vers l'original). Renommer dossier/photo = renommer section/légende. Rien d'autre à éditer.

Carte OpenStreetMap

L'adresse source est config.toml → [extra] address. Avant chaque build : python3 tools/geocode.py (inclus dans make) interroge data.geopf.fr et écrit latitude/longitude/bbox_*. Le footer construit l'iframe et le lien « voir agrandi » depuis ces valeurs. Si l'adresse change, relance make.

Boutons et mise en forme

• <a class="btn" href="..."> : pilule accent (ex-btn-contact, conservé en alias).
• <p class="center">…</p> : centre (bouton ou texte).
• Composants accueil : {% <fond src="img/hero-fond.jpg"> %}…{% </fond> %} (fond fixe plein largeur + overlay) et {% <bloc id="nom"> %}…{% </bloc> %}.

Mise en production

1. base_url dans config.toml = vrai domaine (les liens générés sont absolus).
2. make (ou zola build), déploie public/.
3. Remplace placeholders

Dépannage

• Unknown tag / Unknown function sur {% … %} : ce sont d'anciens shortcodes (supprimés Zola 0.23) → convertir en composant (components.html).
• could not resolve URL for link @/... : chemin interne renommé/déplacé.
• Image 404 : vérifier nom exact + slash initial (/img/…).
• {{/{% voulus en texte dans un .md : envelopper en {% raw %}…{% endraw %} (le contenu Markdown est aussi un gabarit Tera).