埋め込み型ポートレットでポジションタグリブを使う

Antonio Ortega

更新 2024年06月18日 05:46

この記事では、Liferayプラットフォームを使用する際に、4つの異なるポジションタグリブを使用する方法を説明します。タグリブは以下の4つです： BodyBottomTag, BodyTopTag, HtmlBottomTag and HtmlTopTag...。

これらのタグリブは、その中に含まれるコードを、DOM（Document Object Model）内の指定された領域の上部または下部に配置します。また、テーマ内にポートレットを埋め込むこともできます。本記事では、これらのポジションタグリブの使用方法について、情報および使用例を提供します。

解決策

ポートレットの中に位置タグリブの1つを含めると、ポートレットが埋め込まれているかいないかで、デフォルトの動作が少し違ってきます。

ポートレットが埋め込まれていない
ポートレットが埋め込まれていない場合、taglib は上部または下部にコードを含むことになります。
ポートレットが埋め込まれている
ポートレットが埋め込まれている場合、taglib はコードをインラインで含めることになります。つまり、ポートレットが埋め込まれている位置と同じ位置に。

埋め込みポートレットがこのように機能するのは、JavaScriptを読み込んだ後に追従するためで、埋め込みポートレットのレンダリング時のパフォーマンス問題を回避するのに役立ちます。

デフォルトの動作として、コードを上部または下部に表示するpositionタグリブを持つポートレットを埋め込みたい場合、そのタグリブの属性position（値 auto ）を利用する必要があります。以下は、埋め込みポートレットのコードの一部の例です：

アトリビュート・ポジションを使用せずに

<liferay-util:html-bottom>
    <script>
        console.log('This log will be executed inline.');
    </script>
</liferay-util:html-bottom>

アトリビュート・ポジションを使用する：

<liferay-util:html-bottom position="auto">
    <script>
        console.log('This log will be executed at the bottom.');
    </script>
</liferay-util:html-bottom>