FastAdminCMS通用引入及标签使用说明

VIP文章春城一个人的莎士比亚

于 2024-04-29 00:40:47 发布

阅读量942

点赞数 21

分类专栏： fastadmin 文章标签： fastadmincms标签 fastadmincms引入

本文链接：https://blog.csdn.net/xz2411/article/details/138296197

版权

一、通用引入文件

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

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>
        
  </head>
  <body>
    {__CONTENT__}
  </body>
    <script  src="https://cdn.fastadmin.net/assets/addons/ask/js/post.js?v=1.0.44"></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="width=device-width, initial-scale=1">
    <meta name="description" content="{cms:config name='cms.description'/}" />
    <meta name="keywords" content="{cms:config name='cms.keywords'/}" />
 
        <link rel="shortcut icon" href="__ADDON__/jizhi/favicon.ico">
       <!-- Animate.css -->
    <link rel="stylesheet" href="__ADDON__/jizhi/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="__ADDON__/jizhi/css/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="__ADDON__/jizhi/css/bootstrap.css">
    <!-- Flexslider  -->
    <link rel="stylesheet" href="__ADDON__/jizhi/css/flexslider.css">
    <!-- Theme style  -->
    <link rel="stylesheet" href="__ADDON__/jizhi/css/style.css">

    <!-- Modernizr JS -->
    <script src="__ADDON__/jizhi/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    

    </head>
    
    <body>
        <div id="fh5co-page">
            <!-- 展开手机端左侧菜单按钮 -->
            <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
            <aside id="fh5co-aside" role="complementary" class="border js-fullheight">
                <!-- logo -->
                <h1 id="fh5co-logo"><a href="index.html"><img src="__ADDON__/jizhi/images/logo.png"/></a></h1>
                <!-- 左侧菜单 start -->
                <nav id="fh5co-main-menu" role="navigation">
                    <ul>
                        <li><a class="fist-menu fh5co-active" href="index.html">主页</a></li>
                        <li class="znav">
                            <a class="fist-menu" href="#">产品</a>
                            <ul class="znav-list">
                                <li><a class="fist-menu" hr