jekyll
I have long been a fan of Jekyll. It has some flaws and is not always the best tool for the job, however, it can be a great tool for some situations. I have lost count of how many websites I have built with it.
我长期以来一直是杰基尔的粉丝。 它有一些缺陷，并不一定总是工作的最佳工具，但是，在某些情况下它可能是一个很好的工具。 我已经不知道自己建立了多少个网站。
Recently, I made yet another site with Jekyll, this time for Simplified JavaScript Jargon and I found myself facing a not so atypical issue — inlining styles in the <head>.
最近，我与Jekyll一起创建了另一个站点，这次是Simplified JavaScript Jargon ，我发现自己面临的问题不是那么典型-在<head>中插入样式。
需要 (The Need)
You may have heard of critical CSS. The idea behind the concept is to provide critical styles (the ones responsible for the look of the top and main content areas of the page) as soon as possible to the browser so that there is no delay before accessing the content.
您可能听说过关键CSS。 该概念的思想是尽快为浏览器提供关键样式(负责页面顶部和主要内容区域外观的样式)，以便在访问内容之前没有延迟。
There is a common rule that says it is good to send what is needed to render the top of the page in under 14kb, because that is roughly how much the server can handle in one roundtrip. Google PageSpeed Insights gives more information about this in their documentation, so feel free to have a look if you want to know why it works this way.
有一条通用规则说，最好以14kb以下的速率发送呈现页面顶部所需的内容，因为这大约是服务器一次往返可以处理的数量。 Google PageSpeed Insights在其文档中提供了有关此信息的更多信息 ，因此，如果您想知道它为何如此工作，请随时查看。
To that extent, if your CSS is small enough (like it is for SJSJ), you could inline it all in the <head> and send it all together in the first roundtrip without even bothering with an external stylesheet. That is not super common, but when it is, it’s pretty rad.
在这种程度上，如果您CSS足够小(例如SJSJ )，则可以将它们全部内嵌在<head> ，并在第一次往返中将它们一起发送，而无需费心使用外部样式表。 那不是很普遍，但是当它很流行时。
回到杰基尔 (Back to Jekyll)
So my idea was to include styles inside a <style> tag in the head of the document, and skip an external stylesheet altogether. My first bet was to build the site, then move the generated CSS file inside the _includes folder so that it can be included with the {% include %} block. It worked, but was a bit tedious as a process.
因此，我的想法是将样式包括在文档头部的<style>标记内，并完全跳过外部样式表。 我的第一个选择是建立站点，然后将生成CSS文件移动到_includes文件夹内，以便可以将其包含在{% include %}块中。 它虽然有效，但是作为一个过程有点繁琐。
Then I realised that if I was able to inline all my styles in the head of the page, it was because I did not have so many of them, so I could definitely tackle the problem the other way around.
然后我意识到，如果能够在页面顶部内嵌所有样式，那是因为我没有那么多样式，因此我可以肯定地以其他方式解决该问题。
Instead of moving my styles inside the _includes folder after the build, I could create them directly inside that folder. I could then have a CSS file imported inside the head of the document from there.
无需在构建后将样式_includes文件夹中，而是可以直接在该文件夹中创建样式。 然后，我可以从那里将CSS文件导入文档的头部。
/* _includes/styles.css */
.foo-bar {
color: pink;
}And then:
然后：
<!-- _includes/head.html -->
<style>
{% include styles.css %}
</style>Tada! It gives us just what we want:
多田 它给了我们我们想要的东西：
<!-- … -->
<style>
.foo-bar {
color: pink;
}
</style>
<!-- … -->那Sass呢？ (What about Sass?)
Okay, you might be thinking “yes but it means we can’t use Sass anymore.” Yes and no. Basically, we have taken the whole Sass pipeline from Jekyll out completely, but there still is a way.
好的，您可能会想“是的，但这意味着我们不能再使用Sass。” 是的，没有。 基本上，我们已经完全从Jekyll撤消了整个Sass管道，但是仍然有办法。
If you ever read the documentation from Jekyll, you might have noticed that there is a scssify and a sassify filter. The documentation says this allows us to:
如果您曾经阅读过Jekyll的文档 ，则可能已经注意到有一个scssify和一个sassify过滤器。 该文档说，这使我们能够：
Convert a Sass- or SCSS-formatted string into CSS.
将Sass或SCSS格式的字符串转换为CSS。
Nice. It means we can still use Sass by piping our whole file into this thing. The only problem is that we cannot apply filters on a block, like {% include %}. The trick is to capture the content of the file in a variable (thanks to {% capture %}), and then apply our filter to this variable when outputting it.
真好 这意味着我们仍然可以通过将整个文件放入该文件中来使用Sass。 唯一的问题是，我们无法在块上应用过滤器，例如{% include %} 。 诀窍是捕获变量中的文件内容(由于{% capture %} )，然后在输出该变量时将其应用于该变量。
<!-- _includes/head.html -->
{% capture styles %}
{% include styles.css %}
{% endcapture %}
<style>
{{ styles | scssify }}
</style>Tada (again)!
多田(再次)！
缩小呢？ (What About Minification?)
The nice thing with this scssify filter is that it respects your Sass configuration from _config.yml. So if you set the output style to compressed in your configuration file, the filter will compile Sass to compressed CSS.
这个scssify过滤器的scssify是它尊重_config.yml的Sass配置。 因此，如果您在配置文件中将输出样式设置为compressed ，则过滤器会将Sass编译为压缩CSS。
# _config.yml
sass:
style: compressedTada (one more time)!
多田(再来一次)！
<!-- … -->
<style>
.foo-bar{color:pink}
</style>
<!-- … -->最后的想法 (Final Thoughts)
As you can see, there was nothing groundbreaking in this article. However, I must say it never really occurred to me that I could just write my styles in the _includes folder directly before I’d spent time thinking about this issue the other day.
如您所见，本文没有开创性的内容。 但是，我必须说，我从来没有真正想到过，我可以直接在_includes文件夹中编写样式，然后再花些时间考虑这一问题。
Of course, this whole idea would fall short when dealing with a stylesheet that is way bigger than 14kb, where you would need to extract the critical CSS with some tool. But for small pages and sites — it comes in very handy!
当然，在处理一个大于14kb的样式表时，这整个想法将不足，您需要使用某种工具来提取关键CSS 。 但是对于小型页面和站点，它非常方便！
If you want to see how it works on a real project, you can check the files on the SJSJ repository:
如果要查看它在实际项目中的工作方式，可以检查SJSJ存储库中的文件：
Hope it helps, and happy coding!
希望对您有所帮助，并祝您编程愉快！
jekyll
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
