Dedecms call label Summary (2), dedecms call label Summary

Dedecms call label Summary (2), dedecms call label Summary

6. List call

Home page:

{dede:arclist row='10' titlelen='24' typeid='2' orderby='pubdate'}    <li>        <a href="[field:arcurl/]" title="[field:title/]">                        
(1). row = '10' indicates 10 calls, up to 10 are displayed.
(2). titlelen = '24' indicates that the title can display up to 24 bytes. For common words, in UTF-8 format, each Chinese Character occupies three bytes, and English and numbers occupy one byte respectively.
(3). typeid = '2' indicates that the column id is 2.
(4). orderby = 'pubdate' indicates sorting by publishing time order, and the last published article is at the top.
List page:
{dede:list pagesize='12'}<li>    <a href="[field:arcurl/]" title="[field:title/]">                
The above is the simplest list call method.
(1). pagesize = '12' indicates that 12 items are called, that is, up to 12 items can be displayed.
(2). [field: arcurl/] Call link.
(3). [field: title/] Call title.
(4). [field: litpic/] Call the thumbnail.
You do not need to add an id to the List page because the required template has been selected for the list template in topic management. You do not need to specify the id for calling this template.
Links, titles, and thumbnails are frequently used. The Calling methods on the Content Page are slightly different because they are not nested with labels such as {dede. The call methods are: {dede: field. arcurl/}, {dede: field. title/}, and {dede: field. litpic /}.
 
7. Paging
The pages in the official manual are:
{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}
Official explanation:
Listsize = 3 indicates [1] [2] [3] The length of these items x 2;
Index Homepage
Pre Previous Page
Pageno page number
Next
End last page
Option drop-down jump box
According to the conclusions drawn from the actual project, listsize = 3 indicates the length of these items [1] [2] [3] x 2, instead, [1] [2] [3] The length of these items is x 2 + 1.
My pages are:
{dede:pagelist listsize='2' listitem='index pageno end option'/}
There are 16 items in my list, three items on each page. The five pages are incomplete, and the last page shows one item.

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

I didn't use the pre (Previous Page) or next (next page) fields. These two fields are of little significance.
The custom style is attached here:
. 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;}/* change the following style according to the dedecms template */. pagination> li {float: left; display: block; margin-left:-1px;/* remove the double left margin caused by the combination of two a S */height: 30px; line-height: 28px; padding-right: 28px; padding-left: 28px; border: 1px solid # ddd ;}. pagination> li: first-child {margin-left: 0;/* The first li does not need to remove the left margin */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;/* remove the double left margin caused by the combination of two a S */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 ;}
// Add a script under the dedecms template // select width when paging is removed $ (". pagination> li> select ").css (" width "," auto "); // set the style $ (". pagination> li: has (select) ").css ({paddingRight: 0, paddingLeft: 0, border:" none "}); $ (". pagination> li: has (a) "pai.css ({paddingRight: 0, paddingLeft: 0}); $ (". pagination> li. thisclass + li ").css (" marginLeft ", 0 );
 
 
8. Multi-level column call
The topics and their subtopics are as follows:

Take my own instance as an example to call all the second-level columns under a specified topic
<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' is the id of the column to be specified.
(2 ). row = '1' indicates that a loop is performed once (I tried to call 13 times if the row value is not set, because I have 13 second-level subtopics here)
(3). channelid = '17' indicatesId of the custom Content Model.
(4). addfields = 'product' indicatesId of the custom Content Model.
(5). type = 'son' indicates the subtopic of the specified topic.
 
9. highlight the current topic
The highlight of a column generally changes the font of the current column to a color different from that of other columns, or adds a background color different from that of other columns. In dedecms, the following two cases are discussed:
(1). For navigation, a navigation bar may have multiple secondary subtopics. When the page belongs to the subtopics of this topic, this topic must be highlighted. Here we will use the method described in the dedecms official document:
currentstyle="<li><a href='~typelink~' class='active'>~typename~</a></li>"
View the third article of the http://www.cnblogs.com/xinjie-just/p/5985455.html.
(2). For the second-level columns, it is easier to use js to add the highlighted function for them.
In my own example:
<Ul class = "content" id = "categoriesList"> <li> <a href = "#" title = "Wooden fire door"> wooden fire door </a> </li> <li> <a href = "#" title = "Steel Fireproof Door"> steel Fireproof Door </a> </li> <a href = "#" title =" steel Wood Fireproof Door "> Steel Wood Fireproof Door </a> </li> <a href =" # "title =" fixed fireproof window "> fixed fireproof window </a> </li> </ul>
When the value of the href attribute of tag a matches the current url address (document. location. href) of the page, it is highlighted.
Var nav = document. getElementById ("categoriesList "). getElementsByTagName ("a"); for (var I = 0; I <nav. length; I ++) {var navLinks = nav [I]. getAttribute ("href"); // obtain the link's href attribute value var pageLink = document. location. href; // obtain the address of the current page if (pageLink. indexOf (navLinks )! =-1) {// if no matching string is found,-1 is returned, not equal to-1, indicating that the matched nav [I] is returned. className = "active"; // Add an active class for it }}
/*css*/#categoriesList li a.active {    color: #a67650;}
 
 
10. Previous (PAGE) and next (page)
The previous and next calls are relatively simple. The official documents are:
Previous: {dede: prenext get = 'pre '/}
Next article: {dede: prenext get = 'Next '/}
So, my dom is also simple:
<ul class="pre-next clearfix">    <li class="pre">    {dede:prenext get='pre'/}    </li>    <li class="next">    {dede:prenext get='next'/}    </li></ul>
/* Previous and next */. 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 ;}