演習 - ページの編集
このハンズオン ラボの目的は、Power Pages デザイン スタジオを使用して Web ページを作成し、ソース コードを編集することです。
これらの演習の最後に、次のことができます。
- Power Pages デザイン スタジオを開き、ポータルを編集します。
- 標準テンプレートを使用して、新しいページを作成する。
- ページのソース コードを表示する。
- カスタムの HTML コードを直接追加する。
この演習では、次のものが必要です。
- 環境内にプロビジョニングされた Power Pages サイト。 Power Pages サイトを使用できない場合は、「Power Pages サイトの 作成と管理」の 手順に従ってサイトを作成します。
シナリオ
訪問者の Web サイト エクスペリエンスを強化するために、カスタム HTML コンテンツをページに追加する必要がある場合があります。 この演習では、無視できるアラートを作成する HTML コードを追加します。 このコードには、Liquid 言語 の小さなフラグメントも含まれています。これは、訪問者のための動的なあいさつ文を作成します。
大まかな手順
- Power Pages デザイン スタジオでポータルを開きます。
- ランディング Web ページを作成します。
- ページを編集して、スペーサーとコンテンツ プレースホルダーを追加してから、HTML コードを追加します。
- ページを保存し、結果を表示するためにサイトを閲覧します。
詳細な手順
Power Pages デザイン スタジオを起動する
Power Pages にサインインします。
右上隅の環境セレクターを使用して、ターゲット環境を選択します。
サイトを選択し、[ 編集] を選択してデザイン スタジオを起動します。
ページ ワークスペースが選択されていることを確認してください。
Web ページの作成
- + ページを選択します。
- ページ名を入力します。
-
ランディング ページの標準レイアウトを選択し、[追加] を選択します。
ページを編集する
ページにある最初のボタンを選択します。 プラス記号 (+) を押し、[ スペーサー 要素] を選択します。 このコマンドは、カスタム コンテンツの前に小さなスペースを追加します。
スペーサーを選択し、プラス記号 (+) を押して、 テキスト 要素を選択します。 このコマンドは、カスタム コンテンツのプレースホルダーを追加します。
ページは以下のようになります。
Edit code を押して、Web エディターのVisual Studio Codeでページを開きます。
メッセージが表示されたら、Open Visual Studio Code を選択します:
この選択により、Web 用の Visual Studio Code を含む新しいウィンドウまたはタブが開きます。 前に作成したテキスト要素を見つけます。
Enter text:
次のコードをコピーしてページ ソースに貼り付け、
<p>Enter text</p>コンテンツを置き換えます。<div role="alert" class="alert alert-info alert-dismissible"> <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong> Get your unlimited free education at <a href="https://learn.microsoft.com/">Microsoft Learn</a> </div>コンテンツは次のようになります。
Ctrl+S (macOS では ⌘+S) キーを押してファイルを保存します。
デザイン スタジオのウィンドウに切り替えます。 [同期] ボタンを押してエディターを同期し、キャンバスに更新されたコンテンツを表示します。
変更がデザイン スタジオ キャンバスに表示されます。 右上隅にある [プレビュー ] ボタンを押し、[デスクトップ] を選択 します。
閉じることができるアラートが表示されたカスタムページが開きます。
あいさつ文の内容が、今月になっていることを確認します。
バツ (x) アイコンをクリックし、通知の表示を閉じます。