카테고리와 태그 위젯 위치 오류
389
작성한 질문수 88
안녕하세요? 좋은 강의 감사합니다.
책 17-1을 하고 있는 도중에 질문이 있습니다.
같은 base.html을 사용하고 있는데, post_detail.html 의 위젯 위치가 옆이 아니라, 아래에 나타나는 오류가 생깁니다. post_list.html 에서는 위젯이 정상적으로 오른쪽에 잡히는데요.
오류 화면을 아래와 같이 첨부합니다.

아래는 base.html의 코드이고요
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>{% block head_title %}Blog{% endblock %}</title>
<link rel= "stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" media="screen">
<script src="https://kit.fontawesome.com/726bbd6862.js" crossorigin="anonymous"></script>
</head>
<body>
{% include 'blog/navbar.html' %}
<div class="container my-3">
<div class="row">
<div class="col-md-8 col-lg-9" id="main-area">
{% block main_area %}
{% endblock %}
</div>
<div class="col-md-4 col-lg-3">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4" id ="categories-card">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<ul>
{% for category in categories %}
<li>
<a href="{{ category.get_absolute_url }}">{{ category }} ({{ category.post_set.count }})</a>
</li>
{% endfor %}
<li>
<a href="/blog/category/no_category/"> 미분류 ({{ no_category_post_count }})</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'blog/footer.html' %}
<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.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
아래는 post_detail.html의 코드 입니다.
{% extends 'blog/base.html' %}
{% block head_title %}
{{ post.title }} - Blog
{% endblock %}
{% block main_area %}
<div id = "post-area">
{% if post.category %}
<span class="badge badge-secondary float-right">{{ post.category }}</span>
{% else %}
<span class="badge badge-secondary float-right"> 미분류 </span>
{% endif %}
<!-- Title -->
<h1 class="mt-4">{{ post.title }}</h1>
<h5 class="text-muted">{{ post.hook_text }}</h5>
<!-- Author -->
<p class="lead">
by
<a href="#"> {{ post.author | upper }} </a>
</p>
<hr>
{% if user.is_authenticated and user == post.author %}
<a class="btn btn-info btn-sm float-right" href="/blog/update_post/{{ post.pk }}/" role="button"><i class="fas fa-pen"></i>Edit Post</a>
{% endif %}
<!-- Date/Time -->
<p>{{ post.created_at }}</p>
<hr>
<!-- Preview Image -->
{% if post.head_image %}
<img class="img-fluid rounded" src="{{ post.head_image.url }}" alt="{{ post.title }} head image">
{% else %}
<img class="img-fluid rounded" src="https://picsum.photos/seed/{{ post.id }}/800/200" alt="random_image">
{% endif %}
<hr>
<!-- Post Content -->
<p class="lead">{{ post.get_content_markdown | safe }}</p>
{% if post.tags.exists %}
<i class="fas fa-tags"></i>
{% for tag in post.tags.all %}
<a href="{{ tag.get_absolute_url }}" class="badge badge-light">{{ tag }}</a>
{% endfor %}
<br/>
<br/>
{% endif %}
{% if post.file_upload %}
<a href="{{ post.file_upload.url }}" class="btn btn-outline-dark" role="button"> Download :
{% if post.get_file_ext == 'csv' %}
<i class="fa-regular fa-file-csv"></i>
{% elif post.get_file_ext == 'xlsx' or 'xls' %}
<i class="fa-regular fa-file-excel"></i>
{% elif post.get_file_ext == 'docs' or 'doc' %}
<i class="fa-regular fa-file-word"></i>
{% else %}
<i class="far fa-file"></i>
{% endif %}
{{ post.get_file_name }}
</a>
{% endif %}
<hr>
</div>
<div id="comment-area">
<!-- Comments Form -->
<div class="card my-4">
<h5 class="card-header">Leave a Comment:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
{% if post.comment_set.exists %}
{% for comment in post.comment_set.iterator %}
<!-- Single Comment -->
<div class="media mb-4" id="comment-{{ comment.pk }}">
<img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
<div class="media-body">
<h5 class="mt-0">{{ comment.author.username }} <small class="text-muted">{{ comment.created_at }}</small>
</h5>
<p>{{ comment.content | linebreaks }}</p>
</div>
{% endfor %}
{% endif %}
</div>
<hr/>
</div>
{% endblock %}완성된 코드와 비교를 해봐도 다른점을 잘 모르겠는데 도움 부탁드립니다!
답변 1
로그인 오류
0
89
2
docker-compose down 안되는 현상
0
210
2
url pattern관련 문의
0
199
2
오류
0
256
1
doitdjango 블로그 게시판 작동 오류
1
303
1
구글 로그인 오류 .
0
467
2
makemigrations 을 했는데 aws lightsail에서
0
206
1
안녕하세요 강사님,
0
404
2
맥북 프로 14 가상화 확인
0
439
2
테스트 코드 오류
0
389
2
섹션 6-2 알림 내용 중 링크가 잘못되어 있네요.
0
284
2
장고 개발 준비.
0
411
2
Mac
0
323
1
TDD 통과 했지만, 실제 웹에서 작동하지 않습니다.
0
376
1
summernote를 적용하고 이미지를 업로그하면 모바일에서 볼때는 이미지가 크게 나오는데 어떻게 해야 되나요?
0
918
2
python manage.py test 를 돌리면 allauth.socialaccount.models.SocialApp.DoesNotExist 에러가 뜹니다.
1
1698
2
self.client.post에 글이 생성되지않습니다
0
340
1
Nginx 설정 이후 개발용 도커 컨테이너 실행
0
554
1
UpdateView - 포스트 수정 페이지 만들기 에서 질문이 있습니다.
0
405
1
from .models import Question
0
1221
1
파이참 장고 인식 불가 문제
0
1006
2
배포용 도커 컨테이너 실행이 안됩니다
0
717
1
docker-compose exec web manage.py migrate
0
557
1
search_info가 안나옵니다..
0
361
2





