Jekyll - मेनू बार में वर्तमान टैब को स्वचालित रूप से हाइलाइट करें

Question

मैं इसे स्थैतिक साइट और Jekyll को होस्ट करने के लिए github का उपयोग कर रहा हूं।

मेरे पास एक मेनू बार (एस <ul>) है और इसे पसंद करेंगे<li> वर्तमान पृष्ठ अनुरूप होगा जिसे सीएसएस हाइलाइटिंग के लिए एक अलग वर्ग सौंपा जाएगा।

तो छद्म कोड की तरह कुछ:

<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>

या शायद पूरी भी उत्पन्न करते हैं <ul> Jekyll में ।

यह अपमानजनक के बाहर न्यूनतम बदलाव के साथ कैसे किया जा सकता है <ul>?

Comments

कौन से पृष्ठों का उपयोग करना है, इसके लिए कॉपी पेस्ट से चुनें: stackoverflow.com/a/17215331/895245

— Ciro Santilli Sant use use use

Answer 1

हां, आप यह कर सकते हैं।
इसे पूरा करने के लिए हम इस तथ्य का लाभ उठाएंगे कि वर्तमान पृष्ठ को हमेशा तरल चर द्वारा दर्शाया जाता है: pageटेम्पलेट में, और यह भी कि प्रत्येक पोस्ट / पृष्ठ की page.urlविशेषता में एक विशिष्ट पहचानकर्ता होता है।

इसका मतलब है कि हमें अपने नेविगेशन पृष्ठ को बनाने के लिए सिर्फ एक लूप का उपयोग करना होगा, और ऐसा करके हम page.urlलूप के प्रत्येक सदस्य के खिलाफ जांच कर सकते हैं । यदि यह एक मैच पाता है, तो यह उस तत्व को उजागर करना जानता है। ये रहा:

  {% for node in site.pages %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endfor %}

यह उम्मीद के मुताबिक काम करता है। हालाँकि आप शायद अपने सभी पेज को अपने नेव बार में नहीं चाहते हैं। पृष्ठ "समूहीकरण" का अनुकरण करने के लिए आप कुछ इस तरह से कर सकते हैं:

## Put the following code in a file in the _includes folder at: ./_includes/pages_list

{% for node in pages_list %}
  {% if group == null or group == node.group %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}

अब पृष्ठ "समूहीकृत" हो सकते हैं। पृष्ठ को एक समूह देने के लिए आपको इसे YAML फ्रंट मैटर के पन्नों में निर्दिष्ट करना होगा:

---
title: blah
categories: blah
group: "navigation"
---    

अंत में आप अपने नए कोड का उपयोग कर सकते हैं! जहां भी आपको अपने टेम्पलेट में जाने के लिए आपके नेविगेशन की आवश्यकता होती है, बस अपनी फ़ाइल को "कॉल" करें और इसे कुछ पृष्ठ और उस समूह को पास करें जिसे आप प्रदर्शित करना चाहते हैं:

<ul>
  {% assign pages_list = site.pages %}
  {% assign group = 'navigation' %}
  {% include pages_list %}
</ul>

उदाहरण

यह कार्यक्षमता Jekyll-Bootstrap ढांचे का हिस्सा है । आप यहाँ उल्लिखित कोड के लिए सटीक दस्तावेज देख सकते हैं: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

अंत में आप इसे वेबसाइट के भीतर ही देख सकते हैं। बस दाहिने नेविगेशन को देखें और आप देखेंगे कि वर्तमान पृष्ठ हरे रंग में हाइलाइट किया गया है: उदाहरण हाइलाइट किए गए नेव लिंक

Comments

बढ़िया सवाल, बढ़िया जवाब, धन्यवाद। टैब की मैन्युअल रूप से चयनित सूची के लिए इसे संशोधित करना सीधे आगे था। उस पल का एहसास करने के लिए कुछ समय लिया। page.url में '/' शामिल है, जैसे। "Iindex.html", "index.html" नहीं

— cboettig

यह दृष्टिकोण मेरे लिए एक Jekyll त्रुटि का परिणाम है। jekyll 2.4.0 | Error: The included file '/Users/joelglovier/project/jekyllsite/_includes/pages_list' should exist and should not be a symlink

