# 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> ``` ``` 結果