You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shopify非默认页面添加二级博客板块,文章无法显示求助

Troubleshooting Your Shopify Studio Blog Display Issue

Hey there, let's figure out why your Studio blog articles aren't loading on that non-default page—you're seeing the title but no posts, so let's break down the fixes step by step:

Key Issues & Fixes

1. Your Template Isn't Targeting the Right Blog Object

On non-default blog pages (like a custom page template), Shopify doesn't automatically populate the blog variable with your Studio blog. Right now, when you use blog.articles, the system doesn't know which blog you're referring to, so it returns nothing.

Fix:
First, confirm your Studio blog's handle (it's the lowercase version of your blog name, found in your Shopify admin under Blogs > Studio—look at the URL, e.g., yourstore.com/blogs/studio means the handle is studio).

Add this line at the top of your template to explicitly grab your Studio blog:

{% assign studio_blog = blogs['studio'] %}

Then replace all instances of blog in your code with studio_blog. For example:

  • Change blog.tags.size to studio_blog.tags.size
  • Change {% for article in blog.articles %} to {% for article in studio_blog.articles %}
  • Change {{ blog.url }} to {{ studio_blog.url }}

2. Your Code Is Truncated (Syntax Error)

Looking at the end of your provided code, you have an unclosed Liquid tag:

{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{%

This incomplete tag will break Liquid rendering, stopping the page from loading anything after this point.

Fix:
Make sure all your Liquid tags are properly closed. For the line above, you need to add %} to close the capture:

{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}

Double-check the rest of your code to ensure all {% if %}, {% for %}, and {% capture %} tags have their corresponding {% endif %}, {% endfor %}, and {% endcapture %} closures.

3. Prepping for Future Tag Filtering

Once you get articles displaying, your tag filter dropdown will also need the correct blog handle. Update the option values to use your Studio blog's handle explicitly instead of blog.handle:

<option value="/blogs/studio">{{ 'blogs.article.all_topics' | t }}</option>
<option value="/blogs/studio/tagged/{{ tag | handleize }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>

Example Modified Code Snippet

Here's how your header and grid section should look after the changes:

{% assign studio_blog = blogs['studio'] %}
<div class="page-width"> 
  <header class="section-header text-center"> 
    <h1>{{ page_title }}</h1> 
    {% if studio_blog.tags.size > 0 %} 
      <select id="BlogTagFilter"> 
        <option value="/blogs/studio">{{ 'blogs.article.all_topics' | t }}</option> 
        {% for tag in studio_blog.all_tags %} 
          <option value="/blogs/studio/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 studio_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 %} 
            <!-- Rest of your article meta/excerpt code here --> 
          </div> 
        {% endfor %} 
      </div> 
    </div> 
  {% endif %}
</div>

After making these changes, your Studio blog articles should load correctly on the non-default page. Once that's working, you can circle back to implementing the tag filtering logic with confidence.

内容的提问来源于stack exchange,提问作者Francis Duggan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 10:05:45