html - tipos - jekyll site pages

Jekyll selecciona la url de la página actual y cambia su clase.

Question

He estado usando Jekyll para un sitio estático (de modo que es fácil de mantener) y me he quedado atascado en la siguiente función:

Esta es mi barra de enlaces:

<ul id="links">
    <li class="first"><a class="active" href="/">Home</a></li>
    <li><a href="./associate.html">Associate With Us</a></li>
    <li><a href="./media.html">Media</a></li>
    <li><a href="./clients.html">Clients</a></li>
    <li class="last"><a  href="./contact.html">Contact Us</a></li>
</ul>       

La clase active encarga de la coloración. Lo que quiero es que jekyll aplique esta clase dependiendo de un conjunto de variables usando liquid / YAML.

¿Hay alguna manera fácil de hacer esto?

Como la barra es común a todas las páginas, ahora está en el diseño predeterminado. Podría ir usando Javascript para detectar la url, y hacer el resaltado, pero me preguntaba si había alguna forma de hacerlo en Jekyll.

Answer 1

Misma navegación en todas las páginas

Después de leer todas las respuestas, se me ocurrió una solución nueva y más fácil de mantener:

1. Agregue {% include nav.html %} a su archivo _layouts/layout.html
2. Agrega un archivo nav.html a tu carpeta _includes

3. Agregue el siguiente contenido a su archivo nav.html . Determinará si su enlace se encuentra en la página actual y agregará una clase de active , así como también eliminará index.html de su enlace. También funcionará con una subcarpeta como /repo-name , que es necesaria para la rama de gh-pages GitHub gh-pages .

   <nav>
       <ul class="nav">
           {% assign url = page.url|remove:''index.html'' %}
           {% for link in site.navigation %}
               {% assign state = '''' %}
               {% if page.url == link.url %}
                   {% assign state = ''active '' %}
               {% endif %}
               <li class="{{ state }}nav-item">
                   <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
               </li>
           {% endfor %}
       </ul>
   </nav>

4. Luego, agregue la matriz de enlace de navegación a su archivo _config.yml la siguiente manera. Tenga en cuenta la sangría correcta, ya que YAML es bastante exigente en eso (Jekyll también).

   navigation:
         - text: Home
           title: Back to home page
           url: /index.html
         - text: Intro
           title: An introduction to the project
           url: /intro.html 
         - text: etc.
           title: ...
           url: /foo.html 

Navegación solo en casa - "atrás" para otros

Suponiendo que el enlace a la página "Inicio" ( index.html ) es la primera parte de la matriz dentro de la matriz de navigation _config.html , puede usar el siguiente fragmento de código para mostrar la navegación a las diferentes páginas en la página principal / principal y un enlace a la página de inicio en todas las demás páginas:

<nav>
    <ul class="grid">
        {% assign url = page.url | remove:''/index.html'' %}
        {% assign home = site.navigation.first %}
        {% if url == empty %}
            {% for link in site.navigation %}
                {% assign state = '''' %}
                {% if page.url == link.url %}
                    {% assign state = ''active '' %}
                {% endif %}
                {% if home.url != link.url %}
                    <li class="{{ state }}nav-item">
                        <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        {% else %}
            <li class="nav-item active">
                <a href="{{ home.url }}" title="{{ home.title }}">{{ home.text }}</a>
            </li>
        {% endif %}
    </ul>
</nav>

Answer 2

Agregando a la solución de encarnado, la línea de código más simple posible con jQuery es esta:

    $( "a[href=''{{ page.url | remove: "index.html" }}'']" ).addClass("current");

Funciona perfectamente para mi.

Answer 3

Como una extensión adicional sobre el trabajo del otro, aquí hay una manera de hacerlo funcionar sin el índice index.html empapado que se muestra en todas sus URL hermosas:

---
navigation:
 - text: Home
   url: /
 - text: Blah
   url: /blah/
---
{% assign url = page.url|remove:''index.html'' %}
{% for link in page.navigation %}
<li {% if url == link.url %}class="active"{% endif %}>
    <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a>
</li>
{% endfor %}

El oro está en la declaración de assign que obtiene la URL de la página (que naturalmente incluye el index.html y luego la elimina para que coincida con las URL bonitas de page.navigation).

Answer 4

Con Jekyll 3.4.3, esto funciona:

<ul>
    {% for my_page in site.pages %} 
        {% if my_page.title %}
            <li {% if my_page.url == page.url %} class="active" {% endif %}>
                <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}
                </a>
            </li>
        {% endif %} {% endfor %}
</ul>

Answer 5

Esta puede ser una nueva característica desde que apareció la pregunta, pero descubrí que todo esto se puede hacer en un archivo:

1. Definir la navegación como una variable en el encabezado de yaml.
2. bucle sobre la variable usando líquido

Así que en mi _layouts/base.html tengo:

---
navigation:
- text: Home
  url: /index.html
- text: Travel
  title: Letters home from abroad
  url: /travel.html
---

