Zusammenfassung des dedecms-Aufruflabels (2)
Dec 05, 2016 pm 01:26 PM6. Listenaufruf
Homepage:
<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' bedeutet, zehn Elemente aufzurufen und h?chstens zehn Elemente anzuzeigen.
(2). titlelen='24' bedeutet, dass der Titel bis zu 24 Bytes anzeigen kann. Im UTF-8-Format belegt jedes chinesische Zeichen drei Bytes und Englisch und Zahlen jeweils ein Byte.
(3). typeid='2' bedeutet, dass die Spalten-ID 2 ist.
(4). orderby='pubdate' bedeutet, nach dem Zeitpunkt der Ver?ffentlichung zu sortieren, wobei der zuletzt ver?ffentlichte Artikel ganz oben steht.
Listenseite:
<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>
Das Obige ist die einfachste M?glichkeit, eine Liste aufzurufen.
(1). pagesize='12' gibt an, 12 Elemente aufzurufen, was bedeutet, dass bis zu 12 Elemente angezeigt werden k?nnen.
(2). [field:arcurl/] ruft den Link auf.
(3). [field:title/] ruft den Titel auf.
(4). [field:litpic/] ruft Miniaturansicht auf.
Der Grund, warum der Listenseite keine ID hinzugefügt werden muss, liegt darin, dass die Listenvorlage in der Spaltenverwaltung bereits die erforderliche Vorlage ausgew?hlt hat und beim Aufruf unter dieser Vorlage keine Angabe der ID erforderlich ist.
Links, Titel und Miniaturansichten werden h?ufiger verwendet. Die Aufrufmethode auf der Inhaltsseite unterscheidet sich geringfügig, da au?erhalb dieser keine Tags wie {dede:...} verschachtelt sind. Die aufrufenden Methoden sind: {dede:field.arcurl/}, {dede:field.title/}, {dede:field.litpic/}.
7. Paginierung
Die Paginierung im offiziellen Handbuch lautet:
{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}
Offizielle Erkl?rung:
listsize=3 bedeutet [1][2][3] die L?nge dieser Elemente x 2;
Startseite indexieren
vor der vorherigen Seite
Pageno-Seitennummer
n?chste Seite
letzte Seite beenden
Options-Dropdown-Sprungfeld
Aus den in tats?chlichen Projekten gezogenen Schlussfolgerungen geht hervor: listsize=3 bedeutet, dass die L?nge dieser Elemente [1][2][3] x 2 betr?gt, aber die L?nge dieser Elemente [1] [2][3] L?nge x 2 + 1.
Meine Paginierung ist:
{dede:pagelist listsize='2' listitem='index pageno end option'/}
Meine Liste enth?lt insgesamt 16 Elemente, 3 Elemente auf jeder Seite, 5 Seiten werden unvollst?ndig angezeigt und 1 Element wird auf der letzten Seite angezeigt.
Wenn Sie auf die letzte Seite klicken, werden alle angezeigt:
Die beiden Felder pre(vorherige Seite) und next(n?chste Seite) habe ich nicht verwendet, diese beiden Felder sind von geringer Bedeutung.
Hier ist der individuelle Stil beigefügt:
<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">消除兩個(gè) a 在一起時(shí)引起的雙倍左外邊距</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">第一個(gè) 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">消除兩個(gè) a 在一起時(shí)引起的雙倍左外邊距</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"> 去除分頁時(shí) select 的寬度</span> $(".pagination > li > select").css("width", "auto"<span style="color: #000000">); </span><span style="color: #008000">//</span><span style="color: #008000"> 對(duì) li 沒有 select 子元素時(shí),設(shè)置樣式</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. Mehrstufiger Spaltenaufruf
Die Spalteund ihre Unterspalten lauten wie folgt:
Nehmen Sie mein eigenes Beispiel als Beispiel, um alle sekund?ren Spalten unter der angegebenen Spalte aufzurufen
<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' ist die ID der anzugebenden Spalte.
(2). row='1' bedeutet eine einmalige Schleife (ich habe versucht, dass, wenn der Wert von row nicht festgelegt ist, es 13 Mal aufgerufen wird, da es hier 13 sekund?re Unterspalten gibt)
(3).channelid='17' stellt die ID-Nummer des benutzerdefinierten Inhaltsmodells dar.
(4). addfields='product' stellt die Identifikations-ID des benutzerdefinierten Inhaltsmodells dar.
(5). type='son' gibt die Unterspalte der angegebenen Spalte an.
9. Hervorhebung der aktuellen Spalte
Durch das Hervorheben einer Spalte wird normalerweise die Schriftart der aktuellen Spalte in eine andere Farbe als die anderer Spalten ge?ndert oder eine Hintergrundfarbe hinzugefügt, die sich von anderen Spalten unterscheidet. Es wird in zwei Situationen in dedecms besprochen:
(1). Für die Navigation kann eine Navigationsspalte mehrere sekund?re Unterspalten haben. Wenn die Seite zu einer Unterspalte dieser Spalte geh?rt, muss diese Spalte ebenfalls hervorgehoben werden. Hier wird die Einführungsmethode in der offiziellen Dokumentation von dedecms verwendet:
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>"
Weitere Informationen finden Sie unter http://www.cnblogs.com/xinjie-just/p/5985455.html.
(2). Für die sekund?re Spalte ist es einfacher, js zu verwenden, um die Hervorhebungsfunktion hinzuzufügen.
Veranschaulichen Sie es mit meinem eigenen Beispiel:
<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>
Die Methode besteht darin, eine Hervorhebung hinzuzufügen, wenn der Attributwert des href-Attributs des a-Tags mit der aktuellen URL-Adresse der Seite (document.location.href) übereinstimmt.
<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"> 獲得當(dāng)前頁面的地址</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. Vorheriger Artikel (Seite) und n?chster Artikel (Seite)
Der Aufruf des vorherigen Artikels und des n?chsten Artikels ist relativ einfach. Das offizielle Dokument lautet:
Vorheriger Beitrag: {dede:prenext get='pre'/}
N?chster Artikel: {dede:prenext get='next'/}
Also, mein Dom ist auch einfach:
<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>; }

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)