FastAdmin-CMS模版制作(4)-通用引入

166 阅读 0 评论 0 点赞

一、通用引入文件

1.在模版文件夹内新建一个common文件夹，在commn文件夹内新建layout.html文件，改文件为整个站点结构的通用文件(文件夹和文件可以根据自己喜好进行命名，并没有强制要求)，对模版文件夹不熟悉的请阅读上一章。

image.png

2.抽出网站的通用头部；底部；公用引入css、js、image代码，这里的通用是指在每个页面上都会存在的部分，各个页面特有的部分不建议放在layout.html文件。

二、通用标签

1.在通用引入页面通常会用到以下几个标签和参数：

{cms:config name="cms.sitename"/} : 网站名称；
{cms:config name="cms.title"/} : 页面名称；
{__STYLE__} : 加载引入页面定义的页面css；
{__CONTENT__} : 加载引入页面内容；
{__SCRIPT__} : 加载引入页面定义的页面js；
__ADDON__：静态文件相对路径，系统默认解析为，/assets/addons/cms；
__CDN__ ：绝对路径，系统默认解析为当前域名，适合使用CDN的静态文件；

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{cms:config name="cms.sitename"/}{cms:config name="cms.title"/}</title>
    <link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css"/>
    <script type="text/javascript" src="__ADDON__/assets/libs/jquery/dist/jquery.min.js"></script>
    {__STYLE__}    
  </head>
  <body>
    {__CONTENT__}  </body>
    {__SCRIPT__}</html>

2.公共部分渲染布局，name="文件路径/文件名"。详情请参考文档：https://www.kancloud.cn/manual/thinkphp5/125013

{layout name="common/layout"/}

三、完整代码示例：

1.common/layout.html（公共布局）

<!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{cms:config name="cms.sitename"/}-{cms:config name="cms.title"/}</title>
    <meta name="viewport" content="

点赞(0) 打赏