shopify隐藏面包屑breadcrumb导航
shopify面包屑导航是为了方便访客知道自己所在位置而设计,一般首页-分类-产品这样的类型,有些shopify主题会有而有些没有。如果想shopify隐藏面包屑要如何操作呢?如下图所示,我们以simple shopify模板为例。随ytkah一起来看看吧。
最简单的方法是直接把代码注释掉,文件路径是 /snippets/breadcrumb-nav.liquid,
<nav class="breadcrumb-nav small--text-center{% if request.page_type == blank %} breadcrumb-nav--no-template{% endif %}" aria-label="{{ 'general.breadcrumbs.you_are_here' | t }}"> <span itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="{{ routes.root_url }}" itemprop="item" title="{{ 'general.breadcrumbs.home_link_title' | t }}"> <span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span> </a> <span itemprop="position" hidden>1</span> </span> <span class="breadcrumb-nav__separator" aria-hidden="true" id="breadcrumb-home">›</span> {% case request.page_type %} {% when 'collection' %} {% if current_tags %} {% assign collection_url = current_tags.first | link_to_remove_tag: current_tags.first | split: 'href="' | last | split: '"' | first %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="{{ collection_url }}" itemprop="item"> <span itemprop="name">{{ collection.title }}</span> </a> <span itemprop="position" hidden>2</span> </span> <span class="breadcrumb-nav__separator" aria-hidden="true">›</span> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ current_tags.first }}</span> <span itemprop="position" hidden>3</span> </span> {% else %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ collection.title }}</span> <span itemprop="position" hidden>2</span> </span> {% endif %} {% when 'product' %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ product.title }}</span> {% assign item_prop_position = 2 %} {% if request.path contains 'collections' %} {% assign item_prop_position = 3 %} {% endif %} <span itemprop="position" hidden>{{ item_prop_position }}</span> </span> {% when 'blog' %} {% if current_tags %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="{{ blog.url }}" itemprop="item"> <span itemprop="name">{{ blog.title }}</span> </a> <span itemprop="position" hidden>2</span> </span> <span class="breadcrumb-nav__separator" aria-hidden="true">›</span> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ current_tags.first }}</span> <span itemprop="position" hidden>3</span> </span> {% else %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ blog.title }}</span> <span itemprop="position" hidden>2</span> </span> {% endif %} {% when 'article' %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="{{ blog.url }}" itemprop="item"> <span itemprop="name">{{ blog.title }}</span> </a> <span itemprop="position" hidden>2</span> </span> <span class="breadcrumb-nav__separator" aria-hidden="true">›</span> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ article.title }}</span> <span itemprop="position" hidden>3</span> </span> {% when 'page' %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ page.title }}</span> <span itemprop="position" hidden>2</span> </span> {% else %} <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">{{ page_title }}</span> <span itemprop="position" hidden>2</span> </span> {% endcase %} </span> </nav> <script> if(sessionStorage.breadcrumb) { theme.breadcrumbs = {}; theme.breadcrumbs.collection = JSON.parse(sessionStorage.breadcrumb); var showCollection = false; {%- if request.page_type == "product" -%} var breadcrumbHTML = '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="' + theme.breadcrumbs.collection.link + '" itemprop="item"><span itemprop="name">' + theme.breadcrumbs.collection.title + '</span></a><span itemprop="position" hidden>2</span></span><span class="breadcrumb-nav__separator" aria-hidden="true">›</span>'; var homeBreadcrumb = document.getElementById('breadcrumb-home'); var productCollections = {{ product.collections | json }}; if (productCollections) { productCollections.forEach(function(collection) { if (collection.title === theme.breadcrumbs.collection.title) { showCollection = true; } }); } if(homeBreadcrumb && showCollection) { homeBreadcrumb.insertAdjacentHTML('afterend', breadcrumbHTML); } {%- endif -%} } </script>
另外一种方法,找到引用breadcrumb-nav的地方,然后屏蔽相关代码
![wechat](https://img2023.cnblogs.com/blog/567218/202306/567218-20230609164902212-848609210.jpg)
加微信交流