时间戳

首页 > 解决方案 > Shopify Help Secondary Blog Section on a different page

html - Shopify Help Secondary Blog Section on a different page

问题描述

Hi I'm hoping theres someone familiar with Shopify here.

I'm trying to create a secondary Blog section on a different page to my default 'Blog Page' but I'm having some problems getting the actual blog posts to show up on the page. All I seem to get is the page title and I'm uncertain as to why. I actually only wants specific articles dependant on their tags but I'm willing to settle for all articles right now and then I can go from there. My code is below. My blog is titled Studio. Any help would be much appreciated as I just cannot work out how I'm going wrong

<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 %}

Thanks for your help so far.

Is this what the code would look like in my section template then?

{% 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 %}

With the code above I get the following errors when trying to save the new section.

Error: Invalid schema: 'type' is not a valid attribute Error: Invalid schema: 'id' is not a valid attribute Error: Invalid schema: 'label' is not a valid attribute

I still get the same errors if I add this schema rather than the schema above. 

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

标签： htmlcssshopify

解决方案

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

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

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

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

     {{ tag }}

    {% endfor %}

    {％ 万一 ％}

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

您可以将 blog 替换为 blogs['blog-handle'] ，然后您就可以获得博客数据。

好像您希望代码中的博客句柄是动态的，那么您必须在部分模式中创建一个区域，您可以在其中选择您的博客，然后您可以自动获得博客句柄。

{
 "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 %}

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

推荐阅读