页面布局规范

以首页index.html为例(其他页面创建逻辑类似),系统默认会调用view/my/module/base.html文件。若要调用自己创建的模板文件,需按以下步骤操作:

  1. 依据view/my/module/base.html的布局结构,在你自己创建的模板文件夹下的/module/目录中,创建一个名为base.html的文件。
  2. 将原本代码中用于继承模板的标签:

    {extend name="view/my/module/base.html" /}

    修改为:

    {extend name="view/你的模板/module/base.html" /}

    其中,你的模板需替换为你实际创建的模板文件夹名称。

以下是一份示例代码结构,展示了如何在自定义模板中设置不同的页面区块:

{extend name="view/你的模板/module/base.html" /}
{block name="title"}标题{/block}
<!--描述-->
{block name="description"}{/block}
<!--关键字-->
{block name="keywords"}{/block}
<!--样式css/js等-->
{block name="style"}{/block}
{block name="header"}
    头部代码
{/block}
{block name="main"}
    <main class="main-content">
        <div class="max-container">
            中间代码
        </div>
    </main>
{/block}
{block name="footer"}
    底部代码
{/block}

在上述代码中:

  • {block name="title"}用于定义页面标题。
  • {block name="description"}用于设置页面描述内容。
  • {block name="keywords"}用于填写页面关键字。
  • {block name="style"}用于引入样式文件(如CSS、JS等)。
  • {block name="header"}放置页面头部代码。
  • {block name="main"}包含页面主体部分的代码,这里以一个具有特定样式的main标签及内部div为例。
  • {block name="footer"}用于设置页面底部代码。
目录
设置
主题设置
深色模式
字体设置
字体大小
16