热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

dedecmsarclist标签基本使用方法

用Dreamweaver打开dede文件的index.htm模板页面首先讲一下怎么看模板的csslinkhrefhttp://www.server110.com/{dede:global.cfg_templeturl/}/style/dedecms.cssrelstylesheetmediascreentypetext
用Dreamweaver 打开dede文件的index.htm模板页面
首先讲一下怎么看模板的css

在index.htm里第八行里就是这一句,通过这句话大家可以看到一个css路径,也就是在\templets\style这个文件下的所有文件都是dede默认模板的css文件,而index.htm的css就是dedecms。
打开这个css文件后大家会看到
@import url("layout.css");
@import url("page.css");
这两句话
这两句的意思就是dedecms.css这个css文件还引用了
layout.css和page.css这2个css
通过查看dedecms.css文件大家可以发现这个css主要控制的是所有模板文件的头部和尾部以及所有css的全局设计
大家找到/*---------- base ---------*/这句下面一直到/*---------- frame ---------*/这里基本上都是全局css
下面的透过看单词就明白是header和foot的css
也就是模板的头尾部css
关于page和layout这两个css是关于列表部分css、翻页css、以及一些通用的css,大家可以通过查看css了解一下。
下面大家打开head.htm模板文件
dede的前台模板在\templets\default文件夹下
下面根据默认模板简单讲解一下css的对应关系和部分标签的基础应用
首先大家打开head.htm后会看到
这句话
那么其中的header就是一个定义为header的css
那我们可以复制header,然后再dedecms.css
里用Ctrl+f来查找有关header的所有css定义
其它css的查找同样,如果你在某个css文件中找不到相应的css那么就在其他几个css文件中查找,然后修改
至于具体怎么修改css就不再本次讲解之内了,有关css的学习在网上有很多教程
在这里只是简单说明一下css的查找和应用
下面讲解一些标签的应用
我会通过实例来和大家分享
打开index.htm文件,删除body里的所有内容。
首先说一下arclist即文档列表标签,这个标签在模板当中应用是最广也是最基本的标签,熟悉这个标签后只要学会变通,基本可以学会dede的所有标签应用。
arclist这个标签是全局标签,也就是说这个标签基本上在任何模板都可以使用,当然不包括一些特殊模板。
如search.htm这个模板貌似就不能用
arclist标签的基本结构:
{dede:arclist}
[field:title/]
{/dede:arclist}
首先dede大部分的标签html语言一样,都是需要闭合的。
{dede:arclist}
{/dede:arclist}
也就是必须要有这2个部分组成
然后再中间插入,如:[field:title/]这样的标题标签 (dede的标签除了channelartlist标签是可以嵌套的之外,其它标签都不可以嵌套的)
大家在后台添加好文章后,在刚打开的index.htm模板里输入{dede:arclist}
[field:title/]
{/dede:arclist}
并保存
然后打开首页就会看到前台页面中已经输出了几个标题(默认是10个标题)
现在开始讲解arclist标签的参数应用。
1,col。这个是关于调用出来的标题分为几列的
具体应用:
{dede:arclist col=2}
[field:title/]  

{/dede:arclist}
这里我们设置col=2
也就是说设置为2列
同时细心的朋友也发现了还多了个  

