Django 실습(3) Bootstrap 사용해서 블로그 만들고 꾸미기

Django

Django 실습(3) Bootstrap 사용해서 블로그 만들고 꾸미기

UserDonghu 2023. 10. 10. 23:39

Bootstrap : 웹페이지의 디자인을 손쉽게 만들 수 있게 도와주는 프레임워크

비슷한걸로 Talewind가 있다.

사용법 : 웹사이트 확인

https://getbootstrap.kr/

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

CDN 방식이 설치 안해도 돼서 편한듯?

<!DOCTYPE html>
<html lang="ko-KR">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Django에서 CSS를 사용하기 위해서는 static기능을 이용해서 css경로를 줘야한다.

<!-- static load하기 (최 상단에 한번) -->
{% load static %}

<!-- css 경로 대신 -->
{% static 'STATIC_URL 이후의 경로' %}

부트스트랩 무료 템플릿을 다운받아서 지난번에 해본 실습 https://userdonghu.tistory.com/entry/Django-%EC%8B%A4%EC%8A%B52-Templates-%EB%B6%84%EB%A6%AC%EC%99%80-%EC%83%81%EC%86%8D 에 적용시켜보자

https://startbootstrap.com/theme/clean-blog

Start Bootstrap

startbootstrap.com

실습

다운받은 zip 파일의 압축을 풀어서 mysite / static 안에 넣는다.

setting.py 에 static 경로 추가

mysite / tutorialdjango / settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = '/static/' # 이거 수정
STATICFILES_DIRS = [BASE_DIR / 'static'] # 이거 추가

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

static에서 index.html을 복사해서 templates / menu.html 에 붙여넣기 후, 필요없는 부분을 자르고 href를 적절하게 수정해서 부모 html을 만든다.

{% load static %} 추가하고, href="css/stylee.css" 와 같은 경로는 static기능을 이용해서 모두 href="{% static 'css/styles.css' %}" 로 바꿔주어야 한다.

ex) src="js/script.js" 는 src="{% static 'js/script.js' %}"로 수정.

<!-- templates / menu.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>위인Blog</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <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" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
    </head>
    <body>
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
            <div class="container px-4 px-lg-5">
                <a class="navbar-brand" href="{% url 'main:index' %}">위인Blog</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    위인Blog
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto py-4 py-lg-0">
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'main:index' %}">Home</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'main:about' %}">About</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'blog:index' %}">Blog</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'main:contact' %}">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        {% block content %}
        {% endblock %}

        <!-- Footer-->
        <footer class="border-top">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <ul class="list-inline text-center">
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="{% static 'js/scripts.js' %}"></script>
    </body>
</html>

static에서 index.html을 복사해서 templates / main / index.html 에 붙여넣기 후, 부모 html인 menu.html에 있는 내용을 {% extends 'menu.html' %} 를 통해 상속 받도록 하고, {% load static %}후 중간에 {% block content %} 와 {% endblock %} 사이를 수정

<!-- main / index.html -->
{% extends 'menu.html' %}

{% block content %}
{% load static %}
<!-- Page Header-->
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %})">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="site-heading">
                    <h1>위인Blog</h1>
                    <span class="subheading">Bootstrap으로 Django실습</span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            <div class="post-preview">
                <a href="{% url 'blog:index' %}">
                    <h2 class="post-title">이곳은 main페이지 입니다.</h2>
                    <h3 class="post-subtitle">main페이지 입니다.</h3>
                </a>
                <p class="post-meta">
                    Posted by
                    <a href="#!">Start Bootstrap</a>
                    on October 10, 2023
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

마찬가지로 static의 about과 contact를 복붙해서 main / about, contact 수정

<!-- main / about.html -->
{% extends 'menu.html' %}

{% block content %}
{% load static %}
<!-- Page Header-->
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %})">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="page-heading">
                    <h1>About Me</h1>
                    <span class="subheading">This is what I do.</span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Main Content-->
<main class="mb-4">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur
                    voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam
                    ducimus consectetur?</p>
            </div>
        </div>
    </div>
</main>
{% endblock %}

<!-- main / contact.html -->
{% extends 'menu.html' %}

{% block content %}
{% load static %}
<!-- Page Header-->
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %})">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="page-heading">
                    <h1>Contact Me</h1>
                    <span class="subheading">Have questions? I have answers.</span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Main Content-->
