DedeCMS列表頁常見需求：文章左右交替顯示（如圖文左圖右文、右圖左文）。核心思路是利用循環變量 autoindex 判斷奇偶，動態輸出不同CSS類名。

目標HTML結構

<div class="list">
  <dl>           <!-- 第1篇：左側佈局 -->
    <dt><img src="..." /></dt>
    <dd><h3><a href="...">標題</a></h3>內容</dd>
  </dl>
  <dl class="dl2"> <!-- 第2篇：右側佈局 -->
    <dt><img src="..." /></dt>
    <dd><h3><a href="...">標題</a></h3>內容</dd>
  </dl>
  ...
</div>

模板標籤寫法

{dede:arclist row='10' typeid='1'}
<dl class="[field:global name=autoindex runphp='yes']@me = (@me%2==0) ? ' dl2' : '';[/field:global]">
  <dt><img src="[field:litpic/]" /></dt>
  <dd>
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    [field:description function='cn_substr(@me,200)'/]
  </dd>
</dl>
{/dede:arclist}

關鍵點解析

1. [field:global name=autoindex runphp='yes'] 獲取當前循環索引（從1開始）。
2. @me = (@me%2==0) ? ' dl2' : ''; 偶數行輸出 dl2（前有空格防止類名粘連），奇數行輸出空字符串。
3. CSS中定義 .dl2 實現右側佈局（如 float:right 或 Flex/Grid 反序）。

CSS示例（Flex佈局現代寫法）

.list { display: flex; flex-wrap: wrap; }
.list dl { width: 48%; margin: 1%; display: flex; }
.list dl:not(.dl2) { flex-direction: row; }      /* 圖左文右 */
.list dl.dl2 { flex-direction: row-reverse; }   /* 圖右文左 */

進階應用

• 三欄佈局：@me%3 判斷輸出 col1/col2/col3。
• 每行固定數量：結合 channelartlist 外層循環 + arclist 內層循環實現分組。
• 圖片懶加載：<img data-src="[field:litpic/]" class="lazy"> 配合JS庫。

注意事項

若使用 dede:list 分頁標籤，autoindex 同理可用。確保CSS類名不衝突，調試時查看頁面源碼驗證類名輸出正確。