Documentation

サイトの外観を変更する

サイトのロゴ、ファビコン、テーマの変更は、変更したい最初のルックアンドフィールの一部です。 テーマは、サイトの全体的なルックアンドフィールを設定するために使用されます。 サイトのページは、DXPインスタンスに展開されているテーマを使用するように構成できます。

DXP Dockerイメージには クラシック デフォルトで利用可能なテーマ。 この例では、新しいシンプルなテーマをデプロイしてから、テーマを切り替える方法を示します。

サイトのテーマを変更する

新しいテーマをデプロイする

新しいLiferayインスタンスを実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.22-ga22

http://localhost:8080でLiferayにサインインします。メールアドレスtest@liferay.comとパスワードtestを使用してください。プロンプトが表示されたら、パスワードをlearnに変更します。

次に、以下の手順を実行します。

  1. Acmeサンプルブルーテーマ を含むWARをダウンロードする :

    curl https://learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/liferay-5b2v-theme.war -O
    
  2. テーマを含むWARをデプロイします。

    docker cp liferay-5b2v-theme.war docker-container:path-to-deploy-folder
    

これにより、DXPインスタンスにサンプルテーマが読み込まれます。 コンソールで次のメッセージを確認して、テーマが正常にデプロイされたことを確認できます。

2020-03-11 17:06:35.601 INFO  [fileinstall-/opt/liferay/osgi/war][BundleStartStopLogger:39] STARTED liferay-5b2v-theme_1.0.0 [1112]

サイトのテーマを変更する

デプロイされたテーマを使用するようにサイトのページを構成します。

  1. ブラウザで https:// localhost:8080にアクセスし、 管理者としてログイン します。

  2. [Site Administration] → [Site Builder] → [Pages] に移動します。

  3. 公開ページ の横にある歯車アイコンをクリックしますそれらを設定するには:

    ページ画面を開いて、公開ページを構成します。

  4. 下にスクロールして、 現在のテーマを変更をクリックします ボタン:

     [現在のテーマを変更]をクリックして、パブリックページの新しいテーマを選択します。

  5. デプロイされたサンプルテーマ Acme Sample Blue Themeを選択します。

  6. サイトのホームページに戻り、テーマが変更されたことを確認します。 サイトのコンテンツセクションの背景が青色になりました。

    テーマを変更すると、ホームページの背景色が変わります。

サイトのテーマが更新されました。

テーマリソース

サイトの外観を管理する方法の全容については、Managing Your Site's Appearanceを参照してください。

Liferay Marketplaceで利用可能な多くのテーマがありますプロフェッショナルなルックアンドフィールをすばやく実現するために使用できます。

独自のテーマを作成する方法を学ぶこともできます