Per creare una navigazione da un argomento all’altro (e inserire automaticamente i pulsanti Indietro/Precedente e Avanti/Successivo su ciascun argomento della sequenza), sto procedendo in questo modo…
Sto riutilizzando la funzione “Rispondi come argomento collegato” e poi applicando uno stile CSS ai link in questo modo…
E aggiungendo un po’ di CSS nelle Impostazioni del tema…
CSS MINIMO SOLO PER I PULSANTI
.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;
}
ISTRUZIONI E IL CSS COMPLETO CHE STO UTILIZZANDO
/** Pulsanti Precedente e Successivo per Libri o altre Sequenze di Argomenti - questa funzionalità è creata riutilizzando **/\n/** il selettore nativo di Discourse "Rispondi come argomento collegato" nell'editor (in alto a sinistra). **/\n/** PER CONFIGURARE QUESTO SUL TUO DISCOURSE **/\n/** Incolla \u003ckbd\u003e%{postLink}\u003c/kbd\u003e in /admin/customize/site_texts/js.post.continue_discussion. **/\n/** Quindi crea 2 categorie: LIBRI (per sequenze di argomenti in stile blog) e STORIE (per sequenze di argomenti in stile normale). **/\n/** Installa il componente tema https://meta.discourse.org/t/blog-post-styling/110841 **/\n/** Nelle impostazioni del componente tema "Blog Post Styling", assegna la categoria LIBRI (ma non STORIE) come categoria blog. **/\n/** Quindi crea un tag: LIBRO e assegnalo come tag blog nelle impostazioni del componente tema "Blog Post Styling". **/\n/** Quindi non dimenticare di incollare il CSS qui sotto! Va nell'intestazione del tuo tema. **/\n/** Naturalmente il CSS qui dovrà essere modificato per funzionare correttamente in altri temi. **/\n/** Ora puoi creare sequenze di argomenti nella categoria STORIE che avranno i pulsanti di navigazione, **/\n/** ma quegli argomenti appariranno altrimenti nello stile normale dell'argomento). **/\n/** Se riesci ad aggiungere lo stile blog a questi argomenti della categoria STORIE semplicemente aggiungendo il tag LIBRO. **/\n/** Un nuovo argomento che componi nella CATEGORIA LIBRI utilizzando "Rispondi come argomento collegato" avrà già sia i pulsanti di navigazione **/\n/** sia lo stile blog. **/\n/** Vedi una demo su https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838/16 **/\n\n\n\n.tag-book,\n.category-books {\n aside.sidebar,\n .topic-meta-data,\n .tag-book .topic-category .badge-wrapper,\n .category-books .topic-category .badge-wrapper {\n display:none !important;\n \n }\n}\n\n.tag-book .container.posts,\n.category-books .container.posts {\n justify-content: unset;\n justify-items: unset;\n padding-left: 0;\n display: block;\n}\n\n.tag-book .container.posts .topic-post .row,\n.category-books .container.posts .topic-post .row {\n display: block;\n justify-content: center;\n}\n\n.tag-book #topic-title .title-wrapper,\n.category-books #topic-title .title-wrapper {\n display: block;\n margin: 0 auto;\n}\n\n.tag-book #topic-title,\n.category-books #topic-title {\n display: block;\n margin: 0 auto;\n}\n\n.tag-book #topic-title h1,\n.category-books #topic-title h1 {\n font-size: 2em;\n padding-right: 20px;\n}\n\n.tag-book #post_1 .topic-body,\n.category-books #post_1 .topic-body {\n padding-top: 1em;\n border-top: none;\n max-width: 100%;\n}\n\n.tag-book #post_1 .topic-body .contents,\n.category-books #post_1 .topic-body .contents {\n border-top: none;\n margin-left: 0;\n padding: 0;\n}\n \n.tag-book p,\n.category-books p {\n /* inserisci qui gli stili per il testo principale nelle pagine del libro */\n}\n\n/* Posiziona il pulsante Avanti in alto a destra della pagina */\n.tag-book .post-links-container,\n.category-books .post-links-container {\n margin-left: var(--topic-body-width-padding);\n position: absolute;\n top: 1em;\n right: 30px;\n}\n\n/* Posiziona il pulsante Indietro in alto a sinistra della pagina */\n.category-stories .post-links-container {\n margin-left: var(--topic-body-width-padding);\n position: absolute;\n top: 2.5em;\n right: 30px;\n}\n\n/* Rimuovi il simbolo del link dal pulsante Avanti */\n.tag-book .post-links-container ul li .d-icon,\n.category-books .post-links-container ul li .d-icon,\n.category-stories .post-links-container ul li .d-icon {\n display: none;\n}\n\n.tag-book .post-links-container .post-links,\n.category-books .post-links-container .post-links,\n.category-stories .post-links-container .post-links {\n margin-top: 0;\n padding-top: 0;\n border-top: 0;\n}\n\n.tag-book .post-links-container .post-links li:last-of-type,\n.category-books .post-links-container .post-links li:last-of-type,\n.category-stories .post-links-container .post-links li:last-of-type {\n margin-bottom: 0;\n}\n\n/* Stile del pulsante Avanti/Successivo */\n.tag-book .post-links-container ul li a[href],\n.category-books .post-links-container ul li a[href],\n.category-stories .post-links-container ul li a[href] {\n align-items: center;\n border: 1px solid var(--primary-low-mid);\n background: var(--primary-very-low);\n border-bottom-width: 2px;\n border-radius: 3px;\n box-sizing: border-box;\n color: #009a49;\n display: inline-flex;\n font-family: monospace, monospace;\n font-size: var(--font-down-1);\n justify-content: center;\n line-height: var(--line-height-large);\n margin: 0 0.15em;\n min-width: 24px;\n padding: 0.15em 0.6em;\n}\n\n/* Aggiungi frecce che puntano a destra al pulsante Avanti */\n.tag-book .post-links-container ul li a::after,\n.category-books .post-links-container ul li a::after,\n.category-stories .post-links-container ul li a::after {\n content: " ->>";\n padding-left: 0.15em;\n}\n\n/* In alternativa, usa un'immagine per la freccia destra */\n/*\n.tag-book .post-links-container::after,\n.category-books .post-links-container::after,\n.category-stories .post-links-container::after {\n content: url('../../media/arrow-right.svg');\n display: inline-block;\n width: 12px;\n height: 12px;\n}\n*/\n\n/* Stile del pulsante Indietro/Precedente*/\n.tag-book kbd,\n.category-books kbd,\n.category-stories kbd {\n align-items: center;\n border: 1px solid var(--primary-low-mid);\n background: var(--primary-very-low);\n border-bottom-width: 2px;\n border-radius: 3px;\n box-sizing: border-box;\n color: var(--primary);\n display: inline-flex;\n font-size: var(--font-down-1);\n justify-content: center;\n line-height: var(--line-height-large);\n margin: 0;\n min-width: 24px;\n padding: 0.15em 0.6em;\n}\n\n.tag-book kbd a,\n.category-books kbd a,\n.category-stories kbd a {\n padding: 0;\n}\n\n/* Aggiungi frecce al pulsante Indietro */\n.tag-book kbd a::before,\n.category-books kbd a::before,\n.category-stories kbd a::before {\n content: "<<-";\n padding-right: 0.15em;\n}\n\n/* In alternativa, usa un'immagine per la freccia sinistra */\n/*\n.tag-book kbd a::before,\n.category-books kbd a::before,\n.category-stories kbd a::before {\n content: url('../../media/arrow-left.svg');\n display: inline-block;\n width: 12px;\n height: 12px;\n}\n*/\n\n\n```
Ecco il risultato…
Puoi testarlo dal vivo qui…