如何在TYPO3中集成自定义HTML？以粘性页脚为例

Hey there! Let's get that sticky footer working in your TYPO3 Fluid template—here's a straightforward, step-by-step breakdown tailored to your setup:

First, let's clarify why your current code isn't showing up: TYPO3's Fluid template system relies on a structured hierarchy (layouts, templates, partials) and proper TypoScript configuration to render content. Just dropping code into a template file without integrating it into your main page structure won’t make it appear. Here’s how to fix it:

1. Place the Footer Code in the Right Template Layer #

TYPO3 Fluid typically uses three layers for templates—pick the approach that matches your setup:

Option A: Using a Layout File (Recommended) #

Most TYPO3 setups use a main layout file (usually Layouts/Default.html) that defines the overall page structure (head, header, content area, footer). Add your footer code after the main content placeholder in this layout:

<!DOCTYPE html>
<html>
<head>
    <!-- Your Bootstrap CSS, meta tags, etc. -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your site header/navbar here -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- Navbar content -->
    </nav>

    <!-- Main content placeholder (this loads your page-specific content) -->
    <main class="container mt-4">
        {content -> f:format.raw()}
    </main>

    <!-- YOUR STICKY FOOTER CODE GOES HERE -->
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <p class="text-muted">Place sticky footer content here.</p>
        </div>
    </footer>

    <!-- Bootstrap JS and other scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The mt-auto class is Bootstrap’s way of pushing the footer to the bottom when content is short—pair it with these CSS rules to ensure the sticky behavior works:

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}

Add this CSS to your site’s stylesheet or a <style> tag in the layout’s <head>.

Option B: No Layout File? Add It Directly to Your Main Template #

If you’re using boottpl.html as your main page template (without a separate layout), insert the footer code after all your page content blocks:

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS and meta tags -->
</head>
<body>
    <!-- Your page content (e.g., header, text, images) -->
    <div class="container">
        <!-- Page-specific content goes here -->
    </div>

    <!-- Sticky footer -->
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <p class="text-muted">Place sticky footer content here.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
</body>
</html>

2. Ensure TYPO3 Is Using Your Template #

Double-check your TypoScript configuration to make sure TYPO3 loads your template file:

1. Go to the Template module in the TYPO3 backend.
2. Select your root template and open the Setup tab.
3. Verify your FLUIDTEMPLATE points to the correct paths for your templates/layouts:

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        templateRootPaths {
            0 = EXT:your_site_package/Resources/Private/Templates/
        }
        layoutRootPaths {
            0 = EXT:your_site_package/Resources/Private/Layouts/
        }
        templateName = boottpl <!-- Or "Default" if using a layout -->
    }
}

Replace your_site_package with the name of your custom TYPO3 extension/site package.

3. Clear TYPO3 Cache! #

This is a common gotcha—TYPO3 caches template changes aggressively. Click the Clear Cache button in the top-right of the TYPO3 backend to see your footer appear.

Final Check #

After making these changes, reload your frontend. The footer should now display at the bottom of every page, sticking to the viewport when content is short.

内容的提问来源于stack exchange，提问作者Daniel von Matterhorn