QBlog官方博客

本博将记录与秋色园成长相关的历史路程及秋色园的开发进展等相关情况。
公告信息
欢迎光临秋色园官方博客，欢迎:下载与使用CYQBlog系统，并提出您的意见与建议。
文章档案
最新评论
文章
ASP.NET开源博客QBlog模板制作教程:博客文章详细页-帖子详细|评论列表|评论框(六)
2011/6/29 13:43:53
上节回顾：ASP.NET开源博客QBlog模板制作教程:博客首页-文章列表与分页控件(五)

本节介绍：ASP.NET开源博客QBlog模板制作教程:博客文章详细页-帖子详细|评论列表|评论框

基本说明：

前面几节介绍了首页了index.html的制作过程，由于首页和文章列表是一样的，因此，把首页index.html复制一份，改名为articlelist.html这样文章列表就也完成了。

本节介绍帖子详细部分，同样由于头部，左侧都是首页一样的，共同的部分你copy首页的代码即可。

当然，把共用部分放到commoncache.html中，然后在其它页面直接引用就变的简洁方便多了。

 

话不多说，开始文章详细介绍部分：

一：articledetail.html 文章详细页制作-文章显示，评论列表，与评论框制作教程

 

包括以下内容：[博客文章显示|评论列表|评论发表框]

以下进行示例教程：

PS：截图以/Skin/Skin_Blue界面为示例。

1：博客文章显示

示例代码：

                            <h2 class="post-title">

                                 <a id="labTitle" href="#">[标题]</a>

                            </h2>

                            <div class="post-meta">

                                 <span class="post-author" id="labEdit"><a id="labID" href="/edit" key="edit">[编辑]</a></span>

                                 <span class="post-date" id="labCreateTime">2010-06-28</span> <span class="post-category">

                                     <a id="labName" href="/edit">[类别]</a></span> <span class="post-view">

                                          <label key="comment">

                                               [评论]</label><label id="labCommentCount"></label></span> <span class="post-comment">

                                                   <label key="browse">

                                                        [浏览]</label><label id="labHits"></label>

                                               </span>

                            </div>

                            <div class="post-content">

                                 <div id="labBody">内容</div>

                                 <div class="post-tag" id="labTag" key="tag">

                                 </div>

                                 <div class="sign">

                                     <div class="code" id="labSign">

                                          文章签名</div>

                                 </div>

                            </div>

关键ID说明：

1：id="labTitle" 文章标题

2：id="labBody"  文章内容

3：id="labTag"   文章Tag

4：
编辑：id="labEdit" 控制权限显示id="labID" 编辑的链接
发布时间：id="labCreateTime"
文章分类：id="labName"
评论数：id="labCommentCount"
浏览数：id="labHits"

5：id="labSign"文章签名

2：博客评论列表

示例代码：

    <div id="Node_Comment">

        <h3 id="comments" key="postcomment">

            评论列表</h3>

        <ul id="labCommentList" class="commentlist">

            <li class="alt">

                <div class="comment-meta">

                    <a href="/" id="labUserID">

                        <img src="/" id="labHeadUrl" width="26" height="26" border="0" align="absmiddle" />

                    </a><span class="comment-author"><a id="labNickName" href="/">路过秋天</a></span> <span class="comment-date" id="divCreateTime">2009-12-08 11:53</span><span id="Node_Reply_Menu">&nbsp;&nbsp;

                        &nbsp;<a id="labReply" href="/edit" key="reply">[回复]</a>&nbsp;&nbsp; </span><span id="Node_Del_Menu">&nbsp;&nbsp;

                        &nbsp;<a id="labDelete" href="/edit" key="delete">[删除]</a>&nbsp;&nbsp; </span><span class="comment-floor"><a href="#" id="labRow">#52楼</a></span>

                </div>

                <p id="divBody">

                    评论内容

                </p>

                <div id="Node_Reply" class="code">

                    <span key="reply">回复</span>： <span id="labReBody">回复的内容很长很长...... </span>

                </div>

            </li>

        </ul>

</div>

 

关键ID说明：

1：id="labUserID" 用户头像的A链接  id="labHeadUrl" 用户头像

