freemarker嵌套

最新推荐文章于 2023-03-14 16:04:18 发布

请别比我浪

最新推荐文章于 2023-03-14 16:04:18 发布

阅读量797

点赞数

文章标签： freemarker

本文链接：https://blog.csdn.net/weixin_44717284/article/details/113869024

版权

这篇博客探讨了前端开发中如何使用模板引擎进行页面布局，包括`<#include>`指令的使用来引入公共头部和底部，以及`<#macro>`定义的公共模板。通过`<#nested/>`插入其他内容，实现页面的模块化和复用。同时，文章介绍了Layui框架的应用，展示了如何配置和调用layui.js库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<#include "/inc/header.ftl" />

直接引进inc下header.ftl的内容

<#macro layout title>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>${title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="keywords" content="fly,layui,前端社区">
        <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
        <link rel="stylesheet" href="../res/layui/css/layui.css">
        <link rel="stylesheet" href="../res/css/global.css">
    </head>
    <body>

    <#include "/inc/header.ftl" />

    <#nested />

    <#include "/inc/footer.ftl" />

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.cache.page = '';
        layui.cache.user = {
            username: '游客'
            ,uid: -1
            ,avatar: '../res/images/avatar/00.jpg'
            ,experience: 83
            ,sex: '男'
        };
        layui.config({
            version: "3.0.0"
            ,base: '../res/mods/' //这里实际使用时，建议改成绝对路径
        }).extend({
            fly: 'index'
        }).use('fly');
    </script>

    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>

    </body>
    </html>
</#macro>

<#macro layout title> 这个标签作为公共模板
<#nested /> 表示从其他模板引入公共模板插入的其他内容

在其他模板引入公共模板

<#include "/inc/layout.ftl"/>

<@layout "首页">
    <#include "/inc/header-panel.ftl" />

    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <#include "/inc/left.ftl" />

            <#include "/inc/right.ftl" />

        </div>
    </div>
</@layout>