SharEDITor

教你成为全栈工程师(Full Stack Developer) 十九-文章内容展示页面设计

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-05-01 15:08:58 阅读632次


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

请尊重原创,转载请注明来源网站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一样,以后只需要在后台管理管理文章就行了