При расширении base. html возникает проблема с отступом в доме. html - PullRequest
Новая
       7

При расширении base. html возникает проблема с отступом в доме. html

0 голосов
/ 14 июля 2020

Я использую Django 3.0.8 в среде разработки Visual Studio Code. Вот шаблон блога (в шаблоне root), содержащий файлы base. html и home. html.

Вот моя полная база. html code: 

{% 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>

Когда я расширяю базу. html до дома. html, я сталкиваюсь с проблемой идентификации и получаю неверный результат. Вот как выглядит дом. html выглядит после расширения базы. 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 функция автоматической идентификации?

1 Ответ

0 голосов
/ 14 июля 2020

Я считаю, что вы должны точно соответствовать величине отступа, где заняты блоки. Скажем, ваши блоки расположены на четвертом отступе табуляции, новый код также должен располагаться, начиная с четвертого отступа.

Хотя правда в том, что HTML отступы не имеют значения - пока вы Если есть совпадающие теги, вы можете поместить все в одну строку, и HTML все равно будет работать. Я сам использовал python, и трудно поверить, что отступы не имеют значения, но как только вы коснетесь таких языков, как c ++ или java, вы увидите, что правило отступа не является глобальным.

Ответ ваш другой вопрос, я считаю, что вы можете использовать некоторые автоматические отступы, как описано здесь , но я не вижу в этом необходимости в HTML, так как очень немногие люди увидят ваш исходный веб-код.

Также в качестве быстрой подсказки, лучше использовать два отступа, а не четыре в HTML. В вашем первом блоке кода очевидно, что большая часть кода в середине находится вне кадра, и это вызвано многочисленными уровнями перед ним.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...