C’est un peu gênant d’imprimer des articles sur des sites ou des blogs et de consommer du papier pour avoir des choses inutiles (à l’impression) ; le menu, la barre latérale, les commentaires ou le pied de page.
Il existe pourtant un moyen de différencier l’affichage et l’impression.
Il suffit de créer un fichier print.css et de dire à la page d’en-tête de le lire pour imprimer.
Je prendrai en exemple ce site en pages statiques (Hugo).
Copions ce fichier print.css (imcomplet dans l’exemple) dans le répertoire static/css/ de votre thème.
.lightbox,
.tags_article,
.categories_article,
.post-date,
.prev-next-post,
.prev-next-post .prev,
.prev-next-post .next,
.pagination,
.icone_calendrier{
display:none;
}
.content {
width:100%;
margin:0;
padding: 0;
}
.header{
margin-top:-3.5em;
}
...
Appelons ce fichier CSS en renseignant le fichier /theme/layouts/partials/head.html
<link rel="stylesheet" href="/css/print.css" media="print" />
À vous maintenant de faire quelques réglages pour la tailles des polices, les couleurs …
Chez moi : aperçu avant impression