<ul>
    {% for link in page.navigation %}
    <li {% if page.url == link.url %}class="current"{% endif %}>
       <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a></li>
    {% endfor %}
</ul>

Lo que genera esto en la página de Home :

<ul>
    <li class="current"><a href="/index.html" title="">Home</a></li>
    <li><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>

Y esto en la página de Travel :

<ul>
    <li><a href="/index.html" title="">Home</a></li>
    <li class="current"><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>

Answer 6

Esto me funciona (lo siento por el código que no está en inglés):

<nav>
  <a href="/kursevi" {% if page.url == ''/kursevi/'' %} class="active"{% endif %}>Kursevi</a>
  <a href="/radovi" {% if page.url == ''/radovi/'' %} class="active"{% endif %}>Radovi</a>
  <a href="/blog" {% if page.url == ''/blog/'' %} class="active"{% endif %}>Blog</a>
  <a href="/kontakt" {% if page.url == ''/kontakt/'' %} class="active"{% endif %}>Kontakt</a>
</nav>

Answer 7

Hago esto en dos páginas que he creado en Jekyll.

Lo primero que hago es crear una entrada dentro de _config.yml con la información de todas las páginas:

# this goes inside _config.yml. Change as required
navigation:
- text: What we do
  url: /en/what-we-do/
- text: Who we are
  url: /en/who-we-are/
- text: Projects
  url: /en/projects/
  layout: project
- text: Blog
  url: /en/blog/
  layout: post

Luego, en mi diseño principal, uso esa información para generar los enlaces de navegación. En cada enlace, comparo la url del enlace con la url de la página actual. Si son iguales, la página está activa. De lo contrario, no lo son.

Hay un par de casos especiales: todas las publicaciones del blog deben resaltar el enlace del "blog" y las portadas (inglés y español) no deben presentar la barra de navegación. Para ambos casos, confío en el hecho de que las publicaciones en el blog y las portadas tienen diseños específicos (observe que los enlaces "Blog" y "Proyecto" en el yaml tienen un parámetro adicional llamado "diseño")

El código de navegación se genera así:

{% unless page.layout == ''front'' %}
  <ul class="navigation">
    {% for link in site.navigation %}
      {% assign current = nil %}
      {% if page.url == link.url or page.layout == link.layout %}
        {% assign current = ''current'' %}
      {% endif %}

      <li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
        <a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
      </li>
    {% endfor %}
  </ul>
{% endunless %}

Todavía tengo que acordarme de agregar una entrada a _config.yaml cada vez que agrego una nueva página y luego reinicie Jekyll, pero ahora sucede con poca frecuencia.

Creo que el navegador yaml podría ir dentro de un _include llamado "navegación" o algo similar, pero no he intentado usar yaml dentro de esos, así que no sé si funcionará. En mi caso, dado que tengo un sitio multilingüe, es más fácil tener todo dentro de la configuración (las traducciones faltantes son más fáciles de detectar)

Espero que esto ayude.

Answer 8

La lógica de resalte de navegación es lo último que haría en el lado del servidor. Prefiero seguir con un enfoque agradable, limpio y discreto utilizando JS / jQuery (si esta opción funciona para usted).

1. Los elementos que deben resaltarse van dentro de un diseño común como este:

   <nav>
     <a id="section1" href="#">Section 1</a>
     <a id="section2" href="#">Section 2</a>
     <a id="section3" href="#">Section 3</a>
   </nav>

2. En su página (o incluso en diseños anidados) coloca un elemento con data-ref="#section1" (de hecho, cualquier selector de jQuery funcionará).

3. Ahora, incluya el siguiente fragmento de código JS (que se muestra como jQuery, pero cualquier marco lo hará) en <head> :

   $(function() {
     $("[data-ref]").each(function() {
       $($(this).attr("data-ref")).addClass("current");
     });
   });

Este enfoque es bueno, porque no hace suposiciones sobre la arquitectura subyacente, los marcos, los lenguajes y los motores de plantillas.

Actualización: como señalaron algunas personas, es posible que desee omitir la parte $(function() { ... }) que une el script al evento preparado para DOM, y simplemente empujar el script hacia la parte inferior de su <body> .

Answer 9

Necesitaba algo simple, esto es lo que hice.

En mi materia delantera agregué una variable llamada active

p.ej

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

Tengo una navegación incluida en la siguiente sección.

    <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="/">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>

Esto me funciona, ya que la cantidad de enlaces en la navegación es muy estrecha.

Answer 10

Tomé un enfoque de CSS simple. Primero, agregue un identificador en la materia delantera ...

---
layout: page
title: Join us
permalink: /join-us/
nav-class: join <-----
---

Agrega esto como una clase en <body> y tu navegador ...

<body class="{{ page.nav-class }}">

y

<li class="{{ page.nav-class }}">...</a></li>

Luego vincula estos para todas las páginas en CSS, por ejemplo:

.about .about a,
.join .join a,
.contact .contact a {
color: #fff;
}

El principal inconveniente es que necesitas codificar las reglas de estilo.