Jekyll / Liquid 没有生成活跃类答案

【问题标题】：Is-active Class not being generated by Jekyll / LiquidJekyll / Liquid 没有生成活跃类
【发布时间】：2020-10-02 01:54:11
【问题描述】：

我正在尝试创建一个响应式网站，主要用于保存文档。喜欢这两个网站：

我的页面（就在这里）>> https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html

但我有一个问题

问题：

有没有办法改变设计，以便：

我可以为当前选择的菜单项显示一个活动类。 Jekyll 液体代码未生成预期的 HTML

上下文：

布局页面的结构：

顶部有导航栏，底部有页脚，左侧有嵌套侧边菜单（屏幕宽度的 25%）和主要内容区域（屏幕宽度的 75%）。

整体布局：

<html>
<head></head>
<body>
<header></header>
<div class = "middle section">
<div class = "left side-bar">
{% include navigation.html %}
</div>
<div class = "contents">
{{content}}
</div>
</div>
<footer></footer>
</body>
</html>

内容页：

每个内容都有这样的前端：

布局：默认

使用的代码：

Jekyll 中的默认布局页面

目前这里是我用于侧边栏的 Jekyll 代码：

<ul class="treegroup">
  {% for item in include.nav %}
    {% if item.link %}
      <li class="{% if item.link == page.url | prepend:site.baseurl %}is-active {% endif %}none"><a href="{{ item.link }}">{{ item.name }}</a></li>
    {% else %}
      <li class="{% if item.link == page.url | prepend:site.baseurl %}is-active {% endif %}treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>{{ item.name }}</span></li>
    {% endif %}
        {% if item.tree %}
          {% include navigation.html nav=item.tree %}
        {% else %}  
        {% endif %}
      </li>
  {% endfor %}
</ul>

用于侧边栏的 CSS：

这是我相关的侧边栏 CSS

 /* Active link */
  ul.toc li.is-active, ul.toc li.is-active a {
    font-weight: 500;
    background-color: #E8F0FF;
    color: #1967d2;
  }

  /* Links on mouse-over */
  ul.toc li:hover:not(.is-active){
    background-color: #F1F3F4;
  }

  ul.toc li:hover:not(.is-active) a {
    background-color: #F1F3F4;
    text-decoration: underline;
  }

YAML NAV 文件：

tree:
- name: Level 1
  link: /docs/level1.html
- name: Level 2
  link: /docs/level2.html
- name: Level 3
  tree:
  - name: Home  
    link: /docs/index.html
  - name: About
    link: /docs/about.html
  - name: Level 3.2
    tree:
      - name: Staff
        link: /docs/staff.html
      - name: People
- name: Level 4
  link: /docs/level4.html
- name: Level 5
  tree:
  - name: Blog
    link: /docs/blog.html
  - name: Level 5.2
    tree:
      - name: Branches & Loops
        link: /docs/data-integration-and-etl/branches-and-loops-local.html
      - name: People
        link: /docs/people.html

YAML 配置文件

name: Hank Quinlan, Horrible Cop
markdown: kramdown
baseurl: /docs

谢谢

【问题讨论】：

你的大部分问题仍然是噪音，你会从 question 部分开始你的问题，你会有一个很好的问题，很容易回答:)

标签： javascript html jekyll liquid

【解决方案1】：

TL;DR;

这是您要查找的正确列表项：

<li class="{% if item.link == page.url %}is-active {% endif %}none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

看看你渲染的页面，你的液体模板：

<li {% if item.link == page.url | prepend:site.baseurl %}class="is-active"{% endif %} class="none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

生成此 HTML 代码：

<li class="none">
  <a href="/docs/level1.html">Level 1</a>
</li>

这意味着你有两个问题：

item.link 生成的 URL 不包含 site.baseurl，因此您的条件应该是：

{% if item.link == page.url %}

实际上，您的模板中存在第二个问题，如果条件确实通过，您最终会得到这个 li，请注意双精度，因此这里的 class 属性无效：

<li class="is-active" class="none">

这意味着正确的做法是始终拥有class 属性，但是，然后在项目处于活动状态时添加一个额外的类，而不是第二次添加额外的属性：

<li class="{% if item.link == page.url %}is-active {% endif %}none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

这将是您的解决方案。

【讨论】：

我改成了你的语法（
）但它仍然不起作用。 (i) item.link 这里是：例如：/docs/data-integration-and-etl/branches-and-loops-local.html； (ii) page.url 是 /data-integration-and-etl/branches-and-loops-local.html，在我的 config.yml 文件中，我有 baseurl: /docs，这就是为什么我做了 {% if item.link == page.url | prepend:site.baseurl %}，但它仍然无法正常工作: (