如何在Jekyll中调整特定页面/帖子的布局?

时间:2013-01-01 19:37:20

标签: jekyll

我想在Jekyll的布局中做一些改变。变化很小而且不同。例如,链接其他CSS或JavaScript文件。或者在标题中添加一些信息。或调整页面标题。 重要这些更改取决于页面/帖子。

由于变化很小且多样化,因此为每个变化创建一个特殊的布局似乎太贵了。

我尝试创建自己的解决方案但遇到impossibility to use variables in including instructions

有没有人解决过类似的问题?例如,将特殊CSS链接到特定帖子?

2 个答案:

答案 0 :(得分:38)

您可以使用YAML front matter调整任何帖子/页面所需的内容。您在此处提供的任何信息都可以通过布局访问,并包含在page变量下或任何列表中的特定帖子下。

这听起来像是你案件的解决方案:你可以像这样使用YAML前面的事情:

---
extra_css:
  - foo.css
  - dir/bar.css
  - /s/baz.css
---

然后在你的布局标题中使用它:

{% for css_name in page.extra_css %}
    <link rel="stylesheet" href="{{ css_name }}">
{% endfor %}

通过这种方式,您可以根据您在YAML前面的帖子中提供的数据添加任何逻辑。

如果您想将这些逻辑中的一些逻辑抽象到模块中,您可以使用包含它的hack,在包含之前分配变量然后在其中使用它。 Here is a link描述了它是如何在Jekyll Bootstrap项目中制作的(顺便说一下,它的网站上有很多关于Jekyll的好消息)。

而且,是的,Jekyll不允许在包含中使用变量,因此如果您想要有条件地包含某些内容,您需要一个包含某个地方的所有可用包含的列表,然后创建插入一个或多个的所有条件另一个你需要的时候。


另一种解决方案是将布局中的所有内容划分为包含,并使布局具有不同的复杂程度 - 这样您就可以为帖子设置任何基本布局,然后编写包含您需要的任何块的任何额外代码从基本布局,所以你发布可能看起来像这样:

---
layout: custom
---
<aside class="sidebar">
    {% include comments.html %}
    {% include sidebar.html %}
</aside>
<div class="content" role="main">
    Foo bar baz
</div>

您可以使用不包含页面基本布局的自定义布局,并且不包括侧边栏和注释,因此您可以根据需要确定所需的布局级别,然后重新定义所需的任何内容。被重新定义。

此外,如果您需要调整不同的地方但内容未知,您可以使用YAML前面的内容,例如

extra_head: |
    <style>
    * {background: red}
    </style>

然后你可以从头部{{ page.extra_head }}调用这样的变量并获取你放在那里的任何内容。但是,你不能在YAML中使用任何液体标签,但是你可以在这些变量上使用任何YAML标签,这样你就可以通过简单的替换过滤器来标记它们或用其他任何东西替换任何其他字符串。

如果没有任何适合你的话,那么Jekyll将不适合你 - 正如我在评论中写的那样,Jekyll只是一个博客引擎,你不应该等它像XSLT一样复杂。

答案 1 :(得分:0)

我曾尝试在jekyll-bootstrap静态站点中创建一个独立页面。例如my_cv.html需要独立的css样式。我没有使用gh-pages创建一个新的github存储库(抱歉GitHub),而只是将所有最终的html内容填充到帖子my_cv.md中,因为markdown格式实际上与html兼容我想,幸运的是它有效。