我为TYPO3 7.6
创建了一个语言菜单(切换),仅Fluid
,没有TypoScript
。只需一个下拉菜单,请参见下面的截图。我还使用了Ext:vhs
,这是我的代码示例:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<ul id="languageMenu" class="dropdown menu" data-dropdown-menu>
<!-- german L:0 -->
<f:if condition="{v:page.language()}==0">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/gb.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
<!-- english L:1 -->
<f:if condition="{v:page.language()}==1">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:hellocode/Resources/Public/Icons/Flags/gb.svg" width="18" height="14"
alt="{f:translate(key: 'LLL:EXT:hellocode/Resources/Private/Language/locallang.xlf:language.en')}" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
</ul>
此时始终显示语言切换。如果没有页面翻译,我将收到404错误。当然,缺少的页面不存在。如果没有翻译,我该如何隐藏语言切换?
过去我使用USERDEF1
与TypoScript
,但我需要一个Fluid
的解决方案。我也看到那里有一个观察者v:condition.page.isLanguage,但这不适合我,或者我不知道怎么办?!是否可以使用Fluid或vhs
?
如果有任何建议,我将不胜感激。否则我不得不再写一次typoscript ......
答案 0 :(得分:0)
我只能建议使用https://typo3.org/extensions/repository/view/sr_language_menu
当然它完全基于流体,因此您可以根据需要覆盖所有模板。
答案 1 :(得分:0)
您可以使用vhs和ViewHelpers LanguageMenu
[https://fluidtypo3.org/viewhelpers/vhs/master/Page/LanguageMenuViewHelper.html][1]
答案 2 :(得分:0)
您不需要扩展名。 viewhelpers languageMenu就足够了。
这里是我使用的代码,为了可访问性,可以使用bootstrap 4:
<div class="navbar-nav mr-auto dropdown show">
<v:page.languageMenu
hideNotTranslated="1"
order="0,1,2,3"
layout="name"
defaultLanguageLabel="Français"
defaultIsoFlag="fr"
labelOverwrite="FR,EN,NL,ES"
as="menu">
<ul class="navbar-nav mr-auto">
<f:for each="{menu}" as="langMenu">
<li class="nav-item>
<f:if condition="{langMenu.current}=1">
<f:link.page pageUid="{page.uid}"
id="dropdownMenuLink"
class="dropdown-toggle nav-link lang px-3 flag-nav--{langMenu.flag}"
additionalAttributes="{data-toggle:'dropdown', aria-haspopup:'true', aria-expanded:'false'}"
lang="{f:if(condition: '{langMenu.current}=1', then: '{langMenu.flag}')}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>français actif, changer de langue</f:case>
<f:case value='gb'>english activate, modify language</f:case>
<f:case value='nl'>Engels activeren, taal wijzigen</f:case>
<f:case value='es'>Español activo, cambio de idioma</f:case>
</f:switch>"
>
{langMenu.label}
</f:link.page>
</f:if>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" aria-expended="false">
<f:for each="{menu}" as="langMenu">
<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>{v:variable.set(value: '0', name: 'langparam')}</f:case>
<f:case value='gb'>{v:variable.set(value: '1', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '2', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '3', name: 'langparam')}</f:case>
</f:switch>
<li>
<f:link.page pageUid="{page.uid}"
class="dropdown-item"
lang="{langMenu.flag}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>Passer le site en français</f:case>
<f:case value='gb'>Go to english version</f:case>
<f:case value='nl'>Ga naar de nederlandse versie</f:case>
<f:case value='es'>Salta el sitio en español</f:case>
</f:switch>"
additionalParams="{L:'{langparam}'}"
>
{langMenu.label}
</f:link.page>
</li>
</f:for>
</ul>
</li>
</f:for>
</ul>
</v:page.languageMenu>
</div>