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.
This 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">•</span>
<span>{{ ranone.date_posted|date:"l F d, Y at 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">•</span>
<span>{{ post.date_posted|date:"l F d, Y at 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">•</span>
<span>{{ post.date_posted|date:"l F d, Y at 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">•</span> <span>{{ post.date_posted|date:"l F d, Y at 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">•</span>
<span>{{ post.date_posted|date:"l F d, Y at 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">•</span>
<span>{{ post.date_posted|date:"l F d, Y at 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.
2
Answers
I finally figured it out. I didn't make the template and in the main.js file it had this code.
This is what is causing the issue. I just commented it out and it is now working.
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