new - jekyll tutorial
Jekyll: resalta automáticamente la pestaña actual en la barra de menú (10)
Estoy usando github para alojar un sitio estático y Jekyll para generarlo.
Tengo una barra de menú (como <ul> ) y me gustaría que a la <li> correspondiente a la página actual se le asigne una clase diferente para resaltar CSS.
Entonces algo así como pseudo código:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
O tal vez incluso generar todo el <ul> en Jekyll.
¿Cómo se puede hacer esto con cambios mínimos fuera del infractor <ul> ?
Aquí está mi solución, que creo que es la mejor manera de resaltar la página actual:
Defina una lista de navegación en su _config.yml como esta:
navigation:
- title: blog
url: /blog/
- title: about
url: /about/
- title: projects
url: /projects/
Luego, en su archivo _includes / header.html debe recorrer la lista para verificar si la página actual ( page.url ) se asemeja a cualquier elemento de la lista de navegación, de ser así, simplemente configure la clase activa y añádala a la <a> etiqueta:
<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>
Y como está utilizando el operador contains en lugar del operador equals = , no tiene que escribir código adicional para que funcione con URL como ''/ blog / post-name /'' o ''projects / project-name / '' . Entonces funciona realmente bien
PD: No te olvides de configurar la variable de enlace permanente en tus páginas.
Aquí hay un método jQuery para hacer lo mismo
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr(''href'') ) {
$(this).addClass("active");
}
});
He estado usando page.path y saliendo del nombre del archivo.
<a href="/" class="{% if page.path == ''index.html'' %}active{% endif %}">home</a>
La navegación de su sitio web debe ser una lista desordenada. Para que los elementos de la lista se aclaren cuando están activos, la siguiente secuencia de comandos líquida les agrega una clase ''activa''. Esta clase debe tener un estilo con CSS. Para detectar qué enlace está activo, el script usa ''contiene'', como puede ver en el código a continuación.
<ul>
<li {% if page.url contains ''/getting-started'' %}class="active"{% endif %}>
<a href="/getting-started/">Getting started</a>
</li>
...
...
...
</ul>
Este código es compatible con todos los estilos de enlace permanente en Jekyll. La declaración ''contains'' resalta con éxito el primer elemento del menú en las siguientes URL:
- empezando/
- getting-started.html
- getting-started / index.html
- Getting-started / subpágina /
- getting-started / subpage.html
Mi enfoque es definir una variable personalizada en el frente de YAML de la página y mostrar esto en el elemento <body> :
<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>
Mis enlaces de navegación incluyen el identificador de la página a la que se vinculan:
<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>
En el frente de la página establecemos el id de la página:
---
layout: default
title: Our artists
id: artists
---
Y finalmente un poco de jQuery para establecer el enlace activo:
// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
$("a[data-page-id=''" + currentPage + "'']").addClass("active");
}
Muchas buenas respuestas ya están ahí.
Prueba esto.
Alteradamente alteré las respuestas anteriores.
_data/navigation.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
En una página -> portfolio.html (Lo mismo para todas las páginas con un nombre de página activo relativo)
---
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>
Siento que para el requisito de navegación más simple, las soluciones enumeradas son excesivamente complejas. Aquí hay una solución que no involucra material de entrada, Javascript, bucles, etc.
Dado que tenemos acceso a la URL de la página, podemos normalizar y dividir la URL y probarla en los segmentos, de esta forma:
{% 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>
Por supuesto, esto solo es útil si los segmentos estáticos proporcionan los medios para delinear la navegación. Algo más complicado, y tendrás que usar material frontal como demostró @RobertKenny.
Similar a la solución de @ ben-foster pero sin usar ningún jQuery
Necesitaba algo simple, esto es lo que hice.
En mi asunto principal, agregué una variable llamada active
p.ej
---
layout: generic
title: About
active: about
---
Tengo una navegación incluida con 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 funciona para mí ya que la cantidad de enlaces en la navegación es muy estrecha.
Usé un poco de JavaScript para lograr esto. Tengo la siguiente estructura en el menú:
<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>
Este fragmento de javascript resalta la página correspondiente actual:
$(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");
});
Sí, usted puede hacer esto.
Para lograr esto, aprovecharemos el hecho de que la página actual siempre está representada por la variable líquida: page en la plantilla, y también que cada publicación / página tiene un identificador único en su atributo page.url .
Esto significa que solo tenemos que usar un bucle para construir nuestra página de navegación, y al hacerlo podemos verificar page.url contra cada miembro del bucle. Si encuentra una coincidencia, sabe resaltar ese elemento. Aquí vamos:
{% 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 %}
Esto funciona como se esperaba Sin embargo, probablemente no quieras que todas tus páginas estén en tu barra de navegación. Para emular la "agrupación" de la página, puede hacer algo como esto:
## 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 %}
Ahora las páginas pueden ser "agrupadas". Para dar a una página un grupo, debe especificarlo en las páginas YAML Front Matter:
---
title: blah
categories: blah
group: "navigation"
---
¡Finalmente puedes usar tu nuevo código! Donde sea que necesite que su navegación vaya en su plantilla, simplemente "llame" a su archivo de inclusión y páselo algunas páginas y el grupo que desea mostrar:
<ul>
{% assign pages_list = site.pages %}
{% assign group = ''navigation'' %}
{% include pages_list %}
</ul>
Ejemplos
Esta funcionalidad es parte del marco de Jekyll-Bootstrap . Puede ver la documentación exacta del código que se describe aquí: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Finalmente, puede verlo en acción dentro del sitio web en sí. Solo mire la navegación de la derecha y verá que la página actual está resaltada en verde: Ejemplo de vínculo de navegación resaltado