Jekyll选择当前页面的网址并更改其类别 [英] Jekyll select current page url and change its class

问题描述

这是我的链接bar：

 < ul id =links> 
< li class =first>< a class =activehref =/>主页< / a>< / li> 
< li>< a href =./ associate.html>与我们联系< / a>< / li> 
< li>< a href =./ media.html>媒体< / a>< / li> 
< li>< a href =./ clients.html>客户< / a>< / li> 
< li class =last>< a href =./ contact.html>与我们联系< / a>< / li> 
< / ul> 
  

active 类处理着色。我想要的是这个类由jekyll应用，取决于使用liquid / YAML的一些变量集。

是否有一些简单的方法可以解决这个问题？ b
$ b

由于栏是所有页面的共同点，因此它现在处于默认布局。我可以通过使用Javascript来检测网址，并做突出显示，但想知道是否有任何方式在Jekyll做这件事。

解决方案

我做的第一件事就是在_config.yml里创建一个条目，其中的信息是所有的页面：

 ＃这里面是_config.yml。根据需要更改
导航：
  -  text：我们做什么
 url：/ en /我们做什么/ 
  -  text：我们是谁
 url： / en / who-we-are / 
  -  text：项目
 url：/ en / projects / 
 layout：项目
  -  text：Blog 
 url：/ en / blog / 
 layout：post 
  

然后，在我的主布局中，我使用信息来生成导航链接。在每个链接上，我将链接的url与当前页面的url进行比较。如果它们相同，则页面处于活动状态。有些特殊情况：所有博客文章都必须突出显示博客链接，并且不得出现头版（英文和西班牙文）导航栏。对于这两种情况，我都依赖于博客文章和首页具有特定布局（注意yaml上的Blog和Project链接有一个名为layout的额外参数）。

导航代码是这样生成的：

  {％除非page.layout =='front' ％} 
< ul class =navigation> 
 {％for site in site.navigation％} 
 {％assign current = nil％} 
 {％if page.url == link.url or page.layout == link.layout ％} 
 {％assign current ='current'％} 
 {％endif％} 
 
 
< a class ={{current}}href ={{link.url}}> {{link.text}}< / a> 
< / li> 
 {％endfor％} 
< / ul> 
 {％endunless％} 
  

我仍然需要记住向_config.yaml添加条目每次我添加一个新页面，然后重新启动Jekyll，但现在很少发生。

我认为导航yaml可以进入内部一个名为导航或类似的_include，但我没有尝试在这些内部使用yaml，所以我不知道它是否会起作用。就我而言，由于我拥有一个多语言网站，因此将配置中的所有内容更容易（缺少翻译更容易发现）。我希望这有助于。

I've been using Jekyll for a static site (so that its easy to maintain), and have been stuck at the following feature :

This is my link bar :

<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>       

The active class handles the coloring. What I want is this class be applied by jekyll depending on some variable set using liquid/YAML.

Is there some easy way to go about this?

Since the bar is common to all the pages, it is now in the default layout. I could go around by using Javascript to detect the url, and do the highlighting but was wondering if there was any way of doing this in Jekyll.

解决方案

I do this in two pages I have set up in Jekyll.

The first thing I do is creating an entry inside _config.yml with the information of all the pages:

# 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

Then, on my main layout, I use that information to generate the navigation links. On each link, I compare the url of the link with the url of the current page. If they are equal, the page is active. Otherwise, they are not.

There's a couple special cases: all blog posts must highlight the "blog" link, and the front pages (English and Spanish) must not present the nav bar. For both cases, I rely on the fact that blog posts and front pages have specific layouts (notice that the "Blog" and "Project" links on the yaml have an extra parameter called "layout")

The navigation code is generated like this:

{% 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 %}

I still have to remember adding an entry to _config.yaml every time I add a new page, and then restart Jekyll, but it happens very infrequently now.

I think the navigation yaml could go inside an _include called "navigation" or something similar, but I haven't tried using yaml inside those so I don't know whether it will work. In my case, since I've got a multi-lingual site, it's easier to have everything inside config (missing translations are easier to spot)

I hope this helps.

这篇关于Jekyll选择当前页面的网址并更改其类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！