Neos CMS NodeTypes:如何使 href link 在 UI 中可编辑
Neos CMS NodeTypes: How to make href link editable in UI
我想在 Neos 中制作一个内容元素作为预告片。整个预告框应该 linked 到 Neos 内部或外部的现有页面。如何在 Neos UI 后端的右侧面板中定义 href link?
此外,如果我在 Neos 后端单击预告片框内的元素进行内联编辑,它不应跳转到 link。
这是我目前的情况:
Teaserbox.html:
{namespace neos=Neos\Neos\ViewHelpers}
<a href="#" {attributes -> f:format.raw()}>
<neos:contentElement.editable property="title" tag="p" class="medium" />
<neos:contentElement.editable property="text" tag="p" />
<p class="link">
<neos:contentElement.editable property="link" tag="span" />
</p>
</a>
NodeTypes.Teaserbox.yaml:
'Test.Package:Teaserbox':
superTypes:
'Neos.Neos:Content': true
ui:
label: Teaser Box
icon: icon-newspaper
inspector:
groups:
teaser:
label: Teaser Box
properties:
title:
type: string
ui:
label: 'Title Label'
inlineEditable: true
aloha:
placeholder: 'Title'
text:
type: string
ui:
label: 'Text Label'
inlineEditable: true
aloha:
placeholder: 'Text'
link:
type: string
ui:
label: 'Link Label'
inlineEditable: true
aloha:
placeholder: 'Link'
您需要在 aloha
设置中启用 link,方法是在 link
属性 中添加以下行:
'Test.Package:Teaserbox':
...
properties:
...
link:
type: string
ui:
label: 'Link Label'
inlineEditable: true
aloha:
placeholder: 'Link'
link:
'a': true
显然我走错了路。同时发现用Neos的渲染条件可以轻松解决我的要求。现在我有一个不同的代码部分用于后端和前端视图。在预览模式下,我的按钮没有 href 标签,所以我可以使用内联编辑。
Teaserbox.html
{namespace neos=Neos\Neos\ViewHelpers}
<f:if condition="{neos:rendering.inPreviewMode()}">
<f:then>
<a class="teaser">
</f:then>
<f:else>
<a class="teaser" href="{linkUrl}">
</f:else>
</f:if>
NodeTypes.Teaserbox.yaml:
'Test.Package:Teaserbox':
superTypes:
'Neos.Neos:Content': true
ui:
label: Teaser Box
icon: icon-newspaper
inspector:
groups:
teaser:
label: Teaser Box
properties:
linkUrl:
type: string
defaultValue: '#'
ui:
label: 'URL'
reloadIfChanged: true
inspector:
group: ziehli
editor: 'Neos.Neos/Inspector/Editors/LinkEditor'
这是关于它的文档:http://neos.readthedocs.io/en/stable/References/ViewHelpers/Neos.html
我想在 Neos 中制作一个内容元素作为预告片。整个预告框应该 linked 到 Neos 内部或外部的现有页面。如何在 Neos UI 后端的右侧面板中定义 href link?
此外,如果我在 Neos 后端单击预告片框内的元素进行内联编辑,它不应跳转到 link。
这是我目前的情况:
Teaserbox.html:
{namespace neos=Neos\Neos\ViewHelpers}
<a href="#" {attributes -> f:format.raw()}>
<neos:contentElement.editable property="title" tag="p" class="medium" />
<neos:contentElement.editable property="text" tag="p" />
<p class="link">
<neos:contentElement.editable property="link" tag="span" />
</p>
</a>
NodeTypes.Teaserbox.yaml:
'Test.Package:Teaserbox':
superTypes:
'Neos.Neos:Content': true
ui:
label: Teaser Box
icon: icon-newspaper
inspector:
groups:
teaser:
label: Teaser Box
properties:
title:
type: string
ui:
label: 'Title Label'
inlineEditable: true
aloha:
placeholder: 'Title'
text:
type: string
ui:
label: 'Text Label'
inlineEditable: true
aloha:
placeholder: 'Text'
link:
type: string
ui:
label: 'Link Label'
inlineEditable: true
aloha:
placeholder: 'Link'
您需要在 aloha
设置中启用 link,方法是在 link
属性 中添加以下行:
'Test.Package:Teaserbox':
...
properties:
...
link:
type: string
ui:
label: 'Link Label'
inlineEditable: true
aloha:
placeholder: 'Link'
link:
'a': true
显然我走错了路。同时发现用Neos的渲染条件可以轻松解决我的要求。现在我有一个不同的代码部分用于后端和前端视图。在预览模式下,我的按钮没有 href 标签,所以我可以使用内联编辑。
Teaserbox.html
{namespace neos=Neos\Neos\ViewHelpers}
<f:if condition="{neos:rendering.inPreviewMode()}">
<f:then>
<a class="teaser">
</f:then>
<f:else>
<a class="teaser" href="{linkUrl}">
</f:else>
</f:if>
NodeTypes.Teaserbox.yaml:
'Test.Package:Teaserbox':
superTypes:
'Neos.Neos:Content': true
ui:
label: Teaser Box
icon: icon-newspaper
inspector:
groups:
teaser:
label: Teaser Box
properties:
linkUrl:
type: string
defaultValue: '#'
ui:
label: 'URL'
reloadIfChanged: true
inspector:
group: ziehli
editor: 'Neos.Neos/Inspector/Editors/LinkEditor'
这是关于它的文档:http://neos.readthedocs.io/en/stable/References/ViewHelpers/Neos.html