问题描述
在写日志的时候，鄙人有时候需要引入及写自定义的 CSS 或 JS，一般是在日志里面直接引入标签直接写。
众所周知，<style> 标签位于 <head> 内，虽然写在 <body> 浏览器也能渲染成功，但这毕竟有悖于标准；而 <script> 标签一般都会放在 <body> 标签的最后（即 </body> 之前），以免网速影响体验。
不按上面所提到的写，虽然偶尔一两个页面这样没大碍，但对于鄙人这种强迫症患者忍不了，所以只好想办法解决。
解决过程
想要改变 Jekyll 生成的 HTML，还得从 Jekyll 的模板入手，而 Jekyll 采用的是 Liquid 模板语言。
Liquid 是由 Shopify 设计并开源的模板引擎，Liquid 的相关语法不难，具体可以看这个页面：Liquid for Designer，更详细的介绍在：Liquid Documentation，Jekyll 自身也有一些的扩展语法，可以查看：Templates。
这次要做的是将页面的自定义 CSS 以及 JS 移个位置，而 CSS 及 JS 对应的是 <style> 标签以及 <script> 标签，可以采用过滤器 split 分隔开内容。
这里先拿 CSS 部分做例子，考虑到标签闭合前面有个 / 符号，可以这么处理：
{% assign content_style = content | split: 'style>' %}那么 {{ content_style[0] }} 便是 <style> 之前的部分，后面多加了个 <；{{ content_style[1] }} 是 CSS 代码后面多加了 </；{{ content_style[2] }} 则是 CSS 代码之后的部分。
这样需要过滤掉不需要的字符，又不能保证原文中有且只有一个 < 符号，没有找到相关的更方便方法，所以鄙人采用笨方法，在原文中：
<!--<style>
CSS 代码
</style>-->原模板 default.html 中的 {{ content }} 就可替换成
{{ content_style[0] | remove: '<!--<' }}{{ content_style[2] | remove: '-->' }}其实不做 remove 处理页面上也不会出现多余的内容，只是源码多出了<!--<-->。若含有 CSS 代码的日志才这么干，没有的不干，这里采用 Jekyll 提供的自定义页面变量，在 Front Matter 加上 style: true，使用 Liquid 的判断语句。
{% if page.style %}
...
{% endif %}JS 脚本类似于 CSS，另外，引入 CSS 或 JS 文件则可以直接将其命名为自定义变量引入。
完整方案
经过折腾之后，在模板 default.html 文件中，鄙人做如下处理。
<!DOCTYPE html>
<html>
<head>
...
{% assign content_js = content | remove: '<!--<' | remove: '-->' | split: 'script>' %}
{% assign content_style = content | remove: '<!--<' | remove: '-->' | split: 'style>' %}
{% if page.link %}
<link rel="stylesheet" type="text/css" href="{{ page.link }}" />
{% endif %}
{% if page.style %}
<style type="text/css">{{ content_style[1] }}style>
{% endif %}
...
</head>
<body>
...
{% if page.style or page.js %}
{% if page.style and page.js != true %}
{{ content_style[0] }}{{ content_style[2] }}
{% endif %}
{% if page.js and page.style != true %}
{{ content_js[0] }}{{ content_js[2] }}
{% endif %}
{% if page.style and page.js %}
{{ content_style[0] }}{{ content_js[2] }}
{% endif %}
{% else %}
{{ content }}
{% endif %}
...
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
{% comment %}鉴于引入的 JS 文件或脚本可能依赖于 jQuery，故放此。{% endcomment %}
{% if page.scripts %}
{% for script in page.scripts %}
<script type="text/javascript" src="{{ script }}"></script>
{% endfor %}
{% endif %}
{% if page.js %}
<script type="text/javascript">{{ content_js[1] }}script>
{% endif %}
...
</body>
</html>代码比较简单比较丑，但可以用，这里需要说明的是，鄙人往往将 <style>、<script> 按顺序排在一起。例子的话，可以查看鄙人任何一篇含有自定义代码的日志，点击左下角“源码”按钮便可看到相关 *md 文件内容，例如：我那丢了的手机 。
参考资料
本文历史
- 2015 年 08 月 23 日 完成初稿