Django模板集成CodePen加载动画失败，页面空白求助

Hey there! Let's break down why your page is blank and fix the loader issue step by step. The main problems are incorrect Django template inheritance structure, missing parts in your CSS, and some static file reference errors.

1. Fix Django Template Inheritance (Critical!) #

Django's template inheritance works by having a base template that defines the overall HTML skeleton, with block tags for content that child templates will override. Your current setup has the structure backwards and duplicated, which causes the blank page.

Fix base.html: #

Your base template should contain the full HTML skeleton, include the loader markup, and define blocks for child templates to fill in. Here's the corrected version:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
    <!-- Load your loader CSS first -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/my-loader.css' %}">
    {% block extra_css %}{% endblock %} <!-- For child template CSS -->
</head>
<body>
    <!-- Loader markup - this will show first -->
    <div class="box">
        <h1 class="intro">cat loader</h1>
        <div class="cat">
            <div class="cat__body"></div>
            <div class="cat__body"></div>
            <div class="cat__tail"></div>
            <div class="cat__head"></div>
        </div>
    </div>

    <!-- Main content block - child templates will inject content here -->
    {% block content %}{% endblock %}

    {% block extra_js %}{% endblock %} <!-- For child template JS -->
</body>
</html>

Notes on base.html fixes:

• Moved {% load static %} and <!DOCTYPE html> to the top (before any blocks)
• Added proper HTML structure for the loader (your original had plain text instead of HTML elements)
• Created title, extra_css, content, extra_js blocks for child templates to use
• Fixed the static CSS path (added .css suffix)

Fix Your Main Page Template: #

Your main page should only extend the base template and fill in the blocks - it shouldn't have duplicate <html>, <head>, or <body> tags. Here's the corrected version:

{% extends 'blog/base.html' %}
{% load static %}

{% block title %}Advice Lancing{% endblock %}

{% block extra_css %}
    <!-- Add your main page CSS here -->
    <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
    <link type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
{% endblock %}

{% block content %}
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="{% url 'allblogs' %}"> Advice lancing</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="{% url 'allblogs' %}">Home</a></li>
                    <li><a href="{% url 'about' %}">About</a></li>
                    <li><a href="{% url 'allblogs' %}">My Blogs</a></li>
                    <li><a href="{% url 'contact' %}">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <header class="intro-header" style="background-image: url('{% static 'img/home.jpg' %}')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Advice Lancing</h1>
                        <hr class="small">
                        <span class="subheading">Here You Write your Subheading</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                {% for blog in blogs.all %}
                <div class="post-preview">
                    <a href="{% url 'detail' blog.id %}">
                        <h2 class="post-title">{{ blog.title }}</h2>
                        <h4 class="post-subtitle"><u>{{blog.publish_date|date:"d M Y"}}</u></h4>
                        <h3 class="post-subtitle">{{ blog.subtitle}}</h3>
                    </a>
                    <p class="post-meta">{{ blog.publish_date_pretty }}</p>
                </div>
                <br />
                <img src="{{ blog.image.url }}" height=280 width=340/>
                <br />
                <p>{{ blog.summary }}</p>
                <ul class="pager">
                    <li class="next">
                        <a href="{% url 'detail' blog.id %}">Read More &rarr;</a>
                    </li>
                </ul>
                {% endfor %}
                <hr>
                <ul class="pager">
                    <li class="next">
                        <a href="#">Older Posts &rarr;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <ul class="list-inline text-center">
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <p class="copyright text-muted">Copyright &copy; Advice lancing 2020</p>
                </div>
            </div>
        </div>
    </footer>
{% endblock %}

{% block extra_js %}
    <!-- Add your main page JS here -->
    <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
    <script src="{% static 'js/contact_me.js' %}"></script>
    <script src="{% static 'js/clean-blog.min.js' %}"></script>

    <!-- Optional: Hide loader once page is fully loaded -->
    <script>
        window.addEventListener('load', function() {
            document.querySelector('.box').style.display = 'none';
        });
    </script>
{% endblock %}

Notes on main page fixes:

• Moved {% extends 'blog/base.html' %} to the very top (required for Django inheritance)
• Removed duplicate <html>, <head>, <body> tags - these come from the base template
• Moved all CSS into the extra_css block and JS into extra_js block
• Fixed the background image path to use {% static %} instead of hardcoding static/
• Added optional JS to hide the loader once the page finishes loading

2. Fix Your Sass/CSS Issues #

Your my-loader.css uses Sass features (variables, mixins, @extend, & selectors) that won't work as plain CSS. You need to either compile it to regular CSS or fix the missing parts:

Add Missing Sass Variables & Mixins #

At the top of my-loader.css, add these definitions to fix the undefined variables/mixins:

// Define missing variables
$type: absolute; // Adjust this to your needs
$dir: 'top'; // Adjust this to your needs

// Define missing mixin
@mixin fill-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

If you're not using a Sass compiler, you'll need to convert this to plain CSS (replace all Sass features with their CSS equivalents). For example, replace @extend %cat-img with copying the styles directly to each class.

3. Test the Fixes #

After making these changes:

1. Make sure all static files are properly collected (run python manage.py collectstatic if using production settings)
2. Restart your Django server
3. Visit your main page - you should see the loader first, then it will hide once the page loads, revealing your main content.

Let me know if you run into any more issues!

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