SharEDITor

教你成为全栈工程师(Full Stack Developer) 十八-让网站分类列表页变得更漂亮

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-04-29 17:32:11 阅读838次


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

请尊重原创,转载请注明来源网站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 %}

 

编辑我们的文章,都添加上分割线,重新打开我们的网站,进到博客列表页,看下效果还不错