Shopify 帮助辅助博客部分在不同的页面上

Question

您好，我希望这里有熟悉 Shopify 的人。

我正在尝试在与我的默认“博客页面”不同的页面上创建一个辅助博客部分，但我在让实际的博客文章显示在页面上时遇到了一些问题。我似乎得到的只是页面标题，我不确定为什么。我实际上只想要依赖于其标签的特定文章，但我愿意现在就满足所有文章，然后我可以从那里开始。我的代码如下。我的博客名为 Studio。任何帮助将不胜感激，因为我无法弄清楚我哪里出错了

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
    {% if blog.tags.size > 0 %}
      <select id="BlogTagFilter">
        <option value="/blogs/{{ blog.handle }}">{{ 'blogs.article.all_topics' | t }}</option>
        {% for tag in blog.all_tags %}
          <option value="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </header>
</div>

<div class="{% if section.settings.layout == 'list' %}blog--list-view{% endif %}">
  {% if section.settings.layout == 'grid' %}
    <div class="page-width">
      <div class="grid grid--uniform grid--blog">
        {% for article in blog.articles %}
          <div class="grid__item medium-up--one-third">
            {% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% include 'image-style' with image: article.image, small_style: true, width: 345, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}

              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <a href="{{ article.url }}" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;" class="article__grid-image-container">
                  <img id="{{ img_id }}"
                       class="article__grid-image lazyload"
                       src="{{ article.image | img_url: '300x300' }}"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ article.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ article.image.alt | escape }}">
                </a>
              </div>

              <noscript>
                <a href="{{ article.url }}" class="article__grid-image-wrapper">
                  {{ article | img_url: '345x', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </a>
              </noscript>
            {% endif %}

            <div class="article__grid-meta{% if article.image %} article__grid-meta--has-image{% endif %}">
              <h2 class="article__title h3">
                <a href="{{ article.url }}">{{ article.title }}</a>
              </h2>

              {% if section.settings.blog_show_author %}
                <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
              {% endif %}

              {% if section.settings.blog_show_date %}
                <span class="article__date">
                  {{ article.published_at | time_tag: format: 'month_day_year' }}
                </span>
              {% endif %}

              <div class="rte article__grid-excerpt">
                {% if article.excerpt.size > 0 %}
                  {{ article.excerpt }}
                {% else %}
                  {{ article.content | strip_html | truncate: 150 }}
                {% endif %}
              </div>

              {% if article.tags.size > 0 %}
                <div class="article__tags rte">
                  {% for tag in article.tags %}
                    <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="article__grid-tag">{{ tag }}</a>
                  {% endfor %}
                </div>
              {% endif %}

              <ul class="list--inline">
                <li>
                  <a href="{{ article.url }}" class="btn btn--secondary btn--small">
                    {{ 'blogs.article.read_more' | t }}
                  </a>
                </li>

                {% if blog.comments_enabled? and article.comments_count > 0 %}
                  <li>
                    <a href="{{ article.url }}#comments" class="btn btn--small btn--link">
                      {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                    </a>
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% else %}
    {% for article in blog.articles %}
      <div class="border-top">
        <div class="page-width">
          <div class="grid">
            <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
              <div class="article--listing">
                <h2 class="article__title h3"><a href="{{ article.url }}">{{ article.title }}</a></h2>
                {% if section.settings.blog_show_author %}
                  <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
                {% endif %}

                {% if section.settings.blog_show_date %}
                  <span class="article__date">
                    {{ article.published_at | time_tag: format: 'month_day_year' }}
                  </span>
                {% endif %}

                {% if article.image %}
                  {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
                  {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
                  {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                  {% include 'image-style' with image: article.image, small_style: false, width: 905, height: 600, wrapper_id: img_wrapper_id, img_id: img_id %}

                  <div id="{{ img_wrapper_id }}" class="article__list-image-wrapper js">
                    <a href="{{ article.url }}" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;" class="article__list-image-container">
                      <img id="{{ img_id }}"
                           class="article__list-image lazyload"
                           src="{{ article.image | img_url: '300x300' }}"
                           data-src="{{ img_url }}"
                           data-widths="[180, 360, 540, 720, 905, 1090, 1296, 1512, 1728, 2048]"
                           data-aspectratio="{{ article.image.aspect_ratio }}"
                           data-sizes="auto"
                           alt="{{ article.image.alt | escape }}">
                    </a>
                  </div>

                  <noscript>
                    <p>
                      <a href="{{ article.url }}">
                        {{ article | img_url: '455x300', scale: 2 | img_tag: article.title }}
                      </a>
                    </p>
                  </noscript>
                {% endif %}

                <div class="rte">
                  {% if article.excerpt.size > 0 %}
                    {{ article.excerpt }}
                  {% else %}
                    {{ article.content | strip_html | truncate: 150 }}
                  {% endif %}
                </div>

                {% if article.tags.size > 0 %}
                  <div class="article__tags article__tags--list rte">
                    {{ 'blogs.article.posted_in' | t }}
                    {% for tag in article.tags %}
                      <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
                    {% endfor %}
                  </div>
                {% endif %}

                <ul class="list--inline article__meta-buttons">
                  {% if article.excerpt.size > 0 %}
                    <li>
                      <a href="{{ article.url }}" class="btn btn--secondary btn--small">
                        {{ 'blogs.article.read_more' | t }}
                      </a>
                    </li>
                  {% endif %}

                  {% if blog.comments_enabled? and article.comments_count == 0 %}
                    <li>
                      <a href="{{ article.url }}#comment_form" class="btn btn--secondary btn--small">
                        {{ 'blogs.comments.title' | t }}
                      </a>
                    </li>
                  {% endif %}

                  {% if blog.comments_enabled? and article.comments_count > 0 %}
                    <li>
                      <a href="{{ article.url }}#comments" class="btn btn--secondary btn--small">
                        {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                      </a>
                    </li>
                  {% endif %}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
        {% endif %}

        <h3><a href= "{{ article.url }}">{{ article.title }}</a></h3>
        <p><span class="date" style="display: block;">Posted: <em>{{ article.published_at | date: "%B %d %Y" }}</em> in <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a></span></p>
        <section>{{ article.content | strip_html | truncatewords: 30 }}</section>
      </article>

      <hr class="divider" />

</div>


{% schema %}
  {
    "name": "Blog pages",
    "settings": [
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "list",
        "options": [
          {
            "value": "grid",
            "label": "Grid"
          },
          {
            "value": "list",
            "label": "List"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "blog_show_author",
        "label": "Show author",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "blog_show_date",
        "label": "Show date",
        "default": true`enter code here`
      }
    ]
  }
{% endschema %}

感谢您迄今为止的帮助。

这就是代码在我的部分模板中的样子吗？

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
{% for tag in blogs[section.settings.sidebar_blog].all_tags %}
{{ tag }}
{% endfor %}

{% endif %}

{% schema %}

{
"type": "blogs",
"id": "sidebar_blogs",
"label": "Blogs"
} 

{% endschema %}

使用上面的代码，我在尝试保存新部分时遇到以下错误。

错误：无效架构：“类型”不是有效属性 错误：无效架构：“id”不是有效属性 错误：无效架构：“标签”不是有效属性

如果我添加此架构而不是上面的架构，我仍然会遇到相同的错误。

{
"type": "blog", 
"id": "sidebar_blog",
"label": "Blog"
}

Answer 1

我已经检查了您的代码。实际上的问题是您试图在博客文件之外获取 shopify 博客和文章内容。如果您想在页面模板中获取博客和文章内容，那么还有另一种方法

• 你必须在你用代码写博客的地方传递你的博客句柄。这里我为你写了示例代码，请试试这个代码并检查它是否适合你：-

  {% if blogs['all'].tags.size > 0 %}

  {% for tag in blogs['all'].all_tags %}

   {{ tag }}
  

  {% endfor %}

  {% endif %}

  因此，通过这种方式，您可以通过传递博客句柄来获取您的特定博客数据。这里的'all'代表博客句柄。您可以在“所有”位置传递自己的博客句柄。

你可以用 blogs['blog-handle'] 替换 blog，然后你就可以得到 blog 数据了。

如果您希望代码中的博客句柄是动态的，那么您必须在部分架构中创建一个区域，您可以在其中选择您的博客，然后您可以自动获取博客句柄。

{
 "type": "blog",
 "id": "sidebar_blog",
 "label": "Blog"
}

在您的部分架构中添加上述代码，然后您可以在下拉列表中获得所有博客。之后，您获取博客标签的代码将变为：-

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
  {% for tag in blogs[section.settings.sidebar_blog].all_tags %}
     {{ tag }}
  {% endfor %}
{% endif %}

现在，每件事都是动态的，您将获得将在您的部分架构中选择的博客的所有数据。