fastapi:第二十三章：模板包含公共的header和footer

一，代码：

目录结构:

image

header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
<div style="width:100%;height:50px;background:#eeeeee;">
    <h1 style="text-align:center;">这里是header</h1>
</div>

footer.html

<footer style="width: 100%;text-align: center;background: #eeeeee;"><h2>这里是footer</h2></footer>
</body>
</html>

user_all.html

{% include 'block/header.html' %}

 <ul>
        {% for user in users|reverse %}
            <li>{{ user }}</li>
        {% else %}
            <li>沒有任何值</li>
        {% endfor %}
    </ul>


    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>总数</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
                {% if loop.first %}
                    <tr style="background: red;">
                {% elif loop.last %}
                    <tr style="background: pink;">
                {% else %}
                    <tr>
                {% endif %}
                    <td>{{ loop.index0 }}</td>
                    <td>{{ book.name }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.price }}</td>
                    <td>{{ loop.length }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>


{% include 'block/footer.html' %}

 

二，测试效果：

image

posted @ 2026-06-12 10:53  刘宏缔的架构森林  阅读(3)  评论(0)    收藏  举报