做界面最好从交互比较多的页面入手，目前交互元素比较丰富的，有新闻列表页和新闻显示页。
为了开发快速，但也不会让界面太难看，我打算直接用Twitter Boostrap3了。
如果是看过我前几期文章的同学一定能猜得到，我一定又要说：“是的，像boostrap3这种常用的前端开发框架，相应的Bundle也是有的”。没错！这次我向大家推荐MopaBootstrapBundle，里面包含了使用LESS/SASS编译Boostrap CSS，支持让Symfony2框架以及常见Bundle比如我们的用过的KnpPaginatorBundle在模板渲染阶段自动使用Bootstrap的标签形式输出。还是会给大家的开发带来一定的方便。
当然，其他的选择也是有的，目前我们公司的项目采用的就是直接用Bower来安装项目需要的各种js/css。
不过且慢，对于我们这种小应用来说，为了更快的开发速度，我打算采取直接引入第三方网站提供的js和css公共库镜像。最近我做一些小站都会采用这种方式，除了不用去维护这些静态文件，也能天然实现“JS/CSS应Cookie Free“这样的最佳实践。
目前H5的页面已经非常流行了，也为了我们能快速出页面，我想直接使用HTML5应该都没意见吧。好吧，说到这里……我又有要推荐的：HTML5 boilerplate。Boilerplate就是样板文件的意思，不是直接用，而是给大家做参考用的。那么我们就把它复制到我们的模板中。
可能大家已经注意到了，在app/Resources/views目录里面有一个base.html.twig。目前我们接触过的模板文件，开头第一句都是
|
1
2
|
{% extends 'base.html.twig' %}
|
大家都知道子类继承父类，都需要extends一下，这里是一个意思。
这里有些同学可能又注意到，有的模板文件在base.html.twig之前，会有两个冒号::，出现这种情况的模板文件应该都是使用DoctrineBundle的代码生成工具生成的。冒号在指定模板路径的时候，是有特殊含义的，这里我们先不用管它，因为Symfony2.6已经推荐忽略这两个冒号的写法。
好的，现在我们将HTML5 Boilerplate项目里src目录下的index.html里的代码拷贝到app/Resources/views/base.html.twig，并做一些调整：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Symfony2新闻</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('/css/main.css') }}">
</head>
<body>
<script src="{{ asset('/js/main.js') }}"></script>
</body>
</html>
|
因为教程只是为了演示目的，保持文章尽可能小的篇幅，我把一些浏览器检验，Google统计代码之类的东西，都已经删除掉了。实际项目中，你最好每行代码都过一遍。
然后我们把boostrap3所需要的js和css加载进来，这里我们采用百度提供的公共代码库：
|
1
2
3
4
5
6
7
8
9
10
11
|
<head>
...
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.css">
</head>
<body>
...
<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
|
注意我写的镜像路径是//开头，这样写的好处是，如果你的网站是支持HTTPS访问，那么静态文件镜像地址也是https开头，防止浏览器出现“安全链接中包含不安全链接”的提示。当然，也得确认镜像提供网站是否支持https访问。
添加上我们的Logo，感觉首页已经有点像模像样了呢：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ path('home') }}">Symfony News</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
</div>
</div>
</nav>
</body>
|
接下来是添加导航栏里的菜单项：目前只有一项——新闻。我们可以按照Boostrap3的方式开始码代码，不过需要注意的是，如果当前正在新闻栏目的页面，新闻菜单还应该是选中的状态。先不要着急想如何解决这个问题，因为又有现成的Bundle实现了这个需求：KnpMenuBundle
|
1
2
|
$ composer require knplabs/knp-menu-bundle
|
注册Bundle:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// app/AppKernel.php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ...
new KnpBundleMenuBundleKnpMenuBundle(),
);
}
}
|
创建菜单的类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// src/AppBundle/Menu/Builder.php
namespace AppBundleMenu;
use KnpMenuFactoryInterface;
class Builder
{
public function navMenu(FactoryInterface $factory, array $options)
{
$menu = $factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav navbar-nav');
$menu->addChild('home', [
'route' => 'home',
'label' => '首页',
]);
$menu->addChild('news', [
'route' => 'news',
'label' => '新闻'
]);
return $menu;
}
}
|
最后在模板文件里使用KnpMenuBundle来渲染菜单：
|
1
2
3
4
5
6
7
8
9
10
|
{# app/Resources/views/base.html.twig #}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
<div class="collapse navbar-collapse" id="main-nav">
{{ knp_menu_render('AppBundle:Builder:navMenu', {'currentClass': 'active'}) }}
</div>
</div>
</nav>
|
并在自定义css文件里添加如下样式：
|
1
2
3
4
5
|
<!-- web/css/main.css -->
body {
margin-top: 70px;
}
|
这样我们就得到了一个崭新的导航条！注意，KnpMenu已经帮我们自动处理好了当前菜单的选中状态：
OK，让我们点进“新闻页面”，好吧，虽然比之前好了一些，但依然还有太多改进的空间：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{# app/Resources/views/news/index.html.twig #}
{% extends 'base.html.twig' %}
{% block body %}
<div class="row">
<div class="col-sm-8">
<p><a class="btn btn-primary" href="{{ path('news_new') }}">+ 发表新闻</a></p>
{% for entity in pagination %}
<section>
<header><h2><a href="{{ path('news_show', { 'id': entity.id }) }}">{{ entity.title }}</a></h2></header>
<p>{{ entity.body }}</p>
</section>
{% endfor %}
{{ knp_pagination_render(pagination) }}
</div>
</div>
{% endblock %}
|
另外base模板依然需要保留body block:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
...
</nav>
<div class="container">
<div class="content">
{% block body %}{% endblock %}
</div>
</div>
<script ...
</body>
|
刷新页面看几看效果，页码显示还是太简陋，还好KnpBundle里自带了bootstrap3风格的模板，我们来设置使用它：
|
1
2
3
4
5
|
# app/config/config.yml
knp_paginator:
template:
pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig
|
虽然依然很简单，但是不是要比以前好看多了呢？
好吧，我突然觉得前端要写的代码还真多，所以还是分成两天来说好了
可能有的小伙伴改着改着base.html.twig的代码就乱了，这里我把最后的base模板都发上来
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
{# app/Resources/views/base.html.twig #}
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>symfony.cn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('/css/main.css') }}">
</head>
<body>
<!-- Add your site or application content here -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Symfony News</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
{{ knp_menu_render('AppBundle:Builder:navMenu', {'currentClass': 'active'}) }}
</div>
</div>
</nav>
<div class="container">
<div class="content">
{% block body %}{% endblock %}
</div>
</div>
<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
|