英文:
Main Container going blank
问题
尝试在博客的主页上制作一个主页，但是模板把一切都搞砸了。页面只显示导航栏和页脚。哪里出错了？
这是主页的截图：
这是代码的链接。
layout.html
{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Yoder Blog</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'favicon.ico' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<!-- Template Main CSS Files -->
<link href="{% static 'css/variables.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="{% url 'blog-home' %}" class="logo d-flex align-items-center">
<h1>Yoder Blog</h1>
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a href="{% url 'blog-home' %}">Home</a></li>
<li><a href="{% url 'chat-home' %}">Chat</a></li>
<li class="dropdown"><a href="category.html"><span>Categories</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="{% url 'nofilter' %}">View All</a></li>
<li><a href="{% url 'createcat' %}">Add Category</a></li>
{% if cat_menu %}
<li class="dropdown"><a href="#"><span>Categorys</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
{% for item in cat_menu %}
<li><a href="{% url 'cats' item %}">{{ item }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% if chat_menu and user.is_authenticated %}
<li class="dropdown"><a href="#"><span>Chat with a user</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
{% for item in chat_menu %}
{% if item.is_active %}
{% if item != user %}
<li><a href="{% url 'chat' item.pk %}">{{ item }}</a></li>
{% endif %}{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
</ul>
</li>
<li><a href="{% url 'blog-about' %}">About</a></li>
<li><a href="/chat/1/">Contact</a></li>
{% if user.is_authenticated %}
{% if user.is_superuser %}
<li><a href="{% url 'users' %}">Users</a></li>
{% endif %}
<li><a href="{%
<details>
<summary>英文:</summary>
I am trying to make a home page in my Blog, but the template is messing everything up. The page only displays the navbar and the footer. What is wrong??
This is a screenshot of the home page.[](https://i.stack.imgur.com/VMvrS.png)
[This](https://github.com/JDODER260/Example) is a link to the code.
layout.html
{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Yoder Blog</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'favicon.ico' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<!-- Template Main CSS Files -->
<link href="{% static 'css/variables.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="{% url 'blog-home' %}" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="{% static 'img/logo.png' %}" alt=""> -->
<h1>Yoder Blog</h1>
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a href="{% url 'blog-home' %}">Home</a></li>
<li><a href="{% url 'chat-home' %}">Chat</a></li>
<li class="dropdown"><a href="category.html"><span>Categories</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="{% url 'nofilter' %}">View All</a></li>
<li><a href="{% url 'createcat' %}">Add Category</a></li>
{% if cat_menu %}
<li class="dropdown"><a href="#"><span>Categorys</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
{% for item in cat_menu %}
<li><a href="{% url 'cats' item %}">{{ item }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% if chat_menu and user.is_authenticated %}
<li class="dropdown"><a href="#"><span>Chat with a user</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
{% for item in chat_menu %}
{% if item.is_active %}
{% if item != user %}
<li><a href="{% url 'chat' item.pk %}">{{ item }}</a></li>
{% endif %}{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
</ul>
</li>
<li><a href="{% url 'blog-about' %}">About</a></li>
<li><a href="/chat/1/">Contact</a></li>
{% if user.is_authenticated %}
{% if user.is_superuser %}
<li><a href="{% url 'users' %}">Users</a></li>
{% endif %}
<li><a href="{% url 'profile' %}">Profile</a></li>
<li><a href="{% url 'logout' %}">Logout</a></li>
{% else %}
<li><a href="{% url 'login' %}">Login</a></li>
<li><a href="{% url 'register' %}">Register</a></li>
{% endif %}
</ul>
</nav><!-- .navbar -->
<div class="position-relative">
<a href="#" class="mx-2"><span class="bi-facebook"></span></a>
<a href="#" class="mx-2"><span class="bi-twitter"></span></a>
<a href="#" class="mx-2"><span class="bi-instagram"></span></a>
<a href="#" class="mx-2 js-search-open"><span class="bi-search"></span></a>
<i class="bi bi-list mobile-nav-toggle"></i>
<!-- ======= Search Form ======= -->
<div class="search-form-wrap js-search-form-wrap">
<form action="search-result.html" class="search-form">
<span class="icon bi-search"></span>
<input type="text" placeholder="Search" class="form-control">
<button class="btn js-search-close"><span class="bi-x"></span></button>
</form>
</div><!-- End Search Form -->
</div>
</div>
</header><!-- End Header -->
<main id="main">
{% block content %}{% endblock content %}
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="footer-content">
<div class="container">
<div class="row g-5">
<div class="col-lg-4">
<h3 class="footer-heading">About Yoder Blog</h3>
<p>This Blog is made for the Yoder's, but anyone can use it! It has many features and is mainly an ongoing project. This vertion of the blog has a major layout update!</p>
<p><a href="/about" class="footer-link-more">Learn More</a></p>
</div>
<div class="col-6 col-lg-2">
<h3 class="footer-heading">Navigation</h3>
<ul class="footer-links list-unstyled">
<li><a href="{% url 'blog-home' %}"><i class="bi bi-chevron-right"></i> Home</a></li>
<li><a href="/filter/off"><i class="bi bi-chevron-right"></i> Categories</a></li>
<li><a href="/about"><i class="bi bi-chevron-right"></i> About us</a></li>
<li><a href="/chat/1"><i class="bi bi-chevron-right"></i> Contact</a></li>
</ul>
</div>
{% if cat_menu %}
<div class="col-6 col-lg-2">
<h3 class="footer-heading">Categories</h3>
<ul class="footer-links list-unstyled">
{% for item in cat_menu %}
<li><a href="{% url 'cats' item %}"><i class="bi bi-chevron-right"></i> {{ item }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</footer>
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'vendor/swiper/swiper-bundle.min.js' %}"></script>
<script src="{% static 'vendor/glightbox/js/glightbox.min.js' %}"></script>
<script src="{% static 'vendor/aos/aos.js' %}"></script>
<script src="{% static 'vendor/php-email-form/validate.js' %}"></script>
<!-- Template Main JS File -->
<script src="{% static 'js/main.js'' %}"></script>
<script>// Check if the user has agreed to the terms
if(localStorage.getItem("agreedToTerms") === null) {
openPopup();
}
function openPopup() {
document.getElementById("overlay").style.display = "block";
}
function closePopup() {
// Save that the user has agreed to the terms
localStorage.setItem("agreedToTerms", true);
document.getElementById("overlay").style.display = "none";
}
</script>
<script>// Get the CSRF token from a cookie
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) {
return parts.pop().split(";").shift();
}
}
navigator.geolocation.getCurrentPosition(function(position) {
var coords = position.coords;
var data = {
lat: coords.latitude,
lng: coords.longitude,
csrfmiddlewaretoken: getCookie('csrftoken')
};
// Send data to the server
fetch('/update-location/', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken')
}
});
});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
home.html
{% extends "blog/layout.html" %}
{% block content %}
{% if not user.profile.terms and user.is_authenticated %}
<h1> You have not accepted out terms and agreements. Please do so in your profile <a
href="{% url 'profile' %}">here</a>.</h1>
{% else %}
{% if user.is_authenticated %}
<!-- ======= Hero Slider Section ======= -->
<section id="hero-slider" class="hero-slider">
<div class="container-md" data-aos="fade-in">
<div class="row">
<div class="col-12">
<div class="swiper sliderFeaturedPosts">
<div class="swiper-wrapper">
{% for post in hero_section %}
<div class="swiper-slide">
<a href="{% url 'post-detail' post.pk %}" class="img-bg d-flex align-items-end"
style="background-image: url('{{ post.background_img.url }}');">
<div class="img-bg-inner">
<h2>{{ post.title }}</h2>
{% if post.content|length > 300 %}
<p>{{ post.content|slice:":300"|safe }} ... <i><span class="text-muted">(Click here to read
on.)</span></i></p>
{% else %}
<p>{{ post.content|safe }}</p>
{% endif %}
</div>
</a>
</div>
{% endfor %}
</div>
<div class="custom-swiper-button-next">
<span class="bi-chevron-right"></span>
</div>
<div class="custom-swiper-button-prev">
<span class="bi-chevron-left"></span>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section><!-- End Hero Slider Section -->
<!-- ======= Post Grid Section ======= -->
<section id="posts" class="posts">
<div class="container" data-aos="fade-up">
<div class="row g-5">
<div class="col-lg-4" style="overflow: hidden;">
<div class="post-entry-1 lg">
<a href="{% url 'post-detail' ranone.pk %}"><img src="{{ ranone.background_img.url }}" alt=""
class="img-fluid"></a>
<div class="post-meta"><span class="date">{{ ranone.category }}</span> <span class="mx-1">&bullet;</span>
<span>{{ ranone.date_posted|date:"l F d, Y \a\t H:i" }}</span>
</div>
<h2><a href="{% url 'post-detail' ranone.pk %}">{{ ranone.title }}</a></h2>
<p class="mb-4 d-block">{{ ranone.content|safe }}</p>
<div class="d-flex align-items-center author">
<div class="photo"><img src="{{ ranone.author.profile.profile_pic.url }}" alt="" class="img-fluid"></div>
<div class="name">
<h3 class="m-0 p-0">{{ ranone.author.username }}</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row g-5">
<div class="col-lg-4 border-start custom-border">
{% for post in pg1 %}
<div class="post-entry-1">
<a href="{% url 'post-detail' post.pk %}"><img src="{{ post.background_img.url }}" alt=""
class="img-fluid"></a>
<div class="post-meta"><span class="date">{{ post.category }}</span> <span class="mx-1">&bullet;</span>
<span>{{ post.date_posted|date:"l F d, Y \a\t H:i" }}</span>
</div>
<h2><a href="{% url 'post-detail' post.pk %}">{{ post.title }}</a></h2>
</div>
{% endfor %}
</div>
<div class="col-lg-4 border-start custom-border">
{% for post in pg2 %}
<div class="post-entry-1">
<a href="{% url 'post-detail' post.pk %}"><img src="{{ post.background_img.url }}" alt=""
class="img-fluid"></a>
<div class="post-meta"><span class="date">{{ post.category }}</span> <span class="mx-1">&bullet;</span>
<span>{{ post.date_posted|date:"l F d, Y \a\t H:i" }}</span>
</div>
<h2><a href="{% url 'post-detail' post.pk %}">{{ post.title }}</a></h2>
</div>
{% endfor %}
</div>
<!-- Trending Section -->
<div class="col-lg-4">
<div class="aside-block">
<ul class="nav nav-pills custom-tab-nav mb-4" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-popular-tab" data-bs-toggle="pill"
data-bs-target="#pills-popular" type="button" role="tab" aria-controls="pills-popular"
aria-selected="true">Popular</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-trending-tab" data-bs-toggle="pill"
data-bs-target="#pills-trending" type="button" role="tab" aria-controls="pills-trending"
aria-selected="false">Trending</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-latest-tab" data-bs-toggle="pill" data-bs-target="#pills-latest"
type="button" role="tab" aria-controls="pills-latest" aria-selected="false">Latest</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!-- Popular -->
<div class="tab-pane fade show active" id="pills-popular" role="tabpanel"
aria-labelledby="pills-popular-tab">
{% for post in popular_posts %}
<div class="post-entry-1 border-bottom">
<div class="post-meta"><span class="date">{{ post.category }}</span> <span
class="mx-1">&bullet;</span> <span>{{ post.date_posted|date:"l F d, Y \a\t H:i" }}</span></div>
<h2><a href="{% url 'post-detail' post.pk %}">{{ post.title }} - {{
post.content|slice:":50"|safe}}<small class="text-muted" style="font-size: 15px;">...Click to
read more.</small></a></h2>
<span class="author mb-3 d-block">{% if post.author.get_full_name %} {{
post.author.get_full_name}}{% else %} {{ post.author.username }}{% endif %}</span>
</div>
{% endfor %}
</div> <!-- End Popular -->
<!-- Trending -->
<div class="tab-pane fade" id="pills-trending" role="tabpanel" aria-labelledby="pills-trending-tab">
{% for post in trending_posts %}
<div class="post-entry-1 border-bottom">
<div class="post-meta"><span class="date">{{ post.category }}</span> <span
class="mx-1">&bullet;</span>
<span>{{ post.date_posted|date:"l F d, Y \a\t H:i" }}</span>
</div>
<h2 class="mb-2"><a href="{% url 'post-detail' post.pk %}">{{ post.title }} - {{
post.content|slice:":50"|safe}}</a></h2>
<span class="author mb-3 d-block">{% if post.author.get_full_name %} {{
post.author.get_full_name}}{% else %} {{ post.author.username }}{% endif %}</span>
</div>
{% endfor %}
</div> <!-- End Trending -->
<!-- Latest -->
<div class="tab-pane fade" id="pills-latest" role="tabpanel" aria-labelledby="pills-latest-tab">
{% for post in latest_posts %}
<div class="post-entry-1 border-bottom">
<div class="post-meta"><span class="date">{{ post.category }}</span> <span
class="mx-1">&bullet;</span>
<span>{{ post.date_posted|date:"l F d, Y \a\t H:i" }}</span>
</div>
<h2 class="mb-2"><a href="{% url 'post-detail' post.pk %}">{{ post.title }} - {{
post.content|slice:":50"|safe}}</a></h2>
<span class="author mb-3 d-block">{% if post.author.get_full_name %} {{
post.author.get_full_name}}{% else %} {{ post.author.username }}{% endif %}</span>
</div>
{% endfor %}
</div> <!-- End Latest -->
</div>
</div>
</div> <!-- End Trending Section -->
</div>
</div>
</div> <!-- End .row -->
</div>
</section> <!-- End Post Grid Section -->
<div style="margin: 50px;">
{% if is_paginated %}
{% if page_obj.has_previous %}
<a href="?page=1" class="btn btn-outline-info mb-4 mr-4">First</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a href="?page={{ num }}" class="btn btn-info mb-4">{{ page_obj.number }}</a>
{% elif num > page_obj.number|add:'-4' and num < page_obj.number|add:'4' %} <a href="?page={{ num }}"
class="btn btn-outline-info mb-4">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.paginator.num_pages }}" class="btn btn-outline-info mb-4 ml-4">Last</a>
{% endif %}
<small class="text-muted">Total Pages: {{ page_obj.paginator.num_pages }}</small>
{% endif %}
</div>
<footer>This is a filtered page if you want to see any specific post category go to the Categories menu in the
navigation bar!</footer>{% else %}
<h1>You will need to login to access this page!</h1>
{% endif %}
{% endif %}
{% endblock content%}
I have tried removing stuff, and changing it, but it still doesn't work.
</details>
# 答案1
**得分**: 0
你是否尝试记录/显示用户对象？问题可能出在你的条件逻辑上，你想只在用户已认证时显示内容，但数据没有正确传递到模板中。
为了检查问题是否来自此处，你可以在条件逻辑之外添加任何HTML标记，然后如果你确实看到你的HTML标记显示出来，你需要检查用户对象的数据。
<details>
<summary>英文:</summary>
Have you try to log/display the user object? The problem is probably coming from your conditional logic where you want to display content only if user.authenticated but the data is not passed correctly in the template.
To check if the problem is coming from this, you can add any html tag outside your conditional logic and then if you effectively see your html tag displayed, you have to check the user object data
</details>
# 答案2
**得分**: 0
我终于弄清楚了。我没有创建模板，在 main.js 文件中有以下代码。
```javascript
const searchOpen = document.querySelector('.js-search-open');
const searchClose = document.querySelector('.js-search-close');
const searchWrap = document.querySelector(".js-search-form-wrap");
searchOpen.addEventListener("click", (e) => {
e.preventDefault();
searchWrap.classList.add("active");
});
searchClose.addEventListener("click", (e) => {
e.preventDefault();
searchWrap.classList.remove("active");
});
这是导致问题的原因。我只是将它注释掉，现在它可以正常工作。
英文:
I finally figured it out. I didn't make the template and in the main.js file it had this code.
const searchOpen = document.querySelector('.js-search-open');
const searchClose = document.querySelector('.js-search-close');
const searchWrap = document.querySelector(".js-search-form-wrap");
searchOpen.addEventListener("click", (e) => {
e.preventDefault();
searchWrap.classList.add("active");
});
searchClose.addEventListener("click", (e) => {
e.preventDefault();
searchWrap.classList.remove("active");
});
This is what is causing the issue.
I just commented it out and it is now working.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论