使用 SmallCoder 实现复杂的模板编排

Uncle Ma • • 日常分享, 软件开发 • 158 阅读

使用 SmallCoder代码生成器 时，如果需要使用布局文件进行更复杂的模板编排，则可以使用 liquid 提供的 {% extends %} 和 {% include %} 实现布局

以下是一个示例，演示如何使用这两个标签来实现布局：

布局文件 (layout.liquid):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <header>
        {% include ./header.liquid %}
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% include ./footer.liquid %}
    </footer>
</body>
</html>

包含的部分 (header.liquid 和 footer.liquid):

<!-- header.liquid -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- footer.liquid -->
<p>&copy; 2024 My Website</p>

新建文件 index.nxt 继承布局文件:

{% extends ./layout.liquid %}

{% block title %}Child Page Title{% endblock %}

{% block content %}
    <h1>Welcome to the Child Page</h1>
    <p>This is the content of the child page.</p>
{% endblock %}

最终生成效果:

分享到：
本文链接：https://blog.renzicu.com/2024/08/548.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY 4.0 许可协议。转载请注明出处！
THE END
二维码
打赏
文章目录
关闭
目 录