十八、让网站分类列表页变得更漂亮

最新推荐文章于 2024-03-19 15:51:00 发布

jiangjingxuan

最新推荐文章于 2024-03-19 15:51:00 发布

阅读量1.5k

点赞数

分类专栏：做一个全栈工程师

做一个全栈工程师专栏收录该内容

47 篇文章 4 订阅

订阅专栏

爱美之心人皆有之，对于一个追求完美的你来说，丑陋的列表页实在是看不下去，这一节对列表也做一些美化，让它不那么丑陋，或者说有一点点的美感

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

添加图片属性

有图有真相！一篇好的博客怎么能没有漂亮的图片来搭配呢？我们来在BlogPost中增加图片属性，之后展示到列表页和博客内容页中。

修改src/AppBundle/Entity/BlogPost.php，增加如下成员变量：

    /**
     * @var Media
     *
     * @ORM\ManyToOne(targetEntity="Application\Sonata\MediaBundle\Entity\Media")
     */
    private $image;

同时增加如下get和set方法：

    /**
     * @return Media
     */
    public function getImage()
    {
        return $this->image;
    }

    /**
     * @param Media $image
     */
    public function setImage($image)
    {
        $this->image = $image;
    }

执行

[root@centos7vm mywebsite]# php app/console doctrine:schema:update --force

更新数据库

这里你不必担心已经写入的数据库被冲掉，它其实调用的是mysql的alter语句，加一列不会删数据

添加图片属性的管理项

修改src/AppBundle/Admin/BlogPostAdmin.php中的configureFormFields方法，在

            ->add('title', 'text')

下面加入一句：

            ->add('image', 'sonata_type_model', array(
                'property' => 'name'
            ))

并修改configureListFields方法，在

            ->add('category.name')

后面加入一句：

            ->add('image.name')

OK，重新进入管理后台，编辑一个Blog看到多处了这样的编辑项：

这里图片可以选择，也可以添加，我们把已有的每一篇文章都添加一张不同的图片，最终像下面的样子：

文章摘要生成

每篇博客可能会很长，但是希望它能在列表页中展示一个摘要文本，通过文章生成摘要是一个long story啊，太难了，所以我们干脆在每篇文章撰写时先写一段摘要放到篇头，然后用一个分割线表明下面才是真正内容。好，我们修改src/AppBundle/Entity/BlogPost.php文件里的BlogPost类，添加一个getAbstract方法，如下：

    /**
     * body去标签然后截取前多少个字,在twig中使用方法:{{ article.abstract }}
     * @return string
     */
    public function getAbstract()
    {
        $pos = strpos($this->body, '<div style="page-break-after');
        if ($pos > 0) {
            return strip_tags(substr($this->body, 0, $pos));
        } else {
            return strip_tags(mb_substr($this->body, 0, 100, "utf-8")) . '...';
        }
    }

讲解一下，这里的'<div style="page-break-after'是经过实践得出的一个分割线的标识，也就是我们在博客编辑框（ckeditor）里面输入这个东西的效果：

strip_tags是php自带的函数，用来去掉html标签，保留文本内容。

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

总结起来这个getAbstract的功能就是把BlogPost的body内容在分割线前面的部分提出来，并提出其中的纯文本内容，如果body中没有找到分割线，那么就截取前100个字符。

文章创建时间规范化

我们数据库中文章创建时间是DateTime类型，也就是年月日时分秒，我们在页面展示时并不需要这么详细，所以对这个字段做一些简化处理，同样在BlogPost类中添加如下方法：

    /**
     * 创建时间转成字符串才能展示
     * @return string
     */
    public function getCreateTimeStr()
    {
        $newDate = $this->createTime->format('Y-m-d H:i');
        return $newDate;
    }

修改模板文件

重新修改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-3 col-xs-10">
                        <a href="{{ path('blog_show', {'blogId':article.id}) }}">
                            <img style="width: 100%; height: 100%; margin:10%;" src="/uploads/media/default/0001/01/thumb_{{ article.image.id }}_default_small.{{ article.image.extension }}">
                        </a>
                    </div>
                    <div class="col-sm-1 col-xs-2"></div>
                    <div class="col-sm-7 col-xs-12">
                        <div class="row">
                            <h3><a href="{{ path('blog_show', {'blogId':article.id}) }}">{{ article.title }}</a></h3>
                        </div>
                        <div class="row">
                            <a class="btn btn-info btn-xs" href="{{ path('blog_list', {'subjectId':article.subject.id}) }}">
                                {{ article.subject.name }}
                            </a>
                            <a class="btn btn-success btn-xs" href="{{ path('blog_list', {'subjectId':article.subject.id}) }}">
                                {{ article.category.name }}
                            </a>
                            <small>发表于 {{ article.createTimeStr }}</small>
                        </div>
                        <br />
                        <div class="row">
                            <small>{{ article.abstract }}</small>
                        </div>
                    </div>
                    <div class="col-sm-1"></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 %}