dedecms调用标签总结(二)
6. 列表调用
首页:
{dede:arclist row='10' titlelen='24' typeid='2' orderby='pubdate'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<h4>[field:title/]</h4>
</a>
</li>
{/dede:arclist}
(1). row='10' 表示调用十项,最多显示十项。
(2). titlelen='24' 表示标题最多显示 24 个字节,对于常用字, utf-8 的格式下,每一个汉字占三个字节,英文和数字分别占用一个字节。
(3). typeid='2' 是栏目 id 为 2。
(4). orderby='pubdate' 表示按照发布的时间顺序排序,最后发布的文章排在最前面。
列表页:
{dede:list pagesize='12'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<h4>[field:title/]</h4>
</a>
</li>
{/dede:list}
上面是最简单的列表调用方式。
(1). pagesize='12' 指明调用 12 项,也就是说最多能显示 12 项。
(2). [field:arcurl/] 调用链接。
(3). [field:title/] 调用标题。
(4). [field:litpic/] 调用缩略图。
列表页之所以不需要加上 id,是因为栏目管理中列表模板已经选定了需要的模板,在该模板下调用不需要指明 id。
链接,标题,缩略图使用频率较高,在内容页的调用方法稍有不同,原因是它们的外面没有嵌套 {dede:...} 之类的标签。调用方法分别为:{dede:field.arcurl/}, {dede:field.title/},{dede:field.litpic/}。
7. 分页
官方手册中的分页为:
{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}
官方解释:
listsize=3 表示 [1][2][3] 这些项的长度 x 2;
index 首页
pre 上一页
pageno 页码
next 下一页
end 末页
option 下拉跳转框
通过实际项目中得出的结论可知:listsize=3 表示 [1][2][3] 这些项的长度 x 2,而是[1][2][3] 这些项的长度 x 2 + 1。
我的分页为:
{dede:pagelist listsize='2' listitem='index pageno end option'/}
我的列表一共 16 项,每一页 3 项,5 页显示不完全,最后一页显示 1 项。
点击末页时,会全部展示:
我没有使用 pre(上一页)和 next(下一页) 两个字段,这两个字段意义不大。
这里附上自定义的样式:
.pagination-wrap {
margin-top: 30px;
text-align: center;
}
.pagination {
display: inline-block;
text-align: center;
}
.pagination:before,
.pagination:after {
display: table;
content: "";
}
.pagination:after { clear: both; }
.pagination {
display: inline-block;
text-align: center;
}
/*根据dedecms模板需要,更改下面样式*/
.pagination > li {
float: left;
display: block;
margin-left: -1px; /*消除两个 a 在一起时引起的双倍左外边距*/
height: 30px;
line-height: 28px;
padding-right: 28px;
padding-left: 28px;
border: 1px solid #ddd;
}
.pagination > li:first-child {
margin-left:; /*第一个 li 不需要消除左外边距*/
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination > li:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.pagination > li > a {
display: block;
width: 100%;
height: 100%;
color: #e04728;
background-color: #fff;
padding-right: 15px;
padding-left: 15px;
}
.pagination > li {
z-index:;
cursor: default;
color: #e04728;
}
.pagination > li.thisclass {
z-index:;
color: #fff;
cursor: default;
background-color: #e04728;
border-color: #e04728;
}
.pagination > li > select {
display: inline-block;
margin-left: -1px; /*消除两个 a 在一起时引起的双倍左外边距*/
border: 1px solid #ddd;
height: 30px;
line-height: 28px;
padding-right: 28px;
padding-left: 28px;
color: #e04728;
}
.pagination > li > select option {
display: block;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
}
.pagination > li > select option[selected] {
color: #fff;
background-color: #e04728;
}
.pagination > li > select option:hover { background-color: #eee; }
// dedecms 模板下新增脚本
// 去除分页时 select 的宽度
$(".pagination > li > select").css("width", "auto");
// 对 li 没有 select 子元素时,设置样式
$(".pagination > li:has(select)").css({
paddingRight: 0,
paddingLeft: 0,
border: "none"
});
$(".pagination > li:has(a)").css({
paddingRight: 0,
paddingLeft: 0
});
$(".pagination > li.thisclass + li").css("marginLeft", 0);
8. 多级栏目调用
栏目及其子栏目如下:
以我自己的实例为例,调用指定栏目下的全部二级栏目
<ul class="content" id="categoriesList">
{dede:channelartlist typeid='3' row='1' channelid='17' addfields='product'}
{dede:channel type='son' noself='yes'}
<li><a href="[field:typelink/]" title="[field:typename/]">[field:typename/]</a></li>
{/dede:channel}
{/dede:channelartlist}
</ul>
(1). typeid='3' 是要指定的栏目的 id 。
(2). row='1' 表示循环一次(我试过如果不设置 row 的值的话,会重复调用13次,因为我这里它的二级子栏目为 13 个)
(3). channelid='17' 表示自定义内容模型的 id 号。
(4). addfields='product' 表示自定义内容模型的识别 id。
(5). type='son' 表示为其指定栏目的子栏目。
9. 当前栏目的高亮显示
栏目的高亮显示,一般是把当前栏目的字体变成不同于其他栏目的颜色,或者对其添加不同于其他栏目的背景颜色。在 dedecms 里分两种情况讨论:
(1). 对于导航,一个导航栏目下可能拥有多个二级子栏目,当该页面属于该栏目的子栏目时,这个栏目也需要高亮显示。这里使用 dedecms 官方文档里的介绍方法:
currentstyle="<li><a href='~typelink~' class='active'>~typename~</a></li>"
具体查看 http://www.cnblogs.com/xinjie-just/p/5985455.html 第三条。
(2). 对于二级栏目,使用 js 为其添加高亮的功能,更简单些。
以我自己的实例说明:
<ul class="content" id="categoriesList">
<li><a href="#" title="木质防火门">木质防火门</a></li>
<li><a href="#" title="钢质防火门">钢质防火门</a></li>
<li><a href="#" title="钢木质防火门">钢木质防火门</a></li>
<li><a href="#" title="固定式防火窗">固定式防火窗</a></li>
</ul>
方法是,当 a 标签的 href 属性的属性值和页面当前的 url 地址(document.location.href) 能匹配时,就为其添加高亮显示。
var nav = document.getElementById("categoriesList").getElementsByTagName("a");
for(var i = 0; i < nav.length; i++){
var navLinks = nav[i].getAttribute("href"); // 获得链接的 href 属性值
var pageLink = document.location.href; // 获得当前页面的地址
if(pageLink.indexOf(navLinks) != -1){ // 如果没有找到匹配的字符串则返回 -1,不等于 -1,说明匹配到了
nav[i].className = "active"; // 为其添加 active 类
}
}
/*css*/
#categoriesList li a.active {
color: #a67650;
}
10. 上一篇(页)和下一篇(页)
上一篇和下一篇的调用比较简单,官方文档为:
上一篇:{dede:prenext get='pre'/}
下一篇:{dede:prenext get='next'/}
于是,我的 dom 也简单:
<ul class="pre-next clearfix">
<li class="pre">
{dede:prenext get='pre'/}
</li>
<li class="next">
{dede:prenext get='next'/}
</li>
</ul>
/*上一篇、下一篇*/
.pre-next li {
width: 48%;
height: 30px;
line-height: 30px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pre-next .pre {
float: left;
text-align: right;
}
.pre-next .next {
float: right;
text-align: left;
}
.pre-next li a {
padding-right: 8px;
padding-left: 8px;
}
.pre-next li a:hover {
color: #ef4526;
}
dedecms调用标签总结(二)的更多相关文章
- dedecms调用标签总结(一)
dedecms 基本包含了一个常规网站需要的一切功能,拥有完善的中文学习资料,很容易上手,学习成本较低.学会dedecms 的模板修改.栏目新增.内容模型新增和常用的标签调用方法后,即便我们不懂 ph ...
- 织梦dedecms简略标题调用标签用法指南
我们在使用织梦DEDECMS建站过程中,为了使调用的文章标题简短且相对完整(原文标题太长),只好使用了调用简略标题这个方法,使标题显示为简短标题,指向标题时显示完整的标题.并获得文章静态地址链接 下面 ...
- dedecms 常用标签调用
/*------------------单个ip调用-------------------*/ {dede:type typeid="12"} <a title=" ...
- (转)DedeCms Runphp 标签中调用其他变量的方法
DedeCms Runphp 标签中调用其他变量的方法 我们都知道,在DedeCMS中是可以使用PHP的,常见的方法就是if else了,例如模板制作中,我们需要对来源和作者进行判断,如果为空,则提示 ...
- 织梦dedecms文章发布日期时间调用标签大全
dedecms首页时间标签: 1.12-27 样式 [field:pubdate function='strftime("%m-%d",@me)'/] 2.May 15, 2012 ...
- 三种dedecms友情链接调用标签
三种dedecms友情链接调用标签: 1.获取友情链接分类 {dede:flinktype}<span>[field:typename/]</span>{/dede:flink ...
- DedeCms常用内容调用标签实例大全
一.调用顶级栏目标签 <a href="{dede:global.cfg_cmsurl/}/" class="ahov">首页</a> ...
- 织梦dedecms模板调用标签大全-提高制作模板速度
关键描述调用标签: ——————————————————————————–模板路径调用标签: {dede:field name=’templeturl’/}—————————————————————— ...
- dede 简略标题调用标签
一.简略标题调用标签: 1.{dede:field.shorttitle/} 不可以在{dede:arclist}标签中套用,一般放在网页titile处; 2.[field:shorttitle/] ...
随机推荐
- BasicModal - 简单易用的现代 Web App 弹窗
BasicModal 是为现代 Web 应用程序打造的弹窗系统.它包括所有你需要显示的信息,问题或接收用户的输入.这里的弹窗还可以链接起来,所以你可以很容易地建立一个预定义顺序的安装帮助或显示对话框. ...
- Node.js Web 开发框架大全《路由篇》
这篇文章与大家分享优秀的 Node.js 路由(Routers)模块.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 如何停止CSS3的动画?
前言 我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点 ...
- mac安装Aws cli失败
OS X EI 10.11 报错信息如下: Found existing installation: six 1.4.1 DEPRECATION: Uninstalling a distutils i ...
- Android Studio 更换国内源下载依赖库
我的博客:http://daycoding.com 小小程序猿 由于国内GFW的原因,经常导致android studio 莫名其妙的编译不了,多数原因是由于不能下载依赖库 Gradle支持三种不同的 ...
- Android NDK目录介绍
交叉编译 在一个平台上去编译另一个平台上可以执行的本地代码 cpu平台---arm x86 mips 操作系统平台---windows linux mac os 原理 模拟不同平台的特性去编译代码 j ...
- 打印完整URL
if(requestDictionary != nil) { //添加参数,将参数拼接在url后面 NSMutableString *paramsString = [NSMutableString s ...
- iOS解析数据时Error=3840
1.解析JSon数据格式出错的问题 unescaped control character around character XXXX 和 The data couldn’t be read beca ...
- OC中的protocol
一. 简单使用 1. 基本用途 可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有这个协议中的所有方法声明 只要父类遵守了某个协议,就相当于子类也遵守了 2. 格式 协 ...
- iOS开发之手势识别汇总
iOS开发之手势识别汇总 iOS开发中手势识别有六种: 轻击手势(TapGestureRecognizer), 轻扫手势 (SwipeGestureRecognizer), 长按手势(LongPres ...