英語で読む

次の方法で共有


Azure Static Web Apps のスニペット

Azure Static Web Apps を使用すると、実行時にカスタム コードを head または body 要素に挿入できます。 これらのコードは、''スニペット'' と呼ばれます。

スニペットを使用すると、コア コードベースを変更することなく、1 か所でサイト内のすべてのページにコードを柔軟に追加できます。

スニペットの一般的なユース ケースは次のとおりです。

  • Analytics スクリプト
  • 共通スクリプト
  • グローバル UI 要素

注意

フロントエンド フレームワークによっては、スニペット コードが上書きされる場合があります。 運用環境に適用する前にスニペットをテストします。

スニペットを追加する

  1. Azure portal で、静的 Web アプリに移動します。

  2. [設定] メニューから、[構成] を選択します。

  3. [スニペット] タブを選択します。

  4. 追加 ボタンを選択します。

  5. [スニペット] ウィンドウに次の設定を入力します。

    設定 説明
    場所 コードを挿入する HTML ページ要素を選択します。
    名前 スニペット名を入力します。
    挿入場所 コードを選択した要素の先頭に追加する末尾に追加するかを選択します。 ''先頭に追加する'' と、コードは要素の開始タグの直後に表示されます。 ''末尾に追加する'' と、コードは要素の終了タグの直前に表示されます。
    環境 ターゲットにする環境を選択します。 [環境の選択] を選んだ場合は、さまざまな環境からターゲットにするものを選択できます。
  6. テキスト ボックスにコードを入力します。

  7. OK を選択してウィンドウを閉じます。

  8. 保存を選択して変更をコミットします。

次のステップ