— जोएल ग्लोवियर

जिस तरह से जेकिल में अंतर्निहित होना चाहिए, उसके लिए बहुत जटिल है।

— कैमरूनरो जूल

.html@cameronjroe ने पेज_लिस्ट में एक्सटेंशन जोड़ने की कोशिश की और इसके साथ ही

— HotelCalifornia

Answer 2

मुझे लगता है कि सरलतम नेविगेशन आवश्यकता के लिए, सूचीबद्ध समाधान अत्यधिक जटिल हैं। यहां एक समाधान है जिसमें कोई सामने का मामला, जावास्क्रिप्ट, लूप्स आदि शामिल हैं।

चूंकि हमारे पास पृष्ठ URL तक पहुंच है, इसलिए हम URL को सामान्य और विभाजित कर सकते हैं और खंडों के विरुद्ध परीक्षण कर सकते हैं, जैसे:

{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul>
    <li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
    <li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
    <li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
  </ul>
</nav>

बेशक, यह केवल तभी उपयोगी है जब स्थैतिक खंड नेविगेशन को सीमांकित करने का साधन प्रदान करते हैं। कुछ भी अधिक जटिल, और आपको @RobertKenny जैसे सामने वाले मामले का उपयोग करना होगा।

Comments

यह वही है जो मैं ढूंढ रहा था, लेकिन क्या ऐसा नहीं होना चाहिए classs="active"?

— सिरो सेंटिल्ली 50 iro i i ''

@CiroSantilli 六四 ill CSS यदि आपके CSS में स्टाइल है .active, तो हाँ। उपर्युक्त उत्तर में, लेखक कह रहा है कि कक्षा को उसकी शैली में बुलाना है .current। कोई बड़ी बात नहीं।

— ब्रायन ज़ेलिप

@BrianZ यह आधिकारिक है: बहुत ज्यादा बूटस्ट्रैप आपके दिमाग को पिघला देता है :)

— सिरो सेंटिल्ली 郝海东 official official official 六四

मुखपृष्ठ के लिए मुझे {% यदि वर्तमान [1] == अशक्त%} सेट करना है

— गोरवॉयल

Answer 3

@ बेन-फोस्टर के समाधान के समान लेकिन किसी भी jQuery का उपयोग किए बिना

मुझे कुछ सरल चाहिए था, यही मैंने किया।

मेरे सामने के मामले में मैंने एक चर जोड़ा active

जैसे

---
layout: generic
title:  About
active: about
---

मेरे पास निम्नलिखित अनुभाग के साथ एक नेविगेशन शामिल है

    <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="https://stackoverflow.com/">Home</a></li>
        {% endif %}
        {% if page.active == "blog" %}
            <li class="active"><a href="#">Blog</a></li>
        {% else %}
            <li><a href="../blog/">Blog</a></li>
        {% endif %}
        {% if page.active == "about" %}
            <li class="active"><a href="#">About</a></li>
        {% else %}
            <li><a href="../about">About</a></li>
        {% endif %}
    </ul>

यह मेरे लिए काम करता है क्योंकि नेविगेशन में लिंक की मात्रा बहुत कम है।

Comments

धन्यवाद @SurenderLohia मैं चीजों को सिंगल रखना पसंद करता हूं।

— रॉबर्टकेनी

Answer 4

यहाँ मेरा समाधान है जो मुझे लगता है कि वर्तमान पृष्ठ को उजागर करने का सबसे अच्छा तरीका है:

अपने _config.yml पर एक नेविगेशन सूची को इस तरह परिभाषित करें:

navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/

तब आपकी _includes / header.html फ़ाइल में आपको सूची के माध्यम से यह जांचने के लिए लूप करना होगा कि क्या वर्तमान पृष्ठ ( page.url ) नेविगेशन सूची के किसी आइटम से मिलता जुलता है, यदि ऐसा है तो आप बस सक्रिय वर्ग सेट करें और इसे <a>टैग में जोड़ें :

<nav>
  {% for item in site.navigation %}
      {% assign class = nil %}
      {% if page.url contains item.url %}
          {% assign class = 'active' %}
      {% endif %}
      <a href="{{ item.url }}" class="{{ class }}">
          {{ item.title }}
      </a>
  {% endfor %}
