페이지네이션이 불가능한 건가요, 아니면 어려운 건가요?

[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