这是html里的东西,表示换行,是为了更好的区别输出的内容。 保存后并刷新首页
这时在首页就会显示2列,每列为5行的标题输出
2,row参数,row是表示一共输出多少个标题。
应用:
{dede:arclist row=8}
  • [field:title/]  

  • {/dede:arclist}
    我们设置为row=8
    保存并刷新首页
    我们看到了不是原来的10个标题而是变成了8个标题,也就是说row参数已经起到作用了。这就是row的应用
    同时我们可以把8改成20
    这时就变成20了个标题了
    我们再加上前面讲的col
    {dede:arclist row=20 col=2}
  • [field:title/]  

  • {/dede:arclist}
    变成了2列 并每列10个标题的样式
    3,typeid,这个参数是指定某个栏目调用文章标题
    就是我们在后台看到的
    这里的ID:6就是typeid
    这个通过后台--核心--网站栏目管理,右侧的栏目列表可以查看到。
    效果为:
      
    (这里大家看到的效果不明显
    因为我在本地就添加了一个栏目的文章
    大家在测试的时候多添加几个栏目的文章就会很明显的看到效果了)
    4,titlelen ,这个参数是说明调用文章标题的字数。 
    标签应用:
    {dede:arclist row=20 col=2 typeid=7 titlelen=10}
  • [field:title/]  

  • {/dede:arclist}
    我们看到这里设置了titlelen=10,那么就是说这次调用的标题字数为5个,
    有些人会奇怪明明是写着10为什么会输出5个字呢。因为2个字节为1汉字,所以就是5个汉字。
    要看出变化就要添加不同标题的文章
    我们看到输出的标题字数为5个汉字了
    5.orderby 排序方式参数
    排序方式大致分为
    1,按点击数(orderby='hot' 或 orderby='click'),也就是大家在有些网站上看到的热门文章
    2,按出版时间(orderby='sortrank' 或 orderby='pubdate' )
    3,按最后出现评论的时间排序  orderby=='lastpost'
    4,按得分   orderby=='scores'
    5,按文章ID排序  orderby='id'
    6, 随机文档列表  orderby='rand'  也就是大家在有些网站看到随机推荐 {dede:arclist row=20 col=2 typeid=7 titlelen=20 orderby='hot' }
  • [field:title/]  

  • {/dede:arclist}
    这时一个热门文章的例子,其它排序方式只要修改hot就可以了
    前台效果
      
    6.摘要调用参数:[field:info/] 应用方法
    {dede:arclist row=1 col=2 typeid=7 titlelen=20 orderby='hot' }
  • [field:title/]  

  • [field:info/]


    {/dede:arclist}
    上面给出的是一个关于栏目ID为7,标题字数为10个汉字并且是1条热门的标题带摘要的调用方法。
    这里col=2不起作用,因为只有调用一个标题。
    那么有人就要说了,这个摘要太长了,我不需要那么长的摘要怎么办呢?
    这里我们有个参数是控制摘要字数的。
    “infolen=”这就是控制摘要字数的。
    应用
    {dede:arclist row=1 typeid=7 titlelen=20 orderby='hot' infolen='60' }
  • [field:title/]  

  • [field:info/]


    {/dede:arclist}
      
    我们发现这次调用出来的摘要字数在30汉字,默认dede的摘要长度为250个字节,也就是125个字节。
    7.下面讲怎么调用带缩略图的效果[field:image/]
    也就是这种效果
      
    标题加缩略图加摘要。
    标签写法:
    {dede:arclist row=1 type='image.' imgwidth='124' imgheight='94' }
  • [field:title/]

  • [field:image/][field:info/]


    {/dede:arclist}
    大家看到这arclist里多出了 type='image.' imgwidth='124' imgheight='94'这3个参数。他们分别说明这个标签调用的内容必须是有缩略图的,而且宽是124px 高是94的缩略图。
    [field:image/]这个就是调用缩略图的参数
    8.flag  自定义属性的应用。
    大家后台添加文章的时候会看到
     

    推荐阅读
    • 本文探讨了Node.js后端开发的基础知识,包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]
    • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
    • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
    • 二维码的实现与应用
      本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
    • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
    • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
    • 本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ... [详细]
    • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
    • 我的读书清单(持续更新)201705311.《一千零一夜》2006(四五年级)2.《中华上下五千年》2008(初一)3.《鲁滨孙漂流记》2008(初二)4.《钢铁是怎样炼成的》20 ... [详细]
    • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
    • 深入探讨前端代码优化策略
      本文深入讨论了前端开发中代码优化的关键技术,包括JavaScript、HTML和CSS的优化方法,旨在提升网页加载速度和用户体验。 ... [详细]
    • 本文详细介绍了C++中的构造函数,包括其定义、特点以及如何通过构造函数进行对象的初始化。此外,还探讨了转换构造函数的概念及其在不同情境下的应用,以及如何避免不必要的隐式类型转换。 ... [详细]
    • 1.绑定htmlcss1.1对象语法:  传给v-bind:class一个对象,以动态地切换class   ... [详细]
    • 解决JavaScript中法语字符排序问题
      在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
    • 数据类型--char一、char1.1char占用2个字节char取值范围:【0~65535】char采用unicode编码方式char类型的字面量用单引号括起来char可以存储一 ... [详细]
    author-avatar
    手机用户2702937405
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有