テンプレート処理中にエラーが発生しました。 
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@51577ebb"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6		{ 
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31			} 
32		} 
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45		> 
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65					> 
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78						> 
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109					> 
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114						> 
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131						> 
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144						> 
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 
フィードバックを送信

サイトの外観を変更する

Liferayにはサイトの外観をカスタマイズする方法がたくさんあります。 サイトのファビコンとテーマは、あなたが変更したいと思うかもしれない最初の要素の2つです。 テーマは、あなたのサイトのデフォルトのルック＆フィールを設定し、ファビコンは、ユーザーのブラウザのタブであなたのサイトを識別するためのアイコンです。

サイトのファビコンを変更する

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 。

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

次に、以下の手順に従います。

  1. サイトメニュー(サイトメニュー)を開き、 サイトビルダー → ページ に移動します。

  2. アプリケーションバーの Actions(アクションボタン)をクリックし、 Configuration を選択します。

    Open the Pages application, click Actions in the Application Bar, and select Configuration.

  3. ファビコン]で、 ファビコンを選択（ ファビコンを選択ボタン ）をクリックします。

    Click the Select Favicon button.

  4. 画像を選択またはアップロードします。

  5. ［保存］をクリックします。

サイトでは、選択した画像がお気に入りのアイコンとして使用されます。

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

デフォルトでは、LiferayインスタンスはClassicテーマを使用しますが、カスタムテーマをデプロイして使用することもできます。

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

  1. Acme Sample Blue Theme WARファイルをダウンロードし、解凍する：

    curl https://resources.learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/resources/liferay-5b2v.zip -O

    unzip liferay-5b2v.zip

  2. .warファイルが置かれているフォルダに移動し、デプロイする：

    docker cp liferay-5b2v-theme.war [docker-container-id]:[path-to-deploy-folder]
Note

[docker-container-id] を置き換えるには、docker ps を使って liferay/portal コンテナの ID を調べます。 path-to-deploy-folder]はopt/liferay/deploy です。

これでサンプルテーマがDXPインスタンスにロードされます。 コンソールで以下のメッセージを確認し、テーマが正常にデプロイされたことを確認してください：

2023-12-21 16:01:20.836 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED liferay-5b2v-theme_1.0.0 [1617]

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

  1. サイトメニュー(サイトメニュー)を開き、 サイトビルダー → ページ に移動します。

  2. アプリケーションバーの Actions(アクションボタン)をクリックし、 Configuration を選択します。

    Open the Pages screen, click Actions in the Application Bar, and select Configuration.

  3. テーマ]の下にある[現在のテーマを変更*]をクリックします：

    Click Change Current Theme to select a new theme.

  4. サンプルテーマを選択してください： Acme Sample Blue Theme を選択してください。

  5. ［保存］をクリックします。

ホームページに移動し、背景色が青になったことを確認する。

Confirm the background color is now blue.

次のステップ

さらに、 スタイルブック を使ってデザイン要素をさらにカスタマイズしたり、 マスターページテンプレート を使ってコンテンツページのヘッダーやフッターをデザインすることもできます。 サイトのルック＆フィールのカスタマイズの完全な概要については、 サイトの外観 をご覧ください。

Liferay Marketplace には、プロフェッショナルなルック＆フィールを素早く実現できるテーマが多数用意されています。

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

Capability:
Sites
Resource Type:
Official Documentation
Feature:
Site Appearance and Design
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted