如何在TYPO3的Introduction Package中将语言选择从页脚移至页眉？

Got it, let's get that language switcher moved to the header where it makes more sense for your users. Here's a straightforward, step-by-step guide tailored to the TYPO3 9.5 Introduction Package:

1. Grab the Language Switcher Code from the Footer Template #

The Introduction Package uses Fluid templates, so first we’ll locate the existing language switcher markup:

• Head to the Filelist module in your TYPO3 backend, or access your server’s file system directly.
• Navigate to typo3conf/ext/introduction/Resources/Private/Templates/Page/Footer.html
• Find the language switcher block—it’ll look something like this:

  <f:if condition="{languagesswitcher}">
      <div class="footer-language-switcher">
          <f:cObject typoscriptObjectPath="lib.languageSwitcher" />
      </div>
  </f:if>
  

• Copy this entire snippet to your clipboard.

2. Paste the Code into the Header Template #

Now we’ll add this to the header template:

• Open Header.html in the same directory (typo3conf/ext/introduction/Resources/Private/Templates/Page/)
• Paste the copied code in your desired position. For example, if you want it aligned right of the main navigation, paste it inside the header container after the navigation block.
• Optional: Remove the f:if condition if you want the switcher to always display, regardless of the languagesswitcher variable state.

3. Verify Typoscript Configuration (If Needed) #

The Introduction Package already configures lib.languageSwitcher, but we need to ensure the header template can access it:

• Go to the Template module, select your root template, and click the Setup tab.
• Check if the languagesswitcher variable is passed to the header template. Look for code like this:

  page.10.variables {
      languagesswitcher = TEXT
      languagesswitcher.value = 1
  }
  

• If it’s missing, add that snippet to make the f:if condition work. If you skipped the condition, this step isn’t necessary.

4. Tweak CSS for the Header Layout #

Footer styles won’t fit the header, so let’s adjust the styling:

• Open the main stylesheet at typo3conf/ext/introduction/Resources/Public/Css/Styles.css
• Copy the .footer-language-switcher styles, rename the class to .header-language-switcher (and update the class in your Header.html snippet too!), then adjust for your header. Example:

  .header-language-switcher {
      float: right;
      margin: 1rem 2rem 0 0;
  }
  .header-language-switcher a {
      padding: 0 0.5rem;
      color: #2d3748;
      text-decoration: none;
  }
  .header-language-switcher a.active {
      font-weight: bold;
      color: #2b6cb0;
  }
  

5. Clean Cache and Test #

• Hit the Flush TYPO3 Cache button in the backend’s top toolbar (the refresh icon)
• Refresh your frontend site—you should now see the language switcher in the header!

Pro Tip (Avoid Losing Changes on Updates) #

Instead of editing the Introduction Package’s files directly, create a custom site extension that extends its templates. This way, when you update the Introduction Package, your changes won’t get overwritten. Set up template paths in your Typoscript to load your custom templates first.

内容的提问来源于stack exchange，提问作者verodesign