Pour créer une navigation de sujet en sujet (et insérer automatiquement des boutons Précédent/Suivant sur chaque sujet de la séquence), je procède comme suit…
Je réutilise la fonction « Répondre en tant que sujet lié » et j’applique ensuite un style CSS aux liens comme ceci…
Et j’ajoute du CSS dans les Paramètres du Thème…
CSS MINIMAL UNIQUEMENT POUR LES BOUTONS
.post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 37px;
right: 30px;
}
.post-links-container ul li .d-icon {
display: none;
}
.post-links-container .post-links {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.post-links-container .post-links li:last-of-type {
margin-bottom: 0;
}
.post-links-container ul li a[href] {
align-items: center;
border: 1px solid var(--primary-low-mid);
background: var(--primary-very-low);
border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: #009a49;
display: inline-flex;
font-family: monospace, monospace;
font-size: var(--font-down-1);
justify-content: center;
line-height: var(--line-height-large);
margin: 0 0.15em;
min-width: 24px;
padding: 0.15em 0.6em;
}
.post-links-container ul li a::after {
content: " ->>";
padding-left: 0.15em;
}
kbd {
align-items: center;
border: 1px solid var(--primary-low-mid);
background: var(--primary-very-low);
border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: var(--primary);
display: inline-flex;
font-family: monospace, monospace;
font-size: var(--font-down-1);
justify-content: center;
line-height: var(--line-height-large);
margin: 0 0.15em;
min-width: 24px;
padding: 0.15em 0.6em;
}
kbd a {
padding: 0;
}
kbd a::before {
content: "<<-";
padding-right: 0.15em;
}
INSTRUCTIONS ET CSS COMPLET QUE J'UTILISE
/** Boutons Précédent et Suivant pour les livres ou autres séquences de sujets - cette fonctionnalité est créée en réutilisant **/**
/** le sélecteur natif de Discourse "Répondre en tant que sujet lié" dans l'éditeur (en haut à gauche). **/**
/** POUR CONFIGURER CECI SUR VOTRE DISCOURSE **/**
/** Collez <kbd>%{postLink}</kbd> dans /admin/customize/site_texts/js.post.continue_discussion. **/**
/** Créez ensuite 2 catégories : LIVRES (pour les séquences de sujets de style blog) et HISTOIRES (pour les séquences de sujets de style normal). **/**
/** Installez le composant de thème https://meta.discourse.org/t/blog-post-styling/110841 **/**
/** Dans les paramètres du composant de thème "Blog Post Styling", attribuez la catégorie LIVRES (mais pas HISTOIRES) comme catégorie de blog. **/**
/** Créez ensuite une balise : LIVRE et attribuez-la comme balise de blog dans les paramètres du composant de thème "Blog Post Styling". **/**
/** N'oubliez pas de coller le CSS ci-dessous ! Il va dans l'en-tête de votre thème. **/**
/** Bien sûr, le CSS ici devra être ajusté pour fonctionner correctement dans d'autres thèmes. **/**
/** Vous pouvez maintenant créer des séquences de sujets dans la catégorie HISTOIRES qui auront les boutons de navigation, **/**
/** mais ces sujets apparaîtront autrement dans le style de sujet normal). **/**
/** Si vous pouvez ajouter le style de blog à ces sujets de la catégorie HISTOIRES en ajoutant simplement la balise LIVRE. **/**
/** Un nouveau sujet que vous composez dans la CATÉGORIE LIVRES en utilisant "Répondre en tant que sujet lié" aura déjà les boutons de navigation **/**
/** ainsi que le style de blog. **/**
/** Voir une démo sur https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838/16 **/**
.tag-book,
.category-books {
aside.sidebar,
.topic-meta-data,
.tag-book .topic-category .badge-wrapper,
.category-books .topic-category .badge-wrapper {
display:none !important;
}
}
.tag-book .container.posts,
.category-books .container.posts {
justify-content: unset;
justify-items: unset;
padding-left: 0;
display: block;
}
.tag-book .container.posts .topic-post .row,
.category-books .container.posts .topic-post .row {
display: block;
justify-content: center;
}
.tag-book #topic-title .title-wrapper,
.category-books #topic-title .title-wrapper {
display: block;
margin: 0 auto;
}
.tag-book #topic-title,
.category-books #topic-title {
display: block;
margin: 0 auto;
}
.tag-book #topic-title h1,
.category-books #topic-title h1 {
font-size: 2em;
padding-right: 20px;
}
.tag-book #post_1 .topic-body,
.category-books #post_1 .topic-body {
padding-top: 1em;
border-top: none;
max-width: 100%;
}
.tag-book #post_1 .topic-body .contents,
.category-books #post_1 .topic-body .contents {
border-top: none;
margin-left: 0;
padding: 0;
}
.tag-book p,
.category-books p {
/* mettre les styles ici pour le texte principal des pages de livres */
}
/* Positionner le bouton Suivant en haut à droite de la page */
.tag-book .post-links-container,
.category-books .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 1em;
right: 30px;
}
/* Positionner le bouton Précédent en haut à gauche de la page */
.category-stories .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 2.5em;
right: 30px;
}
/* Supprimer le symbole de lien du bouton Suivant */
.tag-book .post-links-container ul li .d-icon,
.category-books .post-links-container ul li .d-icon,
.category-stories .post-links-container ul li .d-icon {
display: none;
}
.tag-book .post-links-container .post-links,
.category-books .post-links-container .post-links,
.category-stories .post-links-container .post-links {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.tag-book .post-links-container .post-links li:last-of-type,
.category-books .post-links-container .post-links li:last-of-type,
.category-stories .post-links-container .post-links li:last-of-type {
margin-bottom: 0;
}
/* Style du bouton Suivant */
.tag-book .post-links-container ul li a[href],
.category-books .post-links-container ul li a[href],
.category-stories .post-links-container ul li a[href] {
align-items: center;
border: 1px solid var(--primary-low-mid);
background: var(--primary-very-low);
border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: #009a49;
display: inline-flex;
font-family: monospace, monospace;
font-size: var(--font-down-1);
justify-content: center;
line-height: var(--line-height-large);
margin: 0 0.15em;
min-width: 24px;
padding: 0.15em 0.6em;
}
/* Ajouter des flèches pointant vers la droite sur le bouton Suivant */
.tag-book .post-links-container ul li a::after,
.category-books .post-links-container ul li a::after,
.category-stories .post-links-container ul li a::after {
content: " ->>";
padding-left: 0.15em;
}
/* Alternativement, utiliser une image pour la flèche droite */
/*
.tag-book .post-links-container::after,
.category-books .post-links-container::after,
.category-stories .post-links-container::after {
content: url('../../media/arrow-right.svg');
display: inline-block;
width: 12px;
height: 12px;
}
*/
/* Style du bouton Précédent */
.tag-book kbd,
.category-books kbd,
.category-stories kbd {
align-items: center;
border: 1px solid var(--primary-low-mid);
background: var(--primary-very-low);
border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: var(--primary);
display: inline-flex;
font-size: var(--font-down-1);
justify-content: center;
line-height: var(--line-height-large);
margin: 0;
min-width: 24px;
padding: 0.15em 0.6em;
}
.tag-book kbd a,
.category-books kbd a,
.category-stories kbd a {
padding: 0;
}
/* Ajouter des flèches au bouton Précédent */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
content: "<<-";
padding-right: 0.15em;
}
/* Alternativement, utiliser une image pour la flèche gauche */
/*
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
content: url('../../media/arrow-left.svg');
display: inline-block;
width: 12px;
height: 12px;
}
*/
Voici le résultat…
Vous pouvez le tester en direct ici…