2：id="labNickName" 用户昵称

3：id="divCreateTime" 回贴时间 [xml同一个界面不允许存在相同id所以前这里用div]
 
4：id="divBody" 回贴内容

5：id="labRow" 回贴楼数

6：id="Node_Reply" 控制回贴节点显示id="labReBody" 回贴的内容

7：回复与删除
id="Node_Reply_Menu" 控制回复权限显示 id="labReply" 回贴链接
id="Node_Del_Menu" 控制评论删除权限显示id="labDelete" 删除链接

评论的分页显示说明：

评论多时也带分页，只要引用commoncache.html里的评论ID，即可。
示例：

<div cachefrom="Node_Pager">本节点引用commoncache.html里ID为Node_Pager的分页节点</div>


3：评论发表框

示例代码：

    <div id="Node_PostComment">

        <form method="post">

            <input type="hidden" value="PostComment" name="myAct" />

            <p>

                <label key="nickname">

                    昵称</label>:<input keyvalue="anonymous" name="txtNickName" id="txtNickName" type="text" maxlength="20" value="游客" />

                <a id="labReg" href="/reg" key="reg">注册会员</a>

            </p>

            <p>

                <textarea id="txtBody" name="txtBody" cols="65" rows="8">  </textarea>

            </p>

            <p>

                <input keyvalue="submit" name="Submit" type="submit" value="提交" />

                <span id="postMessage"></span>

            </p>

        </form>

</div>

基本说明：

1：涉及到提交的地方，都有<form method="post">…</form>

2：Form里有一个隐藏域：<input type="hidden" value="PostComment" name="myAct" />：name是固定的值，value区分提交的命令。

3：对于提交的文本框：需要有id[用于操作]和name[是post提交数据所用]。

关键ID说明：

1：用户昵称：
用户昵称文本框：name="txtNickName" id="txtNickName"
未登陆时的注册链接：id="labReg"

2：回贴文本框：id="txtBody" name="txtBody"

3：提交按钮：随便一能提交的按钮

4：id="postMessage" 提交错误时出来的消息

 

总结：

博客皮肤文章这一块，就到这里结束了。

基本上就两个页面，一个文章列表和文章帖子页。

即：index.html，articlelist.html，articledetail.html。

如果皮肤以文章为主，不包含图片，首页[index.html]和文章列表[articlelist.html]就是一样的了。

因此制作一套皮肤，基本上就做两个页面就可以了。

至于commoncache.html不是必须的，如果你想抽取共同代码到这里，让其它页面简洁一点，也可以使用。

本篇介绍到此结束，如果你的博客以文章为主，本系列到此即结束了。

如果对博客图片列表感兴趣，欢迎关注下一篇图片相关的介绍。

系列索引见：QBlog 模板制作教程

相关文章：

1：ASP.NET开源博客QBlog模板制作教程:博客模板皮肤介绍说明(一)

2：ASP.NET开源博客QBlog模板制作教程:博客首页-标题|介绍|菜单导航|博登陆注册退出|多语言导航(二)

3：ASP.NET开源博客QBlog模板制作教程:博客首页-博客公告|文章分类|归档|相册分类|最新评论](三)

4：ASP.NET开源博客QBlog模板制作教程:博客首页-博客最新文章|阅读排行榜|点击排行榜|友情链接|访问统计(四)

5：ASP.NET开源博客QBlog模板制作教程:博客首页-文章列表与分页控件(五)

视频类：

开源博客QBlog开发者视频的模板制作教程：QBlog开发者视频教程:博客皮肤模板制作指南-模板之拿来主义(六)

秋色园是QBlog的官方站点,由路过秋天创建,基于cyqdata数据层框架开发的支持多用户、多语言、多数据库(access,mssql,oracle)、目录级url等功能强大的博客系统
新浪微博粉丝精灵，刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"
 QBlog 模板制作教程   浏览(7647)   评论(0)   关键字 asp.net开源博客,qblog模板制作教程,博客文章详细页,帖子详细,评论列表,评论框
:会员注册
  
Copyright © 2010-2020 power by CYQ.Blog - 秋色园 v2.0 All Rights Reserved