jekyll - 将多个内容从布局传递到页面

标签 jekyll github-pages

我想知道是否有办法将动态命名内容从布局传递到页面。

例如,

布局

<body>
    <div class="container">
        {{ content }}
    </div>
    <footer>
        <p>&copy; Company 2015</p>
    </footer>
    <script src="path/to/jquery.js"></script>
    {{ page.other_content }}<!-- Objective: To write scripts that varies with page -->
</body>


--- 
layout: default
title: About Us Page
---

<p> This is about us page </p>

{% capture other_content %}
<script>
    $(document).ready(function(){
        console.log("About us page.");
    });
</script>
{% endcapture %}

有没有办法从布局中呈现页面中的多个内容部分?

在 ASP.NET 中我们可以做的是布局页面。
@RenderSection("scripts", required: false)

在内容页面中,我们可以像这样呈现该部分。
@section scripts {
    Hey I'm actually on the _Main layout. 
    I can vary according to the page.
    My presence is not mandatory in every page
}

这可以用 jekyll 完成吗?

最佳答案

GitHub Pages 不允许插件,所以我会坚持使用普通的 Jekyll 解决方法。您当然可以使用插件,在本地生成您的站点并将结果托管在 GitHub 上。

这很丑陋,但可能。保持布局不变:

<body>
  <!-- varies with page -->
  {{ page.other_content }}
</body>

然后在您的页面文件中,定义属性 other_content在前面的事情:
---
other_content: |
  <script>
    console.log("You can't stop me!");
  </script>
---

管道字符 denotes a multiline string .根据 YAML 的规则,您的脚本必须用空格缩进 ( no tabs allowed )。

如果您的脚本变得太大,您可以将它们移动到单独的文件中,并且您的页面的前端将引用脚本文件名:
---
scripts: [test]
---

在布局中:
{% for s in page.scripts %}
<script src="{{ s }}.js"></script>
{% endfor %}

如果 test.js 与使用它的页面位于同一目录中,则此方法有效。您可以使用 site.baseurl 获取绝对路径等

关于jekyll - 将多个内容从布局传递到页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31692218/

相关文章:

jekyll - 缩短本地 jekyll 服务器的页面生成时间

shell - 如何在shell脚本中同时运行两个命令?

github - Google 在 Github Pages 上找不到 Analytics 代码段

github-pages - 如何在渲染的Github页面README.md上生成目录(ToC)?

deployment - 如何将中间人站点部署到 GitHub 用户页面

processing - 带有 Jekyll 的 p5js

jekyll 不生成 index.html

node.js - 我无法启动服务器-jekyll

jekyll - 如何在github上的jekyll页面添加一个linkedin链接?

github - # GitHub 最近更新页面和 Jekyll 后不渲染 HTML 标题标签