1stlog模板开发指南.docVIP

1stlog模板开发指南 1stlog从规划设计就考虑到模板的定制性，后期实现也把这个功能考虑在内了，所以现在是支持用户自己定义模板的。 说明： 模板定义只涉及到前台展示模板的自定义，后台管理页面暂时还不支持模板定制，后期如有需要，可考虑添加。 规则说明： 为了使得模板定制更灵活，更有移植性，我们规划了页面的数据层，定制了一套表现层的标签名称，这样大家就可以方便组合，随意摆放，加上自己的CSS样式，可以制作出各式各样的模板。 前置知识： 定制模板前，你需要对以下知识有一定的了解和掌握：1、(X)HTML,CSS结构的web布局2、对rails的局部模板有一定的了解3、对rails的组件概念有一定的了解 规范说明： 本小节对1stlog的模板规范做详细说明，以方便你制作自己的模板 1、目录结构 1stlog的每个模板一个目录，放在根目录下的themes目录下，目录结构如下图： i. simple是模板的名称；其下级结构和rails框架是一致的，其下有public目录和views目录，以及三个文件（about.theme,author.theme,preview.png）;ii. public下目录结构和rails框架也是一致的，存在images和javascripts和stylesheets三个目录；iii.? images下是一个存放模板使用到的图片文件夹theme_images,图片你可以自由的在模板中使用；???? javascripts下有个目录theme_js存放该模板用到的Js文件，默认为application.js；???? stylesheets下存在一个theme_css文件夹存放该模板使用到的CSS文件,其下有两个CSS文件，分别为描述整体结构的layout.css和描述显示的default.css；?iv. views下的layouts文件夹下存放模板文件，名字为index.rhtml；此外还可以存放模板中自定义的局部模板文件供模板使用；about.theme是个文本文件，用来描述模板的一些性质特点，以方便他人了解选用；author.theme文件是对该模板的作者加以描述，支持html格式；preview.png是使用该模板的一个预览图，大小为300×250. 2、页面结构 从整体上看，模板分为数据域和表现层，我们把数据域完全剥离，使得定制模板更加方便，定制模板的时候，只需要在模板的“适当”位置引用就可以了。PS：页面元数据是分在一个共享目录中的，在模板中直接引用该局部模板就可以了，每个元数据模板内的标签是固定的。 3、页面数据 1stlog目前存在的元数据模板有如下这些： 每个局部模板对应页面上的一块区域，我们举个例子。（1）、关于我们模块（_about.rhtml）这个模块是在页面上显示“关于我们”这个区域的。 ??? !--??? 关于我们区域??? --??? lih2About/h2??? ??? p??? ??? %=about%??? ??? /p??? /li 看这个元数据里面的代码，最上面的是注释就不多说了；下面的是一个li ..../li区块，里面包含了“关于我们”的数据，这个里面的%=about%是“关于我们”的数据。如上这个模块放可以这样加到模板中： ??? %= render(:partial = shared/item/about) % 你可以把这个数据域包含在其他的CSS标签内，就可以随意制定自己的显示风格了。（2）、再看一个链接显示的（_links.rhtml）该模块显示本站链接区域的数据，由于其是一个二级层次结构的，所以我们的代码看上去是这样的： % if @show_links.value.to_i == 1%??? li id=linkcat-9 class=linkcath2Blogroll/h2??? ul?????? % @plinks.each do |plink| %??? li?????? %= plink.title -%?????? ul class=children?????? % @links.each do |links| %?????? % if links %???????????????????????? % links.each do |t| %????????????? % if plink.id == t.parent_id %????????????? li?????????????? %=link_to h(t.title),t.weburl,{:title=t.description,:popup = true }-%?