十九、文章内容展示页面设计

前面已经对整个网站的布局做了周密的准备，下面就是最关键内容的展示了，完成了这一部分网站也就基本搞成了。本节我们把文章内容展示部分完成。

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

修改controller

 

修改src/AppBundle/Controller/BlogController.php，把BlogController类的showAction改成：

    public function showAction($blogId)
    {
        $this->blogPostRepository = $this->getDoctrine()->getRepository('AppBundle:BlogPost');
        return $this->render('blog/show.html.twig', array('blogpost' => $this->blogPostRepository->find($blogId)));
    }

解释一下

$blogId是BlogPost的id号，用来在url中传入参数，后面会通过路由配置来对应。

render函数通过参数传入的$this->blogPostRepository->find($blogId)是通过BlogPost这个model获取id为$blogId的文章的BlogPost实例

 

修改模板

 

修改app/Resources/views/blog/show.html.twig，把内容清掉并改成：

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

{% block body %}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-xs-1"></div>
        <div class="col-sm-6 col-xs-10">
            <div class="row">
                <h1>{{ blogpost.title }}</h1>
            </div>
            <div class="row">
                <a class="btn btn-info btn-xs" href="{{ path('blog_list', {'subjectId':blogpost.subject.id}) }}">
                    {{ blogpost.subject.name }}
                </a>
                <a class="btn btn-success btn-xs" href="{{ path('blog_list', {'subjectId':blogpost.subject.id}) }}">
                    {{ blogpost.category.name }}
                </a>
                <small>发表于 {{ blogpost.createTimeStr }}</small>
            </div>

            <div class="row">
                <hr/>
            </div>
            <div class="row">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <img style="width: 100%; height: 100%;" src="/uploads/media/default/0001/01/thumb_{{ blogpost.image.id }}_default_big.{{ blogpost.image.extension }}">
                    </div>
                </div>
                <br/>
                {{ blogpost.body|raw }}
            </div>
        </div>
        <div class="col-sm-3 col-xs-1"></div>
    </div>
</div>

{% endblock %}

配置路由

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

修改app/config/routing.yml，把之前写过的：

blog_show:
    path:     /blogshow/
    defaults: { _controller: AppBundle:Blog:show }

改成：

blog_show:
    path:     /blogshow/{blogId}
    defaults: { _controller: AppBundle:Blog:show }

 

打开博客列表页，点击一篇文章标题，看下效果吧

总结

至此，我们的网站内容已经达到可以发布上线的状态了，方法可以参考前面章节讲过的服务器那些事，你可以申请一个阿里云服务器，注册个域名，部署上去，就像我的网站www.shareditor.com一样，以后只需要在后台管理管理文章就行了