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

स्क्रॉल करें और ऊपर की बार को 0% से 100% तक भरते देखें। बाएँ पैनल में विकल्प बदलें, एम्बेड कोड भी साथ में अपडेट होता है।

परिचय

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

इंस्टॉलेशन

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

कोड इंजेक्शन

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

विकल्प

सारा व्यवहार स्क्रिप्ट टैग पर data-* एट्रिब्यूट से सेट होता है: कंटेंट सिलेक्टर, स्थिति, मोटाई और z-index:

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

कस्टमाइज़

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

रंग

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

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

स्थिति

ऊपर/नीचे के लिए data-position, और पिक्सेल में मोटाई के लिए data-height इस्तेमाल करें। जब लेख का शीर्ष व्यूपोर्ट के शीर्ष से मिलता है तो बार 0%, और जब उसका तल व्यूपोर्ट के तल से मिलता है तो 100% हो जाती है।

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

यह पूरे पेज को मापता है या सिर्फ़ लेख को?

सिर्फ़ उस लेख को जिसे आप data-content से इंगित करते हैं। हेडर, फ़ीचर इमेज और फ़ुटर प्रगति में नहीं गिने जाते।

ऊपर बार क्यों नहीं दिखती?

0% पर भराव की चौड़ाई शून्य होती है और ट्रैक डिफ़ॉल्ट रूप से पारदर्शी है। ट्रैक को रंग दें (रंग अनुभाग देखें) ताकि खाली होने पर भी बार दिखे।

क्या यह Ghost के बाहर काम करता है?

हाँ। जहाँ भी आप स्क्रिप्ट इंजेक्ट कर सकें, data-content को अपने लेख कंटेनर पर इंगित करें। Notion में यह .notion-page-content है।

निष्कर्ष

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