هل الترقيم الصفحات مستحيل أم أنه مجرد صعب؟

[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 الخاص بك ** /
/** الصق <kbd>%{postLink}</kbd> في /admin/customize/site_texts/js.post.continue_discussion. ** /
/** ثم قم بإنشاء فئتين: كتب (لتسلسلات مواضيع نمط المدونة) وقصص (لتسلسلات مواضيع نمط الموضوع العادي). ** /
/** قم بتثبيت مكون السمة https://meta.discourse.org/t/blog-post-styling/110841 ** /
/** في إعدادات مكون سمة نمط منشور المدونة، قم بتعيين فئة الكتب (ولكن ليس القصص) كفئة مدونة. ** /
/** ثم قم بإنشاء علامة: كتاب وقم بتعيينها كعلامة مدونة في إعدادات مكون سمة نمط منشور المدونة ** /
/** ثم لا تنس لصق CSS أدناه! يذهب في رأس السمة الخاص بك. ** /
/** بالطبع، ستحتاج CSS هنا إلى تعديل لتعمل بشكل صحيح في السمات الأخرى. ** /
/** الآن يمكنك إنشاء تسلسلات من المواضيع في فئة القصص التي ستحتوي على أزرار التنقل، ** /
/**   ولكن هذه المواضيع ستظهر بخلاف ذلك في نمط الموضوع العادي). ** /
/** إذا كان بإمكانك إضافة نمط المدونة إلى مواضيع فئة القصص هذه عن طريق إضافة علامة الكتاب ببساطة. ** /
/** موضوع جديد تقوم بتأليفه في فئة الكتب باستخدام "الرد كموضوع مرتبط" سيحتوي بالفعل على كل من أزرار التنقل ** /
/**   بالإضافة إلى نمط المدونة. ** /
/** شاهد عرضًا توضيحيًا على 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