Чтобы создать навигацию от темы к теме (и автоматически вставлять кнопки «Назад/Предыдущая» и «Вперед/Следующая» на каждой теме в последовательности), я делаю это следующим образом…
Я использую функцию «Ответ как связанная тема» повторно, а затем стилизую ссылки с помощью CSS так …
И добавляю немного CSS в настройки темы …
МИНИМАЛЬНЫЙ CSS ТОЛЬКО ДЛЯ КНОПОК
.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;
}
ИНСТРУКЦИИ И ПОЛНЫЙ CSS, КОТОРЫЙ Я ИСПОЛЬЗУЮ
/** Кнопки «Предыдущая» и «Следующая» для книг или других последовательностей тем — эта функция создана путём повторного использования **/
/** нативной функции Discourse «Ответ как связанная тема» в редакторе (вверху слева). **/
/** ЧТОБЫ НАСТРОИТЬ ЭТО В ВАШЕМ DISCOURSE **/
/** Вставьте <kbd>%{postLink}</kbd> в /admin/customize/site_texts/js.post.continue_discussion. **/
/** Затем создайте две категории: BOOKS (для последовательностей тем в стиле блога) и STORIES (для последовательностей тем в обычном стиле). **/
/** Установите компонент темы https://meta.discourse.org/t/blog-post-styling/110841 **/
/** В настройках компонента темы Blog Post Styling назначьте категорию BOOKS (но не STORIES) как категорию блога. **/
/** Затем создайте тег: BOOK и назначьте его как тег блога в настройках компонента темы Blog Post Styling. **/
/** Не забудьте также вставить CSS ниже! Он должен быть добавлен в заголовок вашей темы. **/
/** Конечно, этот CSS потребуется доработать, чтобы он корректно работал в других темах. **/
/** Теперь вы можете создавать последовательности тем в категории STORIES, которые будут иметь кнопки навигации, **/
/** но при этом сами темы будут отображаться в обычном стиле. **/
/** Если вы добавите стилизацию блога к темам в категории STORIES, просто добавив тег BOOK. **/
/** Новая тема, которую вы создадите в категории BOOKS, используя «Ответ как связанная тема», уже будет иметь как кнопки навигации, **/
/** так и стилизацию блога. **/
/** Посмотрите демонстрацию по адресу 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 {
/* добавьте здесь стили для основного текста на страницах книг */
}
/* Разместите кнопку «Вперед» в правом верхнем углу страницы */
.tag-book .post-links-container,
.category-books .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 1em;
right: 30px;
}
/* Разместите кнопку «Назад» в левом верхнем углу страницы */
.category-stories .post-links-container {
margin-left: var(--topic-body-width-padding);
position: absolute;
top: 2.5em;
right: 30px;
}
/* Удалите символ ссылки из кнопки «Вперед» */
.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;
}
/* Стилизуйте кнопку «Следующая/Вперед» */
.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;
}
/* Добавьте стрелки, указывающие вправо, на кнопку «Вперед» */
.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;
}
/* Альтернативно используйте изображение для правой стрелки */
/*
.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;
}
*/
/* Стилизуйте кнопку «Назад/Предыдущая»*/
.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;
}
/* Добавьте стрелки на кнопку «Назад» */
.tag-book kbd a::before,
.category-books kbd a::before,
.category-stories kbd a::before {
content: "<<-";
padding-right: 0.15em;
}
/* Альтернативно используйте изображение для левой стрелки */
/*
.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;
}
*/
Вот результат …
Вы можете протестировать это в реальном времени здесь …