010-对比系统布局模板添加一些必要代码

本节我们打开看下系统的一个布局模板，看看有哪些默认代码必要添加

我们打开路径` \\template\\index\_style\\default\\index\\pc\_layout.htm`

因为系统默认的是有手机版和PC版模板，我们打开pc版的看下，手机版都是差不多的![](https://img.kancloud.cn/15/00/1500ce23830d5be9535b61fab8b72ce5_689x337.png)

先看头部这块，系统默认的模板，title 一些link script 都是用区块包裹的，方便我们重写，其实很多我们做模板的时候都会用到所以直接复制过来就可以
否则我们还得自己打包上传包含就会重复了，当然你不想用官方的，也可以自己用自己个性的

就目前来说我们看下哪些可以不需要自己再处理的，直接用官方的即可
![](https://img.kancloud.cn/3a/81/3a81a208a852d743eced7d02519a8f89_745x194.png)
比如`  icon.css`  一些字体图标，jquery官方版本是2.x，如果想用其他版本，就自己上传打包，` layui` 和对话框` layer.js` 都是非常好用的如果没有这个可能官方很多代码你复制过来都没法用，需要完全自己去定义了
布局页面包含一些全局只要继承的页面都可以使用的资源，如果重新定义这些，只需要重写响应的block即可，是不是很简单

还有一个title也是区块包裹的
![](https://img.kancloud.cn/7a/0f/7a0ffd863953592edcb1c18d9f18b100_686x56.png)
因为每个页面的标题都不是一样的，如果写成静态的，那么所有页面都是一个标题字样了

里面的大括号包含的变量，是系统后台的变量，可以自定义，这里只是简单调用过来了，具体看第二季的数据调用

`meta`的也是一个道理，具体意义去查询html手册即可

还有一个关键的地方，系统的钩子功能，我们需要把相关钩子的接口放入对应的地方，否则一些对应钩子就没法使用了

头部的钩子，我们按照系统一样放在body下面![](https://img.kancloud.cn/69/4c/694c480cf1fce277ece63fe933b2aa52_683x117.png)
`body`部分的钩子，我们放在主体区块下面
![](https://img.kancloud.cn/41/43/41437a50e0453e9ba0fddb5d0c052d4e_686x114.png)
还有一个`foot`的钩子，我们放上面就好
![](https://img.kancloud.cn/62/7a/627a5c07cac2e81d12f0d21442b14602_668x68.png)
于是我们建立的布局模板现在就成这样了
![](https://img.kancloud.cn/bc/96/bc9629be72e4854648dcb88cdca2ec65_669x489.png)

本文链接：https://x1.wanxiangsucai.com/read/319.html