目录介绍及首页分析-使用TEEBB快速搭建您的网站

TEEBB基于Symfony开发，我们来了解下symfony的目录结构：

bin：目录下放置了console命令行文件，

如果你没有安装symfony 命令行工具，可以使用

php bin/console 

来执行symfony命令。

config：目录用来放置Symfony的配置文件，

通常使用yaml格式来编写，在Symfony中请使用4个空格做排版。

public：是Symfony的入口目录，index.php就在这个目录，

如果我们使用apache 或者nginx启动项目，通常将项目的根路径配置到public目录。

另外我们的js css和我一些可以公开访问的图片也放置在这个目录，

浏览器可以直接通过路径来访问到public目录中的文件。

src：目录是项目源代码目录，我们自己编写的php代码将放到src目录中。

templates：是模板文件目录，我们编写的.twig模板文件放置在这个目录中。

TWIG是Symfony使用的模板引擎，

TEEBB也提供了一些TWIG函数来获取TEEBB中的内容。

twig很容易上手，跟上课程、我将在几分钟内教会你twig的简单使用。

translations： 如果你要做国际化，通常把翻译文件放在这里，

你可以使用yaml文件来进行翻译，也可以使用xml文件来翻译。TEEBB使用了yaml。

var：目录是系统的缓存和日志目录

Symfony中的bundle和一些第三方bundle都存放在vendor目录中，这个目录中的文件在使用

composer update更新时会自动替换，所以不要修改这个目录中的内容。

如果需要修改bundle中提供的twig模板我们可以通过覆盖的方式来修改。后面我会讲到。

 

打开teebb.com网站，我们对网站的页面进行分析。

整体浏览，页面分为：

这里可以叫做顶部导航区，从上至下依次是二级导航区、主导航区、

二级导航区左侧是一条最新的网站公告，右侧是二级菜单。

主导航区左侧是logo，右侧是主导航。

导航区下方是:

banner区，banner通常展示一些醒目的信息，在列表页banner还可以放置一篇置顶内容。

列表页、视频课程页面、banner区上方还有一个通用区块，这里用来放置面包屑或者列表页的标题

banner区下方是我们的内容区块了，这里通常根据页面动态显示内容。

底部footer区通常放置一些站点链接、版权、备案号等等信息。

多浏览几个页面，你会发现，整个网站的顶部 和底部是通用的。

我们将会对此进行提取，实现模板的共用。

回到首页顶部：

在顶部导航区需要展示一篇公告内容，

可以在TEEBB控制台添加一个公告内容类型，

他包含标题、公告正文、封面图像。

对于顶部的二级菜单和主菜单，我们使用TEEBB中自定义菜单功能、创建好对应的菜单，再使用twig函数渲染菜单就可以了。

作为首页通常banner区块的内容并不需要经常修改，这里我们将会用硬编码的形式完成。

内容区块的上部分并不需要经常经常修改，我们也用硬编码的形式完成。

在最新动态这里：将显示最新的两篇动态内容，这里将使用teebb提供的block函数来完成展示。

底部footer区块，并没有需要动态展示的内容，在这里我们以硬编码的形式来完成页底界面。

如果你想灵活一些，可以在TEEBB控制台创建一系列菜单并在页底渲染显示。
 

我已经将页面html模板上传到github，

在指定目录中使用：

 git clone https://github.com/teebbstudios/teebb-com.git 

来下载页面代码。

 

TEEBB并没有开发前台的默认页面，我们需要自定义页面路由。

Symfony框架为我们提供了make命令。我们使用：

symfony console make:controller 

创建站点首页路由。

Controller名称我们输入FrontController

我们看到命令行提示：

Symfony为我们创建了controller类

并在templates目录中添加了twig模板文件。

打开FrontController.php 文件，命令行为我们自动生成了一个index函数：

    /**
     * @Route("/", name="index")
     */
    public function index(): Response
    {
        //Todo: 数据处理
        return $this->render('front/index.html.twig', [
            'controller_name' => 'Hello World！',
        ]);
    }

Symfony使用注解来操作页面的路由，/front 是页面的路径、 name:是路由的名称，路由名称需要全局唯一。

我们进行一些修改，首页只需要/就可以了，name我们修改为index，打开首页我们看到自动生成的默认显示。

index函数我们叫做action函数，当访问到对应页面地址时，路由系统会进行uri匹配，并运行对应的Action函数。

我们可以在路由的Action函数中进行数据的处理、最后使用render方法将一些数据渲染到模板文件中。

 

苹果电脑按command键，windows系统按ctrl键点击模板文件名，打开twig文件。

在twig中我们使用 {{ }} 来显示常规的变量，

刚才的controller中我们给twig模板传入了"controller_name"参数,

在页面中使用{{controller_name}}显示这个参数，我们可以在Action中修改值，刷新，页面的信息也修改了。

 

twig使用{% %}来进行区块定义、条件控制和其他的一些操作。

第一行使用extends关键字来继承twig模板，

可以在当前模板中覆盖父模板的区块。

按着command windows下按ctrl键 点击base.html.twig 打开文件，我们看到了熟悉的html标签。

在base.html.twig中定义了一些常用的区块。

 

下一步，你知道怎么做了吗? 我们将参考自动生成的文件。将我们下载的页面写入templates目录index.html.twig文件。