Bootstrap-5 레이아웃 가져오기

튜토리얼 목표

부트스트랩 5 레이아웃을 ZIP 파일 형식으로 블루트로닉스 CMS에 가져오고, 가져온 내용을 확인하며 레이아웃 이미지, 레이아웃 HTML, CSS/JS 및 생성된 페이지 섹션 템플릿을 점검하는 방법을 배웁니다.

중요: 아래에 설명된 요건을 충족하는 부트스트랩 5 레이아웃을 사용하여 가져오기 작업을 진행하세요. 실제 가져오기는 최대 15분이 소요될 수 있습니다.

1. 가져오기 - 레이아웃 열기

CMS에서 레이아웃 영역을 열고 가져오기 - 레이아웃을 선택합니다.

2. ZIP 파일 선택

가져오기 - 레이아웃 창에서 ZIP 파일 선택을 클릭합니다. 이 기능을 통해 파일 관리자에 접근하여 부트스트랩 5 레이아웃의 ZIP 파일을 선택할 수 있습니다.

추가로 테마 이미지가 제공되며, 원본 이미지를 더 이상 사용하지 않을 경우 레이아웃 이미지를 대체하는 데 사용될 수 있습니다.

3. 폴더 bx_Import 열기

파일 관리자에서 bx_Import 개발자 폴더를 연 다음, 이 폴더를 가져올 ZIP 파일을 제공하는 데 사용합니다.

4. layout.zip 업로드

이제 자신의 ZIP 파일을 bx_Import 폴더에 업로드하세요. 예를 들어, 파일 이름은 Layout.zip입니다. 이어서 이 파일을 레이아웃 가져오기에 선택합니다.

5. Bootstrap-5 레이아웃 요구사항

CMS는 가져오기 전에 ZIP 아카이브 내에 적합한 부트스트랩 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, 외부 리소스, 편집 가능성 및 생성된 페이지 섹션 템플릿. 이 점검이 완료되기 전에는 가져온 레이아웃의 추가 콘텐츠 조정을 시작하지 않아야 합니다.