TYPO3: Add special menu CE and add class=“active”

问题:

In TYPO3 one can insert a special menu as a content element, you can select about eight different ways to collect the menu.

In the menu I selected there is no class assigned if the menu item is active, and I need to highlight it with CSS. And I'd like to know how to add a custom menu.

Note: Once I did apply the solution supplied in my own answer I realized that the main difficulty was (and generally is in TYPO3) the caching, be aware to refresh frequently otherwise you'll never be sure what is correct code and what isn't...

回答1:

The answer:

---

1. Copy the original fluid template (menu of subpages of selected pages in my case):

   typo3/sysext/fluid_styled_content/Resources/Private/Partials/Menu/Type-1.html
   

   TYPO3 v8: different path and different names

   typo3/sysext/fluid_styled_content/Resources/Private/Templates/xxx.html
   

   To (coherently to the directory you'll declare in point 4)

   EXT:myExtension/Resources/Private/Partials/Menu/Type-1.html
   

2. Add a variable that gives the current page id in your setup (libs.ts, probably this can be done easier and this value could be present already for use in point 3, but I wouldn't know how to code that).

   lib.pageId = TEXT
   lib.pageId.data = page:uid
   

3. Edit the template (I just give the applicable condition here)

   <f:if condition="{page.uid} == {f:cObject(typoscriptObjectPath: 'lib.pageId')}">
       ...
   </f:if>
   

4. Include the new fluid template (I overwrite the original one, keeping the original name)

   TYPO3 v8: use lib.contentElement instead of lib.fluidContent

   lib.fluidContent.partialRootPaths.1920 = EXT:myExtension/Resources/Private/Partials/Menu/
   

   Or as I did, include it in your page-setup

   page = PAGE
   page {
       # Page Main template
       10 = FLUIDTEMPLATE
       10 {
           partialRootPaths = EXT:myExtension/Resources/Private/Partials/Menu/
       }
   }
   

5. If you'd like to add it as an option to the list you re-number the file (like Type-9.html) and add it to the menu in Page TSConfig:

   TYPO3 v8: i did not find a way to add a menu in v8, the config given here does not work ...

   TCEFORM.tt_content.menu_type {
      types {
         menu{
            addItems {
               9 = menu of subpages of selected pages active highlighted
            }
         }
      }
   }
   

回答2:

To mark a link as active you need to activate the ACT = 1.

## MAIN Navigation [Begin]

    lib.Menu = HMENU
    lib.Menu {
        ## FIRST LEVEL ##
        1 = TMENU
        1 {
            wrap = <ul>|</ul>
            expAll = 1
            noBlur = 1

            NO.wrapItemAndSub = <li>|</li>

            ACT = 1
            ACT.wrapItemAndSub = <li class="active">|</li>
    }

## MAIN Navigation [End]