AIを使ってHTMLセクションテンプレートを作成する
既存のセクションファイルと技術的なAI_Promptドキュメントを使用して、bluetronix CMS用の新しいカスタムHTMLセクションテンプレートを生成し、その後ファイルマネージャーを通じて組み込みます。
AIを使ってHTMLセクションテンプレートを作成する
ChatGPTや他のAIを使って、bluetronix CMS用の新しいHTMLセクションテンプレートを作成したり、既存のテンプレートを編集したり、ウェブサイト用の追加のレイアウトバリエーションを開発したりできます。そのための要求を個別にプロンプトとして定義できます。
生成されるファイルがbluetronix CMSの技術的ルールを遵守することが重要です。これには、特にセクションファイルの構造や複数のテンプレート間の区切りマーカー、独自のファイルに_ownでマークを付けること、必要なCMSテキストマーカーが含まれます。
自分の要求を書き表す
プロンプトに、作成したいページセクションの種類、必要なレイアウトバリエーションの数、望むデザインを記述してください。既存のセクションファイルを基にしたり、新しいレイアウトを説明したりできます。
技術的要件については、さらに私たちの例のプロンプトを参考にしてください。これは、Bootstrap、WOWアニメーション、レスポンシブレイアウト、CMSの画像切り抜き、翻訳マーカーなどに対する互換性のあるHTMLセクションテンプレートへの要求を文書化しています。この要件を直接独自のプロンプトに組み込むこともできます。
以下のプロンプトは、新しいブログの概要セクションに対する可能なアプローチを示しています。これは完全に記述された例であり、自分のプロジェクトに合わせて調整できます。
新しいブログセクションのための例のプロンプト
プロンプトをそのまま使用したり、特定の要件を変更したり、完全に独自のプロンプトを作成したりできます。
EXAMPLE PROMPT FOR CREATING A NEW bluetronix CMS LAYOUT SECTION
======================================================================
Please create a new custom layout section file for the bluetronix CMS.
Use the attached file:
AI_Prompt_de.txt
as the complete and mandatory technical documentation for all requirements.
Additionally, use the attached existing file:
SectionBlog.txt
as the basis for the current structure and existing section variants.
Task:
Create a new file named:
SectionBlog_own.txt
The file should contain several modern and visually distinct blog overview sections for the bluetronix CMS.
Important:
- All requirements from AI_Prompt_de.txt must be fully followed.
- Use only standard Bootstrap classes.
- Remove any Bootstrap Studio-specific classes.
- Use Bootstrap Icons exclusively.
- All sections must be responsive and work correctly in both Bootstrap Light Mode and Dark Mode.
- Use WOW animations according to the documentation.
- Use only the image URLs approved in AI_Prompt_de.txt and the CMS image cropping syntax documented there.
- Use the required separators.
- Mark all visible text with .
- Use universal English example texts.
- Reuse suitable example texts instead of creating unnecessarily many different text variations.
- Text length must match the respective layout.
- Always use href="#" for links unless another URL is specified in the documentation.
- Use colAll for suitable repeatable columns.
- Ensure visually consistent spacing, column gaps, and border radii.
- Do not split HTML tags across multiple lines.
- Indent HTML using exactly 3 spaces per level.
- Do not create blog detail pages. Create only blog sections for index or overview pages.
- Do not modify technical CMS markers or required CMS structures.
- Validate the completed HTML against the checklist in AI_Prompt_de.txt.
Additionally, create the following file:
_LangTexts.txt
This file must contain every visible text used in SectionBlog_own.txt.
Requirements:
- One text per line.
- Without the markers.
Output:
1. SectionBlog_own.txt
2. _LangTexts.txt
Do not display the code only in the chat. Generate both files as downloadable files.
After creation, the SectionBlog_own.txt file will be uploaded via the bluetronix CMS "Datei - Manager" to the following directory:
/bx_Layout/
例のプロンプトを調整する
他のセクションタイプでは、ファイル名や望むデザインを変更することができます。新しいブログの概要の代わりに、チーム、バナー、フッター、または他のHTMLセクションテンプレートを作成することができます。独自のプロンプトでは、必要なCMSのルールや選択したセクションカテゴリーの特定の要求を考慮する必要があります。
独自のセクションファイルは_ownの追加で保存され、その後bluetronix CMSのファイルマネージャーを介して/bx_Layout/にアップロードされます。これにより、あなたの独自のテンプレートは標準ファイルから分離されます。
EXAMPLE FOR USING A DIFFERENT SECTION
==========================================
For a different section type, only the filenames need to be replaced.
For example:
SectionBlog.txt
SectionBlog_own.txt
Replace with:
SectionTeam.txt
SectionTeam_own.txt
or:
SectionFooter.txt
SectionFooter_own.txt
All requirements from AI_Prompt_de.txt remain unchanged.
FAQ
お客様からよくある質問
自分のKIプロンプトを使ってHTMLセクションテンプレートを作成できますか？
はい。自分の要求を完全に自由に記述できます。どのようなページセクションが必要か、どのくらいのバリエーションを作成するか、どのようなデザインを想定しているかを説明してください。生成されるファイルは、bluetronix CMSの技術的ルールに従う必要があります。
サンプルプロンプトを変更せずに使用する必要がありますか？
いいえ。ブログプロンプトは単なる例です。あなたはそれを調整することも、自分自身のプロンプトをチーム、バナー、フッター、および他のHTMLセクションテンプレートのために作成することもできます。
AI_Prompt_de.txtファイルは何のためにありますか？
それは、Bootstrap、WOWアニメーション、レスポンシブレイアウト、CMS画像トリミング、および翻訳マークに関する技術的指示を含んでいます。これを参照として使用することも、必要なルールを直接自分のプロンプトで記述することもできます。
既存のセクションファイルを基に使用することはできますか？
はい。例では、SectionBlog.txtが既存の構造とバリエーションの基盤として使用されています。他の既存のセクションファイルも使用することができるほか、新しいレイアウトを記述することもできます。
ブログの例では、どのファイルがAIによって作成されますか？
例では、SectionBlog_own.txtが作成されます。これには、視覚的に異なる複数のブログ概要セクションが含まれていますが、ブログの詳細ページは含まれていません。
なぜ独自のセクションファイルには _own という追加が付くのですか？
_own という追加を付けることで、個別のテンプレートが標準ファイルと区別されます。標準ファイルはCMSのアップデートにより上書きされる可能性があります。
複数のレイアウトバリエーションは、1つのファイル内でどのように区別されますか？
個々のバリエーションは、正確に書かれたCMSマーカー <!--__SP_SectionTemplate__--> で区別されます。このマーカーはAI作成中に変更してはいけません。
なぜ目に見えるテキストをマークアップする必要があるのですか？
翻訳処理のために、目に見えるテキストにはCMSマークアップ ­ が囲まれます。例では、生成されたセクションが普遍的な英語のサンプルテキストを含むことが求められています。
_LangTexts.txt ファイルには何が含まれていますか？
生成されたセクションファイルの各目に見えるテキストが含まれており、各行に1つのテキストがあり、­ のマークはありません。
サンプルプロンプトで名前が挙がっているレイアウト要件は何ですか？
セクションは、オリジナルのBootstrapクラスとBootstrapアイコンを使用し、レスポンシブである必要があり、ライトモードとダークモードで機能することを含みます。また、プロンプトではWOWアニメーション、承認されたCMS画像パス、適切な繰り返し可能なカラム用のクラス colAll が言及されています。
他のセクション用にブログのサンプルプロンプトを調整する方法は？
ファイル名や希望するレイアウトの種類を変更してください。チームテンプレートには、たとえばSectionTeam.txtやSectionTeam_own.txtを使用し、フッターテンプレートにはSectionFooter.txtやSectionFooter_own.txtを使用します。それぞれの技術的およびカテゴリ特有の要件を考慮してください。
完成した独自のセクションファイルはどこにアップロードしますか？
完成した _own ファイルは、bluetronix CMS ファイル - マネージャー を通じて /bx_Layout/ ディレクトリにアップロードされます。