我想添加带有 Typoscript 条件的 CSS-class

Question

大家好，我正在做一个 Typo3 项目，想更改一个 nav-bar 元素的 CSS。我的想法：通过打字错误条件添加 class 但我是新手，不知道如何实现。这是我的代码：

lib {
   topNavigation = HMENU
   topNavigation {
      1 = TMENU
      1 {
        wrap = <ul class="navbar-nav d-flex text-dark align-items-end pt-4">|</ul>
        NO{
          linkWrap = <li class="nav-item text-nowrap ml-2 mr-2 pt-2">|</li>
          ATagParams = class="nav-link"
        }
      }
   }
   breadcrumbTrail = HMENU
   breadcrumbTrail {
      special = rootline
      special.range = 0|-1
      1 = TMENU
      1.NO {
         stdWrap.field = nav_title // title
         ATagTitle.field = nav_title // title
         linkWrap = | |*| &nbsp;&raquo;&nbsp; |*|
      }
      1.CUR = 1
      1.CUR {
         doNotLinkIt = 1
         stdWrap.field = nav_title // title
         linkWrap = | |*| &nbsp;&raquo;&nbsp;<em>|</em>|
      }
   }
   contentTest = TEXT
   contentTest.value = 1
   contentTest.if.isTrue.numRows {
      table = tt_content
      select {
         orderBy = sorting
         where = colPos = 2
      }
   }
}

在这里您可以看到 header 导航是如何构建的，我想在 ATagParams = class="nav-link" 部分添加一个额外的 class。

我想实现这样的目标：

ATagParams = class="nav-link"
if.field.nav_title.equals = Spenden
ATagParams = class="nav-link nav-colored"

如果可能的话。

Answer 1

如果您的页面不经常更改，您可以使用 'optionsplit' 修改第 n 个菜单项的固定值。

否则你可以在条件中使用 override。
类似于：

lib {
   topNavigation = HMENU
   topNavigation {
      1 = TMENU
      1 {
        wrap = <ul class="navbar-nav d-flex text-dark align-items-end pt-4">|</ul>
        NO{
          linkWrap = <li class="nav-item text-nowrap ml-2 mr-2 pt-2">|</li>
          ATagParams = class="nav-link"
          ATagParams.override = class="nav-link nav-colored"
          ATagParams.override.if.equals.field = uid
          ATagParams.override.if.value = 123
        }
     :

当 123 是页面 page.uid 时 'Spenden'

选择：

          ATagParams.override.if.equals.field = nav_title
          ATagParams.override.if.value = Spenden

但这对重命名更敏感并且不适用于翻译。

Answer 2

由于您使用的是 TYPO3 v10，我建议您改用 MenuProcessor。它基本上是 HMENU，但您可以在 Fluid 模板中完成所有样式和 HTML。

参见：https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Fluidtemplate/DataProcessing.html#menuprocessor

我想添加带有 Typoscript 条件的 CSS-class

I want to add a CSS-class with Typoscript conditions

typo3

typoscript

typo3-10.x