积跬步,聚小流------界面常用的jeecms标签

* JEECMS初印象

第一次接触JEECMS,突然脑海就浮现了一句话“20元建站,立等可取”,原来这都是真的...

* JEECMS的界面常用标签

暂时忽略掉环境搭建,栏目配置等等环节,先来记录下常用到的标签。

1、页面包含标签

类似于iframe的功能

像这种情况,我们就可以用 [#include "../include/header.html"/]这一标签来实现要表达的效果,修改header.html的时候,所有页面中的内容这一部分都会改变。

2、栏目channel标签

这里应该先来解释下栏目:在jeecms中包含,栏目和内容,栏目又包括子栏目,单页等等,而这里的栏目就像菜单的意思,相应的子栏目就是与之对应的子菜单,单页则是没有下层的单个界面, 而内容顾名思义就是相应栏目内的内容。

在使用的时候最常用的就是栏目channel了,常用的写法:

<em>[@cms_channel id='91']

   <a href="${tag_bean.url}">${tag_bean.name}</a>

[/@cms_channel]</em>

tag_bean之后可以跟相应channel下配置的内容模型的字段,这里的id是

所以同样将第一条修改为[@cms_channel path=‘own‘],然后其它内容不变。

3、相应子栏目标签

正如上方显示的,相应栏目下可能同样要有很多子栏目,当然可能子栏目不会全显示需要限制一部分,这样先来写没有限制的情况:

<em>
[@cms_channel_list parentId=‘110‘][list tag_list as c]
          <li><a href="${c.url}">${c.title!}</a></li>
[/#list][/@cms_channel_list]</em>

当然我们可能只需要显示其中的三四条,那我们就可以给出相应的限制

[@cms_channel_list parentId=tag_bean.id][#list tag_list as c]
      [#if c_index<3]
          <li><a href="${c.url}">${c.title!}</a></li>
      [/#if]
[/#list][/@cms_channel_list]

这里需要注意的是c_index是从0开始计算的,另外在第二条例子中,与[@cms_channel]标签就实现合作

4、内容列表标签

内容列表也是常用到的列表,因为我们通常在某一个栏目下不断的添加新的内容。像如下:

我们通常用如下代码来显示

<span style="font-size:14px;"><em>[@cms_content_list count='7' orderBy='4' titLen='17'
       channelId='81' channelOption='1'] [#list tag_list as a]
       <li><span>${a.shortTitle!}</span><a href="${a.url}">[@text_cut
        s=a.title len=titLen append='...'/]</a></li> [/#list]
[/@cms_content_list]</em></span>

这里就需要注意相应的参数的意义:count是我们需要显示的list的列数,orderBy是从内容中取数据的方式,按时间先后还是按编号大小等等,titLen写全的话我想应该是titleLength是显示的标题的长度,而后面的[text_cut s=a.title len=titLen appen=‘...‘],中用到了这一长度,而channelId则就是具体的哪个栏目中的内容。

5、相应的内容标签

内容和栏目是非常相似的,从列表的变现方式中我们就可以看出,我们很容易就能写出相应的方法,但是有另一个方式我们同样需要关注

<em>${content.title}、${txt!}、${channel.title}</em>

我们通常进入一个页面时肯定有相应的channel或者content,我们可以直接通过这种方式进行取值,方便快捷,当然这个界面会用作多个不同栏目或者内容的模板时就没法应用了,另外,我们需要注意“!”,内容字段可能不会有非空的限制,那当内容为空,我们又在界面上进行显示的时候就会报错,这个时候我们可以通过“!”来防止因为空出错

6、首页及相应路径标签

基于SEO的考虑,面包屑菜单是非常有必要的,而在这里它很容易就实现了

我们来看一下相应的实现标签吧

<span style="font-size:14px;"><em>您当前的位置:<a href="${site.url!}">首页</a> >
<a href="${channel.url}">${channel.title}</a>>
<a href="${content.url}">${content.title}</a></em></span>

这是从内容上直接进行提取,还有多级菜单的情况呢,注意:${channel.nodeList[0].id}用来标记上一次菜单的id。

7、专题标签

在网页显示中通常有推荐和部分随机的内容,我现在的方式可能通过“是否推荐”和“相应主题”进行操作

选择相应topicId=‘1‘或者recommend=‘1‘来进行区分



时间: 2024-10-11 21:14:34

积跬步,聚小流------界面常用的jeecms标签的相关文章

积跬步,聚小流------界面经常使用的jeecms标签

* JEECMS初印象 第一次接触JEECMS,突然脑海就浮现了一句话"20元建站,立等可取",原来这都是真的... * JEECMS的界面经常使用标签 临时忽略掉环境搭建.栏目配置等等环节.先来记录下经常使用到的标签. 1.页面包括标签 类似于iframe的功能 像这样的情况,我们就能够用 [#include "../include/header.html"/]这一标签来实现要表达的效果,改动header.html的时候.全部页面中的内容这一部分都会改变. 2.栏

不积跬步无以至千里----高度自适应的textarea

在某个项目里面,有这样的一个小需求. textarea的高度自适应,当高度高于300px之后,textarea高度不再增高,出滚动条.当高度小于某个高度例如80px的时候,高度不再变小. 其实这个需求在很多地方都有出现过,例如微博的评论框,还有各种评论框. 谈不上什么有难度的技术,写下来当一个小插件积累. <!doctype html> <html> <head> <meta charset="utf-8"> <title>高

技术成长-不积跬步无以至千里

走在开发的道路上,你会发现越走路越长,越走路上的坑越多.本人是想在成长的道路上多踩一些坑的,踩的坑越多,遇到问题解决速度越快.坑多了,可能自己都记不住了,就需要记一记,有些时候你遇到的坑采用的解决办法并不是最优解,所有需要拿出来跟小伙伴一起分享分享你的经验. 记录到比如印象笔记或者有道云笔记里,或者自己的一个文件夹里,不过,个人经验,记在文件夹后很少有人再去看,还是记在印象笔记或者有道云笔记里,可以帮助自己随时翻看.现在的流程是重要的时候记录在有道云笔记上,做个索引,然后印象笔记记录的是我再找对

积跬步,聚小流------关于手机号,前端应该注意哪些

现代的网上商城中越来越多的开始使用手机注册,方便,快捷,然后作为前端,也就不可避免的要在界面上碰到关于手机号的问题,今天小小总结一下该注意哪些问题,又该来如何实现呢? 1.实现效果 先把自己当前做出来的效果传上来看下: (备注:这里的手机号码是我随便输了一个,如果真有这个号码受到了骚扰,别怪我啊,噗噗...) 2.需要注意的问题 这里我们来简单罗列下需要注意的问题吧: * input输入框,只能输入数字: * 输入过程中下方同步显示所输入的内容: * 判断输入手机号是否格式正确: * 判断手机归

积跬步,聚小流-------一个登录中的知识点

前几天心血来潮,做了一个登录界面,发现虽然是简单的一个登录,容纳的知识点倒是不少呢. 先来看下简单的效果: 那就来简单说下,都设计了哪些知识点呢? 首先:居中:这里我使用的是绝对位置的负距离实现居中,也就是说position为absolute,而left和top都为50%,而margin-left和margin-top都为width和height的一半的值的相反数 #back_login{ width: 400px; height: 500px; background-color: #fffff

积跬步,聚小流------具有滑动效果的导航

导航栏是网站的一个重要部分,具有良好动态效果的导航栏无疑会给网站添色不少,而水平动态导航栏就是其中一种,我一直非常喜欢,当然它分为很多种,这里先来看其中一种效果. 1.效果样例 这个图片相信关注过这种效果导航栏的人都很熟悉了,我也是从这个入手慢慢入门滴... 至于样式结构这里就不详述了,相信都不会怵头,这里上下jquery效果的代码: ; (function ($) { $.extend({ 'nicenav': function (con) { con = typeof con === 'nu

积跬步,聚小流-------几种方法实现分割线

其实这个问题想了实现了有一段时间了,只是单纯自己想了个办法简单实现了效果,没想出太多办法来,最关键的是,我也不知道这原来是叫"分割线",只知道是什么样,连搜都不着知道怎么搜,赶巧今天碰到了,就学习了下,先来描绘下要实现的"分割线"效果. 对,就是这个效果,记住了,这叫"分割线"... 最开始反应过来的是层叠起来实现效果,也是之前一直在用的方法 <hr width="80%"/> <div style=&quo

积跬步,聚小流------Bootstrap学习记录(3)

响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官网上找到比較官方的回答:Bootstrap提供了一套响应式.移动设备优先的流失栅格系统,随着屏幕或视口(viweport)的添加,系统会自己主动分为最多12列. 它包括了易于使用的提前定义类,还有强大的mixin用于生成更具语义的布局. 这样的说法是比較精准并且明了的.可是还能够更通俗一点的来解释:

积跬步,聚小流------ps实用小技巧,改变png图标颜色

*  实现效果: 原图:  修改后: *  实现目的: 满足为实现不同界面色彩搭配修改png图标的颜色 *  实现方法: 1.打开Photoshop工具,导入需要进行修改的png图标: 2.对导入的图标进行如下操作: 3.点击"确定"之后,查看修改效果,完成修改. png图标的修改就这样完成了,按捺不住的兴奋啊,我也能用ps做东西了,哈哈