十七、网站分类列表页面设计

上一节我们完成了高大上的主页，并展示了每个分类，那么按照常理，用户点击分类项怎么能展示出这一分类的博客列表呢？我们这一节来制作分类列表页

请尊重原创，转载请注明来源网站www.shareditor.com以及原始链接地址

创建一些文章

 

首先，为了能展示我们的效果，我们先在后台创建几篇文章，例如如下：

 

 

 

安装分页插件

 

列表性质的页面一般都需要做分页处理，这个工作要是让我们自己处理是十分繁琐的，所以我们利用symfony2的扩展knp-paginator-bundle。

 

修改app/AppKernel.php文件，增加如下注册语句：

new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),

 

修改app/config/config.yml，增加如下配置：

knp_paginator:
    page_range: 5                      # default page range used in pagination control
    default_options:
        page_name: page                # page query parameter name
        sort_field_name: sort          # sort field query parameter name
        sort_direction_name: direction # sort direction query parameter name
        distinct: true                 # ensure distinct results, useful when ORM queries are using GROUP BY statements
    template:
        pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig     # sliding pagination controls template
        sortable: KnpPaginatorBundle:Pagination:sortable_link.html.twig # sort link template

 

解释一下，KnpPaginator是一个分页插件，配置项中page_range是默认的每一页的条目数，其他几个配置项可以不用详细了解

pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig这个是配置分页中底部页码部分的样式模板，有几种可以选择：

• KnpPaginatorBundle:Pagination:sliding.html.twig (by default)
• KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig
• KnpPaginatorBundle:Pagination:twitter_bootstrap_pagination.html.twig
• KnpPaginatorBundle:Pagination:foundation_v5_pagination.html.twig

 

 

修改controller

 

修改src/AppBundle/Controller/BlogController.php，把其中的listAction函数内容改成：

    public function listAction(Request $request, $subjectId)
    {
        $em    = $this->get('doctrine.orm.entity_manager');
        $dql   = "SELECT a FROM AppBundle:BlogPost a WHERE a.subject=" . $subjectId . " ORDER BY a.createTime DESC";
        $query = $em->createQuery($dql);

        $paginator  = $this->get('knp_paginator');
        $pagination = $paginator->paginate(
            $query,
            $request->query->get('page', 1)/*page number*/,
            10/*limit per page*/
        );

        return $this->render('blog/list.html.twig', array('pagination' => $pagination));
    }

 

解释一下，注意这次listAction参数里除了$request之外，多出了一个$subjectId，这是和后面要配置的路由相对应的，表示会在url里传过来一个subjectId的数值。

看$em这一行，在symfony2中对model的操作都需要先获取到EntityManager进行操作

第二行$dql赋值是一条sql语句，这里面根据$subjectId来从数据库里取BlogPost，并且按照createTime来排序，这里面需要注意的是：sql语句中写的变量名不是数据库表的字段名（小写），而是model类里定义的成员名

$pagination这一行则是调用分页插件的函数，默认取第一页，最后一个参数10表示每页展示多少条，这个会冲掉app/config/config.yml配置的5，这里面的$pagination是一个对象数组，每个成员都是一个BlogPost这个model的对象

 

 

修改模板

请尊重原创，转载请注明来源网站www.shareditor.com以及原始链接地址

修改app/Resources/views/blog/list.html.twig，把内容改成：

{% extends "base.html.twig" %}

{% block body %}

<div class="row">
    <div class="col-sm-3 col-xs-1"></div>
    <div class="col-sm-6 col-xs-10">

        <br />
        {% for article in pagination %}
        <div style="background-color: whitesmoke; padding-left: 30px;padding-right: 30px;padding-top: 10px;">
            <div class="row">
                <div class="col-sm-2 col-xs-2"></div>
                <div class="col-sm-8 col-xs-12">
                    <div class="row">
                        <h3>{{ article.title }}</h3>
                    </div>
                </div>
                <div class="col-sm-2"></div>
            </div>
            <br />
        </div>
        <br />
        {% endfor %}
        <div class="navigation">
            {{ knp_pagination_render(pagination) }}
        </div>

    </div>
    <div class="col-sm-3 col-xs-1"></div>
</div>

{% endblock body %}

 

解释一下，pagination是一个对象数组，for循环遍历每一个对象，通过{{ article.title }}获取它的title属性展示出来

下面的{{ knp_pagination_render(pagination) }}是分页插件特有的功能，就是底部页码的按钮部分

 

配置路由

 

修改app/config/routing.yml，把曾经添加过的：

blog_list:
    path:     /bloglist/
    defaults: { _controller: AppBundle:Blog:list }

 

改成：

blog_list:
    path:     /bloglist/{subjectId}
    defaults: { _controller: AppBundle:Blog:list }

 

解释一下，这里的{subjectId}会自动传到controller中，并以参数形式传到listAction里，见上面listAction函数的实现

 

好，现在打开http://172.16.142.130/app_dev.php/bloglist/4，（这里的4是Subject的id，你可以查看你的数据库看你的subject的id都有哪些值）

 

 

从首页点进来

 

我们先打开首页http://172.16.142.130/app_dev.php，点击一个图标，就能直接进到博客列表页，这是怎么做到的呢？其实我们在上一节已经做好了相关准备，看下app/Resources/views/default/index.html.twig里的这几句：

        <a href="{{ path('blog_list', {'subjectId':subject.id}) }}" class="thumbnail">
            <img src="{{ subject.photo }}" alt="{{ subject.name }}">

            <div class="caption">
                <h3>{{ subject.name }}</h3>

                <p>{{ subject.introduce }}</p>
            </div>
        </a>

 

这里面的a标签已经把跳转链接写成了{{ path('blog_list', {'subjectId':subject.id}) }}，它会自动从路由配置里找到名字为blog_list的路由，并把subject.id的值传递到subjectId变量中

 

下一节我们继续对博客列表也做一些美化，然后开发博客的展示页