組み込みポートレットでの位置タグリブの使用

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

この記事では、Liferayプラットフォームを使用している間に、4つの異なる位置のタグリブを利用する方法を説明します。 4つのタグリブがあります。 BodyBottomTag, BodyTopTag, HtmlBottomTag そして HtmlTopTagです。

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

決議

ポートレットの中に位置タグlibの1つを含めた場合、ポートレットが埋め込まれているか埋め込まれていないかによって、デフォルトの動作は若干異なります。

• ポートレットが埋め込まれていない

  ポートレット が 埋め込まれていない場合、タグlibは上部か下部にコードを含みます。

• ポートレットが埋め込まれている

  ポートレット が に埋め込まれている場合、タグlib はコードをインラインでインクルードします。 つまり、ポートレットが埋め込まれているのと同じ位置に。

埋め込みポートレットがこのように機能する理由は、JavaScriptをロードした後に後続するためで、埋め込みポートレットをレンダリングする際のパフォーマンスの問題を回避するのに役立ちます。

デフォルトの動作はコードを上か下に表示することになっていますが、埋め込みポートレットに位置タグlibを持たせたい場合は、そのタグlibの中で値 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>