テンプレート処理中にエラーが発生しました。
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> 

ナビゲーションメニューアプリケーションの使用

ナビゲーションメニューアプリケーションを使用して、サイトページやコンテンツのカスタムメニューを作成します。 これを使えば、メニューにどの要素が含まれ、どのように構成されるかを決めることができる。 一度作成したカスタムメニューは、 ページフラグメント または ウィジェット を使って表示することができます。

note

Liferay 7.3以前では、ナビゲーションメニューに追加できるエンティティはページだけです。 Liferay 7.4 U1+では、ナビゲーションメニューにエンティティタイプを追加することができます。

Creating custom menus for site pages and content.

tip

Liferay 7.3+では、カスタムフィールドを使ってナビゲーションメニューの項目に詳細な情報を追加することができます(Custom FieldsメニューのSite Navigation Menu Itemの下)。 この情報をApplication Display Templatesを使用して、ナビゲーションメニューをさらにカスタマイズすることができます。

ナビゲーションメニューの作成

ナビゲーションメニューを作成するには、以下の手順に従ってください:

  1. サイトメニュー( サイトメニュー)を開き、 サイトビルダーナビゲーションメニュー に移動します。

    Access navigation menus in the site menu.

  2. 追加( 追加ボタン)をクリックします。

  3. ナビゲーションメニューの 名前 を入力します。

    Create a navigation menu.

  4. 保存]をクリックします。

新しいカスタムメニューが表示され、エレメント(ページ、ドキュメント、カテゴリーなど)を追加することができます。

ナビゲーション・メニューに新しい要素を追加する

  1. 追加( 追加ボタン)をクリックします。

  2. メニューに追加したい要素の種類(ページ、ドキュメント、カテゴリーなど)を選択します。 項目選択ウィンドウが開きます。

    同じメニューに複数の要素を追加することができます。

Select the type of element you want to add to the menu.

  1. 追加したい要素を選択し、 選択 をクリックします。

    複数の要素を選択できる。

    important

    追加された要素が 関連する表示ページ を持っていない場合、警告が表示されます。 この項目には表示ページがありません。表示ページのない項目はリンクがないため、メニューに表示されません。

    A warning appears when the added element does not have an associated display page.

  2. オプションで、メニュー要素をドラッグ・アンド・ドロップして再編成したり、階層構造に並べたりすることもできます。

    tip

    メニュー要素を階層構造にすることに加えて、Submenuタイプを使ってメニューにサブセクションを追加することもできます。 子要素を持つ要素を削除すると、子要素も削除されます。

    Adding elements to navigation menus.

  3. オプションで、ナビゲーション・メニュー・ツリーから子ナビゲーション・メニュー要素を追加することができます。

    必要なナビゲーション・メニュー・エレメントの Actions( アクション・ボタン)をクリックし、 Add Child を選択し、子エレメントのタイプを選択します。

    Add child navigation menu elements right from the navigation menu tree

    tip

    ナビゲーション・メニューの要素の一つをクリックし、キーボードの矢印を使ってナビゲーション・メニュー・ツリーを移動する。

  4. オプションで、各メニュー要素のカスタム表示名を定義します。 ページ要素や、表示ページを使用するあらゆるコンテンツタイプ要素(ブログエントリー、ウェブコンテンツ記事、ドキュメント、ボキャブラリー、カテゴリーを含む)に対して、カスタム名を定義できます。

    note

    Liferay 7.4のバージョンU9+またはGA13+では、表示ページを使用するコンテンツタイプ要素にのみカスタム表示名を定義できます。

    これを行うには、メニュー要素を選択し、サイドパネルで Use Custom Name をチェックし、名前を入力し、 Save をクリックします。

    Customize the display of menu elements.

メニューの変更はすべて保存される。

動的語彙要素の使用

ボキャブラリー・ナビゲーション・メニュー・エレメント は動的です。1つのエレメントがページに表示されると、1つのエレメントではなく、現在の階層にあるすべてのカテゴリーとサブカテゴリーが追加されます。 語彙の内容を変更すると、自動的にメニューに反映される。

ダイナミック・ボキャブラリー・エレメントを使えば、アイテムの階層が変化しても、素早く簡単にナビゲーション・メニューを更新することができます。 例えば、 新しいカタログを作成する の中で、商品のタイプを表すためにカテゴリーを使用することができます。そして、カテゴリーを更新すると、語彙を使用しているすべてのメニューが自動的に更新されます。 そして、それらのカテゴリーに使われている 表示ページ に応じて、カテゴリー分けの変更が自動的にページやナビゲーションメニューに反映されることがある。

Dynamic vocabulary elements automatically update to reflect their hierarchy of categories in your navigation menus.

ナビゲーション・メニューのプレビュー

ナビゲーションメニューを編集中にプレビューして、ページ上に表示されたときの見え方を確認することができます。 目のアイコン* ( 目のアイコン)をクリックすると、ナビゲーション・メニューのプレビューがポップアップ・ウィンドウで開きます。

Preview a navigation menu to see how it looks when displayed on a page.

また、ドロップダウンメニューからさまざまなオプションを選択し、リストやタブスタイルなど、メニューの表示スタイルを変更することもできます。

ページ作成時のメニューの使用

ユーザーがサイトページを作成する際、既存のすべてのナビゲーションメニューのリストが表示されます。 利用可能なメニューリストから特定のメニューを非表示にすることで、この動作を変更することができる。

Add the new page to an existing navigation menu.

ナビゲーションメニューにこの動作を設定するには、以下の手順に従ってください:

  1. サイトメニュー( サイトメニュー)を開き、 サイトビルダーナビゲーションメニュー に移動します。

  2. 希望のメニューを選択する。

  3. ActionsActionsボタン )をクリックします。

  4. チェックを外す/チェックする

    You can select from existing navigationmenus when creating site pages

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

ナビゲーションメニュータイプの設定

以下の手順に従って、ナビゲーション・メニューのタイプを設定してください:

  1. サイトメニュー( サイトメニュー)を開き、 サイトビルダーナビゲーションメニュー に移動します。

  2. 必要なメニューの アクション( アクションボタン ) をクリックします。

  3. 希望のナビゲーション・タイプを選択します:プライマリーナビゲーション、セカンダリーナビゲーション、またはソーシャルナビゲーション。

    Select the desired navigation type.

    一度選択されると、各メニューの設定はMarked As欄に表示されます。

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

ナビゲーションメニューの削除

  1. サイトメニュー( サイトメニュー)を開き、 サイトビルダーナビゲーションメニュー に移動します。

  2. アクションボタン をクリックし、 削除 をクリックします。

  3. 確認で OK をクリックします。

ナビゲーションメニューが削除される。

関連トピック