QBlog官方博客

本博将记录与秋色园成长相关的历史路程及秋色园的开发进展等相关情况。
公告信息
欢迎光临秋色园官方博客,欢迎:下载与使用CYQBlog系统,并提出您的意见与建议。
文章档案
文章
ASP.NET开源博客QBlog模板制作教程:博客首页-文章列表与分页控件(五)
2011/6/28 22:34:53

上节回顾:ASP.NET开源博客QBlog模板制作教程:博客首页-共用部分[博客最新文章|阅读排行榜|点击排行榜|友情链接|访问统计](四)

 

本节介绍:ASP.NET开源博客QBlog模板制作教程之博客首页-文章列表与分页控件

一:index.html 首页制作-文章列表与分页控件制作教程

包括以下内容:[博客文章列表|分页控件列表]

以下进行示例教程:

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

1:博客文章列表

说明:文章列表,其实就是一个节点,然后不断循环出来的。

示例代码:

                <div id="labArticleList">
                    <div class="post">
                        <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"></span>
                            <span class="post-view">
                                <label key="comment">[评论]</label><label id="labCommentCount">0</label></span> <span class="post-comment">
                                        <label key="browse">[浏览]</label><label id="labHits">0</label>
                                    </span>
                        </div>
                        <div class="post-content" id="labAbstract">内容</div>
                    </div>
                </div>

关键ID说明:

id="labArticleList" :它下面的节点将被循环,循环输出文章

id="labTitle" :文章标题

id="labAbstract" :文章概要

编辑链接:
id="labEdit"  :用于控制权限,是否显示。
id="labID"  :用于定位文章的编辑链接

id="labCreateTime"  :发布时间

id="labCommentCount" :评论数

id="labHits" : 浏览数

2:文章分类名称与分类描述

说明:在点击文章分类显示时,有些模板皮肤有显示文章分类与分类描述[如默认(/skin/Default)模板]

仅在要显示的地方补充上两个关键ID即可:

关键ID说明:

id="labName" :文章分类名称

id="labDescription" :文章分类描述

3:分页控件列表

说明:在涉及到列表时,包括文章列表或评论列表,都有分页显示控件。

示例代码:

                <div class="pager" id="Node_Pager">
                    <div>
                        <a id="labFirst" key="pagerfirst">首页</a> | <a id="labPrev" key="pagerprev">上一页</a> <span id="labForNum" active="current"><a id="labNum" href="/cyq1162/2"></a></span><a id="labNext"
                            key="pagernext">下一页</a> | <a id="labLast" key="pagerlast">尾页</a>
                    </div>
                </div>

关键ID说明:

id="Node_Pager":代码分页节点,在文章没有达到需要分页时,会移除此节点。

id="labFirst" :首页
id="labPrev" :上一页
id="labNext" :下一页
id="labLast" :尾页

id="labForNum" :里面的数字将会被循环
active="current" :当页的页数字会使用“current”样式

id="labNum" :分页的数字

本篇介绍到此结束,下一篇:ASP.NET开源博客QBlog模板制作教程:博客文章详细页-帖子详细|评论列表|评论框(六)

内容:模板制作教程为博客文章详细页内容

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

相关文章:

视频类:

秋色园是QBlog的官方站点,由路过秋天创建,基于cyqdata数据层框架开发的支持多用户、多语言、多数据库(access,mssql,oracle)、目录级url等功能强大的博客系统
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"
  
Copyright © 2010-2020 power by CYQ.Blog - 秋色园 v2.0 All Rights Reserved