【问题标题】:Jekyll: Liquid custom output statement for dynamic CSS classesJekyll:动态 CSS 类的 Liquid 自定义输出语句
【发布时间】:2019-01-04 18:16:23
【问题描述】:

我的 Jekyll 网站有两种内容:个人专业

我想通过动态 CSS 类强调访问者当前正在阅读的内容类型:

  • 如果访问者在标记为“个人”的页面上,我的<main> 元素的类应该是"personal-content"
  • 如果访问者在标记为“专业”的页面上,我的<main> 元素的类应该是"professional-content"
  • 否则,类应为"site-content"

在每个页面的前端,我正在创建一个输出语句,我将其设置为"personal""professional",例如:

---
content: "personal"
----

然后我在我的标签中使用这个输出语句,如下所示:(为了阅读目的而缩进)

<main
{% if page.content %}
    class="{{ page.content }}-content"
    {% else %}
        class="site-content"
{% endif %}
>

但是,我只看到了 site-content 类的样式。我做错了什么?

【问题讨论】:

  • 其他类(个人内容或专业内容)是否出现在 HTML 输出中?
  • {{ page.content | inspect }} 可以为您提供有关正在发生的事情的线索。
  • 感谢@APerson,我查看了生成的 HTML,发现这是我的开始
    标签:&lt;main class="。不仅自定义类设置不起作用,还会让我的页面变成无效的html。
  • @DavidJacquel 多亏了这一点,我想我明白了:Jekyll 已经在使用“内容”将降价文章包含到布局中! {{ 页面内容 |检查 }} 实际上返回了我页面的副本。

标签: html css jekyll liquid yaml-front-matter


【解决方案1】:

感谢上面的cmets,我修好了!

问题是我没有像我想的那样使用自定义输出语句:{{ content }} 已被 Jekyll 使用 将 Markdown 文章包含到 HTML 布局中。

所以我将{{ page.content }} 切换到{{ page.contenttype }},它工作正常!

警告: 我还必须更改我给出的输出语句的值。 professional 工作正常,但由于某种原因 personal 正在返回 nil。所以我只是简单地将它们切换为 properso 和瞧。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-18
    • 2016-11-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多