演習 - ページの編集

15 分

このハンズオンラボの目的は、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 ページの作成

+ ページ ボタンを選択します。
ページ名を入力します。
ランディングページの標準レイアウトを選択し、追加をクリックします。

ページを編集する

ページにある最初のボタンを選択します。プラス記号 (+) をクリックし、スペーサー要素を選択します。そのコマンドにより、カスタムコンテンツの前に小さなスペースが追加されます。
スペーサーを選択して、プラス記号 (+) をクリックし、テキスト要素を選択します。このコマンドにより、カスタムコンテンツのプレースホルダーが追加されます。
ページは以下のようになります。
コードの編集をクリックして、Web 用 Visual Studio Code エディターでページを開きます。
メッセージが表示されたら、[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) アイコンをクリックし、通知の表示を閉じます。