织梦cms栏目面包屑导航

面包屑导航概述

面包屑导航(Breadcrumb)是网站中指示当前页面在网站层级结构中位置的一种导航方式。在织梦CMS中,面包屑导航通过 {dede:field.position/} 标签自动生成栏目层级路径。它对用户体验和SEO都具有重要意义。

一、基础面包屑导航标签

织梦CMS最简单的面包屑实现:

<!-- 在栏目页/文章页中使用 -->
<div class="breadcrumb">
  {dede:field.position/}
</div>

<!-- 输出效果 -->
<!-- 首页 > 新闻中心 > 行业资讯 -->

二、自定义面包屑样式

<style>
.breadcrumb{
  padding:10px 0;
  font-size:14px;
  color:#666;
  background:#f8f9fa;
  border-radius:4px;
  margin-bottom:20px;
}
.breadcrumb a{
  color:#3498db;
  text-decoration:none;
  margin:0 5px;
}
.breadcrumb a:hover{color:#2980b9;}
.breadcrumb span{color:#666;margin:0 5px;}
.breadcrumb .current{color:#333;font-weight:bold;}
</style>

<div class="breadcrumb">
  {dede:field.position/}
</div>

三、使用 channel 标签自定义面包屑

当需要更精细控制面包屑的每层链接时:

<div class="breadcrumb">
  <a href="/">首页</a>
  <span> > </span>
  
  <!-- 显示顶级栏目 -->
  {dede:type}[<a href="[field:typelink function='GetTopTypelink(@me)'/]">
    [field:typename function='GetTopTypename(@me)'/]
  </a>]{/dede:type}
  
  {dede:field name='position' runphp='yes'}
    // 获取当前位置,判断是否需要显示父级
    $pid=$refObj->TypeLink->TypeInfos['reid'];
    if($pid > 0){
        $parent=$dsql->GetOne("SELECT typename,typedir FROM dede_arctype WHERE id={$pid}");
        @me=' > '.$parent['typename'].' > '.$refObj->TypeLink->TypeInfos['typename'];
    }else{
        @me=' > '.$refObj->TypeLink->TypeInfos['typename'];
    }
  {/dede:field}
</div>

四、文章页的完整面包屑

<!-- 在文章模板中 -->
<div class="breadcrumb">
  <a href="{dede:global.cfg_cmspath/}/">首页</a>
  <span> > </span>
  {dede:field.position/}
  <span> > </span>
  <span class="current">{dede:field.title/}</span>
</div>

五、带图标的面包屑导航

<div class="breadcrumb-icon">
  <span class="home-icon">??</span>
  <a href="/">首页</a>
  
  {dede:field name='position' runphp='yes'}
    @me=str_replace(' > ', ' > ', @me);
    @me=str_replace('>', '<span class="arrow">?</span>', @me);
  {/dede:field}
</div>

六、SEO优化面包屑(Schema结构化数据)

<!-- 添加Schema.org结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "{dede:global.cfg_basehost/}/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{dede:field.typename/}",
      "item": "{dede:global.cfg_basehost/}{dede:field.typelink/}"
    }
  ]
}
</script>

七、常见面包屑问题

SEO建议:面包屑导航能帮助搜索引擎理解网站结构,建议在栏目页和文章页都添加面包屑导航,并使用Schema结构化数据标记,让搜索结果中展示面包屑路径。