现在下载应用并免费测试10天
google play store logo apple store logo
货币 选择语言 选择地区

导入Bootstrap-5布局

了解完整的布局导入：从Bootstrap-5检查和ZIP文件到自动处理，以及在编辑器中检查导入的布局。

教程的目标 1. 导入 - 打开布局 2. 选择 ZIP 文件 3. 打开文件夹 bx_Import 4. 上传 Layout.zip 5. Bootstrap-5 布局的前提条件 6. 检查导入步骤 7. 开始导入 8. 检查导入是否成功 9. 在网站上检查新布局 10. 检查导入的图片 11. 检查布局 HTML 12. 检查导入的 CSS 和 JavaScript 文件 13. 在编辑器中测试可编辑性 14. 检查生成的页面部分模板 15. 完成检查 常见问题

教程的目标

你将学习如何将 Bootstrap-5 布局作为 ZIP 文件导入到 bluetronix CMS 中，检查导入，随后检查布局图片、布局 HTML、CSS/JS 以及生成的页面部分模板。

重要： 在导入时请使用满足以下描述的前提条件的 Bootstrap-5 布局。实际导入可能需要长达 15 分钟。

1. 导入 - 打开布局

在 CMS 中打开 布局 区域，然后选择 导入 - 布局。

2. 选择 ZIP 文件

在 导入 - 布局 窗口中，点击 选择 ZIP 文件。通过此功能打开文件管理器，选择你的 Bootstrap-5 布局的 ZIP 文件。

此外，还可以使用主题图片，作为后续不再使用原始图片时，作为布局图片的替代品。

3. 打开文件夹 bx_Import

在文件管理器中，接下来打开开发者文件夹 bx_Import。该文件夹用于提供要导入的 ZIP 文件。

4. 上传 Layout.zip

现在将你的 ZIP 文件上传到 bx_Import 文件夹。在我们的示例中，文件名为 Layout.zip。然后选择此文件以进行布局导入。

5. Bootstrap-5 布局的前提条件

CMS 在导入之前会检查 ZIP 压缩包中是否存在合适的 Bootstrap-5 结构。完整的前提条件和支持的文件扩展名可以在以下技术概述中找到。

Detecting and Importing a Bootstrap Layout

When importing a layout, the system first checks whether it is a valid Bootstrap layout.

1. Detecting a Bootstrap Layout

For a layout to be recognized and imported as a Bootstrap layout, two requirements must be met:

1. A Bootstrap CSS file must be present.
2. An index.html or index.htm file must exist at the corresponding directory level.

The following files, for example, are recognized as Bootstrap files:

bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-*.css

In general, the system searches for a file whose name matches the following pattern:

bootstrap***.css

The file must belong to Bootstrap version 5.

Example 1

/index.html
/assets/css/bootstrap.min.css

The layout is recognized. The index.html file is located at the root level, while the Bootstrap file is located in:

/assets/css/

Example 2

/index.html
/assets/css/bootstrap.css

This layout is also recognized.

Example 3

/index.html
/css/bootstrap.min.css

A Bootstrap file located in the /css/ directory is also recognized.

Important:
Once a matching index.html or index.htm file and a Bootstrap CSS file have been found, that directory level is used as the starting point of the layout. From this level onward, the required files are extracted from the ZIP archive and processed.

2. Which Files Are Imported?

During the import process, only supported file types are included.

HTML Files
.html
.htm

JavaScript and CSS Files
.js
.mjs
.css

Fonts
.woff
.woff2
.ttf
.otf
.eot

Images and Graphics
.svg
.jpg
.jpeg
.jpg
.webp
.avif
.gif
.ico

Video Files
.mp4
.webm

Audio Files
.mp3
.ogg
.wav

Data Files
.json

Documents
.pdf

All other file extensions are excluded from the layout import process.

6. 检查导入步骤

选择 ZIP 文件后，CMS 会在主题图片下方显示导入过程中执行的各个步骤。在开始导入之前，请检查此概述。

导入在显示的版本中包括以下步骤：

  1. Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
  2. HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
  3. Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
  4. index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
  5. Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
  6. Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
  7. CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.

7. 开始导入

点击导入。CMS会提示导入可能需要多达15分钟，并且在此期间窗口不能关闭。

