基于Twig模板继承搭建带独立公共页眉页脚的页面布局

我来给你梳理一下具体实现方案，核心就是利用Twig的区块继承和模板引入功能，把公共的页眉、页脚抽成独立文件，再通过基础模板统一管理页面骨架，这样后续维护起来特别方便。

第一步：创建基础布局模板（base.html.twig） #

这个文件是所有页面的“骨架”，包含HTML基础结构、公共的元数据、CSS/JS引入，同时预留好子页面需要填充内容的区块，还要引入独立的页眉和页脚：

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 标题区块，允许子页面自定义 -->
    {% block title %}<title>Soccer | Home</title>{% endblock %}
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 公共样式文件，全局通用 -->
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <!-- 引入独立的公共页眉模板 -->
    {% include 'partials/header.html.twig' %}

    <!-- 子页面专属内容的区块，必须由子页面重写 -->
    {% block content %}{% endblock %}

    <!-- 引入独立的公共页脚模板 -->
    {% include 'partials/footer.html.twig' %}

    <!-- 公共脚本文件，全局通用 -->
    <script src="/js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>

第二步：创建独立的公共页眉模板（partials/header.html.twig） #

把页眉的HTML结构单独抽出来，这样所有页面都会复用这个导航，后续改导航只需要动这一个文件：

<header class="site-header">
    <div class="container">
        <a href="/" class="site-logo">
            <img src="/images/soccer-logo.png" alt="Soccer League Logo">
        </a>
        <nav class="main-nav">
            <ul class="nav-list">
                <li><a href="/" class="nav-link active">Home</a></li>
                <li><a href="/teams" class="nav-link">Teams</a></li>
                <li><a href="/matches" class="nav-link">Matches</a></li>
                <li><a href="/news" class="nav-link">News</a></li>
            </ul>
        </nav>
    </div>
</header>

第三步：创建独立的公共页脚模板（partials/footer.html.twig） #

同理，页脚的版权信息、社交链接都放这里，统一维护：

<footer class="site-footer">
    <div class="container">
        <div class="footer-wrapper">
            <p class="copyright">&copy; {{ "now"|date('Y') }} Soccer League. All Rights Reserved.</p>
            <div class="social-links">
                <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>
</footer>

第四步：创建子页面（比如首页home.html.twig） #

子页面只需要继承基础模板，然后重写对应的区块即可，不用重复写整个HTML骨架：

{% extends 'base.html.twig' %}

<!-- 重写标题区块，自定义页面标题 -->
{% block title %}<title>Soccer | Home</title>{% endblock %}

<!-- 重写内容区块，填充首页专属内容 -->
{% block content %}
    <main class="home-main">
        <section class="hero-section">
            <div class="container">
                <h1>Welcome to the Ultimate Soccer League</h1>
                <p>Get real-time updates on matches, team stats, and breaking news.</p>
                <a href="/matches" class="btn btn-primary">View Upcoming Matches</a>
            </div>
        </section>

        <section class="featured-teams">
            <div class="container">
                <h2>Featured Teams</h2>
                <div class="team-grid">
                    <div class="team-card">
                        <img src="/images/team-red-lions.png" alt="Red Lions">
                        <h3>Red Lions</h3>
                        <p>Defending Champions</p>
                    </div>
                    <div class="team-card">
                        <img src="/images/team-blue-tigers.png" alt="Blue Tigers">
                        <h3>Blue Tigers</h3>
                        <p>Season Runner-Ups</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}

额外小贴士 #

• 如果需要让某些特殊页面自定义页眉/页脚，可以把基础模板里的{% include %}改成区块，比如：

  {% block header %}
      {% include 'partials/header.html.twig' %}
  {% endblock %}
  

  这样子页面就能通过重写header区块来替换默认页眉。
• 可以用Twig变量动态填充内容，比如在子页面传递page_title，然后在基础模板里写成<title>Soccer | {{ page_title }}</title>，更灵活。

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