推奨事項とベストプラクティス
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
一般に、すべてのコードはセマンティックで高度に再利用可能でなければなりません。 主な関心事は、フラグメント以外のページの他の要素に干渉しないように、すべてが適切に名前空間に設定されていることを確認することです。
CSS
フラグメントには任意のCSSを記述できますが、他のフラグメントへの影響を避けるために、フラグメント固有のクラスを接頭辞に付けることをお勧めします。 これを容易にするために、新しいフラグメントを作成するとき、HTMLには自動的に生成されたクラス名を持つ div
が含まれ、CSSはそのクラスを使用するサンプルセレクターを表示します。 追加するすべてのセレクターのベースとして使用します。
JavaScript
JavaScriptコードは簡単に再利用できないため、大量のJavaScriptコードを追加しないでください。 代わりに、外部JSライブラリを参照してください。
デスクトップツールを使用したフラグメントの開発
任意のデスクトップツールを使用してフラグメントを開発できます。 フラグメントはHTML、CSS、およびJavaScriptであるため、テキストエディターまたは専用のプレビューが組み込まれた専用ツールを使用できます。
コレクションをLiferayにインポートするには、次の形式のコンテンツで .zip
アーカイブする必要があります。
-
collection.json
:{"name": "<collection-name>"、 "description": "<collection-description>"}
の形式でコレクションを説明するテキストファイル-
[fragment-name]/
:単一ページフラグメントのすべてのファイルを含むフォルダ。-
fragment.json
:形式ページフラグメントを記述するテキストファイル{"jsPath": "src / index.js"、 "htmlPath": "src / index.html"、 "cssPath": "src / index.css "、" name ":"<fragment-name>"}
-
src /
:フラグメントのソースコードファイルを含むフォルダー。-
index.html
:フラグメントのHTMLソース -
index.css
:フラグメントのCSSソース -
index.js
:フラグメントのJavaScriptソース
-
-
-
コレクションには任意の数のフラグメントを含めることができるため、コレクションに多数のサブフォルダーを含めることができます。 この形式は、Liferay内からエクスポートされる形式と同じです。
開発者は、既存のコレクションにインポートするフラグメントを作成することもできます。 それらを同様にフォーマットされた .zip
に入れますが、最上位にコレクション情報はありません。
-
[fragment-name]/
:単一ページフラグメントのためのすべてのファイルを含むフォルダ。 -
fragment.json
:形式ページフラグメントを記述するテキストファイル{"jsPath": "src / index.js"、 "htmlPath": "src / index.html"、 "cssPath": "src / index.css "、" name ":"<fragment-name>"}
-
src /
:フラグメントのソースコードファイルを含むフォルダー。-
index.html
:フラグメントのHTMLソース -
index.css
:フラグメントのCSSソース -
index.js
:フラグメントのJavaScriptソース
-
複数のフラグメントを単一の .zip
ファイルに含めることができ、各ファイルには最上位に独自のフォルダーがあります。