5D博客页面标准结构解释 2007.09

Readme

可自定义部分开始,一个完整的HTML的Header部分并没有包括其中,我们可以修改的部分是从body开始的

页面的布局的Head部分,这里应该有博客的标题{title} 和博客副标题{remark}. 另外,使用两层Div完全是为CSS效果服务.

如果有Logo,可以放到这里

标题{title}和当前栏目的名称{classname}和说明{remark}

<h1 class="headtitle"><a href="{blogurl}">{title}</a></h1> <p class="headremark">{classname}({remark})</p> </div> </div>

class为space的你可以认为它不存在,但哪天你要写一个复杂的CSS效果你可能会用到它.

页面布局的主体部分,里面包括正文栏和侧边栏,同样的两层Div嵌套

这是整个侧边栏部分,其中结构请参阅侧边栏结构解释

{sidebar}

Space

正文栏：开始,所有的文章内容,文章列表,留言回复都在这里面

一个没有文字的标题

这是一个博客系统的转义标签,所有内容数据的显示都依赖这些标签,请参阅转义标签手册

<blog:log>

日志列表时使用的结构

列表的头部,默认提供了一些操作按钮

<blog:ListHeader> <div id="log" class="log"> <h3 id="loghead" class="loghead"><span></span></h3> <div id="notes" class="notes"> <span id="layout"> <span id="notes_c" class="notes_c"></span> <a onClick="c_list('none')" class="z_list" title="列表显示"><span>-</span></a> <a onClick="c_list('block')" class="z_normal" title="正常显示"><span>+</span></a> <a href="/service/post.aspx" class="z_post" target="_blank" title="发表新贴"><span>P</span></a> <a href="/useradmin/login.aspx" class="z_admin" target="_blank" title="后台管理"><span>A</span></a> </span> </div> </blog:ListHeader>

将日志逐一列出的部分,每一篇日志都按下面的结构显示

<blog:ListEntry> <div class="normallog {lognum}" name="{logday}">

日志标题和它的一个操作按钮

<h4 class="logtitle"> <a class="z_close" onclick="closelog({logid},this)" title="展开关闭日志"><span>-</span></a> <a href="{logurl}" target='_blank'>{logtitle}</a> </h4>

这些是扩展按钮和信息,所属分类{Class}和发表日期{publishtime}

<div class="info_u"> <span class="logtools"> <a onClick="editblog({logid})" class="z_edit userz" title="编辑日志"> </a> <a onClick="delblog({logid})" class="z_del userz" title="删除日志"> </a> <a onClick="changecontent({logid},this)" class="z_half" title="内容摘要转换"> </a> </span> <span class="category"><a href="{ClassUrl}">{Class}</a></span> <span class="ptime">{publishtime}</span> </div>

显示日志的摘要{logsummary}

<div class="text"> <div class="textcontent" id="cl{logid}">{logsummary}</div> <div class="tags">

显示标签{tags}. 注意:这里出现的双语可以通过CSS设置只显示其中的一个,例: span.cn {display:none;} 这样就只显示英文了

摘要结束后列出的按钮与信息

<h6 class="info_d"> <span class="link_c"> <a href="{commenturl}" target=_blank><span class="cn">我要留言</span><span class="en">To Comment</span></a> <a href="{logurl}" target=_blank><span class="cn">阅读全文</span><span class="en">Read All</span></a> <span class="infospace">|</span> </span> <span class="comment_c"><span class="cn">回复</span><span class="en">Comments</span>({commentcount})</span> <span class="read_c"><span class="cn">点击</span><span class="en">Count</span>({viewcount})</span> </h6> </div> </blog:ListEntry>

在两条日志之间会插入这里设定的内容,默认是空的

<blog:ListSeparator></blog:ListSeparator>

结束部分

<blog:ListFooter> </div> </blog:ListFooter>

栏目为图片栏目时使用的结构, 目前这部分功能已经失效

<blog:listphotoHeader> <div id="log" class="log"><h3 id="loghead" class="loghead"><span></span></h3> </blog:listphotoHeader> <blog:listphotoEntry> <div class="photolog"> <div class="smallimages"> <a href="{logurl}" target='blank'><img src="{photourl}" alt="{phototitle}"/></a> </div> <h3>{phototitle}</h3> <ul> <li class="Hits"><span class="cn">点击:</span><span class="en">Hits:</span>{viewcount}</li> <li class="Comments"><span class="cn">回复:</span><span class="en">Comments:</span>{commentcount}</li> <li class="PostTime"><span class="cn">发表:</span><span class="en">PostTime:</span>{posttime}</li> </ul> <p class="logsummary"><span>{logsummary}</span></p> </div> </blog:listphotoEntry> <blog:listphotoSeparator> </blog:listphotoSeparator> <blog:listphotoFooter> </div> </blog:listphotoFooter>