<main class="mb-4">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon
                    as possible!</p>
                <div class="my-5">
                    <!-- * * * * * * * * * * * * * * *-->
                    <!-- * * SB Forms Contact Form * *-->
                    <!-- * * * * * * * * * * * * * * *-->
                    <!-- This form is pre-integrated with SB Forms.-->
                    <!-- To make this form functional, sign up at-->
                    <!-- https://startbootstrap.com/solution/contact-forms-->
                    <!-- to get an API token!-->
                    <form id="contactForm" data-sb-form-api-token="API_TOKEN">
                        <div class="form-floating">
                            <input class="form-control" id="name" type="text" placeholder="Enter your name..."
                                data-sb-validations="required" />
                            <label for="name">Name</label>
                            <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                        </div>
                        <div class="form-floating">
                            <input class="form-control" id="email" type="email" placeholder="Enter your email..."
                                data-sb-validations="required,email" />
                            <label for="email">Email address</label>
                            <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                            <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                        </div>
                        <div class="form-floating">
                            <input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..."
                                data-sb-validations="required" />
                            <label for="phone">Phone Number</label>
                            <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.
                            </div>
                        </div>
                        <div class="form-floating">
                            <textarea class="form-control" id="message" placeholder="Enter your message here..."
                                style="height: 12rem" data-sb-validations="required"></textarea>
                            <label for="message">Message</label>
                            <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.
                            </div>
                        </div>
                        <br />
                        <!-- Submit success message-->
                        <!---->
                        <!-- This is what your users will see when the form-->
                        <!-- has successfully submitted-->
                        <div class="d-none" id="submitSuccessMessage">
                            <div class="text-center mb-3">
                                <div class="fw-bolder">Form submission successful!</div>
                                To activate this form, sign up at
                                <br />
                                <a
                                    href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                            </div>
                        </div>
                        <!-- Submit error message-->
                        <!---->
                        <!-- This is what your users will see when there is-->
                        <!-- an error submitting the form-->
                        <div class="d-none" id="submitErrorMessage">
                            <div class="text-center text-danger mb-3">Error sending message!</div>
                        </div>
                        <!-- Submit Button-->
                        <button class="btn btn-primary text-uppercase disabled" id="submitButton"
                            type="submit">Send</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

static / index.html을 복붙해서 blog / index.html 을 for문을 통해서 db의 요소들이 나타나고 클릭시 이동되게 수정

<!-- blog / index.html -->
{% extends 'menu.html' %}

{% block content %}
{% load static %}
<!-- Page Header-->
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %})">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="site-heading">
                    <h1>위인Blog</h1>
                    <span class="subheading">Bootstrap으로 Django실습</span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            {% for i in db %}
            <div class="post-preview">
                <a href="./{{i.id}}">
                    <h2 class="post-title">{{i.title}}</h2>
                    <h3 class="post-subtitle">{{i.category}}</h3>
                </a>
                <p class="post-meta">
                    Posted by 
                    <a href="#!">{{i.author}}</a>
                    on {{i.updated_at}}
                </p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

static / post.html 을 복붙해서 blog / post.html 을 db의 요소들이 나타나게 수정

<!-- main / post.html -->
{% extends 'menu.html' %}

{% block content %}
{% load static %}
<!-- Page Header-->
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %})">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="post-heading">
                    <h1>{{db.title}}</h1>
                    <h2 class="subheading">{{db.category}}</h2>
                    <span class="meta">
                        Posted by
                        <a href="#!">{{db.author}}</a>
                        on {{db.updated_at}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Post Content-->
<article class="mb-4">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <img src="{{db.thumbnail}}">
                <p>{{db.contents}}</p>
                <p>태그 : {{db.tags}}</p>
                <p>created at : {{db.created_at}}</p>
            </div>
        </div>
    </div>
</article>
{% endblock %}

결과

이제 좀 뭔가 웹사이트 느낌이 난다.

html파일이 너무 길어서 눈 빠질거같다..

이제 model과 DB만 할줄알면 될거같다. 굿

저작자표시

'Django' 카테고리의 다른 글

Django ORM을 이용해서 DB CRUD 해보기 (0)	2023.10.11
Django 실습(4) Model과 DB를 이용한 게시물 관리와 업로드 (1)	2023.10.11
Django 실습(2) Templates 분리와 상속으로 블로그 만들기 (1)	2023.10.10
Django 실습(1) 핫딜 크롤링해서 상품 사이트 만들기 (0)	2023.10.05
Django 란 무엇인가 (0)	2023.10.05

현재글Django 실습(3) Bootstrap 사용해서 블로그 만들고 꾸미기

UserDonghu's Note

To find you

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

UserDonghu's Note