Shopify帮助辅助博客部分在另一页上

时间:2018-05-23 23:55:52

标签: html css shopify

您好,我希望有人熟悉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 %}

使用上面的代码,我在尝试保存新部分时会出现以下错误。

错误:架构无效:&#39;键入&#39;不是有效的属性 错误:架构无效:&#39; id&#39;不是有效的属性 错误:架构无效:&#39;标签&#39;不是有效属性

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

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

1 个答案:

答案 0 :(得分:0)

我检查了你的代码。实际上问题是你正试图获得shopify blog&amp;博客文件以外的文章内容。如果你想获得博客和页面模板中的文章内容然后还有另一种方式

  • 您必须在代码中写博客的地方传递您的博客句柄。在这里,我为您编写示例代码,请尝试使用此代码&amp;检查这是否适合您: -

    {%if blogs ['all']。tags.size&gt; 0%}

    {%for blogs ['all']。all_tags%}

     {{ tag }}
    

    {%endfor%}

    {%endif%}

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

您可以将博客替换为博客['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 %}

现在,每件事都是充满活力的。您将获得您将在部分架构中选择的博客的所有数据。