0

我正在尝试使用 DRY 方法重构我的网站,其中一部分是使用流动语法来提供帮助。

目前一切都适用于我在这里:

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 的位置

我希望我说的都是对的,如果没有,请道歉。

4

1 回答 1

0

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

您可以使用括号符号达到您的类别:

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

于 2018-08-02T18:33:23.127 回答