জেকিলে H2s থেকে স্বয়ংক্রিয়ভাবে সাবনেভিগেশন তৈরি করুন

আমি জেকিল ব্যবহার করে আমাদের ডকুমেন্টেশন সাইট পুনর্নির্মাণ করছি। যেহেতু আমাদের ডকুমেন্টেশন পৃষ্ঠাগুলি বেশ বড়, তাই শীর্ষ-স্তরের নেভিগেশন ছাড়াও আমাদের কিছু ধরণের সাবনেভিগেশন থাকতে হবে৷

এই পোস্টে আমরা একটি সাধারণ জেকিল প্লাগ-ইন তৈরি করব যা আপনার পোস্ট বা পৃষ্ঠাগুলির শিরোনাম থেকে সাবনাভ লিঙ্ক তৈরি করতে পারে।

ওভারভিউ

আমি এই প্রকল্পটিকে নিম্নলিখিত কাজের মধ্যে ভেঙে দিয়েছি:

1. একটি জেকিল জেনারেটর তৈরি করুন যা সাইটের প্রতিটি পৃষ্ঠার বিপরীতে চালানো হয়।
2. জেনারেটরকে শেখান কিভাবে পৃষ্ঠাগুলিকে প্রি-রেন্ডার করতে হয় যাতে এটি শিরোনামের তথ্য বের করতে পারে৷
3. পৃষ্ঠাগুলি পার্স করতে nokogiri ব্যবহার করুন HTML প্রাসঙ্গিক শিরোনাম এবং বিষয়বস্তু বের করুন৷
4. সাবনেভিগেশন রেন্ডার করুন।

নীচের উদাহরণগুলিতে সমস্ত সাবনাভ লিঙ্কগুলি অ্যাঙ্কর লিঙ্ক। এই পদ্ধতির কাজ করার জন্য, আপনাকে নিশ্চিত করতে হবে যে আপনার মার্কডাউন প্রসেসর শিরোনামের জন্য আইডি তৈরি করছে। with_toc_data সহ রেডকার্পেট অপশন সুন্দরভাবে কাজ করে।

একটি মৌলিক জেকিল জেনারেটর

আপনি জেকিলের জন্য তৈরি করতে পারেন এমন কয়েকটি বিভিন্ন ধরণের প্লাগ-ইন রয়েছে। আমরা একটি জেনারেটর তৈরি করতে যাচ্ছি৷

জেনারেটর হল এমন ক্লাস যা Jekyll::Generator থেকে উত্তরাধিকারসূত্রে পাওয়া যায় এবং যা generate নামে একটি পদ্ধতি প্রদান করে .

জেকিল সমস্ত মার্কডাউন ফাইল লোড করার পরে জেনারেটর চালানো হয় কিন্তু সেই ফাইলগুলিকে HTML-এ রূপান্তরিত করার আগে। একটি site বস্তু উৎপন্ন পদ্ধতিতে পাস করা হয়। এবং আপনি আপনার সাইটের সমস্ত পৃষ্ঠা, পোস্ট এবং অন্যান্য সংস্থান অ্যাক্সেস করতে সাইট অবজেক্ট ব্যবহার করতে পারেন।

নীচের উদাহরণে, আমরা একটি জেনারেটর তৈরি করি যা সমস্ত পৃষ্ঠাগুলি লুপ করে এবং তাদের শিরোনাম প্রিন্ট করে৷

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 ট্যাগের একটি সংশ্লিষ্ট সাবনেভিগেশন লিঙ্ক থাকা উচিত। তাই আমি প্রতিটি পৃষ্ঠার এইচটিএমএল পার্স করতে নোকোগিরি ব্যবহার করব, তারপর আমি পৃষ্ঠা থেকে প্রতিটি 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 ট্যাগ আপনার মেনুতে সাব-সাবনেভিগেশন লিঙ্ক তৈরি করতে চান?

আমরা ভবিষ্যতে একটি ব্লগ পোস্টে যে এবং আরো কভার করা হবে. তাই সাথে থাকুন!