صفحه‌بندی در جکیل

من تعطیلات امسالم را بجز بازی شطرنج به مطالعه و گنوم و وبسایتم اختصاص دادم. در نتیجه وبسایت تغییرات ظاهری مختصری داشت به همراه فعال شدن تگ‌ها و صفحه‌بندی.

تعطیلات سال نو

این روزها در آلمان و بسیاری از نقاط جهان تعطیلات سال نو است. موسسات و ادارات و شرکت‌ها یا تعطیل هستند یا مثل ایام نوروز در ایران کار می‌کنند. بسیاری از دوستان و همکاران نیز یا جهت سپری ایام کریسمس نزد خانواده‌هایشان رفته‌اند یا اینکه فرصت را غنیمت شمرده و سفری برای خودشان ترتیب داده‌اند. من هم از ۲۴ دسامبر تا روز چهارم ژانویه تعطیل هستم. بنابراین من هم وقت کافی داشتم که به خیلی از خرده کارهای معوّق رسیدگی کنم و به قول معروف Get Things Done (GTD) کنم. از این فرصت هم استفاده می‌کنم و به خواننده این مطلب به دلیل اینکه خارج از ایران زندگی می‌کند و یا در ایران است اما به هر دلیل با تقویم میلادی زندگی می‌کند یا آنرا دنبال می‌کند سال نو را تبریک می‌گویم.

صفحه‌بندی

منظور من از صفحه‌بندی اضافه‌کردن لینک‌هایی به پست‌های وبسایت است که بتوان با کلیک روی آنها به مطلب قبلی یا بعدی مراجعه کرد. معمولا رایج است که تعدادی پست را در صفحه اصلی وبسایت نمایش می‌دهند و در انتها نیز لینکی به صفحه بعدی می‌گذارند که شامل تعداد دیگری پست است. البته من در صفحه اصلی در حال حاضر فقط لیستی موجز از مطالب نمایش می‌دهم و این قابلیت را هنوز فعال نکرده‌ام و به همان لینک مطالب قبلی و بعدی در پای پست‌ها اکتفا کرده‌ام. ولی هر دو را شرح می‌دهم.

جکیل به صورت پیش‌فرض از صفحه‌بندی پشتیبانی می‌کند، فقط کافیست آنرا در فایل _config.yml فعال کنید:

paginate: 5
paginate_path: "/page:num/"

اولی یعنی پنج مطلب در هر صفحه نمایش بده و دیگری هم فرمت لینک هر صفحه است. اما هنوز یک قدم تا داشتن صفحه‌بندی مانده است. باید تغییراتی در قالب سایت بدهیم. من تغییرات زیر را در فایل index.html انجام می‌دهم تا فقط پنج پست در صفحه اصلی نمایش داده بشود.

---
layout: default
---

<div class="home">

  <h1 class="page-heading">❖&nbsp چکیده‌ی آخرین نوشته‌ها</h1>

  <ul class="post-list">
    {% for post in paginator.posts %}
      <li>
        <span class="post-meta">
        <span class="date">{{ post.date | jdate: "%A %d %b %Y" | habify }}
        </span></span>

        <h2>
          <a class="post-link" 
            href="{{ site.baseurl | urljoin: post.url}}">{{ post.title }}</a>
        </h2>
        {{ post.excerpt }}
      </li>
    {% endfor %}
  </ul>

می‌بینید که مهمترین تغییر استفاده از paginator.posts بجای site.posts است. خلاصه مطلب اینست که متغیر گلوبال paginator حاوی همه‌ی اطلاعاتی است که ما احتیاج داریم. برای نمایش یک لیست کوچک در انتهای صفحه هم کد زیر را به انتهای فایل اضافه می‌کنم. در این مورد هم از همین متغیر استفاده کرده‌ام.

<!-- Pagination links -->
<div class="pagination center">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">جدیدتر</a>
  {% else %}
    <span class="previous">جدیدتر ندارد</span>
  {% endif %}
  &nbsp❖&nbsp<span class="page_number ">
  برگه‌ی {{ paginator.page | habify}} از {{ paginator.total_pages | habify}}
  </span> 
  &nbsp❖&nbsp
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">قدیمی‌تر</a>
  {% else %}
    <span class="next ">قدیمی‌تر ندارد</span>
  {% endif %}
</div>

در این مورد هم می‌بینید که تعداد کل برگه‌های موجود را از paginator.page می‌خوانم و وجود صفحه قبلی و بعدی را هم از paginator.previous_page و paginator.next_page می‌خوانم. شماره برگه‌ی فعلی هم در paginator.page موجود است.

در ضمن از بکارگیری فیلتری بنام ‫‫habify تعجب نکنید. این یک پلاگین کوچک است برای تبدیل کردن ارقام لاتین به معادل فارسی که در دایرکتوری _plugins/hinduarabic.rb پیدایش می‌کنید.

لینک به پست‌های قبلی و بعدی

الان اگر هر پستی را باز کنید پای هر مطلب دو لینک وجود دارد که به ترتیب زمانی نوشته شدن به مطالب قبلی و بعدی اشاره می‌کنند. اضافه کردن این‌ها خیلی ساده است و فقط کافیست از اطلاعات موجود در متغیر گلوبال page استفاده کنیم.

  <div style="border-top:1px dotted;">
    <p>
      {% if page.next %}
      <a href="{{ page.next.url }}" style="float: left"> 
        {{ page.next.title }} >> </a>
      {% endif %}

      {% if page.previous %}
      <a href="{{ page.previous.url }}" style="margin-right:0px;">
        &#60&#60	 {{ page.previous.title }}</a>
      {% endif %}
    </p>
  </div>

تنها چیزی که در قطعه کد بالا نیاز به توضیح دارد &#60&#60 است. آنهم چیزی نیست دوبار تکرار کد اسکی کاراکتر < چرا که در صورت وارد کردن این کاراکتر پارس کردن صفحه توسط مرورگر دچار اختلال می‌شود (چرا که آن را با یک شروع یک تگ html اشتباه می‌گیرد).

برای شرح کامل صفحه‌بندی به مستندات جکیل مراجعه کنید.