dedecms調(diào)用標籤總結(jié)(二)
Dec 05, 2016 pm 01:26 PM6. 列表呼叫
首頁:
<span style="color: #000000">{dede:arclist row='10' titlelen='24' typeid='2' orderby='pubdate'} </span><span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="[field:arcurl/]"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="[field:title/]"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="[field:litpic/]"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">="[field:title/]"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>[field:title/]<span style="color: #0000ff"></</span><span style="color: #800000">h4</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span><span style="color: #000000"> {/dede:arclist}</span>
(1). row='10' 表示呼叫十項,最多顯示十項。
(2). titlelen='24' 表示標題最多顯示 24 個字節(jié),對於常用字, utf-8 的格式下,每一個漢字佔三個字節(jié),英文和數(shù)字分別佔用一個字節(jié)。
(3). typeid='2' 是欄位 id 為 2。
(4). orderby='pubdate' 表示依照發(fā)佈的時間順序排序,最後發(fā)佈的文章排在最前面。
列表頁:
<span style="color: #000000">{dede:list pagesize='12'} </span><span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="[field:arcurl/]"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="[field:title/]"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="[field:litpic/]"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">="[field:title/]"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>[field:title/]<span style="color: #0000ff"></</span><span style="color: #800000">h4</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span><span style="color: #000000"> {/dede:list}</span>
上面是最簡單的列表呼叫方式。
(1). pagesize='12' 指明呼叫 12 項,也就是說最多能顯示 12 項。
(2). [field:arcurl/] 呼叫連結(jié)。
(3). [field:title/] 呼叫標題。
(4). [field:litpic/] 呼叫縮圖。
列表頁之所以不需要加上 id,是因為欄位管理中清單模板已經(jīng)選定了所需的模板,在該模板下呼叫不需要指明 id。
鏈接,標題,縮圖使用頻率較高,在內(nèi)容頁的調(diào)用方法稍有不同,原因是它們的外面沒有嵌套 {dede:...} 之類的標籤。呼叫方法分別為:{dede:field.arcurl/}, {dede:field.title/},{dede:field.litpic/}。
?
7. 分頁
官方手冊中的分頁為:
{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}
官方解釋:
listsize=3 表示 [1][2][3] 這些項目的長度 x 2;
index 首頁
pre 上一頁
pageno 頁碼
next 下一頁
end 末頁
option 下拉跳轉(zhuǎn)框
透過實際項目中得出的結(jié)論可知:listsize=3 表示[1][2][3] 這些項的長度x 2,而是[1][2][3] 這些項的長度x 2 + 1。
我的分頁為:
{dede:pagelist listsize='2' listitem='index pageno end option'/}
我的清單一共 16 項,每一頁 3 項,5 頁顯示不完全,最後一頁顯示 1 項。
點選末頁時,會全部展示:
我沒有使用 pre(上一頁)和 next(下一頁) 兩個字段,這兩個字段意義不大。
這裡附上自訂的樣式:
<span style="color: #800000">.pagination-wrap </span>{<span style="color: #ff0000"> margin-top</span>:<span style="color: #0000ff"> 30px</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> center</span>; }<span style="color: #800000"> .pagination </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> center</span>; }<span style="color: #800000"> .pagination:before, .pagination:after </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> table</span>;<span style="color: #ff0000"> content</span>:<span style="color: #0000ff"> ""</span>; }<span style="color: #800000"> .pagination:after </span>{<span style="color: #ff0000"> clear</span>:<span style="color: #0000ff"> both</span>; }<span style="color: #800000"> .pagination </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> center</span>; } <span style="color: #008000">/*</span><span style="color: #008000">根據(jù)dedecms模板需要,更改下面樣式</span><span style="color: #008000">*/</span><span style="color: #800000"> .pagination > li </span>{<span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> left</span>;<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> block</span>;<span style="color: #ff0000"> margin-left</span>:<span style="color: #0000ff"> -1px</span>; <span style="color: #008000">/*</span><span style="color: #008000">消除兩個 a 在一起時引起的雙倍左外邊距</span><span style="color: #008000">*/</span><span style="color: #ff0000"> height</span>:<span style="color: #0000ff"> 30px</span>;<span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> padding-right</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> border</span>:<span style="color: #0000ff"> 1px solid #ddd</span>; }<span style="color: #800000"> .pagination > li:first-child </span>{<span style="color: #ff0000"> margin-left</span>:<span style="color: #0000ff"> 0</span>; <span style="color: #008000">/*</span><span style="color: #008000">第一個 li 不需要消除左外邊距</span><span style="color: #008000">*/</span><span style="color: #ff0000"> border-top-left-radius</span>:<span style="color: #0000ff"> 5px</span>;<span style="color: #ff0000"> border-bottom-left-radius</span>:<span style="color: #0000ff"> 5px</span>; }<span style="color: #800000"> .pagination > li:last-child </span>{<span style="color: #ff0000"> border-top-right-radius</span>:<span style="color: #0000ff"> 5px</span>;<span style="color: #ff0000"> border-bottom-right-radius</span>:<span style="color: #0000ff"> 5px</span>; }<span style="color: #800000"> .pagination > li > a </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> block</span>;<span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 100%</span>;<span style="color: #ff0000"> height</span>:<span style="color: #0000ff"> 100%</span>;<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #e04728</span>;<span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000"> padding-right</span>:<span style="color: #0000ff"> 15px</span>;<span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff"> 15px</span>; }<span style="color: #800000"> .pagination > li </span>{<span style="color: #ff0000"> z-index</span>:<span style="color: #0000ff"> 3</span>;<span style="color: #ff0000"> cursor</span>:<span style="color: #0000ff"> default</span>;<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #e04728</span>; }<span style="color: #800000"> .pagination > li.thisclass </span>{<span style="color: #ff0000"> z-index</span>:<span style="color: #0000ff"> 3</span>;<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000"> cursor</span>:<span style="color: #0000ff"> default</span>;<span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff"> #e04728</span>;<span style="color: #ff0000"> border-color</span>:<span style="color: #0000ff"> #e04728</span>; }<span style="color: #800000"> .pagination > li > select </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000"> margin-left</span>:<span style="color: #0000ff"> -1px</span>; <span style="color: #008000">/*</span><span style="color: #008000">消除兩個 a 在一起時引起的雙倍左外邊距</span><span style="color: #008000">*/</span><span style="color: #ff0000"> border</span>:<span style="color: #0000ff"> 1px solid #ddd</span>;<span style="color: #ff0000"> height</span>:<span style="color: #0000ff"> 30px</span>;<span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> padding-right</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff"> 28px</span>;<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #e04728</span>; }<span style="color: #800000"> .pagination > li > select option </span>{<span style="color: #ff0000"> display</span>:<span style="color: #0000ff"> block</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> center</span>;<span style="color: #ff0000"> padding-top</span>:<span style="color: #0000ff"> 6px</span>;<span style="color: #ff0000"> padding-bottom</span>:<span style="color: #0000ff"> 6px</span>; }<span style="color: #800000"> .pagination > li > select option[selected] </span>{<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff"> #e04728</span>; }<span style="color: #800000"> .pagination > li > select option:hover </span>{<span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff"> #eee</span>; }
<span style="color: #008000">//</span><span style="color: #008000"> dedecms 模板下新增腳本</span><span style="color: #008000"> //</span><span style="color: #008000"> 去除分頁時 select 的寬度</span> $(".pagination > li > select").css("width", "auto"<span style="color: #000000">); </span><span style="color: #008000">//</span><span style="color: #008000"> 對 li 沒有 select 子元素時,設置樣式</span> $(".pagination > li:has(select)"<span style="color: #000000">).css({ paddingRight: </span>0<span style="color: #000000">, paddingLeft: </span>0<span style="color: #000000">, border: </span>"none"<span style="color: #000000"> }); $(</span>".pagination > li:has(a)"<span style="color: #000000">).css({ paddingRight: </span>0<span style="color: #000000">, paddingLeft: </span>0<span style="color: #000000"> }); $(</span>".pagination > li.thisclass + li").css("marginLeft", 0);
?
?
8. 多層級欄位呼叫
欄目及其子欄如下:
以我自己的實例為例,呼叫指定欄位下的全部二級欄位
<span style="color: #0000ff"><</span><span style="color: #800000">ul </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="content"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="categoriesList"</span><span style="color: #0000ff">></span><span style="color: #000000"> {dede:channelartlist typeid='3' row='1' channelid='17' addfields='product'} {dede:channel type='son' noself='yes'} </span><span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="[field:typelink/]"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="[field:typename/]"</span><span style="color: #0000ff">></span>[field:typename/]<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span><span style="color: #000000"> {/dede:channel} {/dede:channelartlist} </span><span style="color: #0000ff"></</span><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
(1). typeid='3' 是要指定的欄目的 id 。
(2). row='1' 表示循環(huán)一次(我試過如果不設定 row 的值的話,會重複調(diào)用13次,因為我這裡它的二級子欄目為 13 個)
(3). channelid='17' 表示自訂內(nèi)容模型的 id 號。
(4). addfields='product' 表示自訂內(nèi)容模型的辨識 id。
(5). type='son' 表示為其指定欄目的子欄位。
?
9. 目前欄目的高亮顯示
欄目的高亮顯示,一般是把目前欄目的字體變成不同於其他欄目的顏色,或?qū)ζ涮砑硬煌镀渌麢谀康谋尘邦伾?。?dedecms 裡分兩種情況討論:
(1). 對於導航,一個導航欄位下可能擁有多個二級子欄目,當該頁面屬於該欄目的子欄位時,這個欄位也需要高亮顯示。這裡使用 dedecms 官方文件裡的介紹方法:
currentstyle="<span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">='~typelink~' </span><span style="color: #ff0000">class</span><span style="color: #0000ff">='active'</span><span style="color: #0000ff">></span>~typename~<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span>"
具體查看 http://www.cnblogs.com/xinjie-just/p/5985455.html 第三條。
(2). 對於二級欄目,使用 js 為其添加高亮的功能,更簡單些。
以我自己的實例說明:
<span style="color: #0000ff"><</span><span style="color: #800000">ul </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="content"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="categoriesList"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="木質(zhì)防火門"</span><span style="color: #0000ff">></span>木質(zhì)防火門<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="鋼質(zhì)防火門"</span><span style="color: #0000ff">></span>鋼質(zhì)防火門<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="鋼木質(zhì)防火門"</span><span style="color: #0000ff">></span>鋼木質(zhì)防火門<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">li</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="固定式防火窗"</span><span style="color: #0000ff">></span>固定式防火窗<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
方法是,當 a 標籤的 href 屬性的屬性值和頁面目前的 url 位址(document.location.href) 能匹配時,就為其添加高亮顯示。
<span style="color: #0000ff">var</span> nav = document.getElementById("categoriesList").getElementsByTagName("a"<span style="color: #000000">); </span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0; i < nav.length; i++<span style="color: #000000">){ </span><span style="color: #0000ff">var</span> navLinks = nav[i].getAttribute("href"); <span style="color: #008000">//</span><span style="color: #008000"> 獲得鏈接的 href 屬性值</span> <span style="color: #0000ff">var</span> pageLink = document.location.href; <span style="color: #008000">//</span><span style="color: #008000"> 獲得當前頁面的地址</span> <span style="color: #0000ff">if</span>(pageLink.indexOf(navLinks) != -1){ <span style="color: #008000">//</span><span style="color: #008000"> 如果沒有找到匹配的字符串則返回 -1,不等于 -1,說明匹配到了</span> nav[i].className = "active"; <span style="color: #008000">//</span><span style="color: #008000"> 為其添加 active 類</span> <span style="color: #000000"> } }</span>
<span style="color: #008000">/*</span><span style="color: #008000">css</span><span style="color: #008000">*/</span><span style="color: #800000"> #categoriesList li a.active </span>{<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #a67650</span>; }
?
?
10. 上一篇(頁)和下一篇(頁)
上一篇和下一篇的調(diào)用比較簡單,官方文件為:
上一篇:{dede:prenext get='pre'/}
下一篇:{dede:prenext get='next'/}
於是,我的 dom 也簡單:
<span style="color: #0000ff"><</span><span style="color: #800000">ul </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="pre-next clearfix"</span><span style="color: #0000ff">> <span style="color: #0000ff"><</span><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="pre"</span><span style="color: #0000ff">></span><span style="color: #000000"> {dede:prenext get='pre'/} </span><span style="color: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="next"</span><span style="color: #0000ff">></span><span style="color: #000000"> {dede:prenext get='next'/} </span><span style="color: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
<span style="color: #008000">/*</span><span style="color: #008000">上一篇、下一篇</span><span style="color: #008000">*/</span><span style="color: #800000"> .pre-next li </span>{<span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 48%</span>;<span style="color: #ff0000"> height</span>:<span style="color: #0000ff"> 30px</span>;<span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff"> 30px</span>;<span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff"> 14px</span>;<span style="color: #ff0000"> overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000"> text-overflow</span>:<span style="color: #0000ff"> ellipsis</span>;<span style="color: #ff0000"> white-space</span>:<span style="color: #0000ff"> nowrap</span>; }<span style="color: #800000"> .pre-next .pre </span>{<span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> left</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> right</span>; }<span style="color: #800000"> .pre-next .next </span>{<span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> right</span>;<span style="color: #ff0000"> text-align</span>:<span style="color: #0000ff"> left</span>; }<span style="color: #800000"> .pre-next li a </span>{<span style="color: #ff0000"> padding-right</span>:<span style="color: #0000ff"> 8px</span>;<span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff"> 8px</span>; }<span style="color: #800000"> .pre-next li a:hover </span>{<span style="color: #ff0000"> color</span>:<span style="color: #0000ff"> #ef4526</span>; }

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)