问题描述

在写日志的时候，鄙人有时候需要引入及写自定义的 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 日 完成初稿