YAML Front Matter中定义内容块变量

最新推荐文章于 2024-07-10 05:20:45 发布

weixin_30278311

最新推荐文章于 2024-07-10 05:20:45 发布

阅读量466

点赞数

文章标签： markdown 移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/kaiye/archive/2013/04/24/3039346.html

版权

jekyll中自定义custom_css属性

有如下 jekyll layout 模板：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>{{ page.title }} | {{ site.title }}</title>
  <meta name="author" content="{{ site.author }}" />{% if page.description %}
  <meta name="description" content="{{ page.description }}" />{% endif %}
  {{page.custom_css}}
  {% if page.jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>{% endif %}
</head>

<body>
{{ content }}
</body>
</html>

此时需要将 page 中的自定义样式通过 page.custom_css 传递到 layout 中，如果是link css只需在page YAML头中定义：

---
layout: demo
title: DEMO列表
custom_css: <link href="hehe.css" type="text/css" />
---

YAML头中定义内容块变量

如果custom_css为一个大段 <style>...</style> 页内样式，按照YAML规范则应该写成

---
layout: demo
title: DEMO列表
custom_css: |
  <style>
  body{line-height:1.8;font-size:14px;}
  .description{color:#666;font-size:12px;}
  </style>
---

需要注意的是：

| 分隔符前面有一个空格，按照规范所有:符号声明后必须有一个空格；
新起一行的代码块，至少必须有一个缩进符，且缩进符为空格，不能为tab制表符等其他空白

尤其是以上第二点，建议各位为了项目与规范需要，开启各自编辑器的tab键转空格输出的功能，sublime text2参考这里，npp参考这里。

YAML头定义的几种方式

YAML头用于定义文档的全局变量给模板引用，除上文提到的内容块定义以外，最常见的还包括序列与映射的定义，可以理解成JS中的数组和对象。由于YAML规范的制定参考了JSON规范，所以在定义最小变量单元的时候可以直接使用JS中数组和对象的字面量定义方法，如下所示：

---
layout: demo
title: YAML头定义的几种方法
custom_css: |
  这里是块内容的定义
  可以是多行文本
custom_prop1: {a: 1, b: 2}
custom_prop2: [1, 2, 3]
custom_prop3: 
  a: 1
  b: 2
custom_prop4: #序列的 - 分隔符，类似JS数组的逗号分隔符
  -
    1
  -
    2
  -
    3
---
{{page.custom_prop1.a}}    <!-- 输出 1 -->
{{page.custom_prop2[0]}}   <!-- 输出 1 -->
{{page.custom_prop3}}      <!-- 输出 {"a"=>1, "b"=>2} -->
{{page.custom_prop4}}      <!-- 输出数组项 123 -->

由于规范没有要求使用严格的JSON定义方法，所以属性和属性值不强制要求使用引号括起来。

参考资料

转载于:https://www.cnblogs.com/kaiye/archive/2013/04/24/3039346.html

weixin_30278311

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
YAML Front Matter中定义内容块变量

jekyll中自定义custom_css属性有如下 jekyll layout 模板：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>{{ page.title }} | {{ site.title }}</title&gt...
复制链接

扫一扫