JOEKOE CMS 4.0 简明模版分析

 

JOEKOE CMS 4.0 简明模版分析

这篇文章仅仅是简单的 JOEKOE CMS 4.0 的模版分析 , 对不熟悉和面对模版无从下手的朋友应该会有所帮助 . 老鸟看来未免会觉得过于简单 , 还望不要丢砖头 首先我们要知道 JOEKOE CMS 4.0 的模版文件的位置在 skin/default/ 目录 我们以默认模版首页为例子。 如果您要模仿下面的步骤请备份相关的文件 . 浏览首页，右键查看源文件。 搜索 css ，我们找到了 : /common/script/style.public.css /skin/default/images/css/style.css /skin/default/images/css/style.index.css 这 3 个 css 文件 下面我们用记事本或者 UE 打开这 3 个 css 文件以及首页的模版文件 skin/default/index.html 简单看下这 4 个文件 在 /skin/default/images/css/style.css 我们发现 Code: @import url("common.codes.css"); @import url("common.user.css"); 继续打开 common.codes.css 和 common.user.css 至此，首页模版和其 CSS 文件以及可能用到的 CSS 文件我们就全部找到并且打开了。 下面我们分析 index.html <!-- #include file="/header.html" --> <!-- #include file="/ad.bar.banner.html" --> 包含的头部模版 <!-- #include file="/footer.html" --> 包含的底部模版 <!-- #include file="/user.login.html" --> 包含的用户登录 这些暂时不管。 下面我们要做的事情。 在 index.html 里面从最底层的 <a></a> 开始删代码 ,<a></a>,<li></li>,<div class="xxx"></div> 这样经过一系列的删除之后我们发现首页的部分变成了 . Code: <div class="FramerFloor">         <div class="SideLeft">                         </div>         <div class="MainCenter">                         </div>         <div class="SideRight">         </div>         <div class="space"></div>         <div class="Block">                 <div class="BlockBar"> 友情连接 </div>                 <div class="BlockContent word-keep"> <div><script type="text/javascript" language="Javascript" src="/url.root/xml/links.asp?sort=fir" charset="utf-8"></script></div> <div><script type="text/javascript" language="Javascript" src="/url.root/xml/links.asp?sort=fir_txt" charset="utf-8"></script></div>                 </div>         </div> </div> 结合前台我们可以清楚地发现首页的左中右布局 .SideLeft,MainCenter,SideRight 以及完整的 FramerFloor 和在 FramerFloor 里的整个页面宽度的友情链接 . 在我们刚打开的几个 css 文件里面进行查找 SideLeft,MainCenter,SideRight,FramerFloor 等 , 发现在 /skin/default/images/css/style.css 里面 查找发现页面的布局以及布局的设置在 /skin/default/images/css/style.css 的 Code: /* ************************* */ /* ********** Page ********* */ /* ************************* */ div.Framer { clear:both; width:940px; } div.FramerFloor { clear:both; width:940px; } div.FramerFloor div.MainBody { width:716px; float:left; } div.FramerFloor div.MainCenter { width:492px; float:left; } div.FramerFloor div.SideLeft { width:216px; margin:0px 8px 0px 0px; float:left; } div.FramerFloor div.SideRight { width:216px; margin:0px 0px 0px 8px; float:right; } 而这些我们再参考下其他频道页面可以发现 , 这是全部频道页面的主要布局的设定 . 那么我们考虑如果是修改所有频道页面的布局就在这里改 . 如果只是修改首页的布局 , 则复制这个部分 , 然后改 DIV 样式的名字并修改里面的宽度等 . 同步修改首页模版 index.html 里的 div 名字即可完成首页的页面布局的修改 . ( 如果您不那么熟悉并不建议您修改布局 , 因为修改布局可能产生的全局的页面变动 .) 摸清楚了页面布局之后我们继续下面 . 恢复 index.html 根据我们对布局的分析即可进行一些具体的修改 . 如左侧的论坛新贴 , 我们到 SideLeft 的 div 容器内找到 " 论坛新贴 " 根据标签 <div class=""></div> 找到论坛新贴部分所有代码 : Code: <div class="Block">                         <div class="BlockBar"> 论坛新贴 </div>                         <div class="BlockList"> <ul><label:block("forum.topic","li","sql_order=new;num_row=10;num_topic=30")></ul>                         </div>                 </div>                 <div class="space"></div> 对这段代码进行分析 . 可以明白论坛新贴的部分主要是 Block,BlockBar,BlockList, 以及 BlockList 里面的 ul 和 li 也就是整个这个论坛新贴部分的容器 , 标题栏 , 和内容列表 , 以及列表 . 在打开的 css 文件里面查找 Block,BlockBar,BlockList 等样式可以根据需要进行修改 . 但是我们发现同样的在 index.html 里面还有很多内容也用的 Block,BlockBar,BlockList 的样式 . 如果需要统一修改字体和颜色等 , 可以在 css 里面直接修改 Block,BlockBar,BlockList 如果仅仅是修改论坛新贴部分 . 我们可以复制一份 Block 的样式 改名为 Block-FORUM-NEW Code: div.Block-FORUM-NEW { clear:both; border:1px solid #A3BFE8; background:#E9F1F8; } 然后再修改这个 css 里面的边框 , 背景等等 , 同时 index.html 部分的论坛新贴部分也改样式名为 Block-FORUM-NEW, 即 Code: <div class="Block-FORUM-NEW">                         <div class="BlockBar"> 论坛新贴 </div>                         <div class="BlockList"> <ul><label:block("forum.topic","li","sql_order=new;num_row=10;num_topic=30")></ul>                         </div>                 </div>                 <div class="space"></div> 再修改下面的 BlockBar 的样式 同样的复制 BlockBar 的样式改名为 Code: div.Block-FORUM-NEW div.BlockBar { text-align:left; color:#29458C; font-weight:bold; padding:10px 8px 2px 8px; } 然后修改其属性 . 如此继续我们就可以完成对论坛新贴部分的修改 . 同样的首页的其他部分也就是一个个 DIV 容器 , 我们在 index.html 找到其样式名称再到 css 文件找到样式并修改即可 . 方法同上面的论坛新贴部分 .