I'm using Jekyll for my blog, and I'd like the ability to use unique CSS styling in particular posts. Right now, I'm specifying a CSS file in the YAML frontmatter like so:
我正在使用Jekyll作为我的博客,我希望能够在特定帖子中使用独特的CSS样式。现在,我正在YAML前端中指定一个CSS文件,如下所示:
style: artdirection.css
and using it in the layout like this:
并在布局中使用它像这样:
{% if page.style %}
<link rel="stylesheet" href="{{ page.style }}">
{% endif %}`
This works, but I'd prefer to include the actual CSS styling in a style tag in the page's frontmatter instead of linking to a style sheet.
这有效,但我更喜欢在页面的frontmatter中的样式标记中包含实际的CSS样式,而不是链接到样式表。
I've tried dealing with this in a couple of ways, including the method described here, but the variable that I capture is only usable inside the post itself, not in the layout.
我试过用两种方法处理这个问题,包括这里描述的方法,但是我捕获的变量只能在帖子本身内部使用,而不能在布局中使用。
So, is it possible?
那么,有可能吗?
2 个解决方案
#1
17
I'm pretty sure this would work:
我很确定这会起作用:
---
title: xxx
style: |
/* You can put any CSS here */
/* Just indent it with two spaces */
/* And don't forget the | after "style: " */
h2 {
color: red;
}
---
Your markdown/textile goes here. h2s will be red
And then in your layout:
然后在你的布局中:
<style type="text/css">
{{ page.style }}
</style>
And that should be it.
这应该是它。
#2
8
Jekyll 3 breaking change
杰基尔3突破变革
Now variables declared in the layout front-matter (_layouts/default.html
) are visible via:
现在,通过以下方式可以看到在布局前端(_layouts / default.html)中声明的变量:
{{ layout.style }}
instead of the older:
而不是旧的:
{{ page.style }}
#1
17
I'm pretty sure this would work:
我很确定这会起作用:
---
title: xxx
style: |
/* You can put any CSS here */
/* Just indent it with two spaces */
/* And don't forget the | after "style: " */
h2 {
color: red;
}
---
Your markdown/textile goes here. h2s will be red
And then in your layout:
然后在你的布局中:
<style type="text/css">
{{ page.style }}
</style>
And that should be it.
这应该是它。
#2
8
Jekyll 3 breaking change
杰基尔3突破变革
Now variables declared in the layout front-matter (_layouts/default.html
) are visible via:
现在,通过以下方式可以看到在布局前端(_layouts / default.html)中声明的变量:
{{ layout.style }}
instead of the older:
而不是旧的:
{{ page.style }}