00:01
定义模板,所有的页面都会继承公有的模板,作为一个模板至少得具备。啊,一个网站的一个头部和底部,还有一些公共的CS和GS,这些都是可以复用的,不用每个页面都去引用啊,只要集成模板就可以了,这也是我们模板主要的一个作用。接下来我们去定义我们的模板。在开始之前,先把之前练习的页面都删掉。还有这里面的代码。现在可以开始了。首先我们新建一个啊,在VS里面新建一个模板的目录,比如说layout。在里面新建一个。APP点。Blade。这个作为我们的一个模板文件啊,写入我们的HTML代码。
01:04
好,写入hier。写入。在这里面写入。抬头。我们网站的一个头部。嗯,下面我们需要按照我们的需求进行呃拆分。首先title的话,要每个子页面都可以去实现自己的一个title,所以我们这里啊,使用这个右去显示一个title,然后在子页面中使用嗯,Sation来定义这个title就可以了。右title,哎,我们这里负责这个用右显示这个title在子页面啊,继承我们这个模板的时候,子页面使用section。来定义这个title。还有需要定义啊。
02:01
啊,网站的一个头部的。头部。这里放我们网站主要的一个内容啊网站。啊,内容最后还有一个底部。底部内容的话,我们要求每个子页面可以自己去实现啊,自己的一个内容,所以这里我们使用啊右进行形式。嗯,定义一个content。这是用div就卡。这是最基本的一个模板。接下来引入公共的三台的样式和一些公共的GS。
03:04
我们现在是一个新的一个项目,并没有一些啊。CSS和GS。这里我准备了一些啊,有。和我们的这个马可当相关的CS,还有波杰克RY啊,相关的一些GS。啊,我们把这些公共的GS给。引进来啊。在这里引入,首先要把文件放入到我们的项目。像这种GS和CS这种静态资源的话,一般放在。Public目录啊。里面的这个,呃,这个。GS和CS,它是一些未编译的一些原始的一些建子,比如说ss Les之类的啊,未编译的内容,那我们这种编译好的直接用来被网站使用的呢,是放在public。对吧,在这里面我们去新建CSS一个目录,用来放我们的CSS。
04:06
新建一个GS的目录,用来存放我们的GS,有时候你可能还需要一些图片,所以这里去建一个。啊的一个目录。接下来先把文件放到这个C目录中。直接啊复制这些文件。CTRLC,然后。点选这个目录粘贴就可以粘贴过来。好,文件已经粘贴过来了,接下来把GS去粘贴一下。这些GS。GS也粘贴过来了。啊,接着在我们的这个模板文件中去引入公共的CS和公共的GS,注意啊,我们这个是比如说马可当GS的话,只有在我们的详情会用得到,所以不算是公共的,但是像这种lab的这种CSS就是公共的,我们引用这个啊。
05:05
Link。看。呃,如何使用我们public下面的静态资源呢?我们可以使用。啊。Access辅助函数,你要执行PP的一些代码的话呢,是要加上这个双括号的啊,Access辅助函数它这个辅助函数它是可以指向这个public目录,所以我们只需要直接写CSS就可以了。它就表示了这个public目录啊。CS下面的啊。Boot。差点me.CS啊。好。接下来去引入公共的GSGS的话,我们一般放在代码的最后去引入。在这里去引入。SC。看一看哪些是公共的GS?
06:01
啊,公共的GS首先是一个结块位,同样的,我们使用这个access辅助函数去引入我们的静态资源。啊,它是直接指向public目录,所以我们只要输入这个GS目录就可以了,GS下面的。J query先引入啊,J query。接着再引入。这个文件啊。这中间。呃,名字如果太长的时候,你不想输入的话,你可以直接复制啊,看到谁复制这个文件,然后它粘贴到我们的这个编辑地区的话,它就是变成为这个名字的啊,使用我们的辅助函数。SGS下面的它。同样的,最后。需要引入。
07:04
GS下面的。啊。Boostrap。好,这些才是公共的,像比如说这个啊,肖当GS这些处理马克当的,一般我们只有在用到的页面才会去引用,对吧。好。啊,这样就引用完了,但是我们想一想啊,如果一个啊子页面继承了我们的模板,他想要写自己的一些样式和自己的GS怎么办?是不是我们还要在这里用U的啊来。显示这个指示图的一个CS或者GS对吧,我们在这里用右的定义一个style,这样的话指示图继承我们的这个模板的话就可以啊,用separation去定义。啊,这个style,而我们的主视图使用这个右去显示子视图定义的这个style就可以了。同样的我们在这里。定义一个,比如说显示这个指示图。
08:06
自己的一个script。这个放置的顺序啊,也是有一定技巧的,我们把啊用于子示图显示的script,还有这个style都放到了后面,首先说一下style我们放到了这个公共样式的后面的话。啊,子页面就可以去覆盖这些公共的一些属性。而script交位是放到了最后的话,子页面就可以使用啊公共。脚本,比如说提供的这个街拍的一些内容。有时候呢,我们可能还需要去。嗯,直接去写一些公共的一些啊词就可以在这里。去写一个标签啊,在这里写一些这个公共的脚本啊,当然如果这个代码量比较多的话,你还可以把它提取成一个文件。
09:02
好,同样的样式也是。可以在这里写一些公共的一些样式,如果啊样式比较多的话,也是可以把它提取成一个公共的文件啊,但是有时候我们引入的公共的样式会特别的多,包括一些啊GS也特别多。方便我们去管理。这时候怎么办呢?我们可以利用啊银可的指示图,将我们的这一块提取出去,对吧,提取成一个单独的一个文件,比如。我们在。模板文件啊,来模板文件。啊,新建一个。PP。叫我们的点。来的。这里就用来放我们的。啊,这个内容。把它给提取出去。然后在我们的主。
10:01
啊,这个主页面去引入它就可以了,使用include。引入。Layout下面的。Style啊,引入layout下面的style,如果是有目录的话,是用点来表示啊,不是斜杠,这个大家一定要记住是用点啊。同样的,我们把脚本也给提取出去。新建一个文件。叫script。第2B,把我们的代码粘进来。嗯,在主页面去引可录的layer下面的script。嗯。好,这样我们就把样式和脚本给加列出来了。啊,接着我们去看啊,我们的头部不可能说简简单的就这么一点代码吧,有时候头部的代码也会很多啊,包括底部的代码也会很多啊,如果放到这个文件里面,也会显得这文件比较大。不方便我们去看我们的这个,到底这个我们的模板定义了什么些内容。
11:05
啊,我们的门板是什么结构?所以我们把头部和底部也给剥离出去啊。来,给剥离出去。新建一个文件啊,叫header这。然后将我们的。头部的代码给拿出去啊,放在海带里面。同样在这里使用引可录的引入lay下面的head。底部的处理是一样的啊。嗯,新建一个文件。之后把底部的代码粘贴到这里。好,这里来引入layout下面的。这样的话啊,我们。
12:03
前端的这个页面的一个基本的结构就搭建好了。啊,包含了这个头部的一个提取,还有这个公共的样式的和。的一些提取。我们来写一个页面测试一下啊。在view下面新建一个。Test的页面吧。然后啊,这个页面呢,作为这个子页面,我们继承这个模板啊,继承这个模板。X。At。Layout下面的APP。看一看我们的这个APP里面都有什么区域要实现啊,比如这个头部啊,当然我们可以不写,不写的话这里是没有内容,所以说。
13:06
啊,最好我这里我们给一个默认内容,我先看一看啊,现在嗯,我们这些都不写,只去嗯写一个这个,因为现在只定义了这个两个啊,要显示的地方嘛,一个title,一个content,我们先来实现它啊。使用sation啊,接着是你要定义的区块的一个名字。Content。和这个对应啊,和它对应的话,这个右的就会显示我们子页面这里定义的一个啊,区块的一个内容摁。这里我写一个P标签,我是子页面啊。好,那这个头部我们先不去定义,先看看会有什么效果啊。这里访问。还没有定义路由啊,所以我们访问不了去定义一个路由。
14:04
定一个简单的路,简单路由直接返回页面的路由。Will。斜杠请求test。直接返回。嗯。他死了。这个test是我们的这个页面啊,页面的名字。好,可以看到头部有了,然后子页面也有了,底部也有了,对吧,说明我们的子页面已经完整的去啊,继承了这个模板的一个内容。啊,但是我们你看我们的标题没有,因为我们的子页面没有去定义这个标题,没有定义标题,所以说最好的话。啊,在这里标题我们给一个默认值啊。逗号,比如说博客。好。这样的话,即使啊子页面不去定义这个抬头,我们也会有一个默认值可以用啊,当然如果子页面去定义了这个抬头的话。
15:06
他就会用子页面的。博客首页。接着我们来检查一下它的这个源代码,看相应的呃,公共的样式和JS有没有引入。这是我们的源代码。可以看到样式和GS。都引入对吧。关掉啊。有时候子页面想要去写自己的样式,或者引入自己的一个啊,需要的一些特殊的样式,或者写自己的一些JS脚本。怎么办呢?啊,可以啊,在这个地方。去。实现啊这个style。End。可以在最后去。
16:01
使用separation去定义我们的脚本。Separation,那你们可能会说啊,你这个。模板里面没有这个右的这个。呃,Script啊,或者style的一个地方对吧,注意啊,它是在我们的这个指示图中,你看在我们的指示图中这里呢,是不是在这里去右导显示的,我们知道之前说过啊,当一个我们的这个主视图去引入了这个指视图的话。啊,会把它的这个内容。啊。都相当于把它内容都拿过来了嘛,都放到了这里。嗯,做个尝试。你在子页面。去写一个脚本啊,Create脚本,然后A了他一下。Hello。看一下我们的GS能不能正常执行。可以看到对吧,可以正常的一个执行,包括呃,我们尝试去打印一下这个。
17:04
JA query。都是可以的啊。这里打印的这个结块瑞。这样我们前端的一个基本的。啊,结构就搭建好了,就可以去写我们的页面了。先把这些测试的代码都删掉。关了。删除。
我来说两句