dedecms call label summary (2)

6. List call

Home page:

<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' means calling ten items and displaying at most ten items.

(2). titlelen='24' means that the title can display up to 24 bytes. For common characters, in utf-8 format, each Chinese character occupies three bytes, and English and numbers each occupy one byte.

(3). typeid='2' means the column id is 2.

(4). orderby='pubdate' means sorting in the order of publication time, with the last published article at the top.

List page:

<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>

The above is the simplest way to call a list.

(1). pagesize='12' indicates to call 12 items, which means that up to 12 items can be displayed.

(2). [field:arcurl/] calls the link.

(3). [field:title/] calls the title.

(4). [field:litpic/] calls thumbnail.

The reason why the list page does not need to add an id is because the list template in the column management has already selected the required template, and there is no need to specify the id when calling under this template.

Links, titles, and thumbnails are used more frequently. The calling method on the content page is slightly different because there are no tags such as {dede:...} nested outside them. The calling methods are: {dede:field.arcurl/}, {dede:field.title/}, {dede:field.litpic/}.

7. Pagination

The pagination in the official manual is:

{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}

Official explanation:

listsize=3 means [1][2][3] the length of these items x 2;

index Home

pre Previous page

pageno page number

next next page

end last page

option drop-down jump box

It can be seen from the conclusions drawn in actual projects: listsize=3 means the length of these items [1][2][3] x 2, but the length of these items [1][2][3] x 2 + 1.

My pagination is:

{dede:pagelist listsize='2' listitem='index pageno end option'/}

My list has a total of 16 items, 3 items on each page, 5 pages are incompletely displayed, and 1 item is displayed on the last page.

When you click on the last page, all will be displayed:

I did not use the two fields pre(previous page) and next(next page), these two fields are of little significance.

Attached is the customized style:

<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. Multi-level column calling

The

column and its sub-columns are as follows:

Take my own example as an example to call all secondary columns under the specified column

<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' is the id of the column to be specified.

(2). row='1' means looping once (I tried that if the value of row is not set, it will be called 13 times, because there are 13 secondary sub-columns here)

(3). channelid='17' represents the id number of the custom content model.

(4). addfields='product' represents the identification id of the custom content model.

(5). type='son' indicates the sub-column of the specified column.

9. Highlighting of the current column

Highlighting a column usually changes the font of the current column to a color different from other columns, or adds a background color different from other columns. It is discussed in two situations in dedecms:

(1). For navigation, a navigation column may have multiple secondary sub-columns. When the page belongs to a sub-column of this column, this column also needs to be highlighted. The introduction method in dedecms official documentation is used here:

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>"

Please check http://www.cnblogs.com/xinjie-just/p/5985455.html for details.

(2). For the secondary columns, it is easier to use js to add highlighting function.

Illustrate with my own example:

<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>

The method is to add highlighting when the attribute value of the href attribute of the a tag matches the current url address of the page (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. Previous article (page) and next article (page)

The calling of the previous article and the next article is relatively simple. The official document is:

Previous article: {dede:prenext get='pre'/}

Next article: {dede:prenext get='next'/}

So, my dom is also simple:

<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>;
}