Les bases #
Cela fait un bout de temps que je zieute (en bavant) du côté de [Sass] ( https://sass-lang.com/guide). Vu ma faible compréhension des CSS en général, un peu d’aide ne ferait pas de mal.
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
En résumé: des variables pour éviter un search & replace massif, des règles imbriquées (mais réellement imbriquées hein, pas juste avec un affichage résultat en cascade), des fonctions et plein de trucs utiles (et pratiques).
Par exemple, les deux snipets suivants donneront le même résultat, avec compilation (transpilation ? transplantation ?) en CSS - SCSS étant plus proche du CSS, tandis que Sass a l’air d’avoir été croisé avec du YAML:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Lier le fichier sass #
Zola supporte nativement les fichiers Sass et Scss.
Dès que l’on place ou qu’on modifie un fichier dans le répertoire sass du répertoire de base, Zola s’en aperçoit et convertit ce fichier en CSS classique:
Change detected @ 2021-05-04 21:08:14
-> Sass file changed /home/fred/Sources/dev-blog/sass/main.scss
Done in 2ms
-> body{font:100% Helvetica,sans-serif;color:#333}.
Il suffit ensuite de le référencer à partir de l’un des templates en appelant une la fonction get_url(path='fichier.css').
Intégration d’un nouveau thème #
Il nous suffit à présent de récupérer une base de travail via npm, puis de la personnaliser pour l’intégrer sur le site statique.
Pour la suite, je vais me baser sur Mustard-ui, qui a l’avantage d’être léger (5Kb, d’après la doc), pas trop moche (encore que, c’est une question de goûts) et pas trop compliqué à mettre en place.
Le seul hic: configurer le dépôt pour ne pas embarquer bêtement tous les fichiers CSS et JS, sans quoi un simplement projet Django devient (statistiquement, et d’après n’importe quel gestionnaire de sources en ligne un peu évolué) un projet de mise en forme html.
Première étape: installer notre nouvelle dépendance avec la commande npm install mustard-ui.
Ceci nous créera un fichier package.json à la racine de notre projet, qui pourra être intégré aux sources sans rien déranger.
# package.json
{
"dependencies": {
"mustard-ui": "^1.0.4"
}
}
C’est ici que cela coince, parce que la déclaration @import <url> qui pointe vers le répertoire ../node_modules/mustard-ui/dist/css n’interprète pas le fichier correctement, et continue à pointer vers ce même fichier après compitranspiplantation en CSS.
L’astuce consiste simplement à aller chercher le fichier mustard-ui.scss, dans le répertoire ../node_modules/mustard-ui/src/scss/mustard-ui.scss.
// app.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
@import '../node_modules/mustard-ui/src/scss/mustard-ui.scss';
On peut ensuite aller gaiement piocher du côté d’un exemple pour adapter les squelettes html.
Adaptation de Drone #
Profitez-en pour également intégrer le fichier package-lock.json qui aura été créé pour l’occasion, et qui
contient l’arbre complet des dépendances.
Il nous reste ensuite à adapter le fichier .drone.yml pour installer NodeJS et référencer la récupération de nos dépendances:
# .drone.yml
[...]
steps:
- name: build
image: alpine:latest
commands:
- apk add --update npm
- npm install
[...]