# breadcrumb 面包屑导航标签 ## 面包屑导航标签 面包屑导航标签是显示网站层次信息，即当前页面在导航层次结构内的位置 ## 格式示例 ``` <pre class="calibre16">``` <span class="token"><</span>h1 class<span class="token">=</span><span class="token4">"mb-3 mt-5 bread"</span><span class="token">></span><span class="token1">{</span>$Cate<span class="token1">.</span>title<span class="token1">}</span><span class="token"><</span><span class="token">/</span>h1<span class="token">></span> <span class="token"><</span>p class<span class="token">=</span><span class="token4">"breadcrumbs"</span><span class="token">></span><span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb class<span class="token">=</span><span class="token4">"active_a"</span> symbol<span class="token">=</span><span class="token4">">"</span> <span class="token">/</span><span class="token1">}</span><span class="token"><</span><span class="token">/</span>p<span class="token">></span> ``` ``` html结果 ``` <pre class="calibre16">``` <span class="token"><</span>p class<span class="token">=</span><span class="token4">"breadcrumbs"</span><span class="token">></span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/"</span> class<span class="token">=</span><span class="token4">"active_a"</span><span class="token">></span>首页<span class="token"><</span><span class="token">/</span>a<span class="token">></span><span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/gnxw"</span> class<span class="token">=</span><span class="token4">"active_a"</span><span class="token">></span>国内新闻<span class="token"><</span><span class="token">/</span>a<span class="token">></span><span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>span<span class="token">></span>演示<span class="token"><</span><span class="token">/</span>span<span class="token">></span> <span class="token"><</span><span class="token">/</span>p<span class="token">></span> ``` ``` 结果图  ## 参数 参数名称可选值默认值是否必填说明catid栏目ID或变量--当前位置的栏目ID ，可以传入变量或指定IDsymbol->-指定分隔符class--html class 属性，填写后除了当前位置的标签，其他标签都会加上class属性currentstyle-active-css class 类名，用于定义当前位置的classisclick-0-css class 类名，用于定义当前位置是否可点击，1-生成a标签可点击，0=生成span标签不能点击## 参数说明 `catid`栏目ID属性，用于指定当前位置栏目，一般在内容页、列表页无需填写 ``` <pre class="calibre16">``` <span class="token"><</span>p class<span class="token">=</span><span class="token4">"lead fw-normal"</span><span class="token">></span><span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb catid<span class="token">=</span><span class="token4">"$Info.category_id"</span> <span class="token">/</span><span class="token1">}</span><span class="token"><</span><span class="token">/</span>p<span class="token">></span> ``` ``` html结果 ``` <pre class="calibre16">``` <span class="token"><</span>p class<span class="token">=</span><span class="token4">"lead fw-normal"</span><span class="token">></span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/"</span> class<span class="token">=</span><span class="token4">""</span><span class="token">></span>首页<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/news/?lang=zh-cn"</span> class<span class="token">=</span><span class="token4">""</span><span class="token">></span>新闻中心<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>span class<span class="token">=</span><span class="token4">"active"</span><span class="token">></span>公司新闻<span class="token"><</span><span class="token">/</span>span<span class="token">></span> <span class="token"><</span><span class="token">/</span>p<span class="token">></span> ``` ``` `symbol` 分隔符属性，默认是`>`分隔符 改为`/`分隔符 ``` <pre class="calibre16">``` <span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb symbol<span class="token">=</span><span class="token4">" / "</span> <span class="token">/</span><span class="token1">}</span> ``` ``` `class` 类属性。例如：`class`填写成 `item`，如下 ``` <pre class="calibre16">``` <span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb class<span class="token">=</span><span class="token4">"item"</span> <span class="token">/</span><span class="token1">}</span> ``` ``` html结果 ``` <pre class="calibre16">``` <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/"</span> class<span class="token">=</span><span class="token4">"item"</span><span class="token">></span>首页<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/news/?lang=zh-cn"</span> class<span class="token">=</span><span class="token4">"item"</span><span class="token">></span>新闻中心<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>span class<span class="token">=</span><span class="token4">"active"</span><span class="token">></span>公司新闻<span class="token"><</span><span class="token">/</span>span<span class="token">></span> ``` ``` `currentstyle` 当前位置的class名称，如上，默认是`active`，你可以在这指定class `isclick`是否可点击属性。如上，默认采用span标签，`isclick=1`则采用a标签。 写法 ``` <pre class="calibre16">``` <span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb isclick<span class="token">=</span><span class="token4">"1"</span> <span class="token">/</span><span class="token1">}</span> ``` ``` html 结果 ``` <pre class="calibre16">``` <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/"</span> class<span class="token">=</span><span class="token4">""</span><span class="token">></span>首页<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/news/?lang=zh-cn"</span> class<span class="token">=</span><span class="token4">""</span><span class="token">></span>新闻中心<span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token">&</span>gt<span class="token1">;</span> <span class="token"><</span>a href<span class="token">=</span><span class="token4">"/cd/?lang=zh-cn"</span> class<span class="token">=</span><span class="token4">"active"</span><span class="token">></span>公司新闻<span class="token"><</span><span class="token">/</span>a<span class="token">></span> ``` ``` ## 示例 - 指定当前位置 ``` <pre class="calibre16">``` <span class="token5">// 根据catid 属性即可指定当前位置</span> <span class="token"><</span><span class="token">?</span>php $temp <span class="token">=</span> <span class="token3">2</span><span class="token1">;</span><span class="token">?</span><span class="token">></span> <span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb class<span class="token">=</span><span class="token4">"active_a"</span> symbol<span class="token">=</span><span class="token4">"-"</span> catid<span class="token">=</span><span class="token4">"$temp"</span> <span class="token">/</span><span class="token1">}</span> <span class="token5">// 直接给值的方式</span> <span class="token1">{</span>hkcms<span class="token1">:</span>breadcrumb class<span class="token">=</span><span class="token4">"active_a"</span> symbol<span class="token">=</span><span class="token4">"-"</span> catid<span class="token">=</span><span class="token4">"2"</span> <span class="token">/</span><span class="token1">}</span> ``` ``` 结果