فهرست مطالب مدیوم چطور ساخته شد
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
به گفتهٔ اسکات باتسون از تیم مهندسی مدیوم، جرقهٔ این قابلیت یه افزونهٔ متنباز کروم بود که سالها نویسندههای مدیوم برای ساختن فهرست مطالب ازش استفاده میکردن. محبوبیت اون افزونه براش سیگنالی بود که بخش قابلتوجهی از کاربرها این قابلیت رو میخوان، و اولش قصد داشت فقط همون رو کپی کنه.
افزونه یه دکمه به منوی درونخطی ادیتور اضافه میکرد که با کلیک، همهٔ هدینگهای پست رو پیدا میکرد و یه فهرست لینک میساخت و همونجا داخل بدنهٔ پست میریخت. نویسنده میگه همینجا اولین ایراد کار بود: دستزدن مستقیم به متن پست با مدل نسخهبندی مدیوم جور درنمیاد و از دید نویسنده هم اضافهکردن محتوا به متنی که وقت زیادی پاش گذاشته، تجربهٔ خوندن رو به هم میریزه.
ایراد جدیتر این بود که فهرست پویا نبود. کافی بود بعداً یه بخش تازه با هدینگ جدید اضافه کنی تا فهرست از واقعیت عقب بمونه. ضمن اینکه همیشه بالای پست درج میشد، پس بعد از پریدن به انتهای مقاله باید دوباره تا بالا اسکرول میکردی، و پرش هم بدون انیمیشن و یهکم گیجکننده بود.
راهحل مدیوم اینه که فهرست موقع رندر از روی بدنهٔ پست ساخته شه. دلیلش هم جالبه: مدل ذخیرهسازی پستها پیچیدهست و بهجای نسخهٔ نهایی، مجموعهای از revisionها ذخیره میشن که روی هم پخش میشن تا به متن نهایی برسن. بهجای پیمایش اون مدل، ساختن فهرست در زمان اجرا سادهتر بود. توی مدل مدیوم H2 و H3 هر دو سرفصل اصلی حساب میشن و H4 زیرِ آخرین سرفصل بالادستی لانه میکنه:
bodyModel.paragraphs.forEach((paragraph, index) => {
const style = styles[index]
if (style === ParagraphType.H2 || style === ParagraphType.H3) {
const entry: TocEntry = {name, text, children: []}
entries.push(entry)
currentTopLevel = entry
} else if (style === ParagraphType.H4 && currentTopLevel) {
currentTopLevel.children.push({name, text, children: []})
}
})تلاش اول برای نمایش، اضافهکردن فهرست به منوی سهنقطهٔ بالای پست بود که خودش هم قبول داره جواب نداد، چون فقط از بالای صفحه در دسترس بود. با کمک طراحها به الگویی رسیدن که تو ابزارهایی مثل Notion و Graphite هم دیده میشه: یه نشانگر توی حاشیهٔ راست که با اسکرول همراهه، خطهای بلند برای سرفصلهای اصلی و کوتاه برای زیرسرفصلها، و هدینگ فعلی که سبز هایلایت میشه.
بعدش نوبت حالتهای خاص رسید: برای تصویرهای تمامعرض یه پسزمینهٔ نیمهشفاف گذاشتن، پستهای تکهدینگ رو کلاً بدون فهرست رها کردن و برای مقالههای خیلی بلند یه پنجرهٔ لغزان گذاشتن که فقط چند مورد رو نشون میده و با هاور کامل باز میشه. روی موبایل ولی نتیجه بد بود و نشانگرها با متن تداخل داشتن، برای همین فعلاً راهحل موبایل جدا در دست کاره. نویسنده تأکید کرده این قابلیت روی درآمد نویسندهها اثر نداره، چون معیار خوندن معتبر بر اساس اسکرول محاسبه نمیشه.
نکات کلیدی:
- ایده از یه افزونهٔ متنباز کروم اومد که فهرست رو داخل متن پست تزریق میکرد
- نسخهٔ مدیوم فهرست رو موقع رندر از هدینگهای پست میسازه و چیزی به متن اضافه نمیکنه
- H2 و H3 سرفصل اصلی و H4 زیرسرفصل حساب میشن
- نشانگر توی حاشیهٔ راست با اسکرول همراهه و بخش فعلی رو هایلایت میکنه
- تصویر تمامعرض، پست تکهدینگ و مقالههای خیلی بلند هرکدوم راهحل جدا گرفتن
- نسخهٔ موبایل هنوز آماده نیست و جداگانه طراحی میشه
