मैं जेकिल का उपयोग करके अपनी डॉक्यूमेंटेशन साइट को पुनर्निर्माण कर रहा हूँ। चूंकि हमारे डॉक्यूमेंटेशन पेज काफी बड़े हैं, इसलिए टॉप-लेवल नेविगेशन के अलावा हमें किसी प्रकार के सबनेविगेशन की आवश्यकता है।
इस पोस्ट में हम कवर करेंगे कि एक साधारण जेकिल प्लगइन कैसे बनाया जाए जो आपके पोस्ट या पेज में हेडिंग से सबनेव लिंक उत्पन्न कर सकता है।
अवलोकन
मैंने इस प्रोजेक्ट को निम्नलिखित कार्यों में विभाजित किया है:
- एक जेकिल जनरेटर बनाएं जो साइट पर हर पेज के खिलाफ चलता है।
- जनरेटर को सिखाएं कि पेज को प्री-रेंडर कैसे करें ताकि यह हेडिंग जानकारी निकाल सके।
- पेज के HTML को पार्स करने और प्रासंगिक हेडिंग और कंटेंट निकालने के लिए नोकोगिरी का उपयोग करें।
- सबनेविगेशन रेंडर करें।
नीचे दिए गए उदाहरणों में सभी सबनेव लिंक एंकर लिंक हैं। इस दृष्टिकोण के काम करने के लिए, आपको यह सुनिश्चित करना होगा कि आपका मार्कडाउन प्रोसेसर हेडिंग के लिए आईडी बनाता है। with_toc_data विकल्प के साथ RedCarpet अच्छी तरह से काम करता है।
एक बुनियादी जेकिल जनरेटर
कुछ अलग प्रकार के प्लगइन्स हैं जिन्हें आप जेकिल के लिए बना सकते हैं। हम एक जनरेटर बनाने जा रहे हैं।
जनरेटर केवल Jekyll::Generator से इनहेरिट करने वाली क्लास हैं और जो generate नामक एक मेथड प्रदान करती हैं।
जनरेटर जेकिल द्वारा सभी मार्कडाउन फाइलों को लोड करने के बाद लेकिन उन फाइलों के HTML में परिवर्तित होने से पहले चलाए जाते हैं। एक site ऑब्जेक्ट generate मेथड में पास किया जाता है। और आप अपनी साइट के सभी पेज, पोस्ट और अन्य संसाधनों तक पहुंचने के लिए साइट ऑब्जेक्ट का उपयोग कर सकते हैं।
नीचे दिए गए उदाहरण में, हम एक जनरेटर बनाते हैं जो सभी पेज के माध्यम से लूप करता है और उनके शीर्षक प्रिंट करता है।
class MySubnavGenerator < Jekyll::Generator def generate(site) site.pages.each do |page| puts page.data["title"] end end end हम जनरेटर के अंदर पेज और साइट डेटा को भी संशोधित कर सकते हैं -- फ्रंट-मैटर और साइट कॉन्फिगरेशन फाइल से लोड किया गया डेटा।
page.data["title"] += " - modified!" site.data["tagline"] मार्कडाउन को HTML में प्री-रेंडर करना
हम अपने मार्कडाउन दस्तावेज़ से हेडिंग निकालना चाहते हैं। ऐसा करने का सबसे सरल तरीका है मार्कडाउन को HTML में परिवर्तित करना फिर HTML को नोकोगिरी जैसे टूल का उपयोग करके पार्स करना।
क्या यह मुझे थोड़ा गंदा महसूस कराता है? हाँ। क्या यह थोड़ा धीमा होगा? बिल्कुल। लेकिन चूंकि जेकिल एक स्टैटिक साइट जनरेटर है, मुझे रियल-टाइम प्रदर्शन के बारे में चिंता करने की ज़रूरत नहीं है। तो मैं बस अपनी नाक पकड़कर इसे पूरा करने जा रहा हूँ।
यहां, हम हर मार्कडाउन पेज को HTML में परिवर्तित करने के लिए जेकिल के बिल्ट-इन मार्कडाउन रैपर का उपयोग करते हैं।
class MySubnavGenerator < Jekyll::Generator def generate(site) parser = Jekyll::Converters::Markdown.new(site.config) site.pages.each do |page| if page.ext == ".md" html = parser.convert(page['content']) # Do something with the html here end end end end हेडिंग निकालना
हमारी नई डॉक्यूमेंटेशन साइट के लिए, मैंने तय किया कि हर H2 टैग का एक संबंधित सबनेविगेशन लिंक होना चाहिए। तो मैं प्रत्येक पेज के HTML को पार्स करने के लिए नोकोगिरी का उपयोग करूंगा, फिर मैं पेज से प्रत्येक H2 टैग को निकालूंगा।
अभी के लिए, हम सिर्फ H2 की सामग्री और आईडी को स्क्रीन पर प्रिंट करेंगे:
require "nokogiri" class MySubnavGenerator < Jekyll::Generator def generate(site) parser = Jekyll::Converters::Markdown.new(site.config) site.pages.each do |page| if page.ext == ".md" doc = Nokogiri::HTML(parser.convert(page['content'])) doc.css('h2').each do |heading| puts "#{ heading.text }: #{ heading['id'] }" end end end end end सबनेविगेशन मेनू बनाना
अब जब हमारे पास हेडिंग का टेक्स्ट और आईडी है तो हम सबनेविगेशन लिंक की एक सूची बना सकते हैं।
हम इस लिंक की सूची को पेज के डेटा एट्रिब्यूट के रूप में संग्रहीत करेंगे। इस तरह, हम अपने पेज टेम्पलेट से लिंक तक पहुंच सकते हैं।
require "nokogiri" class MySubnavGenerator < Jekyll::Generator def generate(site) parser = Jekyll::Converters::Markdown.new(site.config) site.pages.each do |page| if page.ext == ".md" doc = Nokogiri::HTML(parser.convert(page['content'])) page.data["subnav"] = [] doc.css('h2').each do |heading| page.data["subnav"] << { "title" => heading.text, "url" => [page.url, heading['id']].join("#") } end end end end end अब, अपने टेम्पलेट में, आप सबनेव के माध्यम से लूप कर सकते हैं और प्रत्येक लिंक प्रदर्शित कर सकते हैं:
{% for item in page.subnav %} <a href="{{ item.url }}">{{ item.title }}</a> {% endfor %} समस्या निवारण
जैसा कि मैंने पहले उल्लेख किया है, यह सब आपके मार्कडाउन प्रोसेसर पर निर्भर करता है जो प्रत्येक हेडिंग के लिए अद्वितीय आईडी बनाता है। यहाँ मेरे _config.yml से मार्कडाउन सेटिंग्स हैं:
# Use the redcarpet Markdown renderer markdown: redcarpet redcarpet: extensions: [ 'no_intra_emphasis', 'fenced_code_blocks', 'autolink', 'strikethrough', 'superscript', 'with_toc_data', 'tables', 'hardwrap' ] अगला क्या...
उपरोक्त दृष्टिकोण अच्छा काम करता है यदि आपको केवल एक स्तर के सबनेविगेशन की आवश्यकता है। लेकिन क्या होगा अगर आपको अधिक की आवश्यकता है? यानी यदि आप चाहते हैं कि H2 के "अंदर" सभी H3 टैग आपके मेनू में सब-सबनेविगेशन लिंक बनाएं?
हम इसे और अधिक भविष्य के ब्लॉग पोस्ट में कवर करेंगे। तो बने रहें!
