dedecms調用標籤總結(二)

6. 列表呼叫

首頁：

<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 個字節，對於常用字， utf-8 的格式下，每一個漢字佔三個字節，英文和數字分別佔用一個字節。

(3). typeid='2' 是欄位 id 為 2。

(4). orderby='pubdate' 表示依照發佈的時間順序排序，最後發佈的文章排在最前面。

列表頁：

<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/] 呼叫連結。

(3). [field:title/] 呼叫標題。

(4). [field:litpic/] 呼叫縮圖。

列表頁之所以不需要加上 id，是因為欄位管理中清單模板已經選定了所需的模板，在該模板下呼叫不需要指明 id。

鏈接，標題，縮圖使用頻率較高，在內容頁的調用方法稍有不同，原因是它們的外面沒有嵌套 {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 下拉跳轉框

透過實際項目中得出的結論可知：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">根据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' 表示循環一次(我試過如果不設定 row 的值的話，會重複調用13次，因為我這裡它的二級子欄目為 13 個)

(3). channelid='17' 表示自訂內容模型的 id 號。

(4). addfields='product' 表示自訂內容模型的辨識 id。

(5). type='son' 表示為其指定欄目的子欄位。

 

9. 目前欄目的高亮顯示

欄目的高亮顯示，一般是把目前欄目的字體變成不同於其他欄目的顏色，或對其添加不同於其他欄目的背景顏色。在 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">="木质防火门"</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">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">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">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. 上一篇(頁)和下一篇(頁)

上一篇和下一篇的調用比較簡單，官方文件為：

上一篇：{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>;
}