HTML 섹션 템플릿 개인화하기

튜토리얼의 전제 조건 및 목표

블루트로닉스 CMS의 HTML 편집기와 파일 관리자에 접근할 수 있어야 하며 템플릿 폴더에 대한 적절한 개발자 권한이 필요합니다. 이 튜토리얼에서는 기존 페이지 섹션을 조정하고, 사용자 정의 HTML Section Templates를 생성하며, 필요에 따라 편집자에게 승인된 템플릿만 제공합니다.

우리는 Clients와 Banner라는 샘플 템플릿을 사용합니다. 기본 파일은 변경되지 않으며, 개별 변경 사항은 _own 태그를 통해 수행됩니다.

1. 에디터에서 페이지 섹션 템플릿 찾기

기존 CMS 페이지를 열고 편집을 선택한 다음 삽입 → 페이지 섹션을 통해 템플릿 선택창을 엽니다. 컨텍스트 메뉴에서는 소규모 재사용 가능한 콘텐츠용 텍스트 블록 항목도 제공합니다. 이 튜토리얼은 먼저 페이지 섹션에 대해 다룹니다.

페이지 섹션 창에서는 사용 가능한 템플릿이 미리보기와 함께 표시됩니다. 

예를 들어 Clients 카테고리를 선택하세요. 여러 레이아웃 변형이 준비되어 있습니다.

2. 템플릿이 저장된 위치

템플릿 파일은 개발자 폴더 /bx_Layout/에 있습니다. 파일 관리자에서 이 폴더를 여세요. 그곳에는 페이지 섹션 파일(Section*.txt) 및 텍스트 블록(Tag*.txt) 파일이 포함되어 있습니다.

파일 이름은 템플릿 선택과의 연관성을 결정합니다. 페이지 섹션 템플릿은 항상 Section으로 시작합니다; 이후에 개별 이름이 옵니다. 고유한 변형의 경우 파일 확장자 앞에 _own이 추가됩니다.

완전히 새로운 템플릿을 만들 수도 있습니다. 이를 위해서는 Section 뒤에 고유한 이름을 선택하세요. 같은 이름의 표준 파일이 없으면 새로운 템플릿이 추가로 나타나며 기존 템플릿을 대체하지 않습니다.

3. 기본 파일을 직접 수정하지 말아야 하는 이유

CMS와 함께 제공되는 표준 파일은 /bx_Layout/에서 시스템 업데이트 시 덮어쓰여집니다. 따라서 SectionClients.txt 또는 SectionBanner.txt를 직접 변경하는 것은 영구적이지 않습니다. 원하는 표준 파일을 복사하고, 자신의 버전을 _own으로 표시하세요. 해당 _own 변형은 귀하의 개별적이고 업데이트 내구성 있는 수정용으로 제공됩니다.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

두 파일이 모두 존재하는 경우 CMS는 표준 템플릿 SectionClients.txt 대신에 적합한 SectionClients_own.txt를 사용합니다. 이를 위해 편집기에서 Clients 카테고리를 이름 변경할 필요는 없습니다.

반대로 새로운 이름으로 자신의 파일을 생성하면 예를 들어 SectionMyTemplate_own.txt와 같이 표준 템플릿 Clients도 계속 사용할 수 있습니다.

4. HTML 섹션 템플릿의 구성: 구분 마크

섹션 파일은 동일한 카테고리의 여러 레이아웃 변형을 포함할 수 있습니다. CMS 편집기가 각 변형을 인식할 수 있도록 다음 구분 마크로 서로를 구분합니다:

<!--__SP_SectionTemplate__-->

브랜드는 예시 파일의 시작, 변형 사이, 끝에 위치합니다. 정확하게 표기법을 유지하십시오. 구분 기호가 없으면 편집기는 여러 변형을 신뢰할 수 있는 별도의 선택으로 표시할 수 없습니다.

기본 템플릿 SectionBanner.txt는 여러 다른 배너 레이아웃으로 이 원리를 보여줍니다. 이를 기반으로 하여 자신만의 단순한 섹션을 만들 수 있습니다.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

예시는 완전한 배너 변형입니다. 두 번째 변형은 HTML 코드를 마지막 구분 기호 뒤에 넣고 동일한 마킹으로 이 변형을 마감합니다. 이후 섹션은 원하는 대로 디자인할 수 있습니다.

sectionAll 클래스를 따로 보완할 필요는 없습니다: bluetronix 편집기가 페이지 섹션을 삽입할 때 자동으로 추가합니다.

5. Clients 템플릿 복사 및 제목 변경

파일 관리자에서 기존 SectionClients 템플릿을 열고 HTML 코드를 확인하세요. 예시에는 헤드라인, 설명, 여러 파트너 타일이 포함되어 있습니다.

해당 템플릿을 SectionClients_own.txt로 복사하고 복사본을 편집을 통해 엽니다. 테스트를 위해 헤드라인에 문자열 NEW!!!!을 추가합니다. 텍스트, 카드 수, 아이콘 또는 CSS를 개별적으로 변경할 수도 있습니다.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

저장을 클릭한 후 다시 삽입 → 페이지 섹션 → 클라이언트 선택을 엽니다. 변경된 헤드라인에서 자신의 버전을 확인할 수 있습니다. 두 번째 클라이언트 변형은 독립적으로 선택하고 편집할 수 있습니다.

6. 새 이름으로 개인 템플릿 제공하기

