テンプレート処理中にエラーが発生しました。 
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> 
フィードバックを送信

メニュー表示を設定する

メニュー表示 を表示および設定するには、 メニュー表示フラグメント または メニュー表示ウィジェット を使用できます。 これら2つのオプションのいずれかを使用すると、あなたのサイトのメニュー表示オプション、レベル、および動作を定義することができます。

tip

Liferayを初めて使う場合は、menu display fragmentを使ってサイトのナビゲーションメニューを作り始めましょう。 メニュー表示フラグメントは、 マスターページテンプレート と連動するプレビューオプションと、メニュー表示ウィジェットにはない設定のしやすさを提供します。

メニュー表示用フラグメントの設定

7.4+で利用可能

ナビゲーションメニューは、コンテンツページのどこにでも作成できます。 このナビゲーションメニューは、サイトのページ階層、または Liferay の ナビゲーションメニューアプリケーション を使って定義したその他の階層に基づいています。 また、メニューの表示スタイルのオプションや、ナビゲーションに含めるサブレベルの数を定義することもできます。

メニュー表示フラグメントは、コンテンツページのフラグメントとウィジェットセクションの下に表示されます。 コンテンツページの他のフラグメントと同様に、このフラグメントを追加して設定します。 詳しくは、 コンテントページへの要素の追加 および フラグメントの設定 を参照してください。

The Menu Display fragment appears under the Fragments and Widget section of your content page.

メニュー表示フラグメントでは、2つの方法でページとサブページの階層を構築できます：

  • サイトナビゲーションメニュー(A) は、Liferay DXPのナビゲーションメニューを使って定義したメニューをサイトナビゲーションに使用します。 デフォルトでは、Liferay DXPはサイト内のページ階層に基づいて2つのサイトメニューを提供します。
  • コンテクスト・メニュー(B)は、ページのコンテクストに基づいたメニューを表示します。 例えば、サイトメニューの1つにリンクされた第1レベルのMenu Displayフラグメントと、子ページのみを表示する第2レベルのMenu Displayフラグメントを組み合わせることで、より高度なナビゲーションを作成することができます。 こうすることで、ユーザーが第1レベルメニューのさまざまなページをクリックすると、第2レベルメニューが動的に変化し、子ページが表示される。

You can define the hierarchy of the Menu Display fragment from your site menus or from contextual menus.

メニュー表示ウィジェットの設定

以下は、メニュー表示ウィジェットで可能なすべてのオプションです。 設定メニューにアクセスするには、メニュー表示ウィジェットの上部にある オプション( オプションアイコン)をクリックします。

Navigate to the configuration menu.

ナビゲーションメニュー

希望するナビゲーション・メニュー・タイプを選択する。希望するナビゲーション・メニュー・タイプがプレビュー・ボックスに表示される。

ナビゲーションメニューのタイプ説明
ページの階層ページ階層はサイトビルダーのデフォルト階層に基づいています。
プライマリ ナビゲーションプライマリ ナビゲーションは、ページのメインナビゲーションです。
セカンダリー・ナビゲーションセカンダリーナビゲーションは、ナビゲーションの第2レベルであり、ページ内のサイドバーまたは個別のメニューが考えられます。
ソーシャルナビゲーションソーシャルナビゲーションは、ソーシャルメディアまたは同様のタスクでコンテンツを共有するためのリンクを含むメニューのためのものです。

あるいは、 Choose Menu を選択し、 Select ボタンをクリックして、既存のナビゲーション・メニューを選択することもできます（このオプションを使用して、親サイトからナビゲーション・メニューを選択することもできます）。

Select the type of navigation menu.

表示テンプレート

ナビゲーション・メニューには、 ウィジェット・テンプレート を選択できます：

Select the display template.

テンプレートを表示する説明
リストメニューすべてのアイテムを垂直リストに表示します。
水平方向のピル形式アイテムを水平に表示し、ボタンスタイルを使用して強調表示します。
等幅ピル形式水平方向のピル形式と同様ですが、アイテムを埋めて水平方向のスペースを埋めます。
縦積みピル形式ピル型スタイルの垂直バージョン。
タブナビゲーションタブなどの項目を表示します。
等幅ピル形式水平方向のスペースを埋めるナビゲーションタブ。
最小バー形式ページの埋め込みメニューに表示されるデフォルト表示の軽量バージョン。
最小等幅バー形式水平方向のパディングで最小バー形式と同様。
規定スタイルのバーデフォルトの埋め込みメニュー。
スプリットボタンのドロップダウン各項目をドロップダウン付きのボタンとして表示し、複数のナビゲーションレベルを設定できます。

表示するメニュー項目

メニューからどのレベルのどのページをウィジェットに表示するかを設定できます。 開始レベル、表示する深さのレベル数、およびサブレベルの表示方法を選択できます。

Select the Menu Items to Show.

項目説明
メニューから始めるレベルのタイプを選択します： Level , Level Relative to the Current Menu Item , または Select Parent 。 これらのオプションについて、詳しくは以下をご覧いただきたい。
レベル数表示するレベル番号を0～4で選択します。 レベル0は親ページを表し、レベル1は第1レベルの子ページを表します。
表示するレベル:ナビゲーションに表示するレベルの数を、1～無制限で選択します。
サブレベルを展開:このドロップダウンメニューから、 Auto または All を選択します。これは、マウスをナビゲーション上に置くと、ナビゲーションレベルが自動的に1つずつ表示されるか、一度にすべてのレベルが表示されるかを決定します。

[Start with Menu Items In]フィールドの下にある3つのオプションです：

  1. レベル ：レベル0はルート・レベルから始まり、レベル1～4は現在のページが存在する場合、それに続くレベルです。 そこからどの道をたどればいいのか判断できないので、それ以上のレベルは表示されない。

  2. 電流に対するレベル ：ここでは順序が逆である。 レベル0は現在のページを表し、レベル1～4は、直属の親（1）から始まり、最も遠い親ページまたはルートページまでの親レベルを表す。

  3. 親を選択 ：メニューの開始点として使用したいページを手動で選択します。

関連トピック

Capability:
Sites
Resource Type:
Official Documentation
Feature:
Fragments
Site Navigation
Widgets
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted