为Shopify的Blog页面添加面包屑导航和配套的面包屑结构化数据
Shopify有很多主题不支持多级Blog导航，如何为你的Shopify改造成以下的面包屑导航：
Blog首页：全站页首 > 博客首页
Blog分类页：全站页首 > 博客首页 > 博客分类页
Blog文章页：全站页首 > 博客首页 > 博客分类页 > 博客文章页下面保哥为你讲解具体的操作方案和步骤：
创建Blog首页
先创建一个Blog分类，URL为/blog/all，作为Blog首页
- 进入Shopify后台，找到内容 —— 博客文章 —— 管理博客 —— 添加博客
- 标题可以取名为Blog，或者Blog Center
- 搜索引擎列表中的URL名称，使用all
为Blog首页创建模板
为这个Blog分类创建一个模板，并将/blog/all页面的模板样式绑定这个Blog模板，将所有分类及分类下的6篇文章进行调用
编辑breadcrumb.liquid代码
将以下代码替换原来的breadcrumb.liquid代码
{% assign _breadcrumb_mobile = settings.breadcrumb_mobile %}
{% assign _breadcrumb_styles = settings.breadcrumb_styles %}
{% if template contains 'customers' or template == 'page' %}
{% capture _breadcrumb_image %} {{ 'breadcrumb_bg.jpg' | asset_url }} {% endcapture %}
{% else %}
{% capture _breadcrumb_image %} {{ sectionhttps://www.holkieusa.com.settings.breadcrumb_image | img_url: '1920x' }} {% endcapture %}
{% if section.settings.breadcrumb_image == blank %}{% capture _breadcrumb_image %} {{ 'breadcrumb_bg.jpg' | asset_url }} {% endcapture %}{% endif %}
{% endif %}
<div class="wrap-breadcrumb bw-{{ _breadcrumb_styles }} {% unless _breadcrumb_mobile %} d-none d-md-block{% endunless %}"{% if _breadcrumb_styles == 'image' %} style="background-image: url({{_breadcrumb_image }});"{% endif %}>
<div id="breadcrumb" class="breadcrumb-holder container">
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name" class="d-none">Home</span>{{ 'general.text.home' | t }}
<meta itemprop="position" content="1" />
</a>
</li>
{% if template contains 'product' or template contains 'collection' %}
{% comment %} Get breadcrumb path from metafields {% endcomment %}
{% assign breadcrumb_path = nil %}
{% if template contains 'product' %}
{% assign breadcrumb_path = product.metafields.custom.breadcrumb_path.value %}
{% elsif template contains 'collection' %}
{% assign breadcrumb_path = collection.metafields.custom.breadcrumb_path.value %}
{% endif %}
{% if breadcrumb_path %}
{% assign position_counter = 2 %}
{% for crumb in breadcrumb_path %}
{% assign crumb_url = '/collections/' | append: crumb.handle %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a href="{{ crumb_url }}" itemprop="item">
<span itemprop="name">{{ crumb.name }}</span>
<meta itemprop="position" content="{{ position_counter }}" />
</a>
</li>
<li>{{ crumb.name | link_to: crumb_url }}</li>
{% assign position_counter = position_counter | plus: 1 %}
{% endfor %}
{% endif %}
{% endif %}
{% if template contains 'product' %}
{% comment %} Set product position based on path existence {% endcomment %}
{% assign product_position = position_counter | default: 2 %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a href="{{product.url}}" itemprop="item">
<span itemprop="name">{{ product.title }}</span>
<meta itemprop="position" content="{{ product_position }}" />
</a>
</li>
<li class="active">{{ product.title }}</li>
{% elsif template contains 'collection' %}
{% if current_tags %}
{% comment %} Tag filtering - show tag as last item {% endcomment %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a href="{{collection.url}}" itemprop="item">
<span itemprop="name">{{ collection.title }}</span>
<meta itemprop="position" content="{{ position_counter }}" />
</a>
</li>
<li>{{ collection.title | link_to: collection.url }}</li>
{% assign tag_position = position_counter | plus: 1 | default: 3 %}
<li itemprop="itemListElement" itemscopehttps://www.holkieusa.com itemtype="http://schema.org/ListItem" class="d-none">
<a href="{{collection.url}}/{{ current_tags.first }}" itemprop="item">
<span itemprop="name">{{ current_tags.first }}</span>
<meta itemprop="position" content="{{ tag_position }}" />
</a>
</li>
<https://www.holkieusa.comli class="active">{{ current_tags.first }}</li>
{% else %}
{% comment %} Default collection view {% endcomment %}
{% if breadcrumb_path == blank %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a href="{{collection.url}}" itemprop="item">
<span itemprop="name">{{ collection.title }}</span>
<meta itemprop="position" content="{{ position_counter | default: 2 }}" />
</a>
</li>
{% endif %}
<li class="active">{{ collection.title }}</li>
{% endif %}
{% comment %} show all {% endcomment %}
{% elsif template == 'blog' %}
{% if blog.handle == 'all' or request.path == '/blogs/all' %}
{% comment %} blog all - 特殊处理当前位置 {% endcomment %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="active">
<a itemprop="item" href="{{ canonical_url }}">
<span itemprop="name">All Blog</span>
<meta itemprop="position" content="2" />
</a>
</li>
{% else %}
{% comment %} blog collections {% endcomment %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a itemprop="item" href="/blogs/all">
<span itemprop="name">All Blog</span>
<meta itemprop="position" content="2" />
</a>
</li>
<li>{{ 'All Blog' | link_to: "/blogs/all" }}</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a itemprop="item" href="{{ blog.url }}">
<span itemprop="name">{{ blog.title }}</span>
<meta itemprop="position" content="3" />
</a>
</li>
<li class="active">{{ blog.title }}</li>
{% endif %}
{% elsif template == 'article' %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a itemprop="item" href="/blogs/all">
<span itemprop="name">All Blog</span>
<meta itemprop="position" content="2" />
</a>
</li>
<li>{{ 'All Blog' | link_to: "/blogs/all" }}</li>
{% comment %} blog collections {% endcomment %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a itemprop="item" href="{{ blog.url }}">
<span itemprop="name">{{ blog.title }}</span>
<meta itemprop="position" content="3" />
</a>
</li>
<li>{{ blog.title | link_to: blog.url }}</li>
{% comment %} blog article {% endcomment %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="d-none">
<a itemprop="item" href="{{ article.url }}">
<span itemprop="name">{{ article.title }}</span>
<meta itemprop="position" content="4" />
</a>
</li>
<li class="active">{{ article.title }}</li>
{% else %}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="active">
<a itemprop="item" href="{{ canonical_url }}">
<span itemprop="name">{{ page_title }}</span>
<meta itemprop="position" content="2" />
</a>
</li>
{% endif %}
</ul>
</div>
</div>保存即可。
设置301跳转
将系统的/blog这个打开404状态的页面设置跳转到/blogs/all
内容 —— 菜单 —— 创建URL重定向
将/blog跳转到/blogs/all
TAG
本文标题：《为Shopify的Blog页面添加面包屑导航和配套的面包屑结构化数据》
本文链接：https://zhangwenbao.com/shopify-blog-breadcrumb.html