Question

我正在尝试使用D.R.Y.重构我的网站。方法，其中一部分是使用液体语法来提供帮助。

目前，一切都可以在这里使用：

page-internal.html

---

布局：默认

<div>

  <div class="d-flex" style="background-color: #e9ecef;">

    <div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
      <div class="col-lg-12 p-3 mx-auto">

        <img width="50" height="50"
        class="rounded-circle float-left mr-2"
        src="/assets/img/internal/{{ page.image }}" />
        <h1 class="display-4">{{ page.title | escape }}</h1>
        <p class="lead">{{ content }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="d-flex justify-content-center">
      {% include card-post-{{ page.passname }}.html %}
    </div>
  </div>
</div>

{{page.passname}}是从.md文件中提取的，如下所示：

---
layout: page-internal
title: User Interface
permalink: /pages/design-ui
image: ui.svg
passname: ui
---

那也很好。但是，然后我必须创建几个要从中提取的页面，而不仅仅是引用密码来获取正确的.md页面（我希望我在这里很有道理，如果没有的话，我深表歉意）。该页面看起来像这样

card-post.ui.html

该页面上的html是：

<div class="container-fluid">
  <div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
    {% for post in site.categories.ui %}
    <div class="card col-sm-12 col-lg-3 m-2">
      <div class="card-body d-flex flex-column">
        <div class="media">
          <div class="d-flex mr-3">
            <a href="{{ post.url }}">
              <img width="40" height="40"
              class="rounded-circle"
              src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
            </a>
          </div>
          <div class="media-body">
            <h6 class="mb-1">{{ post.title }}</h6>
          </div>
        </div>
        <div class="d-flex flex-column" style="height: 105px;">
         <div class="p-2">
           <p class="text-muted">{{ post.excerpt }}</p>
         </div>
        </div>
        <div class=" flex-column align-items-end">
          <button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

我想做的是获取两个html网站，并像这样：

---
layout: default
---
<div>

  <div class="d-flex" style="background-color: #e9ecef;">

    <div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
      <div class="col-lg-12 p-3 mx-auto">

        <img width="50" height="50"
        class="rounded-circle float-left mr-2"
        src="/assets/img/internal/{{ page.image }}" />
        <h1 class="display-4">{{ page.title | escape }}</h1>
        <p class="lead">{{ content }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="d-flex justify-content-center">
      {% include card-post-{{ page.passname }}.html %}

      <div class="container-fluid">
        <div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
          {% for post in site.categories.ui %}
          <div class="card col-sm-12 col-lg-3 m-2">
            <div class="card-body d-flex flex-column">
              <div class="media">
                <div class="d-flex mr-3">
                  <a href="{{ post.url }}">
                    <img width="40" height="40"
                    class="rounded-circle"
                    src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
                  </a>
                </div>
                <div class="media-body">
                  <h6 class="mb-1">{{ post.title }}</h6>
                </div>
              </div>
              <div class="d-flex flex-column" style="height: 105px;">
               <div class="p-2">
                 <p class="text-muted">{{ post.excerpt }}</p>
               </div>
              </div>
              <div class=" flex-column align-items-end">
                <button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

这将起作用，但是语法如下：

{% for post in site.categories.ui %}

需要成为现实（这是我不知道该怎么做的地方）

{% for post in site.categories. {{ page.passname }} %}

这会引发错误：

 Liquid Warning: Liquid syntax error (line 23): Unexpected character { in "post in site.categories.{{ page.passname }}" in /_layouts/page-internal.html

所以我的问题是，如何从所说的.md帖子中获取密码（在本例中为design-ui.md），并将其放入{% for post in site.categories.ui %}中，其中单词ui将取决于.md

我希望我说的没错，如果没有的话，抱歉。

Answer 1

您的循环语法{% for post in site.categories. {{ page.passname }} %} 不正确：

您可能会使用方括号表示法来达到类别：

{% for post in site.categories[page.passname] %}

液态语法是否包含其他液态语法？

布局：默认

1 个答案: