bluetronix CMSで独自のJavaScriptおよびCSSファイルを埋め込む
このチュートリアルでは、独自のJavaScriptファイルとスタイルシートをウェブサイトのレイアウトに埋め込む方法を学びます。また、変更時のファイルバージョン管理を利用する方法についても説明します。
前提条件と目的
このチュートリアルには、開発者アクセスが必要であり、レイアウトや開発者フォルダーの構造を理解している必要があります。既存のCMSファイルを変更せずに、独自のJavaScriptおよびCSSファイルを追加する方法を学びます。
スクリーンショットに示されたファイルBxHeadScript_own.jsとBxStyle_own.cssを使用します。これらのファイルは、CMSがウェブサイトを読み込む際に認識できるように、明示的にレイアウトに組み込まれています。
1. レイアウトを開く
CMSのレイアウト領域を開き、レイアウト - HTMLを選択します。次に、JavaScriptおよびCSSファイルを追加したいレイアウトを開きます。この例では、標準レイアウトを使用します。
レイアウト定義には、BxHeadScript.jsやBxStyle.cssなどの中心的なCMSファイルの組み込みがすでにあります。追加の独自ファイルを横に記入できます。
2. ファイルマネージャーで独自のJavaScriptファイルを作成する
ファイルマネージャーを開き、赤でマークされたシステムフォルダーbx_scriptに移動します。そこには、bluetronix CMSの中心的なJavaScriptファイルや、必要に応じて言語依存のバリエーションがあります。
そこで独自のファイルBxHeadScript_own.jsを作成するか、すでに存在する場合はそれを選択します。適切な既存のファイルをテンプレートとしてコピーできます。
編集を選択して、テキストエディタで独自のファイルのJavaScriptコードを開きます。
表示されている例では、ファイルにダークモードとライトモード間の選択用の独自のJavaScriptコードが含まれています。テキストエディタでプロジェクト特有のJavaScriptコードを管理し、保存できます。
独自の拡張のためにオリジナルのBxHeadScript.jsを変更しないでください。bx_システムフォルダー内のファイルは、CMSのアップデート時に上書きされる可能性があります。独自のファイルには_ownを付けてください。
3. レイアウトに独自のJavaScriptファイルを埋め込む
再度レイアウト - HTMLに戻ります。既存のCMSファイルに加えて独自のJavaScriptファイルを追加します。スクリプトを早く読み込む必要がある場合は、スクリーンショットのようにhead領域に既存のヘッドスクリプトの後に追加します。
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
追加の行が独自のJavaScriptコードを読み込みます。元のBxHeadScript.jsは変更されません。ファイルパスと独自のファイル名は、ファイルマネージャーのファイルと一致する必要があります。
4. ファイルマネージャーで独自のCSSファイルを作成する
ファイルマネージャーでシステムフォルダーbx_styleを開きます。ここには、中央のスタイルシートBxStyle.cssが含まれています。独自の調整には、別のファイルBxStyle_own.cssを使用します。
ファイルBxStyle_own.cssを作成するか、既存の独自ファイルを開きます。システムファイルBxStyle.cssはそのまま残ります。
編集を使用して、このファイルに独自のCSSルールを入力して保存します。
5. レイアウトに独自のCSSファイルを埋め込む
再度レイアウト - HTMLを開きます。head領域で、既存のスタイルシートの後に独自のCSSファイルを追加します。独自のルールが標準のフォーマットを上書きする場合、順番が重要です。
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
標準のCSSファイルはそのまま残りますが、追加のまたは異なるフォーマットをBxStyle_own.cssで別々に管理します。
6. ヘッダーまたはページの最後でJavaScriptを使用する
JavaScriptファイルは、その役割に応じてhead領域またはページの最後のbodyタグの前に組み込むことができます。表示されたBxHeadScript_own.jsはヘッダーで読み込まれます。他のスクリプトには、独自のプロジェクトフォルダーを使用して後でレイアウトに組み込むこともできます。
ページの最後に自分のフォルダーからの追加のファイルの例:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>この例は追加のファイルを示しています。代わりにシステムファイルを独自のバージョンで置き換えたい場合は、選択したレイアウトで適切な組み込みを意図的に調整し、必要なCMS機能が欠落しないことを確認する必要があります。
7. システムフォルダーと独自のプロジェクトフォルダーを区別する
赤でマークされたbx_フォルダーはbluetronix CMSに属します。これらのフォルダー内の独自のファイルには_ownを付ける必要があります。正規のCMSアップデート時にシステムファイルと同じように扱われないようにするためです。
独自のJavaScriptおよびCSSファイルを、bx_プレフィックスなしで自分で作成したプロジェクトフォルダーに保管することもできます。例えば/script/や/my_scripts/などです。そこでは_ownのタグ付けは必須ではありません。実際のパスはレイアウト定義で使用する必要があります。
_own のラベルは、レイアウトへの組み込みを置き換えません: 別個に作成されたファイルは、適切な script または link 行が組み込まれたときにのみ読み込まれます。
8. 自動ファイルバージョン管理
示されたレイアウトの統合で、bluetronix CMSは__FV_…__のマークを使用しています。これにより、CMSは変更日に基づいてバージョンパラメータを追加できます。変更後、ブラウザは最新のJavaScriptまたはCSSファイルをロードし、古いキャッシュバージョンを使用しません。
例: 初期のパス /script/MyScript.js は処理後にバージョンパラメータで補足されることがあります。適切に組み込まれたファイルのバージョン番号を各レイアウトで自分で更新する必要はありません。
9. 変更を保存し、確認する
まず、自分の JavaScript および CSS ファイルを保存し、次に修正されたレイアウトを保存します。ウェブサイトを再読み込みし、JavaScript 関数が実行され、自分の CSS ルールが適用されているかを確認してください。
ファイルが読み込まれない場合、まずファイル名、大文字小文字、フォルダパス、およびレイアウトでの組み込みを確認してください。複数のレイアウトが使用されている場合、該当ページに割り当てられたレイアウトを編集しているかどうかも確認してください。
要約
独自の拡張のために、例えば BxHeadScript_own.js を bx_script フォルダに、BxStyle_own.css を bx_style フォルダに作成します。その後、元の CMS ファイルに加えて Layout - HTML に両方のファイルを組み込みます。そうすれば、標準ファイルは変更されず、プロジェクト固有の JavaScript と CSS コードを分離して管理できます。
FAQ
お客様からよくある質問
独自の JavaScript および CSS ファイルを組み込むには、開発者アクセスが必要ですか？
はい。このチュートリアルは、bluetronix CMS のレイアウト定義および開発者フォルダにアクセスできる開発者向けです。
JavaScript と CSS の組み込みはどこにありますか？
Layout を開き、Layout - HTML を選択します。そこで、希望するレイアウトに組み込みを追加できます。
独自の JavaScript ファイルはどこに保存しますか？
示された例では、BxHeadScript_own.js を bx_script フォルダに作成し、既存の BxHeadScript.js に加えてレイアウトに組み込みます。
独自の CSS ファイルはどこに保存しますか？
示された例では、独自のファイル BxStyle_own.css は bx_style フォルダにあります。レイアウトでは、既存のスタイルシートの後に組み込まれます。
なぜ独自のファイル名に _own を含めるべきですか？
赤いマークの bx_ システムフォルダは、アップデート時に上書きされる可能性があります。_own を付けることで、独自のプロジェクト固有のファイルを識別できます。
_own ファイルは作成後に自動的に読み込まれますか？
いいえ。希望するレイアウトに適切な script または link の組み込みを追加する必要があります。
bx_-システムフォルダの代わりに独自のフォルダを使用できますか？
はい。bx_ プレフィックスのない自分で作成したプロジェクトフォルダでは、_own は必ずしも必要ではありません。レイアウトでは実際のファイルパスを使用してください。
独自の CSS ファイルを標準ファイルの前に読み込むべきですか、それとも後に読み込むべきですか？
示された例では、BxStyle_own.css は BxStyle.css の後に組み込まれています。これにより、同じ特異性で独自のルールが先に読み込まれた標準ルールを上書きできます。
ファイルパスにおけるマーク__FV_…__の目的は何ですか？
bluetronix CMS はこれを使用してファイルのバージョンパラメータを追加し、ブラウザが変更後に最新のファイルを読み込むことができます。
自分のファイルが有効にならない場合は何を確認しますか？
ファイル名、大文字と小文字の区別、指定されたパス、および正しいレイアウトの組み込みと選択を確認してください。