مطالب مرتبط برای بلاگ بیان

سلام، این کد زیر هر مطلب، مطالب مرتبط با اون رو بر اساس موضوع و برچسب‌های مشابهشون نمایش می‌ده.

نیاز به فعالسازی جاوااسکریپت داره.

به خاطر مطالب زیاد و استفاده از موضوع و برچسب‌ها توی این عکس از وبلاگ آسمانم برای پیش‌نمایش استفاده کردم

برای استفاده این مراحل رو انجام بدید:

۱. اول کد زیر رو توی ساختار قالب، محلی که می‌خواید مطالب مرتبط نمایش داده بشن قرار بدید:

<div class="related__wrp">
<header class="related__header">مطالب مرتبط</header>
<div class="related__content"></div>
</div>

برای نمایش بعد از محتوای مطلب دنبال عبارت (*post_full_content*) توی ساختار قالب بگردید و دقیقا بعدش کد بالا رو قرار بدید.

۲. کد زیر رو هم آخر ساختار قالب قبل از </body> قرار بدید:

<script src="https://bayanbox.ir/blog/trash/templates/js/related_posts.min.js?view&v=1" defer></script>
<script>
let relatedPosts = new RelatedPosts({
    selector: ".post__meta__categorys__item > a,.post__tags__link", // <== انتخابگر موضوع و برچسب‌ها
    container: ".related__content",
    max: 10 // <== حداکثر تعداد قابل نمایش
})
relatedPosts.init()
</script>

۳. حالا انتخابگرهای (selector) موضوع و برچسب رو توی محل مشخص شده بنویسید. حداکثر تعداد مطالب رو می‌تونید با تغییر مقدار max ویرایش کنید. اگه 0 بذارید همه مطالبی که پیدا کنه نمایش می‌ده.

برای ویرایش قالب نمایش قبل از init کد مقدار template رو ویرایش کنید. مثل این:

let r = new RelatedPosts()
r.template = p => {
    return `<li class="related__item"><a class="related__link" href="${p.link}">
    <b class="related__title">${p.title}</b> <span class="related__date">${new Date(p.date).toLocaleDateString()}</span>
    </a></li>`
}
r.init()