Um die Navigation von Thema zu Thema zu erstellen (und automatisch Zurück/Vorherige und Weiter/Nächste-Schaltflächen bei jedem Thema in der Sequenz einzufügen), mache ich es so…
Ich nutze die Funktion „Als verknüpftes Thema antworten“ um und gestalte die Links dann mit CSS wie folgt…
Und füge etwas CSS in den Theme-Einstellungen hinzu…
MINIMAL CSS NUR FÜR DIE SCHALTFLÄCHEN
.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;
}
ANLEITUNG UND DAS VOLLSTÄNDIGE CSS, DAS ICH VERWENDE
/** Vorherige und nächste Schaltflächen für Bücher oder andere Themensequenzen - diese Funktion wird durch die **/** Umfunktionierung der nativen Discourse-Funktion "Als verknüpftes Thema antworten" im Composer (oben links) erstellt. **/** UM DIES AUF IHREM DISCOURSE EINZURICHTEN **/** Fügen Sie `%{postLink}` in `/admin/customize/site_texts/js.post.continue_discussion.` ein. **/** Erstellen Sie dann 2 Kategorien: BÜCHER (für Themensequenzen im Blog-Stil) und GESCHICHTEN (für Themensequenzen im regulären Themenstil). **/** Installieren Sie die Komponente https://meta.discourse.org/t/blog-post-styling/110841 **/** Weisen Sie in den Einstellungen der Blog-Post-Styling-Theme-Komponente die Kategorie BÜCHER (aber nicht GESCHICHTEN) als Blog-Kategorie zu. **/** Erstellen Sie dann ein Tag: BUCH und weisen Sie dieses als Blog-Tag in den Einstellungen der Blog-Post-Styling-Theme-Komponente zu. **/** Vergessen Sie nicht, das untenstehende CSS einzufügen! Es gehört in Ihren Theme-Header. **/** Natürlich muss das CSS hier angepasst werden, damit es in anderen Themes richtig funktioniert. **/** Jetzt können Sie Sequenzen von Themen in der Kategorie GESCHICHTEN erstellen, die die Navigationsschaltflächen haben, **/** aber diese Themen werden ansonsten im regulären Themenstil angezeigt). **/** Wenn Sie das Blog-Styling zu diesen Themen der Kategorie GESCHICHTEN hinzufügen können, indem Sie einfach das Tag BUCH hinzufügen. **/** Ein neues Thema, das Sie in der Kategorie BÜCHER erstellen und "Als verknüpftes Thema antworten" verwenden, hat bereits sowohl die Navigationsschaltflächen **/** als auch das Blog-Styling. **/** Sehen Sie eine Demo unter 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 {
/* Stile hier für den Haupttext in den Buchseiten einfügen */
}
/* Positionieren Sie die Weiter-Schaltfläche oben rechts auf der Seite */
.tag-book .post-links-container,
.category-books .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 1em;
right: 30px;
}
/* Positionieren Sie die Zurück-Schaltfläche oben links auf der Seite */
.category-stories .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 2.5em;
right: 30px;
}
/* Entfernen Sie das Link-Symbol von der Weiter-Schaltfläche */
.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;
}
/* Gestalten Sie die Weiter/Vorwärts-Schaltfläche */
.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;
}
/* Fügen Sie Pfeile hinzu, die nach rechts auf die Weiter-Schaltfläche zeigen */
.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;
}
/* Alternativ ein Bild für den Rechtspfeil verwenden */
/*
.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;
}
*/
/* Gestalten Sie die Zurück/Vorherige-Schaltfläche*/
.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;
}
/* Fügen Sie Pfeile zur Zurück-Schaltfläche hinzu */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
content: "<<-";
padding-right: 0.15em;
}
/* Alternativ ein Bild für den Linkspfeil verwenden */
/*
.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;
}
*/
Hier ist das Ergebnis…
Sie können es hier live testen…