HTMLセクションテンプレートを個別にカスタマイズする

チュートリアルの前提条件と目的

あなたはHTMLエディタ及びファイルマネージャーへのアクセスと、テンプレートフォルダーの開発権限を取得する必要があります。このチュートリアルでは、既存のページセクションを調整し、自分のHTMLセクションテンプレートを作成し、必要に応じて、編集者に公開されたテンプレートのみを提供する方法を学びます。

私たちはクライアントとバナーのサンプルテンプレートを使用しています。標準ファイルは変更されず、個別の変更は_ownのマークで行います。

1. エディタでセクションテンプレートを見つける

既存のCMSページを開き、編集を選択し、挿入 → ページセクションを通じてテンプレートの選択を開きます。コンテキストメニューには、小さな再利用可能なコンテンツのためのテキストブロックの項目もあります。このチュートリアルは最初にページセクションについて扱います。

ページセクションウィンドウには、利用可能なテンプレートがプレビューと共に表示されます。 

例としてクライアントカテゴリーを選択します。そこには複数のレイアウトのバリエーションがあります。

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を使用します。そのため、エディターでクライアントのカテゴリを変更する必要はありません。”},{

しかし、新しい名前で独自のファイルを作成する場合、例えばSectionMyTemplate_own.txtと名付けると、標準テンプレートクライアントは引き続き利用可能です。”},{

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__-->

この例は完全なバナーバリエーションです。2番目のバリエーションのためには、HTMLコードを最後の区切りマークの後に追加し、同様にこのバリエーションも同じマークで締めくくります。その後、実際のセクションをニーズに合わせて設計できます。”},{

クラスsectionAllは自分で追加する必要はありません：bluetronixエディターは、ページセクションを挿入する際に自動的に追加します。”},{

5. クライアントテンプレートをコピーし、見出しを変更する

ファイルマネージャーで既存の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>

保存をクリックし、その後再度挿入 → ページセクション → クライアントの選択を開きます。そこで変更された見出しによって独自のバージョンを認識できます。2番目のクライアントバリエーションは、それとは独立して選択・編集できます。”},{

6. 新しい名前で独自のテンプレートを提供する

同名の代替ファイルの代わりに別のテンプレートを作成することもできます。そのためには、例えばクライアントバリエーションをコピーし、SectionMyTemplate_own.txtとして保存します。Sectionの後にある部分があなたのテンプレート名であり、新しいエディター選択を決定します。元のクライアントテンプレートは、別の名前の場合は置き換えられません。”},{

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>

複製時には、該当するブロックが2番目の列として挿入されます。そのため、繰り返し可能なカードまたは記事列には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;
   }
}

必要なインクルードは、セクションごとに最低1回は読み込む必要があります。対応するインクルードマーカーはエディタからコピーできます:

<!--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セクションテンプレートをターゲットにして作業できます.