ghost-toc-plugin प्रीव्यू

बाएँ पैनल में विकल्प बदलें। विषय-सूची लाइव री-रेंडर होती है और एम्बेड कोड भी साथ में अपडेट होता है। स्क्रॉल करने पर वर्तमान सेक्शन हाइलाइट होता है।

परिचय

ghost-toc-plugin एक छोटा (~3 KB), बिना किसी निर्भरता वाला फ़्लोटिंग विषय-सूची विजेट है, जो एक लाइन कोड से Ghost ब्लॉग में जुड़ जाता है। यह Ghost के लिए शुरू हुआ था, लेकिन यह Notion-आधारित ब्लॉग पर भी काम करता है, और जहाँ भी आप स्क्रिप्ट जोड़ सकते हैं वहाँ चलता है। यह आपके लेख के हेडिंग पढ़कर सूची अपने आप बनाता है, स्क्रॉल के साथ चलता है और आप जिस सेक्शन को पढ़ रहे हैं उसे हाइलाइट करता है। यह पेज एक लाइव उदाहरण है: बगल में दिखती सूची असली विजेट ही है।

इंस्टॉलेशन

बिना किसी बिल्ड चरण या थीम फ़ाइल संपादन के, नीचे दिया स्निपेट एक बार चिपकाएँ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.min.js"
        data-content=".gh-content"
        data-headings="h2,h3"
        data-title="विषय-सूची"></script>

कोड इंजेक्शन

Ghost में इसे Settings → Code injection → Site Footer में पेस्ट करें। Notion-आधारित होस्टिंग पर इसे कस्टम कोड फ़ील्ड में जोड़ें: oopy की साइट सेटिंग्स में head/footer कोड बॉक्स होता है, super.so में Custom Code क्षेत्र होता है, और वहाँ data-content को .notion-page-content पर सेट करें। किसी और साइट पर इसे बंद होते </body> टैग से ठीक पहले रखें। इसे async या defer के बिना रखें ताकि यह अपने data-* विकल्प पढ़ सके।

विकल्प

सारा व्यवहार स्क्रिप्ट टैग पर data-* एट्रिब्यूट से सेट होता है: कंटेंट सिलेक्टर, कौन-से हेडिंग शामिल करने हैं, शीर्षक, स्थिति आदि:

data-content=".gh-content"
data-headings="h2,h3"
data-position="right"
data-min-width="1200"
data-top="100"

कस्टमाइज़

रंग और स्थिति पूरी तरह समायोज्य हैं। हर क्लास और CSS वेरिएबल greedylabs-ghost-toc नेमस्पेस में है, इसलिए विजेट आपकी थीम से कभी टकराता नहीं।

रंग

सक्रिय आइटम का रंग डिफ़ॉल्ट रूप से आपकी Ghost थीम के एक्सेंट रंग (--ghost-accent-color) का अनुसरण करता है; बदलने के लिए data-accent दें या CSS वेरिएबल ओवरराइड करें। विजेट में लाइट और डार्क दोनों डिफ़ॉल्ट हैं और यह सिस्टम थीम के अनुसार अपने-आप ढल जाता है। डार्क मोड में पठनीयता बढ़ाने के लिए रंग केवल डार्क के लिए ओवरराइड करें, कोई एक तय मान लाइट में अटपटा लगेगा:

@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-toc {
    --greedylabs-ghost-toc-muted: #c9d1d9;
    --greedylabs-ghost-toc-border: rgba(255,255,255,.22);
  }
}

स्थिति

बाएँ/दाएँ के लिए data-position, ऊपरी अंतर के लिए data-top, कंटेंट से दूरी के लिए data-gap, और पैनल चौड़ाई के लिए data-width इस्तेमाल करें। जब स्क्रीन data-min-width से छोटी हो(या कंटेंट के बगल में जगह न हो)तो विषय-सूची अपने-आप छिप जाती है।

अक्सर पूछे जाने वाले प्रश्न

क्या यह विजेट मेरी साइट को धीमा करता है?

लगभग नहीं। यह करीब 3KB का है, न कोई डिपेंडेंसी और न कोई बाहरी रिक्वेस्ट। स्क्रॉल को passive लिसनर से संभाला जाता है और requestAnimationFrame के ज़रिए हर फ़्रेम में एक ही गणना में समेटा जाता है; यह केवल तब दोबारा गणना करता है जब दस्तावेज़ की ऊँचाई बदलती है (लेज़ी-लोड इमेज, giscus जैसे विजेट) — इसके लिए ResizeObserver का उपयोग होता है।

विषय-सूची क्यों नहीं दिख रही?

तीन चीज़ें जाँचें: क्या आपका data-content सिलेक्टर असली लेख कंटेनर से मेल खाता है, क्या कम से कम दो हेडिंग हैं (इससे कम पर यह नहीं बनती), और क्या विंडो data-min-width (डिफ़ॉल्ट 1200px) से चौड़ी है तथा सामग्री के बगल में पैनल के लिए जगह है। संकरी स्क्रीन और मोबाइल पर यह जानबूझकर छिप जाती है।

क्या मैं h4 जैसी गहरी हेडिंग भी विषय-सूची में शामिल कर सकता हूँ?

हाँ। data-headings में मनचाहे टैग कॉमा से अलग करके लिखें (जैसे h2,h3,h4)। सूची में कौन-से हेडिंग स्तर दिखें, यह आप तय करते हैं।

निष्कर्ष

ghost-toc-plugin MIT लाइसेंस के तहत ओपन सोर्स है; कोड और issues GitHub पर हैं। बाएँ पैनल में विकल्प आज़माएँ, प्रीव्यू को लाइव बदलते देखें और पसंद आने पर एम्बेड कोड कॉपी करें। अगर यह आपके काम आया, तो एक कॉफ़ी का स्वागत है ☕।