目录介绍及首页分析-使用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文件。





 

课程讨论

当前内容评论功能已关闭。