时间戳

首页 > 解决方案 > 扩展 base.html 时，home.html 出现缩进问题

python - 扩展 base.html 时，home.html 出现缩进问题

问题描述

我在 Visual Studio 代码 IDE 上使用 Django 3.0.8。这是一个包含文件 base.html 和 home.html 的博客模板（在模板根目录中）。

这是我的完整 base.html 代码：

{% load static %}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> {% if title %}

    <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">

    <title>Django blog-{{title}}</title>
    {% else %}
    <title>Django blog</title>
    {% endif %}
</head>

<body>
    <header class="site-header">
        <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
            <div class="container">
                <a class="navbar-brand mr-4" href="/">Django Blog</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="navbarToggle">
                    <div class="navbar-nav mr-auto">
                        <a class="nav-item nav-link" href="/">Home</a>
                        <a class="nav-item nav-link" href="/about">About</a>
                    </div>
                    <!-- Navbar Right Side -->
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="#">Login</a>
                        <a class="nav-item nav-link" href="#">Register</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8">
                {% block content %}{% endblock %}
            </div>
            <div class="col-md-4">
                <div class="content-section">
                    <h3>Our Sidebar</h3>
                    <p class='text-muted'>You can put any information here you'd like.
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-light">Latest Posts</li>
                            <li class="list-group-item list-group-item-light">Announcements</li>
                            <li class="list-group-item list-group-item-light">Calendars</li>
                            <li class="list-group-item list-group-item-light">etc</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </main>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

当我将 base.html 扩展到 home.html 时，我遇到了一些识别问题并得到错误的输出。这是扩展 base.html 后 home.html 的样子：

{% extends "blog/base.html" %} {% block content %} {% for post in posts %}
<article class="media content-section">
    <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2" href="#">{{ post.author }}</a>
            <small class="text-muted">{{ post.date_posted }}</small>
        </div>
        <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
        <p class="article-content">{{ post.content }}</p>
    </div>
</article>
{% endfor %} {% endblock content %}

为什么我得到这个。Visual Studio 代码中是否有任何自动识别功能？

标签： pythonhtmldjango

解决方案

我相信您必须将缩进量与占用块的位置完全相同。假设您的块位于第四个标签缩进，新代码也必须从第四个缩进开始。

尽管事实是，HTML 缩进并不重要——只要您有匹配的标签，您不妨将所有内容放在一行中，HTML 仍然可以正常工作。我自己使用过 python，很难相信缩进无关紧要，但是一旦你接触了像 c++ 或 java 这样的语言，你会发现缩进规则不是全局的。

回答您的其他问题，我相信您可以使用此处描述的一些自动缩进，但我认为在 HTML 中没有必要，因为很少有人会看到您的 Web 源代码。

另外作为一个快速提示，在 HTML 中使用两个空格缩进而不是四个缩进是更好的做法。在您的第一个代码块中，很明显中间的大部分代码都在框架之外，这是由于它之前的众多级别造成的。

推荐阅读