1模板規划
1.1資源文件
資源文件就是網頁中用到的圖片、CSS、JS等元素,在CMS系統中所有的資源文件在網站的根目錄中的
/res_base/所屬網站定義資源目錄/TEMPLEATE/WEB
/res_base/所屬網站定義資源目錄/TEMPLEATE/WAP
解釋:網站定義資源
在CMS系統中可以同時管理多個網站,也就是多個網站可以同時使用一套CMS系統,但是每一個網站都已屬於自己獨立的資源文件及模板文件目錄。
1.2模板文件
定義了頁面顯示的主體框架,它的位置位於網站根目錄下的/WEB_INF/user_base/所屬網站模板目錄;
模板規則:
1、以index前綴命名的為首頁模板
2、以channel前綴命名的為欄目模板
3、以content前綴命名的為內容模板
4、以alone前綴命名的為欄目單頁模板
1.3使用方式
1、使用dw建立站點
2、將網頁中用到的資源文件分類分別放置到網站相關資源目錄中
3、將模板文件放置按照命名規則分別放置到網站相關模板目錄中。
4、將頭部、底部等等具有通用元素的模板文件放置到模板目錄中的include目錄中
5、將模板文件中所有資源引用改為絕對路徑鏈接至資源目錄中
6、在欄目管理中將模板文件與欄目進行關聯設置
7、在模板文件中需要提取數據的位置放置相應的標簽
1.4標簽調用樣式
調用"JEECMS標簽"的三種代碼樣式如下:
A、${標簽名稱}
B、[@cms.標簽名稱 屬性='值'/]
C、[@cms.標簽名稱 屬性='值'; 標簽別名] 自定義樣式模板 [/@cms.標簽名稱]
例如:
a、${web.name}標簽用於調用網站名稱
b、[@cms.ArtiList chnlId='' count='10' sysContent='1-1' /]標簽用於調用 10篇文章的列表
C、[@cms.ChnlList id='' inner='1';c]|<a href=="${c.url}">>${c.name}</a> [/@cms.ChnlList]標簽用於調用欄目列表,可用於網站導航條。
注意:abc實例是與上面ABC三種形式相對應的。大家可以逐個測試,舉一反三
2 Include標簽
2.1功能簡介
做過網站設計經驗的朋友可能都知道,我們可以將頁面中經常要引用的公共部分(比如頁頭和頁腳)獨立開來,單獨存放在一個頁面中。這樣做的好處就是可以在各個需要用到該部分的頁面中用一個簡單的包含語句就能把它引入進來,大大簡化了工作量。
2.2標記說明
【標簽名】:[@cms.Include 屬性='值' /]
【作 用】:包含公用頁面(如頁頭,頁腳)
【參 數】:
name:包含模板的文件名
solution:模板方案名
【示 例】:
包含頁頭:[@cms.Include name='head.html' solution='default'/]
【備 注】:調用此標簽前必須先建立相應的包含模板
2.3 明確標簽的使用范圍
我們在使用任何標簽的之前,都必須明確其使用的范圍,否則可能無法正常使用該標簽。
【Include 標簽】的使用范圍是:首頁模板,欄目頁模板,內容頁模板,即對應\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夾下的index_××.html模板、channel_××.html模板、content_××.html模板
2.4調試標簽了解其使用方法
在使用【Include 標簽】之前我們必須保證有可供此標簽調用的包含模板,本實例只是起演示作用,為方便起見,這里就不再另外創建被包含的模板了,標簽調用的是系統默認模板方案中的的head.html模板。
登錄JEECMS后台,進入“模板管理->template->article->default”,點擊修改開始時建立的index_demo.html模板(如果沒有此模板則按照本文開頭的說明創建),進入模板代碼模式,填寫如下標簽代碼(為了演示效果美觀,本處代碼中加入了css,可去除):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Include標簽測試</title>
<link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" />
<link href="${root}/default/article/css/whole.css" type="text/css" rel="stylesheet" />
<link href="${root}/default/article/css/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
[@cms.Include name='head.html' solution='default'/]
</body>
</html>
點保存按鈕,然后返回前台站點首頁刷新,得到如下效果:
3 ArtiList標簽
3.1功能簡介
【ArtiList 標簽】在CMS中使用的頻率可以說是最高的,通過這個標簽,你不僅可以得到一個文章列表,而且可以通過不同的參數組合得到不同的顯示效果。比如文章圖文列表、文字或圖片跑馬燈、文字或圖片上下循環滾動等等。
使用方式:
[@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2' target='1'/]
3.2標記說明
【標簽名】:[@cms. ArtiList 屬性='值' /]
【作 用】:獲取文章列表數據
【參 數】:
屬性名稱 |
屬性說明 |
默認值 |
可選值 |
chnlId |
欄目ID,欄目頁中可不設置,系統會自動獲取當前欄目ID |
當前欄目ID |
空:顯示全站文章列表; |
attr |
文章屬性ID |
空 |
1:普通 2:圖文 |
sysContent |
列表顯示方式 |
1-1 |
1-1:普通標題列表 |
orderBy |
排序方式 |
0 |
0:發布時間降序; |
recommend |
是否推薦 |
0 |
0:所有文章 |
titLen |
標題長度 |
20 |
自定義 |
target |
鏈接打開目標 |
0 |
0:原窗口打開 |
headMark |
文章標題圖標 |
0 |
0:無圖標 |
lineHeight |
文章列表每行的行高 |
空 |
自定義 |
bottomLine |
每行標題下是否帶下划分隔線 |
0 |
0:無分隔線 自定義樣式:css中定義的樣式名稱 |
ctgForm |
文章類別形式 |
0 |
0:不顯示文章類別 |
ctgClass |
文章類別的css-class |
空 |
自定義css樣式的class名 |
dateFormat |
文章發布日期顯示格式 |
0 |
0:不顯示日期 |
datePosition |
日期排列位置 |
1 |
1:緊跟標題之后 |
isPage |
是否顯示分頁 |
0 |
0:否;1:是 |
count |
每頁列表顯示數量 |
20 |
自定義 |
cssStyle |
連接的樣式 |
空 |
自定義 |
僅當sysContent='1-2'(圖文列表)時,以下標簽屬性才有效 |
|||
picWidth |
按百分比顯示圖片寬度 |
25(即每個圖片占總寬度的25%,每行可放四張圖片) |
自定義 |
picHeight |
每行圖片顯示高度 |
110 |
自定義 |
僅當sysContent='3-×'(焦點圖)時,以下標簽屬性才有效
|
|||
flashWidth |
焦點圖寬度 |
296(px) |
自定義 |
flashHeight |
焦點圖總高度 |
200(px) |
自定義 |
textHeight |
焦點圖文本高度 |
20(px) |
自定義 |
僅當sysContent='2-×'(特效顯示)時,以下標簽屬性才有效 |
|||
rollDisplayHeight |
顯示區高度 |
28 |
自定義 |
rollLineHeight |
行高 |
28 |
自定義 |
rollCols |
列數(一行中包含幾列) |
1 |
自定義 |
rollSpeed |
滾動速度,值越小越快,最小為1 |
1 |
自定義 |
isSleep |
是否停頓 |
1 |
0:不停頓; |
rollSleepTime |
停頓時間,值越大停頓越久 |
50 |
自定義 |
rollCount |
一次滾動的行數 |
1 |
自定義 |
rollSpan |
一次滾動的像素 |
1 |
自定義 |
其它高級標簽屬性(用於用戶個性設置)
|
|||
searchKey |
在標題、tags和描述中搜索指定關鍵字的文章列表,用於搜索頁模板 |
空 |
自定義關鍵字 |
style |
標簽內部樣式,如果指定sysContent或userContent,則該項無效 |
1 |
1:普通列表 |
sysTpl |
指定系統模板 |
1 |
自定義 |
sysContent |
系統內容樣式 |
0 |
自定義 |
userContent |
用戶內容樣式,當sysContent=1時有效 |
空 |
自定義 |
sysPage |
系統分頁樣式 |
0 |
自定義 |
userPage |
用戶分頁樣式,當sysPage=1時有效 |
空 |
自定義 |
upSolution |
指定其它模板方案樣式 |
空 |
自定義 |
upWebRes |
指定其它站點樣式 |
空 |
自定義 |
pageClass |
分頁欄css樣式的class名稱 |
空 |
自定義 |
pageStyle |
分頁欄css自定義style樣式 |
空 |
自定義 |
3.3 明確標簽使用范圍
我們在使用任何標簽的之前,都必須明確其使用的范圍,否則可能無法正常使用該標簽。
【ArtiList 標簽】的使用范圍是:首頁模板,欄目頁模板,內容頁模板,即對應\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夾下的index_××.html模板、channel_××.html模板、content_××.html模板
3.4 調試標簽了解其使用方法
登錄JEECMS后台,進入“模板管理->template->article->default”,點擊修改開始時建立的index_demo.html模板(如果沒有此模板則按照本文開頭的說明創建),在模板內容處填寫如下標簽代碼(為了演示效果美觀,本處代碼中引入了系統默認css,可去除):(1).文章列表
<link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" />
[@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2 target='1'/]
點保存按鈕,然后返回前台站點首頁刷新,得到如下效果:
(2).圖文列表
<link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet/>
[@cms.ArtiList chnlId='' attr='2' count='5' sysContent='1-2' titLen='25' target='1' picWidth='25' picHeight='110'/]
點保存按鈕,然后返回前台站點首頁刷新,得到如下效果:
4 Position標簽
4.1功能簡介
在網站頁面中我們經常要顯示當前頁面的位置,例如:當前位置:首頁 > 無線城市> 城市要聞 > 正文。在CMS標簽中提供了一個顯示頁面的當前位置調用標簽,只需將該標簽放到頁面的相應地方,設置好調用參數即可,簡單方便。
4.2標記說明
【標簽名】:[@cms.Position 屬性='值' /]
【作 用】:顯示頁面的當前位置
【參 數】:
homepage —-首頁顯示方式。【1:站點簡稱;自定義】(默認:首頁)
title ---內容頁顯示方式。【0:不顯示;1:顯示內容標題;自定義】(默認:正文)
split ---分割符號。(默認:“>”)
target ---是否原窗口打開。【0:原窗口打開;1:新窗口打開】(默認:原窗口打開)
class ---鏈接外部樣式,等同於html中的class屬性
style ---自定義標簽樣式,等同於html中的style屬性
【示 例】:
[@cms.Position homepage='1' split='|' target='1' style='color:#f00'/]
最終效果:
5 ChnlList標簽
5.1功能簡介
在頁面中獲取欄目列表的時候我們要用到[@cms.ChnlList /]標簽,本標簽不僅可以單獨使用,還可以配合其它標簽使用,達到更加豐富的效果。
5.2標記說明
【標簽名】:[@cms.ChnlList 屬性='值' /]
【作 用】:顯示各欄目列表
【參 數】:
屬性名稱 |
屬性說明 |
默認值 |
可選值 |
id |
父欄目ID |
默認為空:自動獲取當前欄目ID |
空:當前欄目ID; 欄目ID:指定父欄目id |
orderBy |
排序方式 |
0 |
0:優先級升序; 1:優先級降序; 2:點擊次數升序;3:點擊次數降序 |
isDisplay |
是否只獲取顯示的欄目 |
1 |
0:獲取所有; 1:只獲取顯示的欄目 |
hasContent |
是否只獲取可以有內容的欄目 |
0 |
0:獲取所有; 1:只獲取可以有內容的欄目 |
linkClass |
鏈接class樣式 |
空 |
|
linkTarget |
鏈接打開方式 |
0 |
0:當前窗口; 1:新窗口 |
sysPage |
系統分頁樣式 |
0 |
0:不分頁; 1:樣式一; 2:樣式二 |
userPage |
自定義分頁樣式。如果指定了系統分頁樣式,則該項無效 |
0 |
0:不分頁; 1:樣式一; 2:樣式二 |
5.3明確標簽的使用范圍
我們在使用任何標簽的之前,都必須明確其使用的范圍,否則可能無法正常使用該標簽。 [@cms.ChnlList /]標簽的使用范圍是:首頁模板,欄目頁模板,即對應\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夾下的index_××.html模板、channel_××.html模板
5.4調試標簽了解其使用方法
1、單獨標簽調用示例: [@cms.ChnlList/]
2、自定義標簽調用示例:
[@cms.ChnlList id='' inner='1';c,i]
<a href="${c.url}">${c.name}</a>[#if (i+1)%2==0]<br/>[/#if]
[/@cms.ChnlList]
3、配合其它標簽嵌套調用示例:
[@cms.ChnlList id='' sysType='article' hasContent='1' inner='1';c]
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#eee">
<tr>
<td height="30" bgcolor="#EEEEEE"><a target="_blank" href="${c.url}">${c.name}</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">[@cms.ArtiList chnlId=c.id sysContent='1-1' titLen='20' count='6' /]</td>
</tr>
</table>
[/@cms.ChnlList]
6內容頁常用標簽
6.1標記說明
【文章導航】:[@cms.Position /]
【文章標題】:${arti.title}
【簡短標題】:${arti.shortTitle}
【文章作者】:${arti.author}
【發布日期】:${arti.releaseDate}
【查看次數】:${arti.visitTotal}
【文章來源】:${arti.origin}
【文章摘要】:${arti.description}
【文章內容】:${arti.content}