热门标签 | 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  自定义属性的应用。
    大家后台添加文章的时候会看到
     

    推荐阅读
    • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
    • Appium + Java 自动化测试中处理页面空白区域点击问题
      在进行移动应用自动化测试时,有时会遇到某些页面没有返回按钮,只能通过点击空白区域返回的情况。本文将探讨如何在Appium + Java环境中有效解决此类问题,并提供详细的解决方案。 ... [详细]
    • 本文详细介绍了JSP的三大指令:page、include和taglib,重点探讨了静态包含与动态包含的区别及其应用场景,并解释了如何使用taglib指令引入第三方标签库。 ... [详细]
    • 如何清除Chrome浏览器地址栏的特定历史记录
      在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
    • 鼠标悬停出现提示信息怎么做
      概述–提示:指启示,提起注意或给予提醒和解释。在excel中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等。设置方式也有多种,简单的,仅为单元格插入批注就可 ... [详细]
    • 精致小屏灰色风格苹果CMS v10模板,支持DIY主题管理系统
      探索一款专为影视站设计的苹果CMS v10模板,具备强大的主题管理系统和500多个设置项,无需二次开发即可轻松配置。下载地址:https://www.mytheme.cn/maccms/244.html,演示地址:http://demo.mytheme.cn/index.php?id=244。 ... [详细]
    • 本文详细介绍如何使用 HTML5 和 JavaScript 实现一个交互式的画板功能。通过具体代码示例,帮助读者理解 Canvas API 的基本用法及其在绘图应用中的实际应用。 ... [详细]
    • 气象对比分析
      本文探讨了不同地区和时间段的天气模式,通过详细的图表和数据分析,揭示了气候变化的趋势及其对环境和社会的影响。 ... [详细]
    • 探讨 HDU 1536 题目,即 S-Nim 游戏的博弈策略。通过 SG 函数分析游戏胜负的关键,并介绍如何编程实现解决方案。 ... [详细]
    • CSS高级技巧:动态高亮当前页面导航
      本文介绍了如何使用CSS实现网站导航栏中当前页面的高亮显示,提升用户体验。通过为每个页面的body元素添加特定ID,并结合导航项的类名,可以轻松实现这一功能。 ... [详细]
    • 在使用 Vue CLI 创建的项目中,引入样式模块(CSS Module)后,发现类名被自动修改。本文将详细解释这一现象并提供解决方案。 ... [详细]
    • 深入解析动态代理模式:23种设计模式之三
      在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
    • 深入理解ExtJS:从入门到精通
      本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
    • 通常情况下,修改my.cnf配置文件后需要重启MySQL服务才能使新参数生效。然而,通过特定命令可以在不重启服务的情况下实现配置的即时更新。本文将详细介绍如何在线调整MySQL配置,并验证其有效性。 ... [详细]
    • Python自动化测试入门:Selenium环境搭建
      本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
    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社区 版权所有