如果语句问题 - shopify答案

【问题标题】：If statement issue - shopify如果语句问题 - shopify
【发布时间】：2021-12-09 18:01:09
【问题描述】：

 <div class="blog-custom-featured-section">
  {% for article in blog.articles limit: 3 %}
  {% if forloop.first %}
    <div class="journal-featured-post">
      <img src="{{ article | img_url: '633x480' }}">
      <h1>{{ article.title }}</h1>
    </div>
  {% else %}
    <div class="journal-recent-post">
      <h3>RECENT</h3>
      <img src="{{ article | img_url: '332x187' }}">
      <h1>{{ article.title }}</h1>
    </div>
  {% endif %}
{% endfor %}
</div>

这是我的 CSS：

.blog-custom-featured-section {
  display: flex;
  justify-content: center;
}
.journal-featured-post .journal-recent-post {
  width: 50%;
}
.journal-featured-post {
  margin-left: 151px;
  margin-right: 172px;
  margin-top: 94px;
}
.journal-recent-post {
  margin-right: 112px;
}
.journal-recent-post h3 {
  margin-top: 63px;
  margin-bottom: 22px;
  font-size: 22px;
  line-height: 26px;
  font-family: Graphit-Medium;
  text-transform: uppercase;
}
.journal-featured-post img {
  width: 100%;
  min-width: 633px;
  max-width: 633px;
  height: 100%;
  min-height: 480px;
  max-height: 480px;
  object-fit: cover;
}
.journal-recent-post img {
  width: 100%;
  min-width: 332px;
  max-width: 332px;
  height: 100%;
  min-height: 187px;
  max-height: 187px;
  object-fit: cover;
}
.journal-featured-post h1 {
  margin-top: 23px;
  margin-bottom: 85px;
  font-family: Graphit-Light;
  font-size: 36px;
  line-height: 43px;
}

我还把它做成了代码笔或至少是结构：https://codepen.io/alexmciver/pen/qBPNKpj

顺便说一句，这将是一个 Shopify 部分，因此是液体。

我感到困惑的是它应该可以工作，而且我知道我在 codepen 上创建的纯 HTML 可以工作。我尝试添加额外的 if 语句，但没有运气

【问题讨论】：

你从液体代码中得到了什么？
@CharlesC。我怎样才能给你截图？

标签： html css shopify liquid

【解决方案1】：

好的，所以我终于能够解决它，花了一段时间，但最终还是到了那里。

我学到的一件事是，液体条件很复杂，而且为什么 Shopify 必须是独一无二的，并且像大多数其他编程语言一样使用 elseif 而不是 else？

无论如何，这是我的工作解决方案：

    <section class="journal-article-top-ctn brick--margin  wrapper--brick">
  {% for article in blog.articles limit: 3 %}
    {% if forloop.first %}
      <div class="journal-featured-post first-article">
        <img src="{{ article | img_url: '633x480' }}">
        <h1>{{ article.title }}</h1>
      </div>
    {% elsif forloop.last %}
        <section class="journal-recent-post last-article">
          <img src="{{ article | img_url: '332x187' }}">
          <h1>{{ article.title }}</h1>
        </section>
     </div>
    {% else %}
      <div class='small-articles-ctn'>
        <h3>RECENT</h3>
        <section class="journal-recent-post second-article">
          <img src="{{ article | img_url: '332x187' }}">
          <h1>{{ article.title }}</h1>
        </section>
    {% endif %}
  {% endfor %}
 </section>

还有 CSS：

.journal-article-top-ctn{
  display:flex;
  margin-top: 94px;
  margin-bottom: 85px;
}
.journal-featured-post{
  width: 60%;
  padding-right: 121px;
}
.small-articles-ctn{
 width: 40%;
}
.blog-custom-featured-section {
  display: flex;
  justify-content: center;
}
.small-articles-ctn h3 {
  margin: 0;
  padding-bottom: 22px;
  font-size: 22px;
  line-height: 26px;
  font-family: Graphit-Medium;
  text-transform: uppercase;
}
.journal-featured-post img {
  width: 100%;
  max-width: 633px;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
}
.journal-recent-post img {
  width: 100%;
  max-width: 332px;
  height: 100%;
  max-height: 187px;
  object-fit: cover;
}
.journal-featured-post h1 {
  margin-top: 23px;
  margin-bottom: 85px;
  font-family: Graphit-Light;
  font-size: 36px;
  line-height: 43px;
}
.journal-recent-post h1 {
  font-family: Graphit-Light;
  font-size: 16px;
  line-height: 22px;
  padding-top: 10px;
  padding-bottom: 29px;
  width: 100%;
  max-width: 341px;
}

【讨论】：