我正在尝试使用 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 的位置
我希望我说的都是对的,如果没有,请道歉。