打开某篇日志时内容按这种结构显示

头部

<blog:DetailHeader> <div id="log" class="log"><h3 id="loghead" class="loghead"><span></span></h3> </blog:DetailHeader>

正文部分,不会循环罗列

<blog:DetailContent> <div class="normallog loglog">

日志标题

<h4 class="logtitle"> {logtitle} </h4>

扩展信息,默认与列表模式相同

<div class="info_u"> <span class="logtools"> <a onClick="editblog({logid})" class="z_edit userz" title="编辑日志"> </a> <a onClick="delblog({logid})" class="z_del userz" title="删除日志"> </a> <a onClick="showall(this)" class="z_showall" title="全屏正常切换"> </a> </span> <span class="category"><a href="{ClassUrl}">{Class}</a></span> <span class="ptime">{publishtime}</span> </div>

正文+标签

<div class="text"> <div class="textcontent" id="cl{logid}">{logcontent}</div> <div class="tags"> <span class="cn">标签集:</span><span class="en">TAGS:</span>{tags} </div> </div>

正文结束后显示访问统计

<h6 class="info_d"> <span class="comment_c"><span class="cn">回复</span><span class="en">Comments</span>({commentcount})</span> <span class="read_c"><span class="cn">点击</span><span class="en">Count</span>({viewcount})</span> </h6> </div> </blog:DetailContent>

结束部分

<blog:DetailFooter> </div> </blog:DetailFooter>

留言回复部分结构修订2007.09

留言头部

<blog:CommentHeader> <div id="comments"><h3 id="commentshead" onclick="showtf(this);"><span class="cn">回复</span><span class="en">Comments</span></h3> </blog:CommentHeader>

循环列出留言,每条留言都按一下格式显示

<blog:CommentEntry> <div class="a_comment">

留言者的信息,头像{commentauthoricon} 名字{commentauthor} 发表时间{commenttime}和留言楼层号{commentnum}

<div class="info"> <a class="logolink" href="{commenthomepage}" target="_blank"> <img alt="{commentauthor}" src="{commentauthoricon}"></a> <div class="authorname">{commentauthor}</div> <span>{commenttime}</SPAN> <div class="homepage"><B>{commentnum}</b></div> </div>

留言的内容

<div class="content">{commentcontent}</div>

作者回复这条留言后会显示

<div class="recontent"><h6><span>作者:</span></h6>{commentrecontent}</div> </div> </blog:CommentEntry>

在两条留言之间插入这里定义的代码,默认是空的

<blog:CommentSeparator></blog:CommentSeparator>

留言结束

<blog:CommentFooter> </div> </blog:CommentFooter>

这里结尾处会自动产生一个留言表单,请参阅留言表单结构

</blog:log>

同Space

正文栏：结束

</div>

页面主体部分结束

</div> </div>

Space

收工

</div>

侧边栏结构解释

边栏开始

边栏标题,没有内容,可以利用CSS修饰

日志分类栏每一个边栏的id都会不同,这个是"menu"

边栏每一个边栏都使用统一的框架结构,在下面示例蓝色标记出的就是标准的框架部分,以后不再标记.自定义的边栏也同样使用这样的框架.

栏标题

栏内容区

每一条分类有RSS链接,分类名,日志数量组成

Space

日志分类结束

个人信息栏 userinfo

你的头像和基本信息,会随你在"我的5D"的设置而变化

<dt><a href="213"><img src="xxxx/images/face.jpg" alt="123" />NickName</a></dt> <dd class="sex"><span>性别：</span>xx</dd> <dd class="from"><span>来自：</span>xxxx</dd> <dd class="mail"><span>邮箱：</span>邮箱地址xxx</dd> <dd class="plan"><span>签名：</span> 内容内容内容xxx </dd>

访问者直接加你为好友

<dd class="opbtn"><a href="21">+加他为好友</a></dd> </dl> </div> <div class="spaces"></div> </div>

最新回复 comment

依次列出最新的回复

<li><a href='/200709/437447.html' target='_Blank'>额，干什么用的</a></li> <li><a href='/200707/421378.html' target='_Blank'>清空了……还是登陆不能……</a></li> <li><a href='/200704/388986.html' target='_Blank'>SULei，似乎这个digg设置了绝对位置，我试验模板发现如果日志末digg显示位置超出右边栏实际内容底线，页面就会乱。不知是否可以解决了。</a></li> <li><a href='/200707/421378.html' target='_Blank'>报告，暂离5D一个月，回来依然登陆不能</a><IMG src='http://blog.5d.cn/images/hui.gif'></li> </ul> </div> <div class="spaces"></div> </div>

