00:00
大家好,这节课我们来看一下HT模板。那什么是A模板呢?我们来想一个问题。看一下我们运行的这个项目。这是我们运行的五米GS的这个项目。首先我们用的是react,诶之前我们在学习react的时候,我们知道app.js啊,这个组件是要挂载到htimer的一个ID为root的一个div容器上啊,但是我们项目拉下来之后,大家可以看到。只有简简单单的,哎,这两这几个文件啊,就是说这两个文件,其他的还是我们后来创建的对吧,那我们并没有看到一个idv root的一个div容器,也没有看到我们的这个HTML啊,以及我们的啊这个hier body等等的HTML结构体,对吧,你看。这个也是我们自己创建的,对吧,那。
01:02
我们想一想。既然没有这个HT,它是怎么样去挂载的呢?啊,我告诉大家实际上是有的啊,只不过它这个HT文件在哪呢?在这个NPM里面。是五米GS的一个扩展里面啊,就是五米GS的这个库里面,我来找一找啊。啊,在这五米GS啊,这种艾特书开头的。然后找到它的这个核心。有一个level h看一下这个啊,这个啊,刚才这个点错了,document.egs那这里是不是大家就看到了这个ID为root的这个div啊,以及这个我们的h timel head body啊,对,实际上那我们的这个无米项目,它用的htimer文件就是这个文件啊,那EGS呢,是一个模板引擎啊。
02:04
好,但是我们来想一个需求,有时候。我们需要去引入一些,呃,比如说第三方的一些3S啊,或者说是呃,在这个CDN上的一些一些GS啊,因为并非所有的GS我们都有现成的NP包可以用一些比较比较旧的,哎,但是又比较呃特别的我们用得到的,那就需要自己去引入啊,这时候你想怎么办?你是不是会想到在这里面去引入啊,我告诉大家不要去改node models里面的任何东西。诶,因为这个东西它不会进版本库,你看它的颜色就知道了,而且在这个里面它会被这个get版本版本库给忽略,这是一点,呃,还有一点就是说,我们实际上在往服务器上去部署项目的时候,是不要这个目录的,我们可以根据。这个文件,哎去哎,Install去重新安装生成这个目录,所以你一旦在这个里面去改了东西的话,你下次安装就没有了。
03:06
对吧,但是我们还要解决自己的问题,我们确实有时候需要啊,引入一些额外的东西怎么办呢?我们来看一看官方怎么说的啊,官方手册在这里啊,我们如何去修改默认的模板,那他现在这个我们看到这个node models里面的这个模板就是它默认的一个模板,那怎么去修改这个默认模板呢?先给大家打开一下啊。可能还得看到,看一看它里面的这个代码。在这啊好,那这个就是它的一个默认的一个模板,怎么去修改它这个默认的模板呢?啊,我们可以在src配置,然后里面去新建一个这样的一个文件。约定啊,这是这也是五米的一个约定。约定这个文件如果存在,它就会作为默认模板,它就不用这个no models里面的啊,其实你通过这个几节课的学习,大家会发现五米GS他用了很多这种约定上的一个呃,行为啊,然后我们来新建一下这个文件。
04:18
在这个pages目录下新建一个文件。好在这个文件里面,我们就直接拿官方的这个代码。然后我们来写一个标题,H3自定义模板,这个时候我们再回过头来刷新,可以看到啊,是不是自定义模板,这样就用到了我们自己定义的这个模板,而不是用的默认的这个了啊,那大家可以看到默认的这个模板里面呢,它用到了这个context啊,改con等等等等,用到了这样的一个语法,这个其实像外面的这个符号呢,就是呃,EGS模板引擎的一个语法,然后这个里面呢,就是我们能使用的一些这个。
05:12
啊变量啊,一些数据,一些变量,那我看看我们能用的有哪些呢?在手册里面也给我们说了,模板里面可以通过这个contact获取,哎,五米提供的变量contact呢,主要就包含哎root路由的信息,以及我们就是conf配置的一些信息。比如我们配置的这个,呃,这个静态资源的一个路径等等啊啊。那我们这里写完之后呢,我们来尝试去引入一个第三方的一个样式去看一下啊,看看效果来打开boot c dn,等会boot c dn。
06:01
然后我们来找一个看一下啊。引入它的一个样式。找一下啊。找到啊,这个BOP的这个样式我们来啊,这是GS,我们要找CS。在这复制一下它的这个标签粘贴一下。接下来我们来写一个这个的button。BOO,给上它一些样式啊,这是photo带的一些样式啊,来保存回车头刷新一下。
07:01
可看到诶,这个BOO的按钮就有了啊,那这个就是我们。自定义啊,就是说修改了它的这个默认的一个模板啊,当大家如果有这方面的需求的时候,就可以在这下面去新建这么一个文件来修改它自定的模板,这样的话我们可以在这里面去,哎,比如说呃,自定义我们的logo啊,我们引入的一些第三方的一些样式,或者这个呃GS啊等等啊,当然是考虑到是没有这种NPM包的,这种GS我们可以在这里引入,如果有对应的NPM包的话,我们直接在组件里面去呃使用就可以了啊,然后在这个模板里面呢,我们还可以使用。提供的这个context啊,来获取我们的配置信息,比如我们配置的路径,配置的这个,呃,其他的一些内容等等啊,那这节课就到这里。
我来说两句