总算画好了网页结构图画好了.文章献给Skins开发者们. 由于结构图只是大概把PJblog2的结构描述了一遍.还有很多细节没有列举在上面的, 结构图只是起个引导作用,更多细节得看Skins的源代码,上面会有详细的说明. 在这里还是建议利用 Firefox 的 Dom 查看器 来分析网页结构.来了我们开始吧
1. PJBlog2的网页结构图相关资料
查看PJBlog2的网页结构图
下载PJBlog2的网页结构图
PJBlog2的界面一共用到 5 个CSS文件,(5个文件,其实不用担心,我只是为了方便阅读,所以把CSS文件分成了5个)
global.css 全局样式表
layout.css 层次样式表
typography.css 局部样式表
link.css 超链接样式表
UBB/editor.css UBB编辑器样式表
2. 关于Skins的XML定义
PJBlog2的界面必须拷贝到 Skins 文件夹下面,而且每一个界面都必须包含一个 skin.xml 界面配置的XML文件才可以被系统读取
1. 界面配置文件 skin.xml 结构
程序代码<SkinSet>
<SkinName>默认皮肤 – Flash导航条风格</SkinName>
<SkinDesigner>PuterJam</SkinDesigner>
<pubDate>2004-11-6</pubDate>
<DesignerURL>http://puterjam.vipx.net</DesignerURL>
<DesignerMail>puterjam@etang.com</DesignerMail>
<Flash>
<UseFlash>-1</UseFlash>
<FlashPath>head.swf</FlashPath>
<FlashWidth>748</FlashWidth>
<FlashHeight>80</FlashHeight>
<FlashAlign>center</FlashAlign>
<FlashTop>0</FlashTop>
<FlashTransparent>-1</FlashTransparent>
</Flash>
</SkinSet>
2. 界面配置文件 skin.xml 字段分析
SkinName 界面名称
SkinDesigner 界面设计者
pubDate 发布时间
DesignerURL 设计者主页
DesignerMail 设计者电子邮件
Flash/UseFlash 是否使用Flash导航条 0=false -1=true
Flash/FlashPath Flash导航条路径名
Flash/FlashWidth Flash导航条宽度
Flash/FlashHeight Flash导航条高度
Flash/FlashAlign Flash导航条对齐方式 left | right | center
Flash/FlashTop Flash导航条距离页面顶部高度
Flash/FlashTransparent Flash导航条是否透明 0=false -1=true
3. PJBlog2界面的其他说明
1. 每个界面下面的 UBB/ 文件夹里面的文件都不能少.因为它提供给UBB编辑器图片和样式等信息
2. 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:
一种是内容模块 Content Module
另一种是侧边模块 Side Module.
我们需要控制某个自定义模块时就可以使用
#Content_<模块标识> 或者 #Side_<模块标识> 来独立控制它们的样式.例如:
某个 侧边模块 的标识 是 Category, 那么就可以 用 #Side_Category 来控制这个模块的CSS.
3. Flash 导航条如何获取日志分类?
PJBlog2提供了一个 menu.asp 的文件,它动态输出了日志分类的XML文件
演示看这里
SiteName 站点名字
SiteURL 站点地址
Menu/MenuName 分类名称
Menu/MenuIntro 分类说明
Menu/MenuType 分类类型 0=同时在顶部和侧边显示 1=只在顶部显示 2=只在侧边显示
Menu/MenuUrl 分类链接地址
Menu/logNum 分类日志数目