调整页面的HTML基础结构和布局

新页面的标准布局

在 bluetronix CMS 中新创建的页面会自动使用标准布局。这个布局构成了 HTML 基础结构，其中显示了你网页的内容。

标准布局会自动包含例如页眉和页脚等元素。聊天按钮等其他元素也可以是这个基础结构的一部分。

如果你希望某些元素不显示或希望将自定义元素默认集成到布局中，可以调整 HTML 基础结构。

打开 HTML 基础结构

打开 布局 ⯈ 布局-Html。

在那里你可以找到现有的 HTML 基础结构或布局定义。

第一个条目是 标准布局。新的 HTML 页面默认使用此布局。

标准布局的构建

<!DOCTYPE html>
<html class="wide wow-animation" data-bs-theme="__DB_GB_HTMLDarkMode__" lang="__DB_WebSiteLang__">
<head>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   __DB_HeadTitle__
   <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
   <script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
   <link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
</head>
<body>

__DB_Layout_/bx_Header.html__

<main>
   __DB_Layout_Main__
</main>

__DB_Layout_/bx_Footer.html__

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
</body>
</html>

在标准布局中，页眉和页脚等元素会自动被包含。

你 HTML 页面实际的内容会在主区域或标记 __DB_Layout_Main__ 内插入。

此外，bluetronix CMS 会自动设置各种值和标记。例如，包括 Bootstrap 的深色模式、语言和网页标题。

所需的 bluetronix 脚本也会自动执行。

单页面布局

除了标准布局，单页面布局也可用。

这个布局与普通的标准布局不同。聊天按钮和 Cookie 提示等可能会被隐藏。

这样，你可以为特定页面使用不同的基础结构，而不必更改所有其他页面的标准布局。

创建自定义布局

你还可以创建自定义布局条目，从而定义自己的 HTML 基础结构。

在这个例子中，我们将创建一个名为 测试布局 的自定义布局条目。

在此布局中，你可以指定哪些组件默认在页面上包含。

为页面选择一个布局

定义的布局可以后续直接分配给 HTML 页面。

为此，打开 编辑器 并转到 页面设置。

点击布局选择。在那里你将看到现有的布局定义。

自定义的布局，如测试布局，也会在那里提供选择。

更改页面的布局

选择所需的布局，然后点击保存。

页面将使用所选的布局框架。

这样，你可以为不同的页面使用不同的框架，并确定各页面上显示的常用元素。

总结

布局决定了bluetronix CMS中页面的基本HTML结构。新页面最初使用默认布局。

通过布局 ⯈ 布局-Html，你可以查看现有布局并创建自己的布局定义。然后，可以通过页面设置 ⯈ 布局选择所需布局并点击保存。