dedecms調用標簽總結(二)，dedecms調用標簽總結

dedecms調用標簽總結(二)，dedecms調用標簽總結

6. 列表調用

首頁：

{dede:arclist row='10' titlelen='24' typeid='2' orderby='pubdate'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:litpic/]" alt="[field:title/]">
            <h4>[field:title/]</h4>
        </a>
    </li>
{/dede:arclist}

(1). row='10' 表示調用十項，最多顯示十項。

(2). titlelen='24' 表示標題最多顯示 24 個字節，對於常用字， utf-8 的格式下，每一個漢字占三個字節，英文和數字分別占用一個字節。

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

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

列表頁：

{dede:list pagesize='12'}
<li>
    <a href="[field:arcurl/]" title="[field:title/]">
        <img src="[field:litpic/]" alt="[field:title/]">
        <h4>[field:title/]</h4>
    </a>
</li>
{/dede:list}

上面是最簡單的列表調用方式。

(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(下一頁) 兩個字段，這兩個字段意義不大。

這裡附上自定義的樣式：

.pagination-wrap {
    margin-top: 30px;
    text-align: center;
}
.pagination {
    display: inline-block;
    text-align: center;
}
.pagination:before,
.pagination:after {
    display: table;
    content: "";
}
.pagination:after { clear: both; }
.pagination {
    display: inline-block;
    text-align: center;
}
/*根據dedecms模板需要，更改下面樣式*/
.pagination > li {
    float: left;
    display: block;
    margin-left: -1px; /*消除兩個 a 在一起時引起的雙倍左外邊距*/
    height: 30px;
    line-height: 28px;
    padding-right: 28px;
    padding-left: 28px;
    border: 1px solid #ddd;    
}
.pagination > li:first-child {
    margin-left: 0; /*第一個 li 不需要消除左外邊距*/
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.pagination > li:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.pagination > li > a {
    display: block;
    width: 100%;
    height: 100%;
    color: #e04728;
    background-color: #fff;
    padding-right: 15px;
    padding-left: 15px;
}
.pagination > li {
    z-index: 3;
    cursor: default;
    color: #e04728;
}
.pagination > li.thisclass {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #e04728;
    border-color: #e04728;
}
.pagination > li > select {
    display: inline-block;
    margin-left: -1px; /*消除兩個 a 在一起時引起的雙倍左外邊距*/
    border: 1px solid #ddd;
    height: 30px;
    line-height: 28px;
    padding-right: 28px;
    padding-left: 28px;
    color: #e04728;
}    
.pagination > li > select option {
    display: block;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}
.pagination > li > select option[selected] {
    color: #fff;
    background-color: #e04728;
}
.pagination > li > select option:hover { background-color: #eee; }

// dedecms 模板下新增腳本
// 去除分頁時 select 的寬度
$(".pagination > li > select").css("width", "auto");
// 對 li 沒有 select 子元素時，設置樣式
$(".pagination > li:has(select)").css({
    paddingRight: 0,
    paddingLeft: 0,
    border: "none"
});
$(".pagination > li:has(a)").css({
    paddingRight: 0,
    paddingLeft: 0
});
$(".pagination > li.thisclass + li").css("marginLeft", 0);

8. 多級欄目調用

欄目及其子欄目如下：

以我自己的實例為例，調用指定欄目下的全部二級欄目

<ul class="content" id="categoriesList">
    {dede:channelartlist typeid='3' row='1' channelid='17' addfields='product'}
        {dede:channel type='son' noself='yes'}
        <li><a href="[field:typelink/]" title="[field:typename/]">[field:typename/]</a></li>
        {/dede:channel}
    {/dede:channelartlist}
</ul>

(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 官方文檔裡的介紹方法：

current

具體查看 http://www.cnblogs.com/xinjie-just/p/5985455.html 第三條。

(2). 對於二級欄目，使用 js 為其添加高亮的功能，更簡單些。

以我自己的實例說明：

<ul class="content" id="categoriesList">
    <li><a href="#" title="木質防火門">木質防火門</a></li>
    <li><a href="#" title="鋼質防火門">鋼質防火門</a></li>
    <li><a href="#" title="鋼木質防火門">鋼木質防火門</a></li>
    <li><a href="#" title="固定式防火窗">固定式防火窗</a></li>
</ul>

方法是，當 a 標簽的 href 屬性的屬性值和頁面當前的 url 地址(document.location.href) 能匹配時，就為其添加高亮顯示。

var nav = document.getElementById("categoriesList").getElementsByTagName("a");
for(var i = 0; i < nav.length; i++){
    var navLinks = nav[i].getAttribute("href");  // 獲得鏈接的 href 屬性值
    var pageLink = document.location.href; // 獲得當前頁面的地址
    if(pageLink.indexOf(navLinks) != -1){  // 如果沒有找到匹配的字符串則返回 -1，不等於 -1，說明匹配到了
        nav[i].className = "active";  // 為其添加 active 類
    }
}

/*css*/
#categoriesList li a.active {
    color: #a67650;
}

10. 上一篇(頁)和下一篇(頁)

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

上一篇：{dede:prenext get='pre'/}

下一篇：{dede:prenext get='next'/}

於是，我的 dom 也簡單：

<ul class="pre-next clearfix">
    <li class="pre">
    {dede:prenext get='pre'/}
    </li>
    <li class="next">
    {dede:prenext get='next'/}
    </li>
</ul>

/*上一篇、下一篇*/
.pre-next li {
    width: 48%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pre-next .pre {
    float: left;
    text-align: right;
}
.pre-next .next {
    float: right;
    text-align: left;
}
.pre-next li a {
    padding-right: 8px;
    padding-left: 8px;
}
.pre-next li a:hover {
    color: #ef4526;
}