같은 이름의 대체 파일 대신 별도의 템플릿을 만들 수 있습니다. 예를 들어 클라이언트 변형을 복사하여 SectionMyTemplate_own.txt로 저장합니다. Section 뒤의 부분이 자신만의 템플릿 이름이며, 이것이 편집기에서 새로운 선택을 결정합니다. 다른 이름으로는 원래 Clients 템플릿이 대체되지 않습니다.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

따라서 특정 페이지 유형에 대해 고객을 위해 고정 섹션을 개발할 수 있으며, 제공된 모든 템플릿의 내용을 변경할 필요가 없습니다.

7. Only_own.txt로 자신의 템플릿만 표시하기

최종 고객이 귀하가 승인한 템플릿만 사용해야 하는 경우, /bx_Layout/ 폴더에 플래그 파일 Only_own.txt를 생성합니다. 표시된 템플릿 구성에 따라, _own이라는 추가가 있는 적합한 자신의 파일만 템플릿 선택에 제공됩니다. 이 기능을 위해 HTML 코드는 필요하지 않습니다.

/bx_Layout/Only_own.txt

예: SectionClients.txt, SectionBanner.txt 및 SectionMyTemplate_own.txt가 디렉토리에 있을 경우, 이 설정을 활성화하면 선택에 적합한 자신의 템플릿만 포함됩니다. 이를 통해 고객에게 특정 프로젝트 관련 선택을 제공할 수 있습니다.

8. 텍스트 블록을 위한 자체 태그 템플릿

동일한 _own 원칙은 더 작은 텍스트 블록에도 적용됩니다. 해당 파일은 Tag로 시작합니다. 예를 들어 TagTemplate.txt는 TagTemplate_own.txt로 바뀌게 됩니다. 이 변형은 편집기에서 텍스트 블록 항목을 통해 제공할 수 있습니다.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. colAll로 편집 가능한 열 복제하기

섹션에 반복 가능한 여러 열이 포함된 경우 colAll 클래스를 가진 열이 독립 블록으로 인식될 수 있습니다. 이로 인해 컨텍스트 메뉴에서 아이템 열 → 복제 기능을 사용할 수 있습니다.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

복제할 때 해당 블록이 두 번째 열로 삽입됩니다. 반복 가능한 카드나 아이템 열에 대해 colAll을 올바른 컨테이너에 설정해야 합니다. 상위 sectionAll 클래스는 편집기에서 자동으로 부여됩니다.

10. 텍스트 마킹 및 다국어 템플릿

제공된 기본 섹션에는 예시 텍스트 내에 ­ 문자열이 포함되어 있습니다. 예를 들어 제목 전후에. 이 텍스트 마킹은 아니다와 구분 마크 <!--__SP_SectionTemplate__-->와 혼동해서는 안 됩니다. 기존 템플릿을 복사할 때 현재 에디터 동작을 유지하려면 이러한 CMS 마킹을 먼저 유지해야 합니다.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

다국어 프로젝트의 경우, 편집자가 필요한 언어로 콘텐츠를 관리할 수 있도록 추가 번역 마킹이 유용할 수 있습니다. bluetronix CMS는 24개 언어를 지원합니다. 간단하게 단일 언어만 사용하는 프로젝트 템플릿의 경우 불필요한 추가 번역 마킹을 생략할 수 있습니다. 하지만 에디터에 필수적인 섹션 구분 마크는 유지해야 합니다.

11. 사용자 정의 기능 및 필요한 포함 파일

템플릿에 PHP 함수나 모듈 출력을 추가하는 경우, 고유한 이름을 사용하여 자신의 함수를 정의하십시오. 기존 함수를 동일한 이름으로 다시 선언할 수 없습니다. 예를 들어 function_exists()로 선언을 보호할 수 있습니다:

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

필요한 포함 파일은 섹션당 최소한 한 번 이상 포함되어야 합니다. 해당 포함 마커는 편집기에서 복사할 수 있습니다:

<!--bxInclude--/bx_Mod/Blog_Detail-->

내부 템플릿 파일은 .txt 또는 .bx 확장자를 가지며, 설명된 CMS 서버 구성에서 공개 HTTP/HTTPS URL을 통한 직접 호출을 위해 설계되지 않았습니다. 이는 서버 측에서 읽고 처리됩니다.

12. 편집 팀을 위한 제한된 템플릿이 유용한 이유

자신만의 섹션과 Only_own.txt를 사용하여 최종 고객이 선택할 수 있는 완성된 레이아웃 블록을 정의합니다. 추가로 사용자 설정에서 글꼴이나 색상 전환과 같은 편집기 기능을 제한할 수 있습니다. 그러면 편집자는 주로 미리 설정된 섹션을 삽입하고, 텍스트를 편집하고, 이미지를 교체하는 등의 작업을 하면서 설정된 페이지 디자인을 임의로 변경할 필요가 없습니다.

이 작업 방식은 특히 대규모 고객 프로젝트, 기업 포털 및 여러 편집자가 있는 팀에 적합합니다. 디자인은 일관되게 유지되며, 콘텐츠는 유연하게 관리할 수 있습니다.

13. 결과 및 요약

/bx_Layout/를 열고, 기존 섹션 파일을 복사하고, _own을 추가하고, HTML 코드를 조정한 후 삽입 → 페이지 섹션에서 출력을 확인합니다. 새로운 선택 카테고리에는 Section으로 시작하는 고유한 파일 이름을 사용합니다.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

추가로 Only_own.txt를 활성화하고 편집 권한을 적절히 제한하면 편집자는 제공된 HTML 섹션 템플릿을 통해 목표 지향적으로 작업할 수 있습니다.