用确定确认提示。然后将开始布局的导入。

8. 检查导入是否成功

导入完成后，首先会出现布局已成功导入的消息。

接下来，您可以检查所有各个处理步骤是否成功完成。成功执行的步骤将标记为绿色。

9. 在网站上检查新布局

关闭导入窗口，返回您网站的主页。导入后，可能仍会看到之前的显示效果。

如有需要，点击重新加载。然后应该会显示导入的布局。将该显示与您想要导入的原始布局进行比较。

10. 检查导入的图片

接下来打开布局 → 导入 - 图片。在那里，您可以检查哪些图片已从导入的布局中保留或被主题图片替换。

CMS显示缺少许可证或来源信息的图片。请仔细检查这些提示，并决定是否可以继续使用这些图片或应以适当的主题图片替换。

如果您不想使用现有的原始图片，可以选择合适的主题图片或创建自己的主题图片。替换后，应该再次进行视觉检查布局。

11. 检查布局 HTML

在布局下打开布局 - HTML区域。您可以检查从导入生成的HTML基础结构。

在布局数据库中，您可以查看导入的HTML代码。请特别检查基础结构是否完整，以及所需的CMS标签是否已纳入布局中。

12. 检查导入的 CSS 和 JavaScript 文件

接下来打开布局 → 导入 - CSS JS。

在这里，您将看到在导入过程中识别的CSS、JavaScript及其他资源。如果某个资源被标记为外部来源，则它不会仅从导入的布局中加载。您应该在发布之前仔细检查这些外部链接并相应处理。

13. 在编辑器中测试可编辑性

在编辑器中打开导入的页面，并检查内容是否可以如预期进行编辑。特别测试文本、链接、图片和可重复区域。

14. 检查生成的页面部分模板

在编辑器中打开插入 → 页面部分。导入会产生源布局的额外模板类别。这包括布局头、布局主和布局底部。

例如，选择布局主时，从原始布局提取的主部分将作为单独模板显示。您可以随后自由地将这些插入到页面中并进一步编辑。

15. 完成检查

导入后，您应该全面检查结果：布局显示、图片、HTML、CSS/JS、外部资源、可编辑性以及生成的页面部分模板。只有在这些检查完成后，您才应该开始进一步调整导入布局的内容。

常见问题

客户常问我们的问题

可以导入哪些布局？

此导入适用于Bootstrap 5布局。CMS会寻找合适的Bootstrap CSS文件以及对应文件夹层级中的index.html或index.htm。

我在哪里开始布局导入？

在CMS中打开布局区，选择导入 - 布局。

ZIP文件将被保存到哪个文件夹？

所选的布局ZIP文件将在开发者区域bx_Import中使用。

哪些Bootstrap文件会被识别？

识别到的Bootstrap CSS文件包括bootstrap.css、bootstrap.min.css及其他符合bootstrap***.css模式的文件。本教程需要为Bootstrap 5。

导入了哪些文件类型？

导入的文件类型包括教程中列出的 HTML、CSS、JavaScript、字体、图片、视频、音频、JSON 和 PDF 文件。其他文件扩展名将不被接受。

导入可能需要多长时间？

所显示的提示说明最多可能需要 15 分钟。期间不得关闭导入窗口。

我如何确认导入成功？

各个导入步骤将被标记为绿色，然后会显示成功导入布局的消息。

如果导入后仍然显示旧布局，我该怎么办？

返回首页，并在需要时使用 重新加载。之后应显示新导入的布局。

在哪里检查已导入的图片？

打开 布局 → 导入 - 图片。在这里你可以检查原始图片、主题图片以及有关许可和来源的说明。

在哪里检查已导入的 HTML 代码？

在 布局 → 布局 - HTML 中，你可以检查布局数据集生成的 HTML 基础结构。

在哪里检查 CSS 和 JavaScript 资源？

打开 布局 → 导入 - CSS JS。在这里你可以看到导入时识别的资源以及可能的外部来源说明。

从布局中生成了哪些页面段模板？

导入提供了 布局头部、布局主体 和 布局底部 的模板。

导入后我应该最后测试什么？

检查布局的显示、图片、HTML、CSS/JS、外部资源、编辑器中的可编辑性，以及生成的页面段模板。

CMS