给YOOtheme Pro的文章列表添加序号

一般带有序号的列表,是使用HTML的有序列表标签<ol>。但为了实现比较复杂的布局,通常我们看到的文章列表,都是使用GRID来实现。

GRID本身是无法实现自动序号,那怎么办?在YOOtheme的Paladin模板给出了解决方案。

 YOOtheme Pro的文章列表添加序号

这个方案主要是使用CSS的counter属性,再配合YOOtheme Pro的Dynamic Content(动态内容)。

在上图中,假设左边的文章列表为GRID1;右边的文章列表为GRID2。

GRID1和GRID2同样使用Dynamic Content(动态内容),GRID1的动态内容是1开始,共5篇文章;GRID1的动态内容是5开始,共5篇文章。

GRID1在高级-CSS,添加代码

.el-element { counter-reset: decimal; }

.el-item {
counter-increment: decimal;
display: grid;
grid-template-columns: 50px 1fr;
}

.el-item::before {
content: counter(decimal, decimal) '\200A\00A0';
grid-row: span 2;
display: list-item;
list-style-position: inside;
}

.el-title { grid-column-start: 2; }

GRID2在高级-CSS,添加代码

.el-element { counter-reset: decimal 5; }

.el-item {
counter-increment: decimal;
display: grid;
grid-template-columns: 50px 1fr;
}

.el-item::before {
content: counter(decimal, decimal) '\200A\00A0';
grid-row: span 2;
display: list-item;
list-style-position: inside;
}

.el-title { grid-column-start: 2; }

平常我们在使用的时候,关键是修改counter-reset的代码,例如你要添加第三列,显示11~15的序号,即改为

.el-element { counter-reset: decimal 10; }