Zusammenfassung des dedecms-Aufruflabels (2)

6. 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">根据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. Mehrstufiger Spaltenaufruf

Die Spalte

und 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">="木质防火门"</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>

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"> 获得当前页面的地址</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>;
}