分页是完全不可能还是只是很难？

[denvergeeks]

要从主题到主题创建导航（并在序列中的每个主题上自动插入后退/上一个和前进/下一个按钮），我正在这样做…

我正在重新利用“回复为链接主题”，然后像这样对链接进行 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 上进行设置**/
/** 在 /admin/customize/site_texts/js.post.continue_discussion. 中粘贴 `<kbd>`%{postLink}`</kbd>`。**/
/** 然后创建 2 个类别：BOOKS（用于博客风格的主题序列）和 STORIES（用于常规主题风格的主题序列）。**/
/** 安装 https://meta.discourse.org/t/blog-post-styling/110841 主题组件**/
/** 在博客文章样式主题组件设置中，将 BOOKS 类别（而不是 STORIES）指定为博客类别。**/
/** 然后将一个标签创建为：BOOK，并在博客文章样式主题组件设置中将其指定为博客标签。**/
/** 然后别忘了粘贴下面的 CSS！它放在您的主题头部。**/
/** 当然，这里的 CSS 需要进行调整才能在其他主题中正常工作。**/
/** 现在您可以在 STORIES 类别中创建主题序列，这些主题将具有导航按钮，**/
/**   但这些主题将以常规主题样式显示）。**/
/** 如果您可以通过添加 BOOK 标签将博客样式添加到这些 STORIES 类别主题。**/
/** 在 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;
}
*/

这是结果…

您可以在此处实时测试…

A Collection of Stories