最近推荐 highlight

<div class=sidesub id=highlight> <h3 onclick=showtf(this);><span>最近推荐</span></h3> <div class=sidesub_c id=highlight_c> <ul> <li><a href='/200708/431812.html' target='_blank'>在博客秀作品</a></li> <li><a href='/200707/421378.html' target='_blank'>IE7访问部分5D页面始终在未登录状态的解决方法</a></li> <li><a href='/200706/409865.html' target='_blank'>设计调整:5D发表正文的UBB编辑器操作按钮</a></li> <li><a href='/200611/331611.html' target='_blank'>一个可以查看所有HTML代码的IE插件</a></li> <li><a href='/200610/321875.html' target='_blank'>文件上传界面设计</a></li> <li><a href='/200610/320910.html' target='_blank'>5DBLOG模版开发包</a></li> </ul> </div> <div class="spaces"></div> </div>

友情连接 links

<div class=sidesub id=links> <h3 onclick=showtf(this);><span>友情连接</span></h3> <div class=sidesub_c id=links_c> <ul> <li><a href='/service/gotolink.aspx?id=52776&url=http://blog.5d.cn/user31/Jennybaby/' target='_blank'><span class=textlinks>粘粘的博客</span></a></li> <li><a href='/service/gotolink.aspx?id=48427&url=http://blog.5d.cn' target='_blank'><span class=textlinks>5DBLOG</span></a></li> <li><a href='/service/gotolink.aspx?id=52989&url=http://blog.5d.cn/vip/laowen/' target='_blank'><span class=textlinks>【老闻BLOG】</span></a></li> <li><a href='/service/gotolink.aspx?id=52990&url=http://blog.5d.cn/vip/mx5/' target='_blank'><span class=textlinks>陌小舞的Sweet Box</span></a></li> <li><a href='/service/gotolink.aspx?id=52991&url=http://blog.5d.cn/user14/zhengtian/' target='_blank'><span class=textlinks>正天的心言居</span></a></li> </ul> </div> <div class="spaces"></div> </div>

日历表 calendar

日历表格

<table>

列定义

表头显示星期,双语

表底部翻阅按钮

月历部分,有日志的日期会有链接

统计信息 total

文章搜索 search

rss聚合 other

<div class=sidesub id=other> <h3 onclick=showtf(this);><span>rss聚合</span></h3> <div class=sidesub_c id=other_c> <TABLE class=rss_o width="100%"> <TBODY> <TR><TD>我的 Blog: <BR><A href="/rss10.aspx?uid=8205" target=_blank><IMG alt="SULei的博客最新的 20 条日志" src="http://blog.5d.cn/images/rss10.png" border=0></A></TD></TR> <TD>[神奇的世界] <BR><A href="/rss10.aspx?cid=132051" target=_blank><IMG alt="条日志? 20 神奇的世界?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[游戏] <BR><A href="/rss10.aspx?cid=97260" target=_blank><IMG alt="条日志? 20 游戏?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[参考文档] <BR><A href="/rss10.aspx?cid=14543" target=_blank><IMG alt="条日志? 20 参考文档?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[视觉] <BR><A href="/rss10.aspx?cid=14595" target=_blank><IMG alt="条日志? 20 视觉?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[5D建设] <BR><A href="/rss10.aspx?cid=125281" target=_blank><IMG alt="条日志? 20 5D建设?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[生活] <BR><A href="/rss10.aspx?cid=14594" target=_blank><IMG alt="条日志? 20 生活?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TD>[设计探索] <BR><A href="/rss10.aspx?cid=14593" target=_blank><IMG alt="条日志? 20 设计探索?分类最新的" src="http://blog.5d.cn/images/rss10.png" ></A></TD></TR> <TR><TD>全站 Blog: <BR><A href="/rss10.aspx" target=_blank><IMG alt="全站最新的 20 条日志" src="http://blog.5d.cn/images/rss10.png" border=0></A></TD></TR> </TBODY> </TABLE> </div> <div class="spaces"></div> </div>

登录框 loginform

自定义边栏 sildbar_XX

<div class=sidesub id=sildbar_23> <h3 onclick=showtf(this);><span>我的自定义边栏</span></h3> <div class=sidesub_c id=sildbar_23_c> 内容在这里 </div> <div class="spaces"></div> </div>