[TOC] ## filter 篩選標簽 獲取后臺模型設定的篩選字段。常用于列表篩選 ## 參數 | 參數名稱 | 可選值 | 默認值 | 是否必填 | 說明 | | --- | --- | --- | --- | --- | | id | - | $item | - | 指定循環里的變量名，例如id='obj'，模板調用如：{$item.title} 變成 {$obj.title} | | currentstyle | - | active | - | 指定選中的class樣式 | | multiple| 1/0 | 0 | - | 是否允許多選，1-開啟多選，0-關閉 | | field | 開啟篩選的字段 | - | - | 限制顯示篩選字段 | | alltxt| - | 全部 | - | 第一個選項顯示的文字，例如：alltxt="不限"，等于off則不顯示 | ## 使用注意 要使用篩選標簽，請先在后臺指定篩選的字段  如果你的字段類型非下拉列表、單選、復選，你需要指定選項類別。如下圖  效果圖：  ## 參數說明 `id`參數，用于指定循環的變量名，默認是`$item`，設置值`id="obj"`，變量名即為$obj。 ~~~ {hkcms:filter id="obj"} 選項名字：{$obj.title}: // 選項列表，使用volist循環標簽循環輸出。 {hkcms:volist name="obj.option" id="vo"} <a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a> {/hkcms:volist} {/hkcms:filter} ~~~ `currentstyle ` 指定選擇項的class，默認class名稱為`active` ~~~ {hkcms:filter id="obj" currentstyle="newclass"} 選項名字：{$obj.title} {hkcms:volist name="obj.option" id="vo"} // currentstyle="newclass", 當該選項選中時，$vo.currentstyle的值為newclass，沒選擇的為空。 <a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a> {/hkcms:volist} {/hkcms:filter} ~~~ `multiple`參數開啟多選，1=開啟，0=關閉 ~~~ {hkcms:filter multiple="1" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ~~~ `field` 限定字段，當有時候不想顯示所有篩選字段，在這里可以指定篩選的字段。多個字段使用英文逗號分隔。如下： ~~~ // 只顯示option和option2的字段 {hkcms:filter field="option,option2" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ~~~ `alltxt`指定第一個重置選項的名稱，例如通常有：全部、不限等，默認顯示`全部`，如果不想顯示等于`off`即可關閉 ~~~ {hkcms:filter alltxt="不限" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ~~~ 效果  篩選文字多語言化，注意前提寫好多語言。多語言配置可前往多語言章節了解。 ~~~ {hkcms:filter alltxt="lang('All')" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> // 多語言標題，格式為：{:__(這里寫變量)} <div class="">{:__($item.title)}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{:__($vo.title)}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ~~~ 關閉第一的重置選項 ~~~ {hkcms:filter alltxt="off" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ~~~ 效果  ## 字段調用 更多字段可在模型管理》字段管理里面找到字段的名字，以下僅包含主要的字段 **注意：其中`$item`變量根據filter標簽的id參數影響，默認是：$item。** | 字段名 | 說明 | 調用方式 | | --- | --- | --- | | title | 字段標題 | {$item.title} | | name | 字段名 | {$item.name} | | option | 數組，里面是篩選的選項,使用volist循環標簽 | {hkcms:volist name="item.option" id="vo"} {/hkcms:volist} | **option 內容，id="vo"** | 字段名 | 說明 | 調用方式 | | --- | --- | --- | | title | 標題 | {$vo.title} | | name | 選項值 | {$vo.name} | | url | 鏈接地址 | {$vo.url} | | currentstyle | 高亮，選中的選項有class，用于css定義顏色高亮 | {$vo.currentstyle} |