PublicCMS 功能页（模板片段） 第五篇 制作首页内容列表样式（重要）

首页内容列表样式包含了：图片、标题、发布时间、描述、所属分类、tags标签等几部分组成。

如下图所示：

这段样式的代码为：

<article class="block-node last">
	<div class="block-node-pic fl">
		<a href="<#if a.onlyUrl>${site.dynamicPath}content/redirect.do?id=${a.id}<#else>${a.url!}</#if>" target="_blank">
			<#if a.cover?has_content>
			<img src="<@_thumb path=a.cover width=150 height=100/>" alt="${a.title}" />
			</#if>
		</a>
	</div>
	<div class="block-node-field fr">
		<header class="node-field-title">
			<h2>
				<a href="<#if a.onlyUrl>${site.dynamicPath}content/redirect.do?id=${a.id}<#else>${a.url!}</#if>" target="_blank">${a.title}</a>
				<span class="fr">${a.publishDate?date}</span>
			</h2>
		</header>
		<div class="node-field-text">
			<p><@t.cut a.description! '' 120 '...'/></p>
			<div class="field-text-cf">
				<span class="tria"></span>
				<@_category id=a.categoryId absoluteURL=true>
				<a href="${object.url!}">${object.name!}</a>
				</@_category>
				<div class="field-text-tag fr">
					<@_tag ids=a.tagIds>
					<#if map?has_content>
					<span class="tria-tag"></span>
					</#if>
					<#list map?keys as k><a href="//search.rednn.com/?tagId=${k}" target="_blank">${map[k].name}</a><#sep>,</#list>
					</@_tag>
				</div>
			</div>
		</div>
	</div>
</article>

解析一下这段代码都实现了哪些功能

1、获取图片的完整代码段

<div class="block-node-pic fl">
	<a href="<#if a.onlyUrl>${site.dynamicPath}content/redirect.do?id=${a.id}<#else>${a.url!}</#if>" target="_blank">
		<#if a.cover?has_content>
		<img src="<@_thumb path=a.cover width=150 height=100/>" alt="${a.title}" />
		</#if>
	</a>
</div>

判断是否有图片，有就展现，如果没有就不展现。这里也可以添加个判断，如果没有图片是否显示默认的图片，自行修改即可。

<#if a.cover?has_content>
<img src="<@_thumb path=a.cover width=150 height=100/>" alt="${a.title}" />
</#if>

获取图片并自动剪切为宽150px，高100px（尺寸是可以自定义的，你可以根据自己的需求调整大小）

<@_thumb path=a.cover width=150 height=100/>

2、获取标题和发布时间，这个不难理解，应该不用解释。标题和时间写在了一起

<header class="node-field-title">
	<h2>
		<a href="<#if a.onlyUrl>${site.dynamicPath}content/redirect.do?id=${a.id}<#else>${a.url!}</#if>" target="_blank">${a.title}</a>
		<span class="fr">${a.publishDate?date}</span>
	</h2>
</header>

3、获取文章描述并截取前120个字符

<p><@t.cut a.description! '' 120 '...'/></p>

4、获取文章分类并显示，这段代码会判断文章属于哪个分类

<div class="field-text-cf">
	<span class="tria"></span>
	<@_category id=a.categoryId absoluteURL=true>
	<a href="${object.url!}">${object.name!}</a>
	</@_category>
</div>

5、获取文章tags标签，点击标签可以直接进入标签搜索页并展示所有该标签的内容列表。这段代码会判断文章内是否添加了标签，有就展现，同样没有就不展现。

<div class="field-text-tag fr">
	<@_tag ids=a.tagIds>
	<#if map?has_content>
	<span class="tria-tag"></span>
	</#if>
	<#list map?keys as k><a href="//search.rednn.com/?tagId=${k}" target="_blank">${map[k].name}</a><#sep>,</#list>
	</@_tag>
</div>

自行创建模板的时候，根据以上的代码自行修改调整就可以做出符合你自己的样式

在后台创建内容列表样式，开发 - 模板文件管理 - 创建模板 - 路径（可以自定义，这里是ftl/data-list.ftl路径演示）- 保存 - 将源码贴入创建的data-list.ftl

关于路径，根据publiccms创始人讲述，路径和后缀并没有特定的要求，你可以是test.exe、test.html、test.xml或者其他，最终是要被引用的。不止是功能页，包括正常的页面创建也是这样，文件名称和后缀都是多样化的，有幸邀请到publiccms创始人亲自跟我演示以不同路径和后缀所展现的功能和使用方法，这些后面我都会写出来怎样运用。