Jekyll:使用相同的HTML结构干掉部分内容

时间:2017-04-13 20:17:51

标签: html jekyll dry

在我的Jekyll网站中,每个页面都包含一个靠近底部的部分内容。每种类型的部分文本都有所不同,但HTML结构是相同的。为了说明......

文件夹结构:

_includes
  - partial1.html
  - partial2.html
pages
  - page1.html
  - page2.html
  - page3.html

partial1.html

<div class="container">
  <h3>Buy now</h3>
  <p>It'll be the best decision you ever made.</p>
</div>

partial2.html

<div class="container">
  <h3>Sign up for our newsletter</h3>
  <p>We won't spam you (too much).</p>
</div>

page1.html

---
layout: default
title: Page 1
---

...

{% include partial1.html %}

page2.html

---
layout: default
title: Page 2
---

...

{% include partial2.html %}

page3.html

---
layout: default
title: Page 3
---

...

{% include partial2.html %}

现在,partials只是复制HTML结构,但我更喜欢注入一个带有唯一值的主模板。如果你可以在includes文件夹中使用frontmatter,那将是一种清理方法,但是Jekyll不支持。

处理此方案的最佳方法是什么?

(如果我的问题不明确,请告诉我,我会尝试通过其他示例代码澄清。)

1 个答案:

答案 0 :(得分:1)

部分文本可以在每个部分文本或数据文件中,因此html将在另一个文本中:

每个部分中

持有html结构的主partial.html

<div class="container">
    <h3>{{include.h}}</h3>
    <p>{{include.p}}</p>
</div>

然后每个部分将使用包含变量调用它:

  • <强> partial1.html

    {% assign header = "Buy now" %}
    {% assign paragraph = "It'll be the best decision you ever made." %}
    {% include partial.html h=header p=paragraph%}
    
  • <强> partial2.html

    {% assign header = "Sign up for our newsletter" %}
    {% assign paragraph = "We won't spam you (too much)." %}
    {% include partial.html h=header p=paragraph%}
    

使用数据文件

  • 创建一个包含文字的文件_data/partial.yml

    buy:
        h: "Buy now"
        p: "It'll be the best decision you ever made."
    sign:
        h: "Sign up for our newsletter"
        p: "We won't spam you (too much)."
    

然后在每个部分使用数据:

  • partial1.html:

     {% include partial.html type="buy"%}
    
  • partial2.html:

     {% include partial.html type="sign" %}
    
  • 每页中的
  • :(例如:page1.html)

    ---
    layout: default
    title: Page 1
    ---
    
    ...
    
    {% include partial1.html %}