分类信息的帖子列表显示页,显示的是以前论坛帖子只显示标题的形式,可是有时分类信息里有很多重要的字段直接显示在表格上,让用户更直接的看到自己想看的东西。。
下面代码,就是企业招聘分类信息的列表页模板样式
<div class="tl">
<div class="th">
<table cellspacing="0" cellpadding="0">
<tr>
<th>招聘职位</th>
<td>招聘人数</td>
<td>学历要求</td>
<td>工作年限</td>
<td>工资待遇</td>
<td width="200">公司名称</td>
</tr>
</table>
</div>
<div class="bm_c">
<table cellspacing="0" cellpadding="0">
[loop]<tbody><tr>
<th class="common">
{modcheck}
<a href="{subject_url}" class="xst">{zpzw_value} {zpzw_unit}</a>
{attachment}
</th>
<td>{zprs_value} {zprs_unit}</td>
<td>{xlyq_value} {xlyq_unit}</td>
<td>{gznx_value} {gznx_unit}</td>
<td>{gzdy_value} {gzdy_unit}</td>
<td width="200">{gsmc_value} {gsmc_unit}</td>
</tr></tbody>[/loop]
</table>
</div>
</div>
以上代码应该是可以搞定了,但是在设计的时候,很容易忘记一人步骤,而这个很重要,如果没有设置,那么[loop][/loop]循环是空的。。
设置方法:后台-论坛-分类信息-选择对应的分类-详情-主题展示勾选
如果还是没显示,那么是你没设置默认显示分类列表,这样DZ会自动显示“全部”.
设置方法:后台-论坛-版块管理-选择对应的版块-其他-分类信息 选择"默认显示分类"
------------------------------------------
所以自定义一个发贴页模板是很重要的。用户体验特别好,因为相关作用的字段放在一起让用户填,是很方便的。
怎么设计呢?很简单,因为DZ已经做了很多辅助功能,如下图,本分类的字段都会显示出来,然后点字段就会出现以下标签与说明。。
下面以二手市场的分类信息为例:
变量名称(成色) {es_chengse} 变量的名称,一般可以不用,直接在模板里输入文字
变量的值{es_chengse_value} 很重要,对应为文本框,下拉框等控件
变量单位{es_chengse_unit} 变量单位,这个针对部分特别字段
必填标识{es_chengse_required} *号,就是标识字段为必填项
提示标识{es_chengse_tips} JS提示功能
如果填对了会出现
如果填错了会现现
简短描述{es_chengse_description} 描述信息,如果用户不懂可以显示文字在旁边
知道这些标签的作用了,那么设计模板就很容易了。
以下就是模板代码:
<table cellpadding="0" cellspacing="0" class="box1">
<tr>
<td class="t"><b class="red">{es_chengse_required}</b> 成色:</td>
<td>{es_chengse_value}{es_chengse_tips}</td>
</tr>
<tr>
<td class="t"><b class="red">{es_xingzhi_required}</b> 性质:</td>
<td>{es_xingzhi_value}{es_xingzhi_tips}</td>
</tr>
<tr>
<td class="t"><b class="red">{es_leibie1_required}</b> 类别:</td>
<td>{es_leibie1_value}{es_leibie1_tips}</td>
</tr>
<tr>
<td class="t"><b class="red">{lianxiren_required}</b> 联系人:</td>
<td>{lianxiren_value}{lianxiren_tips}</td>
</tr>
<tr>
<td class="t"><b class="red">{tel_required}</b> 手机或电话:</td>
<td>{tel_value}{tel_tips}</td>
</tr>
<tr>
<td class="t"><b class="red">{qq_required}</b> QQ:</td>
<td>{qq_value}{qq_tips}</td>
</tr>
</table>
但是只有模板代码还不够的,还需要样式,样式可以让模板显示更漂亮。
样式不要放在模板里,可以专门新建一个css文件,然后修改/template/default/common/header_common.htm这个模板文件,添加一行代码:<link rel="stylesheet" type="text/css" href="template/default/common/fenleipost/style.css" />,然后把以下样式放到style.css文件里,就可以了。。
对应的样式如下:
《Discuz!X2.5分类信息模板(帖子页,列表页,发贴页)样式》
/*发帖页模板样式*/
.bw0 dt{font-weight:bold}
.bw0 dd{padding-top:3px}
.box1{ margin:10px 0 0 0; font-family:Arial, Helvetica, sans-serif; width:100%;}
.box1 td{ line-height:20px; padding-bottom:15px; }
.box1 .pb td{ padding-bottom:7px;}
.box1 td.t{ width:100px; text-align:right; padding-right:5px; vertical-align:top;}
.box1 td b.red{ font-size:17px; vertical-align:middle; display:inline-block;color:#f00; border:none; background:none; font-weight:normal}
.box1 span{margin-bottom:2px}
.box1 td select,.box1 td input{ margin:0 4px 0 0; vertical-align:middle!important; vertical-align:baseline}
------------------------------------
帖子页与发贴页不同的是,帖子页只显示结果,而发贴页要显示很多东西,所以帖子页模板设计更容易些,可以直接复制发贴页的模板,然后去掉一些参数就可以了。
代码如下:
<table cellpadding="0" cellspacing="0" class="box2">
<tr>
<td class="t">成色:</td>
<td>{es_chengse_value}</td>
</tr>
<tr>
<td class="t">性质:</td>
<td>{es_xingzhi_value}</td>
</tr>
<tr>
<td class="t">类别:</td>
<td>{es_leibie1_value}</td>
</tr>
</table>
<ul id="flxianxi">
<li class="tel">{tel_value}</li>
<li class="lianxiren">{lianxiren_value}</li>
<li class="qq">{qq_value}</li>
<li class="cnit618">联系我时,请说是在xxxxxx网上看到的,谢谢!</li>
</ul>
《Discuz!X2.5分类信息模板(帖子页,列表页,发贴页)样式》
样式代码可以直接放到style.css文件里,代码如下:
/*帖子页模板*/
.box2{ margin:20px 0 0 0; font-family:Arial, Helvetica, sans-serif; width:100%;font-size:14px}
.box2 td{ line-height:18px; padding-bottom:15px; }
.box2 .pb td{ padding-bottom:7px;}
.box2 td.t{ width:100px; text-align:right; padding-right:5px; vertical-align:top;color:#999}
.box2 td b{ font-size:17px; vertical-align:middle; display:inline-block;color:#f00; border:none; background:none; }
.box2 span{margin-bottom:2px}
.box2 td select,.box1 td input{ margin:0 4px 0 0; vertical-align:middle!important; vertical-align:baseline}
#flxianxi{list-style:none; width:740px; height:42px; background-color:#f9f9f9; border-top:#f5f5f5 1px solid; border-bottom:#f5f5f5 1px solid;margin-top:20px;margin-bottom:12px}
#flxianxi li{float:left;margin-top:10px; padding-left:24px; margin-left:5px}
#flxianxi li.tel{width:100px; background:url(lianxi.png) no-repeat 0 0; color:#F00; font-size:18px; font-weight:bold;line-height:20px}
#flxianxi li.lianxiren{width:80px; background:url(lianxi.png) no-repeat 0 -21px;color:#999;font-size:18px;line-height:20px}
#flxianxi li.qq{width:70px; background: url(lianxi.png) no-repeat 0 -40px;color:#999;font-size:18px;line-height:20px}
#flxianxi li.ezhou365{color:red;font-size:15px}
|