</nav>

और क्योंकि आप बराबर = ऑपरेटर के बजाय समाहित ऑपरेटर का उपयोग कर रहे हैं, इसलिए आपको URL / '/ blog / post-name /' या 'प्रोजेक्ट्स / प्रोजेक्ट-नाम / जैसे URL के साथ काम करने के लिए अतिरिक्त कोड लिखने की आवश्यकता नहीं है। ' । तो यह वास्तव में अच्छी तरह से काम करता है।

पुनश्च: अपने पृष्ठों पर पर्मलिंक चर सेट करने के लिए मत भूलना ।

Comments

यह मेरा पसंदीदा समाधान है क्योंकि इसका मतलब है कि मैं पृष्ठों का क्रम चुन सकता हूं।

मुझे यह समाधान पसंद है, लेकिन यह काम नहीं करता है यदि आपके पास url के साथ एक नौसिखिया लिंक है /क्योंकि सभी पृष्ठ यूआरएल में प्रमुख स्लैश हैं। निम्नलिखित काम करता है: {% for link in site.navigation %} {% assign class = nil %} {% if page.url == link.url %} {% assign class = 'active' %} {% elsif page.url != '/' and page.url contains link.url %} {% assign class = 'active parent' %} {% endif %} <a href="{{link.url}}" class="{{class}}">{{link.title}}</a> {% endfor %}

— JamesWilson

Answer 5

मैंने इसे पूरा करने के लिए जावास्क्रिप्ट का थोड़ा सा उपयोग किया। मेरे पास मेनू में निम्नलिखित संरचना है:

<ul id="navlist">
  <li><a id="index" href="index.html">Index</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="videos.html">Videos</a></li>
</ul>

यह जावास्क्रिप्ट स्निपेट वर्तमान संबंधित पृष्ठ पर प्रकाश डालता है:

$(document).ready(function() {
    var pathname = window.location.pathname;

    $("#navlist a").each(function(index) {
        if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
            $(this).addClass("current");
    });

    if ($("a.current").length == 0)
        $("a#index").addClass("current");
});

Comments

मुझे व्यक्तिगत रूप से लगता है कि यह उपरोक्त विधि से क्लीनर है। यदि आप अपने नेवी में पृष्ठों को ऑर्डर करना चाहते हैं या यदि आप "इंडेक्स" को डिफ़ॉल्ट रूप से हाइलाइट करना चाहते हैं तो उपरोक्त विधि बदसूरत होने लगती है।

— वेरोजेन

वर्तमान पृष्ठ तत्व में कक्षा जोड़ने के साथ आरंभ करना सरल और आसान है। "स्वीकार किए जाते हैं" उत्तर में यह पता लगाने में लगभग घंटे लग गए कि कैसे और क्यों। साझा करने के लिए धन्यवाद

— अश्विन

Answer 6

मेरा दृष्टिकोण पृष्ठ के YAML सामने मामले में एक कस्टम चर को परिभाषित करने और <body>तत्व पर यह उत्पादन करने के लिए है:

<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}> 

मेरे नेविगेशन लिंक में उस पृष्ठ का पहचानकर्ता शामिल होता है जिससे वे लिंक करते हैं:

<nav>
    <ul>
        <li><a href="artists.html" data-page-id="artists">artists</a></li>
        <li><a href="#" data-page-id="contact">contact</a></li>
        <li><a href="#" data-page-id="about">about</a></li>
    </ul>
</nav>

पृष्ठ के सामने के मामले में हम पृष्ठ आईडी सेट करते हैं:

---
layout: default
title: Our artists
id: artists
---

और अंत में सक्रिय लिंक को सेट करने के लिए थोड़ा jQuery का:

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}

Comments

मैंने सोचा था कि इस विधि का पालन करना बहुत आसान था और मेनू आइटम की आसान छंटाई की अनुमति देता है। मैं जेकेल के लिए बहुत नया हूं इसलिए अन्य तरीकों ने मुझे थोड़ा डरा दिया, लेकिन मैं jQuery के साथ बहुत सहज हूं। शुद्धतावादी के लिए 100% सही नहीं हो सकता है, लेकिन यह अच्छी तरह से काम करता है और काम करता है।

