logo标签列表

如何在Jekyll/Liquid中从视图传递{% captured %}变量到布局中？

jekyllliquidliquid-layoutjekyll-extensions
21

我正在尝试使用Jekyll重新构建一个博客，并且我遇到了一个简单的任务。

假设我有以下一组模板：

default.html：

{{ head }}

{{ content }}

frontpage.html：

---
layout: default
---

{% capture head %}
  Frontpage
{% end %}

{{ content }}

index.html：

---
layout: frontpage
---

Other stuff

我本以为{% capture head %}可以传递一个变量到布局中。但是似乎只有来自“Front Matter”的变量才会被传递成page.variable_name。

在Jekyll中，有没有一种方法可以将使用capture的变量传递给布局？

我猜我可以为frontpage和normal_page制作两个不同的布局，用这些布局替换布局中的整个{{head}}{{content}}块。但那就是两倍的html代码，所以如果可能的话，我宁愿使用capture解决问题。

2
我不确定你想在这里实现什么。为什么不能使用include？你为什么想要首先捕获整个头部？更多的上下文会更好。 - Polygnome
1
暂时不想在前置元数据中保留HTML，现在我已经添加了另一个模板。 - firedev
3
我同意这会很有用。我希望有一个页面有两列，一列是主要内容，另一列是侧边栏包含额外的页面内容。无法在HTML标签内使用markdown，所以我不能只是将我的两个markdown块放在列标记内部。我想到的另一个选项是像Nick之前尝试过的那样使用capture来提供可由任何页面使用的sidebar区域。非常不幸的是，不支持这个功能会让组合多元素markdown页面变得非常麻烦。 - Eric Drechsel
我的用例另一个选择可能是创建一个包含额外侧边栏markdown文件的两列布局，其名称由page.path参数化（也许是page.path +“.sidebar.md”）。 - Eric Drechsel
看起来最好的方法可能是在页面的 YAML 前置数据中包含一个 markdown 块。查看这个之前的问题和这个问题线程以获取更多详细信息。 - Eric Drechsel
显示剩余5条评论
2个回答
9

使用捕获无法实现此功能，但可以使用 include。页面层级结构的每个级别都可以覆盖 head 关键字以指向所需的不同 include 文件。此示例使用条件来包装 include，因此如果未指定 head 关键字，则仍将生成页面。

default.html

{% if page.head %}
  {% include {{ page.head }} %}
{% endif %}

{{ content }}

frontpage.html

---
layout: default
head: header1.html
---

{{ content }}

_includes/header1.html

(Frontpage header content)
7
如果您的用例与我类似，想要在模板中包含额外的内容，您可以使用YAML的块标量功能将多行内容从前置数据中包含到模板中。 使用|保留换行符，而>则删除（“折叠”）换行符。（请注意，块指示符必须后跟一个空行。）
---
layout: default
head: |
  <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
  </style>
script: |
  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
  <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='PHONE';ftypes[3]='phone';fnames[4]='ORG';ftypes[4]='text';fnames[5]='MMERGE5';ftypes[5]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
---
<!-- Content, maybe a MailChimp signup form? -->

default.html

<!DOCTYPE html>
<html>
<head>
  <title>
    {{page.title}}
  </title>
  <link rel="stylesheet" type="text/css" href="/css/main.css">

  <!-- here you can have add'l arbitrary head content -->
  {{ page.head }}
</head>
<body>
  {{content}}

  <script>
    // Google Analytics, perhaps?
  </script>

  <!-- here you can have add'l arbitrary content at the end of the page, good for scripts -->
  {{page.script}}
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接