Erstellung eines neuen Sitemap-Menüs
unter TYPO3 ab Version 11!

Ihr werdet hier die Grundlagen erfahren, wie Ihr per Fluid-Styled-Content-Vorlagen, "etwas" PHP-Code ein zusätzliches Sitemap-Menü erstellen könnt.
Danke an dieser Stelle auch einigen Facebook-TYPO3-Gruppenmitgliedern für deren Hinweise und Unterstützung !

Voraussetzung ist eine eigene Projekt-Extension (nachfolgend kurz PEXT genannt).

… oder wie hier in einer eigenen Datei: PEXT\Configuration\TCA\Overrides\menu_sitemap_pages.php

Für die Darstellung im BE fügen Sie das hinzu:

// Add the CType "Icon Sitemap"
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
   'tt_content',
   'CType',
    [
        // title
        'Sitemap mit Seiten-Resource-Bild',
        // plugin signature: extkey_identifier
        'menu_icon_sitemap',
        // icon identifier wie definiert in Configuration/Icons.php !!!
        'menu_icon_sitemap',
    ],
    'menu_pages',
    'after'
);



$GLOBALS['TCA']['tt_content']['ctrl']['typeicon_classes']['menu_icon_sitemap'] = 'menu_icon_sitemap';
// Configure the default backend fields for the content element
$GLOBALS['TCA']['tt_content']['types']['menu_icon_sitemap'] = array(
       'showitem' => '
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.general;general,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.headers;headers,pages;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:pages.ALT.menu_formlabel,
            --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames;frames,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.appearanceLinks;appearanceLinks,
            --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.accessibility,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.menu_accessibility;menu_accessibility,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
            --palette--;;hidden,
            --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.access;access,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            --div--;LLL:EXT:lang/Resources/Private/Language/locallang_tca.xlf:sys_category.tabs.category,categories,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,rowDescription,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
            --div--;LLL:EXT:gridelements/Resources/Private/Language/locallang_db.xlf:gridElements,tx_gridelements_container,tx_gridelements_column
        '
    );

Unter TYPO3 V11 werden die Icons in der Configuration-Datei "Icons.php" registriert.

<?php
return [
//     'menu_icon_sitemap' entspricht dem icon identifier aus der Datei
//     "PEXT/Configuration/TCA/Overrides/menu_icon_sitemap.php"
    'menu_icon_sitemap' => [
         // icon provider class
        'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
         // the source SVG for the SvgIconProvider
        'source' => 'EXT:qpxviewhelper/Resources/Public/Icons/menu_icon_sitemap.svg',
    ],
];
?>

So könnten es auch Bitmap-Icons (PNG-, GIF- oder sogar JPG-Dateien) sein.

Ins Typoscript-Setup gehört noch das hinein:

# CType: menu_icon_sitemap
tt_content {
    menu_icon_sitemap =< lib.contentElement
    menu_icon_sitemap {
        templateName = MenuIconSitemap

        dataProcessing  {
            10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            10 {
                special = directory
                special.value.field = pages
                levels = 1
                
                dataProcessing {
                    10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                    10.references.fieldName = media
                }
            }
        }
        
        stdWrap {
          editIcons = tt_content: header [header_layout], pages
          editIcons {
             iconTitle.data = LLL:EXT:fluid_styled_content/Resources/Private/Language/FrontendEditing.xlf:editIcon.menu
          }
       }
        
        settings.menuIconSitemapImageStyle = // settings.menuIconSitemapImageStyle = width:300px; height:auto; max-height:250px;
    }
}
 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />

<f:section name="Main">
    <f:render section="Menu" arguments="{menu: menu}" />
</f:section>

<f:section name="Menu">
    <f:if condition="{menu}">
       <ul class="ce-MenuIconSitemap">
            <f:for each="{menu}" as="page">
                <li>

                    <f:link.page pageUid="{page.data.uid}">
                  <h5>
                     <f:if condition="<f:format.stripTags>{page.nav_title}</f:format.stripTags>">
                        <f:then>
                           <f:format.stripTags>{page.data.nav_title}</f:format.stripTags>
                        </f:then>
                        <f:else>
                           <f:format.raw> {page.data.title} </f:format.raw>
                        </f:else>
                     </f:if>
                  </h5>
                    </f:link.page>

               <f:if condition="{page.files}">
                        <img src="fileadmin/{page.files.0.originalFile.identifier}"
                     {f:if(condition:'{page.files.0.properties.title}',then:' title="{page.files.0.properties.title}"')}
                     {f:if(condition:'{page.files.0.properties.alternative}',then:' alt="{page.files.0.properties.alternative}"')}
                     {f:if(condition:'{settings.menuIconSitemapImageStyle}',then:' style="{settings.menuIconSitemapImageStyle}"')}
                        >
               </f:if>

                  <f:if condition="{page.data.subtitle}">
                        <p class="ce-menu-subtitle"><strong><f:format.raw>{page.data.subtitle}</f:format.raw></strong></p>
                    </f:if>

                    <f:if condition="{page.data.abstract}">
                        <p class="ce-menu-abstract"><f:format.raw>{page.data.abstract}</f:format.raw></p>
                    </f:if>

               <f:render section="Menu" arguments="{menu: page.children}" />
                </li>
            </f:for>
        </ul>
    </f:if>

</f:section>

</html>