dede list autoindex

Of course! The autoindex variable in a DedeCMS (织梦CMS) list ({dede:list}) template is a very useful built-in variable. It automatically increments with each item in the list, starting from 1.

Here's a detailed breakdown of what it is, how to use it, and common examples.

What is {autoindex}?

{autoindex} is a system variable that is automatically generated and available within the {dede:list} or {dede:arclist} loops. Its primary purpose is to provide a simple, consecutive number for each item as it's being processed by the loop.

• Starts at 1: The first item in the list will have autoindex equal to 1.
• Increments by 1: The second item will be 2, the third 3, and so on.
• Resets: The number resets to 1 for every new list or archive page.

It's a powerful tool for creating numbered lists, styling every other row differently, or grouping items.

How to Use It

You simply place {autoindex} anywhere inside the {dede:list} loop where you want the number to appear.

Basic Syntax:

{dede:list pagesize='10'}
    <li>
        [field:autoindex]. <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('@me', 'Y-m-d')"/]</span>
    </li>
{/dede:list}

In the example above, the output for the first few list items would look like this:

<li>
    1. <a href="/article/1.html">This is the first article</a>
    <span>2025-10-27</span>
</li>
<li>
    2. <a href="/article/2.html">This is the second article</a>
    <span>2025-10-26</span>
</li>
<li>
    3. <a href="/article/3.html">This is the third article</a>
    <span>2025-10-25</span>
</li>

Common Use Cases

Here are the most frequent and practical ways to use {autoindex}.

Creating a Simple Numbered List

This is the most straightforward use case. You just prepend the number to your list item's title or content.

Template Code:

<ol>
    {dede:list pagesize='10'}
        <li>[field:autoindex]. <a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:list}
</ol>

Zebra Striping (Alternating Row Colors)

A very common design technique is to have alternating background colors for rows in a table or list. You can achieve this using a simple if statement with autoindex.

Template Code:

<ul>
    {dede:list pagesize='10'}
        <!-- Check if autoindex is even or odd -->
        <li [field:autoindex runphp='yes']
            if(@me % 2 == 0){
                @me = "class='even-row'";
            } else {
                @me = "class='odd-row'";
            }
        [/field:autoindex]>
            <a href="[field:arcurl/]">[field:title/]</a>
        </li>
    {/dede:list}
</ul>

CSS:

.odd-row {
    background-color: #f9f9f9;
}
.even-row {
    background-color: #eeeeee;
}

Creating a Grid Layout (e.g., 3 Columns)

You can use autoindex to control when to start a new row in a grid layout. The logic is: if the number is a multiple of your desired column count (e.g., 3), close the current row and start a new one.

Template Code:

<div class="article-grid">
    {dede:list pagesize='9'}
        <!-- Start a new row if it's the first item (autoindex % 3 == 1) -->
        [field:autoindex runphp='yes']
            if(@me % 3 == 1){
                @me = "<div class='grid-row'>";
            } else {
                @me = "";
            }
        [/field:autoindex]
        <div class="grid-item">
            <a href="[field:arcurl/]">[field:title/]</a>
        </div>
        <!-- Close the row if it's the last item in a set of 3 -->
        [field:autoindex runphp='yes']
            if(@me % 3 == 0){
                @me = "</div>";
            } else {
                @me = "";
            }
        [/field:autoindex]
    {/dede:list}
</div>

CSS:

.article-grid .grid-row {
    display: flex;
    margin-bottom: 20px;
}
.article-grid .grid-item {
    flex: 1; /* Each item takes equal space */
    padding: 10px;
    border: 1px solid #ddd;
}

Resetting the Number for Each Page

By default, autoindex continues across pages (e.g., page 1 ends at 10, page 2 starts at 11). If you want the list to always start from 1 on every page (e.g., for a "Top 10" list that is paginated), you need to use a different variable: {global.autoindex}.

Template Code:

<ol>
    {dede:list pagesize='10'}
        <!-- Use global.autoindex to reset on each page -->
        <li>[field:global.autoindex /]. <a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:list}
</ol>

This will display 1, 2, 3... on page 1, and 1, 2, 3... again on page 2, and so on.

Important Considerations

• Scope: {autoindex} only works inside {dede:list} or {dede:arclist} loops. Using it outside will result in no output.
• Performance: For very large lists, using complex PHP logic inside runphp can have a minor impact on page generation speed. For most standard websites, this is not a concern.
• Loop-Specific: It is tied to the specific list it is in. If you have two separate {dede:list} blocks on the same page, each will have its own independent autoindex counter starting from 1.

Summary

Mastering {autoindex is a key step in moving from basic DedeCMS templating to more dynamic and visually appealing list layouts.