注記はじめにこのページでは、以下の方法について学習します。1.29、Bootstrapに基づいた完全な新しいテンプレートエンジンシステムを導入し、テンプレートの継承とテンプレートオプションが利用可能になりました。これにより、古い置換キーワードシステムが完全にいらなくなり、フロントエンドHTMLの100%をカスタマイズすることができます。古いテンプレートシステムでは、実行時に評価用HTMLに置き換えられるキーワード{ASSESSMENTS}がありました。テンプレートデザイナーは、JavaScriptを使用する以外にこのHTMLをカスタマイズする方法がありませんでした。今では、このHTMLを生成するためのロジック(Twigで書かれています)を含むassessmentments.twigというファイルがあります。こらのページでは、この新しいテンプレートエンジンの使用方法について説明します。ここでは、Twigの仕組みは詳しく説明しません。Coreコードの部分で詳しく説明します)。PHPを知っていれば、習得するのは非常に簡単です。PHPを知らないとしても、習得するのはかなり簡単なはずです。1.Xのドキュメントをご覧ください。https://twig.symfony.com/管理インタフェースを使用した編集テンプレートリスト管理ダッシュボードに、テンプレートリストにアクセスするためのボックスが追加されました。RC3の新規インストール後のテンプレートリストリストは5つの列に分かれています。テンプレートのルートにある“preview.png”という画像ファイルです。テンプレートが別のテンプレートを拡張する場合は、その名前がここに表示されます。テンプレートのマニフェストを読み込んでデータベースに追加し、アンケートレベルで選択できるようにします。アンインストール:データベース内のテンプレートの設定エントリーを削除します。テンプレートエディターにリダイレクトされます。テンプレートオプション:テンプレートオプションのグローバル設定を行います。テンプレートエディターこのドキュメントは、以前のバージョンのLSでテンプレートエディタを使用する方法をすでに知っていることを前提としています。テンプレートエディターは元のものにできるだけ近づけて維持されています。コアテンプレートを開いても編集できません。“コピー”ボタンではなく、“拡張ボタン”があります。テンプレート継承の考え方についてLS3では、テンプレートは別のテンプレートから継承できるようになり、別のテンプレートを“拡張”することができます。これは、テンプレートディレクトリーは最初は空で、元のものと異なるファイル(ビュー、スタイルシート、スクリプト、リソースなど)のみが保存されます。することで、多くのテンプレートを維持することなく、多くのユーザー向けのテンプレートを簡単に作成できます。独自の自家製テンプレートを持つとともに、ある会社向けのバージョン(ロゴ、そのスタイル、フッターなどに配置するWebサイトへのリンクなど)、さらに別の会社向けのバージョンを持つことができます。カスタムテンプレートのCSSまたはグローバルレイアウトを更新すると、それを継承するすべてのテンプレートが自動的に更新されます。テンプレートは他のテンプレートを拡張するテンプレートを拡張することができる、といった具合に、継承は再帰的になります。LimeSurveyの主要なテンプレートを拡張すると、そのアップデートからのメリットを受けられるということでもあります。ユーザーインターフェイスの新規性LimeSurveyのMonochromeテンプレートを拡張するには、Templateリストに移動して、Monochromeテンプレートの“テンプレートエディター”ボタンをクリックします。次に、“拡張”をクリックして、新しい名前が“extends_monochrome”となっていることを確認します。ファイル/ftpクライアントを使用してアップロードディレクトリに移動すると、新しいディレクトリupload/templates/extends_monochromeが作成されていることがわかります。これにはXMLファイルとディレクトリが含まれていますが、ほとんどのディレクトリは空です。CSSもJSもありません。このテンプレートはアンケートから正常なテンプレートとして選択することができ、monochromeテンプレートとまったく同じように見えます。元のテンプレートのリソース(jpg、pngなど)は、テンプレートを拡張するときにコピーされます。これは、CSSファイルを元のテンプレートからローカルにコピーし、そのファイルを背景画像ステートメントなどで参照する場合、現在のテンプレートパスからそれらの画像にたどり着く必要があるからです。extend_monochromeテンプレートのテンプレートエディタは次のようになります。古いテンプレートエディターと大きな違いはありません。ファイルリストにある継承というキーワード。これは、ファイルがテンプレートディレクトリーに存在せず、元のテンプレートのファイルが使用されることを意味します。)には、選択したファイルの内容が表示されます。ファイルには、HTML、CSS、またはJSだけでなく、Twigステートメントも含まれています。これらのTwigステートメントは、以前はコアの深いところに位置していたテンプレートビューにいくつかのロジックをプッシュできるようになり、カスタマイズすることができます。このため、トップメニューのドロップダウンセレクタで、より多くの画面タイプを利用できるようになりました。以前には利用もカスタマイズもできなかった‘アンケートリスト’、‘読み込み’、‘保存’、‘エラー’、‘登録’、‘評価’、‘回答の印刷’などのページがあります。ファイルリストの一番下にある‘tip’リンクは、HTMLに画像をTwigで追加する方法を表示します。‘変更を保存’ボタンはローカルのテンプレートにコピーし、変更を保存するボタンになっています。画像の追加ローカテンプレートにコピーして変更を保存するボタンは、ファイル内の何かを編集してそのボタンをクリックすると、ファイルを編集中のテンプレートにコピーして変更を保存します。“TEST”を追加し、ボタンをクリックします。“ローカル”に変更され、ボタンが単純な変更を保存するボタンになっていることがわかります。ファイルエクスプローラーを開いてupload/templates/extend_monochrome/views/ディレクトリーに移動すると、layout_global.twigというファイルが1つだけあり、その中に文字列“TEST”がそこにあることがわかります。今、ランダムなテキストを追加する代わりに画像を追加します。TIPリンクをクリックすると、次のように表示されます。.twigファイルで画像を使用するには、次のようにします。}}によって関数の結果がスクリーンに表示されます。ここでは、その関数とはimaga()です。詳しく知りたい場合は、ここからコード(RC3バージョン)を見ることができます。RC3におけるimage()関数コードを理解できない場合でも心配する必要はありません。どのように動作するのか知っている必要はありませんが、使う理由と使い方を理解していればいいのです。次の2つの理由から、image()関数を使用する必要があります。image関数はテンプレートを検索して画像を見つけます。作業中のテンプレートが別のテンプレートに拡張されていて、画像をローカルに挿入した場所にファイルをコピーしたものの、その画像がローカルテーマにコピーされていない場合であっても、テンプレート継承ツリーを検索して、その画像がどこにあるかを見つけます。アセットマネージャーを使用するので、テンプレートのパフォーマンスを向上させます。Managerのマニュアルを参照してください。右側のファイルアップローダーを使っていつものようにアップロードし、twigファイルの必要な場所に追加してください。}}画像の代替テキスト(スクリーンリーダーやHTML検証向け)を追加する場合は、次のようにします。}}クラス属性を追加し、そのクラスにidを追加する場合は、次のようにします。}}開発検討中の事項エディター自体からカスタムプレビューファイルをアップロードできるようにするローカルファイルを削除し継承されたステートメントに戻るボタンを追加するCSSファイルで使用されている画像のみをコピーする(コピーすべきファイルとしてマニフェストに記載します)現在のテンプレートを拡張したものがどのテンプレートかをわかるようにする(もしあれば)テンプレートオプションLS3のもう一つの目新しい点は、テンプレートのオプションページです。後で説明するように、テンプレート作成者は独自のオプションや独自の管理オプションページを作成することもできます。ここでは、コアテンプレートのオプションページの仕組みを簡単に見ていきます。グローバルレベルでテンプレートオプションにアクセスするには、テンプレートリストの“テーマオプション”をクリックします。簡単なオプションか高度なオプションのどちらかを使って編集するか選ぶことができます。“高度なオプション”は、データベースからメインのテーマ設定欄に直接アクセスできるフォームです。動作原理を理解するため、XMLファイルやスクラッチでテーマを作成することも理解しなければなりません。したがって、非常に複雑で上級者向けです。それでも高度な設定の編集をしたければ、高度なオプションタブをクリックします。読み込むCSSフレームワークの名前。現時点では、Bootstrapか何も指定しないかとどちらかです。コアのbootstrap.cssを、カスタマイズしたものに置き換えます。コアのbootstrap.jsを、カスタマイズしたものに置き換えます。この設定により、LimeSurveyからコアのアセットパッケージを読み込ませることができます。画面上部から、テーマのディレクトリーにファイルをアップロードすることができます。これらのパラメーターは、テーマの全体的な外観を変えるために使用します。意味がわからない値には手を出さないでください!簡単オプション簡単オプションページは、テンプレート自体から生成されます。これは、template/optionsディレクトリーにあるtwigファイルとjavascriptで作成されています。https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/optionsこのページはテーマごとに完全に異なるため、テンプレート提供者は独自のルック&フィールを作成することを強く推奨します。簡単オプションページは、詳細オプションの設定フォーム入力を単に入力するだけです。簡単ページの設定をオンまたはオフにして、それに応じて詳細フォームの関連部分がどのように変更されるかを確認できます。[["css/bootstrap.css","css/flatly.css"]]}から、次のモノに変わります。[["css/bootstrap.css","css/darkly.css"]]}コアテーマのさまざまな簡単オプションを次に示します。次のページをajax(高速)またはページリロード(デバッグ目的に適しています)経由でロードするかどうかを指定します。「no」に設定すると、アンケートの名前がトップバーに表示されます。「Yes」の場合は、ファイルディレクトリ内の画像の1つをロゴ画像として使用することができます。ここでは、ロードするブートストラップテーマを選択できます。Bootswatchは、次のサイトから来ています。https://bootswatch.com/3/アニメーションに使用されるライブラリはanimate.cssです。テンプレート提供者は独自のアニメーションライブラリを追加することもできますし、アニメーションライブラリをまったく追加しないこともできます。monochromeのテンプレートは、管理ユーザーインターフェイスと同じブートストラップカラーテーマを使用します。これらはCSSフレームワークの置換システムを使用せず、CSSファイルを追加するだけです。テンプレート提供者がカスタムテーマを扱う別の方法を示しています。継承システムこれまで、テンプレートを別のテンプレートに拡張できることがわかりました。テンプレート設定についても、別のテンプレート設定から継承することができます。個々のテンプレートについて以下のレベルで設定することができます。グローバルレベル(テンプレートリストからアクセスできるもの)アンケートグループレベルアンケートレベル各レベルのそれぞれのパラメータは、上位レベルから継承することができます。アンケートグループレベルを見てみましょう。アンケートグループレベルLS3の重要な新規性の1つとして、アンケートグループシステムが挙げられます。さまざまなグループを作成してアンケートを整理できるようになりました。アクセスするには、アンケートリストに行き、アンケートグループタブをクリックします。アンケートグループタブこのリストには、2つの操作ボタンがあります。グループが空の場合は、削除できます。空でない場合は、編集することができます。編集ボタンをクリックすると、アンケートグループ設定ページが表示されます。既定のアンケートグループの編集このページの3番目のタブは、“このアンケートグループのテンプレートオプション”と呼ばれています。ここをクリックすると、テンプレートリストと同じテンプレートのリストが表示されますが、ここではオプションボタンのみが表示されます(テンプレートエディターにはメインリストからのみアクセスできます)。既定のテンプレートのオプションをクリックすると、次のように表示されます。everything(すべて継承)ということは、すべての設定がグローバル設定レベルから継承されることを意味します。高度なオプションページに行くと、すべてのフィールドが継承されて設定されていることがわかります。everything"で"いいえ"を選択すると、グローバルオプションページと非常によく似たページが再び表示されます。唯一の違いは、フィールドごとにはい、いいえ、または継承(inherit)に設定できることです。各セレクタに継承があります。個々の設定は継承という値があるアンケートグループは、別のグループの子になることができます。この場合、親から継承します。アンケートレベルアンケートを編集するときは、左のバーメニューに“テンプレートオプション”という新しいエントリーが表示されます。現在のアンケート用に選択されたテンプレートのオプションページに移動します。アンケートグループと同じ継承システムがありますが、この場合の継承は、アンケートが属するアンケートグループから設定値が継承されることを意味します。アンケートレベルでのテンプレートオプションユースケースの例たとえば、異なる企業(AとB)に1つのテンプレートを使用しているとします。お気に入りのオプションは、グローバルレベルで設定します(例:ajaxはon、本体のアニメーションはスライドイン、警告はパルス)。次に、各会社のアンケートグループを作成します。会社Aのアンケートグループは、この会社のすべてのアンケートをホストし、会社Bのアンケートグループは、会社Bのすべてのアンケートをホストします。このレベルでは、ロゴと背景のみを設定し、他のオプションは継承させます。これにより、グループAのすべてのアンケートでは、会社Aのロゴを使用し、グループBのすべてのアンケートは、会社Bのロゴを使用します。会社Aのあるアンケートで、トピックと関連して異なる背景を使用できます。アンケートレベルでオプションの背景を変更するだけです。B社の誰かが、パルスで表示される警告があまりにも目立ち、フェードインのようなスムーズなものを好む場合は、アンケートグループBレベルで警告のアニメーションを変更するだけで、このグループのすべてのアンケートでこのアニメーションが使用されるようになります。会社Aがロゴを変更した場合は、アンケートグループAのレベルで変更することができ、このグループのすべてのアンケートで新しいロゴが使用されます。この例は、コアテーマの現在のオプションに基づいています。あなたがテンプレート提供者で、またtwigで少しスクリプトを作成できる場合は、独自のオプションを追加することももちろん可能です。footer"を追加することができます。次に、A社に個別の電話番号を持つ部門がある場合、アンケートグループAに各部門ごとに1つのサブグループを作成できます。各サブグループは、このオプションで独自の電話番号を持つことができます。テーマのカスタマイズに関するFAQここでは、フォーラムで提起された質問に対する回答を紹介しており、テーマのカスタマイズに役立てることができます。アセットマネージャーを扱う("なぜ変更が反映されないのか")好みのエディターでコードを直接編集してテーマのCSS/JSを更新しようとしても、変更が適用されないことに驚くかもしれません。2.50以降、LSはYiiアセットマネージャを使用しています。"tmp/1ef64ml/")に移動します。したがって、css/jsファイルに変更を加えてアセットマネージャに伝えると、ファイルは新しい名前で新しいサブディレクトリにコピーされ、ユーザーブラウザのキャッシュが更新され、新しいcss/jsが表示されます。それ以外の場合は、ブラウザのキャッシュを消去する必要があります。アセットマネージャーがオンのときのヘッダーのCSSリンクです。サブフォルダーを参照しています。アセットマネージャーがオフのときのヘッダーのCSSリンクです。ご覧のように、テーマの実際のファイルを指しています。アセットマネージャーがファイルを変更したことを知らない場合、古いtmp/ディレクトリーの古いファイルは変更されず、変更は適用されません。テーマのCSS/JSを編集すときは、さまざまな方法があります。それはアセットマネージャーを扱うので、何も心配する必要はありません。アセットキャッシュをクリアするテーマエディターを使用してカスタムCSSを編集するのが最良の解決策です。テーマエディタを使用すると、新しいテーマエンジンのアーキテクチャを理解するのに役立ちます。fruityをカスタマイズした場合は、CSSの指定に注意してください。ほとんどの定義ではセレクタ".fruity"(body要素のクラスの1つ)を使用します。CDNを使用しています。どのように動作するか見てみましょう。url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");LatoフォントがCSSルールで使われています。...}カスタムテーマでこのように任意のGoogleフォントを使用することができます。テーマのオプションからフォントセレクタを削除する必要があります。options.twigの行を削除します。https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230ローカルフォントの使用もちろん、フォントファイルをダウンロードして、GoogleのCDNではなくローカルサーバーから使用することもできます(プライバシー保護の点で優れています)。実例として、こちらのnotoフォントのローカルバージョンがあります。フォルダーにNotoSans-Regular.ttfファイルをコピーします。次に、そのフォントを上記のようにbody(または他の要素)に適用し、既定のフォントセレクターを削除します。オプションに独自のフォントセレクターを作成する今のところ、コアフォントセレクターを使ってオプションで独自のフォントを簡単に追加することはできません。最初に、エンドユーザーにカスタムパッケージをアップロードできるようにする必要があります(次の段落「Fruityフォントセレクターを理解する」を見てください。やり方は以下の通りです。CDNまたはローカルサーバーを使用して、テーマに2つのフォント(my_custom_fontとmy_custom_other_font)を追加します。次に、cssファイルで、2つの新しいクラスを追加します。'my_custom_other_font';}テーマのXMLファイルで、フォントオプションを追加します(デフォルトはmy_custom_fontになります)。</options>option.twigで、以下の行を追加してフォントピッカーを追加します(今のところテストされていないので、うまくいかない場合はフォーラムに来て報告してください)。</div>これでユーザーが2つのフォントを選択できるようになりました。将来的には、エンドユーザーがフォントパッケージを含む独自のアセットパッケージをアップロードできるようになる予定です。これにより、非常に簡単にフォントの任意のカスタマイズができるようになります。Yiiパッケージを理解するにはこちらを参照してください。http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detailLimeSurveyパッケージは多数のファイルで定義されています。フォントパッケージは、次のように定義されています。https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php例えば、Notoフォントパッケージはここで定義されています。),ここに定義されているnoto.cssはこちらにあります。https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css最後にあるcssクラス".font-noto"に注目してください。Sans';}次に、Vanillaテーマでは、notoパッケージを追加し、notoにフォントオプションを定義することによってnotoフォントが使えるようになります。</options>bodyクラスのフォントは、次の値を使用して定義されます。>もちろん、XMLファイルには、テンプレート設定の既定値のみが含まれています。実際には、これらの値はjson文字列として定義され、データベース内で読み込まれます("template_configuration"テーブル)。option.jsファイルでは、簡単オプションのフォントセレクタの値は詳細設定タブフォーム内の値を変更するために使われます。https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174したがって、"アセットパッケージのアップロード"機能を利用できるようになると、既存のフォントパッケージをすべてスキャンしてセレクタに追加するスクリプトを簡単に追加できるようになります。アンケート要素の配置と表示を制御するテーマオプションの追加このチュートリアルでは、拡張テーマにオプションを追加してさまざまな場所にアンケート要素を表示する方法を示します。ここでは、2つの異なる場所にアンケートのタイトルを表示するためのテーマオプションを作成します。わかりやすくするため、このチュートリアルは、LimeSurveyバージョン3.4.3の"bootswatch"テーマの拡張をベースとします。上記のように"bootswatch"テーマを拡張します。上記のようにcustom.cssをローカルテンプレートにコピーします。新たなテンプレートオプションの作成/themes/survey/bootswatch/options/の内容を/upload/themes/survey/yourThemeName/options/にコピーします。class='row'>エレメントのすぐ前に以下を追加します。class='row'><hr/></div>/upload/themes/survey/yourThemeName/config.xmlを開き、"options"ブロックに2つのアイテムを以下のように追加します。</options>これにより、テーマオプション画面に2つの新しいオプションが次のように追加されます。ナビゲーションバーのアンケートタイトルの見た目を変更する次の新しいディレクトリーを作成します。/upload/themes/survey/yourThemeName/views/subviews/header//themes/survey/vanilla/views/subviews/header/nav_bar.twigをコピーし新しいディレクトリーにコピーします。logo/survey-nameのIFステートメントを次のように変更します。%}/upload/themes/survey/yourThemeName/css/custom.cssに次のような記述を追加します。navbar"というテーマオプションを"Yes"にします。プログレスバーの下にあるアンケートタイトルの見た目を変更する次の新しいディレクトリーを作成します。/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twigを新しいディレクトリーにコピーします。/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twigを開き、アンケート名のためのエレメント<h1>を追加します。%}</div>/upload/themes/survey/yourThemeName/css/custom.cssに次のような記述を追加します。bar"というテーマオプションを"Yes"にします。Media:Test_survey_names.zipテーマをスクラッチで作成するドキュメントは準備中です。取り急ぎ、いくつかのヒントを紹介します。structure/css/jsを意識する必要はありません。必須のcss/jsは自動的に追加されます(必要に応じて削除することもできます)。テーマでは少なくともレイアウトファイルがなければなりません。回答を印刷するこれらのファイルが含まれているかどうかに関係なく、ファイルの内容は完全に自由に設定できます。Vanillaに含まれているその他のファイルやディレクトリはすべて純粋にオプションあり、すきなようにコードを整理することができます。フロントエンドのレンダリングコードを読むと、これらのファイル名が直接表示されていることがわかります。これが必須である理由です。"include_content"という変数を使用しています。すべてクリアなど)を示します。ご覧のとおり、vanillaでは、アクションによってインクルードするファイルを1つ作成します。アクションのリストを知りたい場合は、vanillaのディレクトリviews/subviews/contentをチェックし、"twig"拡張子を削除してください。2.x用の古いpstplファイルに対応していることがわかります。繰り返しますが、テーマ内で、このディレクトリーにこれらの名前のファイルを作成する義務はありません。各アクションに必要なHTMLを指定して、layout_global.twigに巨大なスイッチを追加するだけです。マニフェストconfig.xmlテーマのマニフェストには、テーマに関する主な情報が含まれています。テーマをインストールすると、マニフェストの内容は2つの異なるテーブル(templateとtemplate_configuration)でデータベースに読み込まれます。そのため、テーマのマニフェストを変更するたびに、テーマをアンインストールして再インストールする(または単にリセットする)必要があります。テーマの開発中はこのプロセスが面倒なので、DBエントリーではなくXMLファイルを直接使用するようにできます。'force_xmlsettings_for_survey_rendering'をtrueにします。メタデータセクション複雑なことは何もありません。テーマに関する主な情報だけです。これらはテーブルtemplates_configurationに格納されます。データベース内でキーとして使用されます。従ってユニークでなければならず、スペースや特殊文字を含んではいけません。大文字か小文字かは区別されないことに注意してください。テーマの名前をリストに表示するために使用されます。特殊文字を含むことができます。アンケートテーマのメインリストで使用されます。特殊文字、さらにはHTMLコードを含むことができます。任意ですが、親テーマを定義します。従って、このテーマにファイル(twig/js/css/jpgなど)が存在しない場合は、親テーマから検索されます。3つのコアテーマ(Vanilla、Bootswatch、Fruity)のいずれかを拡張した場合は、「extends」の値を別の親テーマに変更できます。テーマをリセットする必要があります。ファイルセクションこれは重要なものです。これはテーブルtemplate_configurationのフィールドfiles_css、files_js、files_print_cssにjson配列として格納されます。</files>このセクションにあるすべてのCSS/JSファイルは、アンケートの開始時にロードされます(ajaxモードの場合。ajaxモードがオフの場合でも、各ページを開いたときにすべてのファイルが再ロードされます)。Packetに追加されます。Managerがオンのとき(デバッグモードがオフのとき)、テーマのリセットにより、これらのファイルは残りのテーマとともにtmpディレクトリにコピーされます(したがって、CSSとJSでは相対パスを使用して画像ファイルにアクセスできます)。CClientScript#packages-detailこれらは継承システムを使います。CSS/JSファイルをテーマに追加しても、それがテーマに含まれていない場合、エンジンはこのテーマのすべての親テーマを調べ、最初に見つかったものを使用します。そのため、ユーザーがテーマエディターを介してテーマを拡張した場合、これらのファイルはすべて自分のテーマに継承されます。次のキーワードはこの継承システムを指定します。'force_xmlsettings_for_survey_rendering'に設定できるので、設定はDBではなくXMLから読み込まれます(リセットは不要)。これにより、XMLファイルの変更をテストしやすくなり、XMLを変更するたびにテーマをアンインストール/再インストールする必要がなくなります。継承のヒント上述のとおり、"add"キーワードはファイルが親テーマの一部として指定します。そのため、このセクションにファイルを「追加」しても、そのファイルは当該のテーマに含めるのではなく、その親テーマの1つとして含めることになります。エンジンはすべての親テーマを調べ、最初に見つかったテーマを使用します。ファイルが見つからず、configでデバッグモードがオンになっていて、グローバル設定でjsフロントエンドデバッグモードがオンになっていると、コンソールにメッセージが表示されます。my_themeに<add>css/unexisting.css</add>のように追記した場合、コンソールには、次のように表示されます。'my_theme'デバッグモードがオフの場合、エラーはまったく発生しません。エンジンは間違ったaddステートメントを無視するだけです。addを使うか、replaceを使うか、親テーマに委ねるかまず、addとreplaceはまったく同じキーワードです。どちらを使っても、エンジンはまったく同じように動作します。人間にとっては区別して使用される言葉ですが、設定者の意図が何であるかは理解されています。親テーマと同じ名前のファイルを追加することはできません。常に親テーマのファイルを置き換えることになります。親テーマに"my_mother_theme/foo.css"というファイルがあり、子テーマに"foo.cs"というファイルを追加すると、テーマには"daughter_theme/foo.css"だけが追加されます。"my_mother_theme/foo.css"を保持したい場合は、"daughter_theme/foo.css"の代わりに、"daughter_theme/bar.css"のような別の名前を選択してください。"replace"キーワードと同様に使用できます。これにより継承されたテーマの自動生成をずっと簡単になります。ファイルセクションをコピーすればそのまま動作します(ファイルを拡張するときに"add"を"replace"に置き換える必要はありません)。明確にするために、Fruityの例を見てみましょう。CSSファイルセクションは以下のとおりです。</css>Fruityのcustom.cssファイルは、vanillaのものと全く同じです。Fruityフルーティーの中のcustom.cssファイルを削除することができ、その場合、vanillaのものが読み込まれます。マニフェストから<replace>custom.css</replace>というステートメントを削除でき、その場合、vanillaのステートメントが使用され、vanillaのcustom.cssが読み込まれます。Fruityのマニフェストで<replace>custom.css</replace>というステートメントを使用するのでしょうか。エンドユーザがFruityテーマを拡張し、彼らのローカルテーマのファイルを変更し、継承したテーマからこの変更したファイルを読み込めるようにしたいからです。理解するため、Fruityを拡張し、拡張されたテーマを見てください。拡張されたテーマにはcustom.cssというファイルがないので、Fruityのものが使用されます。ユーザーが(テーマエディタの"extend"をクリックして)拡張したテーマでこのファイルを作成した場合、このファイルは作成したテーマから読み込まれます。したがって、一般的には、テーマを拡張せず、スクラッチでテーマを作成する場合は、addステートメントを使用してcss/jsファイルを追加してください。テーマを拡張して新たなテーマを作成し、ユーザーが親テーマから継承したcss/jsファイルによって拡張できないようにするには、マニフェストでaddステートメントを使用しないでください。ないと、ファイルは親テーマの設定により読み込まれます。テーマを拡張して新たなテーマを作成し、その親テーマのファイルを置き換える場合は、replaceキーワードを使用します(addキーワードを使用した場合も同じ結果になります)。テーマを拡張して新たなテーマを作成し、なおかつ既存のcss/jsファイルを置き換えるのではないが、ユーザーがこのファイルを拡張できるようにする場合は、マニフェストで、このファイルについて"replace"ステートメントを使用します。ファイルを置き換えない場合でも、マニフェストでキーワードreplaceを使用することにより、ユーザーが置き換えを望む場合に対応できます。他のケースは大したことではありませんが、この最後のケースだけは、少し頭の体操が必要です。twigコードから直接CSSとJSファイルを登録することもできます。これらのファイルは、twigファイルが要求されたときにのみ読み込まれます。script.js')を使用します。これらの機能を使わなくても、テーマは動作するかもしれませんが、それに対する継承は機能しません。picture.jpg')関数と同じ考え方です。removeキーワードremoveキーワードは3.14以降で利用可能です。これを使えば、どんなコアパッケージでも、どんなパッケージからでもどんなcss/jsファイルでも削除することができます。Checkboxのファイルを削除するために使用されています。フォルダーパスなしで"awesome-bootstrap-checkbox.css"を単独で使用すると、うまく機能しません)。/application/config/packages.phpとconfig/third_party.phpにコアパッケージとその中にあるファイルの完全なリストがあります。awesome-bootstrap-checkbox.cssについては、以下のようになっています。),removeタグで使用する正確な名前を見つけるもう1つの方法は、アセットマネージャーをオンにすることです(デバッグモードをオフにするか、configで'use_asset_manager'=>trueとします)。使用するパスは、tmpディレクトリー内のランダムディレクトリーの直後のパスになります。awesome-bootstrap-checkbox.cssは以下のようになります。/>削除すべきでないファイルは以下のとおりです。すべての式マネージャーjavascriptで必要オプションセクションこのセクションはあなたのテーマのオプションに関するものです。"options"をtemplate_configurationテーブルにJSON配列として格納するために使用します。テーマのXMLファイルを編集する場合は、そのテーマが反映されるようにテーマをアンインストールしてから再びインストールする必要があります。これを避けるために、DBではなく強制的にXMLを使用することができます。config.phpでデバッグモードをオンにし、コメントアウトします。DBではなく強制的にXMLファイルを使用したい場合はコメントを外します(簡単なテーマ開発のため)。テーマエディターを使用せずにCSS/JSファイルを手動で編集し、かつデバッグモードがオフの場合は、アセットを強制的にフラッシュできるようになりました。"全体設定"、"全般"タブで、"アセットキャッシュをクリアする"ボタンをクリックします。