---
layout: post
title: 页面样式脚本各得其所
description: "在写日志的时候，鄙人有时候需要引入及写自定义的 CSS 或 JS，一般是在日志里面直接引入标签直接写。"
date: 2015-08-23 12:00:00 +0800
thumb: 'IMG_PATH/jekyll.png'
category: tech
tags: [Jekyll, Liquid, CSS, JavaScript]
---
* toc
{:toc}
## 问题描述
在写日志的时候，鄙人有时候需要引入及写自定义的 CSS 或 JS，一般是在日志里面直接引入标签直接写。
众所周知，`-->
{% endhighlight %}
原模板 `default.html` 中的 `{% raw %}{{ content }}{% endraw %}` 就可替换成
{% highlight liquid %}
{% raw %}
{{ content_style[0] | remove: '' }}
{% endraw %}
{% endhighlight %}
其实不做 `remove` 处理页面上也不会出现多余的内容，只是源码多出了``。若含有 CSS 代码的日志才这么干，没有的不干，这里采用 Jekyll 提供的自定义页面变量，在 Front Matter 加上 `style: true`，使用 Liquid 的判断语句。
{% highlight liquid %}
{% raw %}
{% if page.style %}
...
{% endif %}
{% endraw %}
{% endhighlight %}
JS 脚本类似于 CSS，另外，引入 CSS 或 JS 文件则可以直接将其命名为自定义变量引入。
## 完整方案
经过折腾之后，在模板 `default.html` 文件中，鄙人做如下处理。
{% highlight liquid %}
{% raw %}
...
{% assign content_js = content | remove: '' | split: 'script>' %}
{% assign content_style = content | remove: '' | split: 'style>' %}
{% if page.link %}
{% endif %}
{% if page.style %}