چالش تاریخ شمسی در جکیل

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

برای این موضوع @mehdisadeghi یه کتابخونه به اسم Jekyll-Jalali نوشته که خیلی باهاش کلنجار رفتم تا بتونم ازش استفاده کنم. اما در عین تعجب دیدم که توی ورژن های جدید jekyll برخلاف ورژن های قدیمی، نیاز نیست که ما فایل های html سِرو شده رو هم روی گیت هاب پوش کنیم و این فایلها توسط گیت‌هاب جنریت و نمایش داده میشن و فقط کافیه ما فایل های اصلی جکیل رو روی برنچ مستر(یا برنچ اصلی) پوش کنیم.از طرفی محدودیت هایی که گیتهاب برای استفاده از پلاگین های جکیل برای کاربرا تعریف کرده، عملا امکان استفاده از پلاگین Jekyll-Jalali رو در این نسخه های جکیل نداریم. (مگر اینکه فایلهای سرو شده رو روی گیت هاب پوش کنیم! که بنظرم هویت یکپارچگی جکیل و گیتهاب از بین میره!)

اما خب چیکار کنیم؟

پاسخ اینه که از جاوا اسکریپت استفاده کنیم، تا تاریخ های میلادی هر پست رو در زمان لود روی مرورگر کاربر تبدیل کنیم.

برای اینکار یه پوشه فرضا به نام assets توی روت فولدر پروژه میسازیم و داخل اون هم پوشه ی دیگه ای بنام persiandate میسازیم. (دلیل استفاده از این نامها این هست که توی ریپوی همین بلاگ از این نامها استفاده شده تا بتونید خودتون سورس کد رو ببینید) فایل های js رو داخل اون کپی میکنیم.

در مرحله ی دوم لازمه که این ماژول های جاوااسکریپت رو توی head صفحات پروژه اضافه کنیم.

<script src="/assets/persiandate/moment.js"></script>
<script src="/assets/persiandate/moment-jalaali.js"></script>

مرحله ی بعدیمون هم استفاده از این ماژول هاست:

توی این مرحله برای قسمتی که میخوایم تاریخش رو تبدیل کنیم یه id تعریف میکنیم:

<time id="date"></time>

و بعدش

<script>
    var date = '{{ page.date  }}'
    moment.loadPersian(true);
    var jalaliDate = moment(date, 'YYYY-M-D HH:mm:ss TZD').format('ddd jD jMMMM jYYYY');
    document.getElementById("date").innerText = jalaliDate
</script>

تاریخ پست: 2018-03-16 23:45:00 +0330

خروجی: آدینه 25 اسفند 1396

همونطور که میبینید هر تاریخی رو میتونیم تبدیل کنیم.

همچنین باید ذکر کنم ما از ماژول های moment و moment-jalali استفاده کردیم که چون هرکدوم api و حالت های مختلفی برای نمایش تاریخ شمسی ارایه میدن، بهتره خودتون مستنداتشون رو مطالعه کنید تا به نوع نمایش دلخواه خودتون برسید.

پیروز و پاینده باشید.