— TheBrockEllis

यदि आप एक तरल केवल समाधान चाहते हैं, तो आप यह कोशिश कर सकते हैं: stackoverflow.com/a/46984009/2397550

— JoostS

Answer 7

आपकी वेबसाइट का नेविगेशन अनियंत्रित सूची होना चाहिए। सक्रिय होने पर हल्का करने के लिए सूची आइटम प्राप्त करने के लिए, निम्न लिक्विड स्क्रिप्ट उनके लिए एक 'सक्रिय' वर्ग जोड़ती है। इस वर्ग को सीएसएस के साथ स्टाइल किया जाना चाहिए। यह पता लगाने के लिए कि कौन सा लिंक सक्रिय है, स्क्रिप्ट 'समाहित' का उपयोग करती है, जैसा कि आप नीचे दिए गए कोड में देख सकते हैं।

<ul>
  <li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
    <a href="https://stackoverflow.com/getting-started/">Getting started</a>
  </li>
  ...
  ...
  ...
</ul>

यह कोड जेकिल में सभी पर्मलिंक शैलियों के साथ संगत है। निम्नलिखित URL में 'मेन्यू' स्टेटमेंट में पहले मेन्यू आइटम पर प्रकाश डाला गया है:

• शुरू करना/
• आरंभ करना। html
• get-start / index.html
• शुरुआत / उपपृष्ठ /
• get-start / subpage.html

स्रोत: http://jekyllcodex.org/without-plugin/simple-menu/

Answer 8

लूत के भ्रमित करने वाले उत्तर यहां दिए गए हैं। मैं बस एक का उपयोग करें if:

{% if page.name == 'limbo-anim.md' %}active{% endif %} 

मैं सीधे पृष्ठ का संदर्भ देता हूं और इसे उस कक्षा के अंदर रखता हूं जिसे मैं चाहता हूं

<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>

किया हुआ। शीघ्र।

Comments

क्या आप विस्तृत कर सकते हैं कि आपने उन तत्वों में से प्रत्येक को कहाँ रखा है? header.html, या

— जार्ज

Answer 9

मैं page.pathफ़ाइलनाम का उपयोग और बंद कर रहा हूं ।

<a href="https://stackoverflow.com/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>

Answer 10

बहुत अच्छे जवाब पहले से ही हैं।

इसे इस्तेमाल करे।

मैं उपरोक्त उत्तरों को थोड़ा बदल देता हूं।

_data/navigation.yaml

- name: Home
  url: /
  active: home
- name: Portfolio
  url: /portfolio/
  active: portfolio
- name: Blog
  url: /blog/
  active: blog

एक पृष्ठ में -> portfolio.html(एक समान सक्रिय पृष्ठ नाम वाले सभी पृष्ठों के लिए समान)

---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---

<div>
  <h2>Portfolio</h2>
</div>

Navigation html part

<ul class="main-menu">
  {% for item in site.data.navigation %}
    <li class="main-menu-item">
      {% if {{page.active}} == {{item.active}} %}
        <a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
      {% else %}
        <a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Answer 11

यदि आप jekyll के लिए Minima विषय का उपयोग कर रहे हैं, तो आपको शीर्ष लेख में वर्ग विशेषता पर एक ternary जोड़ने की आवश्यकता है:

 <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">

पूरा अंश:

        <div class="trigger">
        {%- for path in page_paths -%}
          {%- assign my_page = site.pages | where: "path", path | first -%}
          {%- if my_page.title -%}
          <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {%- endif -%}
        {%- endfor -%}
      </div>

इसे अपने _config.yml में जोड़ें

header_pages:
  - classes.markdown
  - activities.markdown
  - teachers.markdown

और फिर बेशक आपका सीएसएस:

   a.active {
                color: #e6402a;
            }

Answer 12

यहाँ एक ही करने के लिए एक jQuery विधि है

  var pathname = window.location.pathname;

  $(".menu.right a").each(function(index) {
    if (pathname === $(this).attr('href') ) {
      $(this).addClass("active");
    }
  });