"파이썬 유치원 (어린이반)"의 두 판 사이의 차이

164번째 줄: 164번째 줄:
DEBUG = True
DEBUG = True
</source>
</source>
* URLconf : 장고에서 URL과 일치하는 뷰를 찾기 위한 패턴들의 집합


====Django Tutorial====
====Django Tutorial====

2020년 5월 2일 (토) 20:46 판

1 파이썬 유치원

파이썬 유치원은 유튜브 채널 김왼손의 왼손코딩에서 구독자와 함께 진행하는 프로젝트입니다. 프로젝트 기간 동안 스스로 학습하면서 나만의 프로그램을 만들어 봅니다. 파이썬 유치원 1기는 2020년 5월 1일부터 31일까지 한달 동안 진행합니다.

파이썬 유치원에는 강의가 없습니다. 사실 강의만 들어서는 머리에 남는 게 없습니다. 직접 만들어 봐야 합니다. 모든 분야가 그렇겠지만 코딩은 더욱 그렇습니다. 이제 강의는 그만 듣고 직접 만들어 봅시다. 모든 정보는 유튜브와 구글에 있으니까요. 파이썬 유치원에서는 방향과 방법을 함께 고민합니다. 유치원 선생님은 아이가 하고 싶은 대로 자유롭게 두면서 아이가 흥미를 잃지 않게, 다치지 않게 옆에서 도와줍니다. 파이썬 유치원에서의 김왼손은 그런 역할입니다.

파이썬 유치원의 모든 진행 상황은 유튜브 채널 김왼손의 왼손코딩에서 공유합니다. 매주 토요일 저녁 유튜브 라이브에서 어떻게 하고 있는지 함께 살펴보고 어려움이 있다면 함께 고민합니다. 각자의 진행 내용은 제타위키의 파이썬 유치원 문서에서 공유합니다. 진행 내용을 공유하고 서로 의견을 나눌 수 있습니다.

파이썬 유치원 어린이반은 파이썬이나 코딩을 어느정도 배웠고 프로그램을 만들어 본적인 있는 분들을 대상으로 합니다.

2 제타위키 사용법

3 어린이반 친구들

3.1 GreenElf

3.1.1 설명

유트브에서 볼려던 영상을 기억할 수 있도록 저장,유트브를 얼마나 볼지 설정,표시 vs studio code 사용 dev ed 참고함(코딩계 퓨디파이)단점:영어

3.1.2 코드

import tkinter as tk
from tkinter import*
from tkinter import messagebox
from tkinter import Text
root = tk.Tk()
root.title("유트브 도우미 1.0")
root.geometry("400x400")
 
butima1=PhotoImage(file="hey.png")

def intro_message():
     messagebox.showinfo("유트브 도우미1.0에 대하여",message="설명")
#패트리온 계정 만들고 설명쓰기...
firsL=Entry(root,font = ("굴림",12))

messagebox.showinfo("안녕하세요","이런식으로 사용")
 #여기에다 부연설명

btn = Button(root,image=butima1)
btn.pack()
btn.place(x=20, y=30)


intro=Button(root,text ="설명",bg="white",width="3",height=1,command=intro_message)
intro.pack()


root.mainloop()

3.2 _ Starry8004

3.2.1 설명

웹 크롤링

3.2.2 코드

print('안녕 토끼야!')
from bs4 import BeautifulSoup
from urllib.request import urlopen

response = urlopen('https://www.naver.com/')
soup = BeautifulSoup(response, 'html.parser')
i = 1
f = open("새파일.txt", 'w')
for anchor in soup.select("span.keyword"):
    data = (str(i) + "위 : " + anchor.get_txt() + "\n"
i=i+1
f.write(data)
f.close()


3.3 white tree

3.3.1 설명

디스코드 봇을 만들고싶어요 음악,알림등 기능이 있는봇

3.3.2 코드

import discord
import asyncio
import requests
from json import loads
client = discord.Client()

token = "봇 토큰"

@client.event
async def on_ready(): #방송알림
    print('Logged in as')
    print(client.user.name)
    print(client.user.id)
    print('------')
    await client.change_presence(status=discord.Status.online, activity=discord.Game('정상 작동'))
    twitch = "트위치 아이디"
    name = "이름"
    channel = client.get_channel(703569369502056469)
    a = 0
    while True:
        headers = {'Client-ID': 'j6l5l7ebqob3d6rjoziafz4go38fjs'}
        response = requests.get("https://api.twitch.tv/helix/streams?user_login=" + twitch, headers=headers)
        try:
            if loads(response.text)['data'][0]['type'] == 'live' and a == 0:
                await channel.send("@everyone" + name + "님이 방송을 시작하였습니다. url")
                a = 1
        except:
            a = 0
        await asyncio.sleep(3)

@client.event
async def on_message(message):

    if message.content.startswith('!test'):
        await message.channel.send('test')

    if message.content.startswith("!1"):
        embed = discord.Embed(title="안녕하세요!", description="저는 테스트중인 봇입니다.", color=0x00ff00)
        embed.set_thumbnail(url=message.author.avatar_url)
        embed.add_field(name="미완성", value="현제 제작중", inline=True)
        embed.add_field(name="미완성", value="현제 제작중", inline=True)
        await message.channel.send(embed=embed)

client.run(token)


3.4 안기웅

3.4.1 About Me

안녕하세요. 비전공자 딸바보 아빠입니다.
저는 전산쟁이 9년차이고요.
프로그래밍은 깊게 안들어가봤어요.
저는 저희 아기 사진 블로그를 만들고 싶습니다.
현재 장고를 공부하고 있습니다.
제 포트폴리오는 아래와 같습니다.

3.4.2 Django Important Notes

  • MVC(Model - View - Controller)
  • MVT(Model - View - Template)
  • Model : models.py
  • View : views.py
  • Template : settings.py
  • URL 정의 : urls.py
  • 로직 정의 : views.py
  • APP 추가 후 settings.py 에 추가를 해야된다.
 그러나 APP를 추가 할때 따로 변수로 빼주고 거기에 넣어주면 좋다.
INSTALLED_APPS += [
    'blog.apps.BlogConfig',                              # blog app 추가
]
  • ImageField를 사용할려면 pillow를 설치해야된다..
pip install pillow
  • ALLOWED_HOSTS  : 루트URL
  • 배포시 DEBUG는 False로
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
  • URLconf : 장고에서 URL과 일치하는 뷰를 찾기 위한 패턴들의 집합

3.4.3 Django Tutorial

3.4.4 Basic Setting

  • 가상 환경 설정
python -m venv venv
  • django 설치
pip install django
  • django 버전 확인
python -m django --version

3.4.5 Git Setting

  • gitignore 설정

https://developer-ankiwoong.tistory.com/837

  • git 생성

https://github.com/ankiwoong/python_kindergarten

  • git 연결
git remote add orign https https://github.com/ankiwoong/python_kindergarten.git
git remote -v

3.4.6 Project

  • 프로젝트 생성
django-admin startproject anjia .
  • runserver 테스트
python manage.py runserver
  • App 생성
python manage.py startapp blog
  • Settings 수정
ALLOWED_HOSTS = ['192.168.56.101', 'localhost', '127.0.0.1']                      # 루트 URL

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

INSTALLED_APPS += [
    'blog',                              # blog app 추가

]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

LANGUAGE_CODE = 'ko-kr'         # 언어 : 한국

TIME_ZONE = 'Asia/Seoul'        # 타임존 : 한국 시간(기본 : UTC(세계표준시))
  • 데이터베이스에 변경 필요 사항 추출
python manage.py makemigrations
  • 데이터베이스에 변경사항 반영
python manage.py migrate
  • 관리자 생성
python manage.py createsuperuser
  • Admin 확인
http://127.0.0.1:8000/admin/
  • anjia > urls.py
from django.contrib import admin
from django.urls import path
from django.conf.urls import include
from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    # 주소창에 blog를 입력시 blog.urls가 처리
    path('blog/', include('blog.urls')),
    # 기본주소로 처리시 blog로 넘겨준다.
    path('', RedirectView.as_view(url='/blog/', permanent=True)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)     # 정적 파일 처리
  • blog > urls.py
from django.urls import path
from blog import views

urlpatterns = [
    # 사이트 명이 입력이 안될시 index라는 것으로 처리 한다.
    # blog > views.py
    path('', views.index, name='index'),
]
  • blog > views.py
from django.shortcuts import render

# Create your views here.

# index 처리


def index(req):
    context = {

    }

    return render(req, 'index.html', context=context)
  • templates > index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TEST BLOG</title>
  </head>
  <body>
    <h1>Hello My TEST BLOG</h1>
  </body>
</html>
  • Static

anjia > settings.py

# STATIC File
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
  • Bootstrap

https://colorlib.com/wp/free-bootstrap-blog-templates/

  • templates > index.html
index.html
<!DOCTYPE html>
<html lang="zxx" class="no-js">
  <head>
    <!-- Mobile Specific Meta -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/fav.png" />
    <!-- Author Meta -->
    <meta name="author" content="colorlib" />
    <!-- Meta Description -->
    <meta name="description" content="" />
    <!-- Meta Keyword -->
    <meta name="keywords" content="" />
    <!-- meta character set -->
    <meta charset="UTF-8" />
    <!-- Site Title -->
    <title>Blogger</title>
    {% load static %}
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700"
      rel="stylesheet"
    />
    <!--
    CSS
    ============================================= -->
    <link rel="stylesheet" href="{% static 'css/linearicons.css' %}" />
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" />
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" />
    <link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />
  </head>
  <body>
    <!-- Start Header Area -->
    <header class="default-header">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <a class="navbar-brand" href="index.html">
            <img src="{% static 'img/logo.png' %}" alt="" />
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div
            class="collapse navbar-collapse justify-content-end align-items-center"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav">
              <li><a href="#home">Home</a></li>
              <li><a href="#news">News</a></li>
              <li><a href="#travel">Travel</a></li>
              <li><a href="#fashion">fashion</a></li>
              <li><a href="#team">team</a></li>
              <!-- Dropdown -->
              <li class="dropdown">
                <a
                  class="dropdown-toggle"
                  href="#"
                  id="navbardrop"
                  data-toggle="dropdown"
                >
                  Pages
                </a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="single.html">Single</a>
                  <a class="dropdown-item" href="category.html">Category</a>
                  <a class="dropdown-item" href="search.html">Search</a>
                  <a class="dropdown-item" href="archive.html">Archive</a>
                  <a class="dropdown-item" href="generic.html">Generic</a>
                  <a class="dropdown-item" href="elements.html">Elements</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- End Header Area -->

    <!-- start banner Area -->
    <section
      class="banner-area relative"
      id="home"
      data-parallax="scroll"
      data-image-src="{% static 'img/header-bg.jpg' %}"
    >
      <div class="overlay-bg overlay"></div>
      <div class="container">
        <div class="row fullscreen">
          <div
            class="banner-content d-flex align-items-center col-lg-12 col-md-12"
          >
            <h1>
              A Discount Toner Cartridge <br />
              Is Better Than Ever.
            </h1>
          </div>
          <div
            class="head-bottom-meta d-flex justify-content-between align-items-end col-lg-12"
          >
            <div class="col-lg-6 flex-row d-flex meta-left no-padding">
              <p><span class="lnr lnr-heart"></span> 15 Likes</p>
              <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
            </div>
            <div
              class="col-lg-6 flex-row d-flex meta-right no-padding justify-content-end"
            >
              <div class="user-meta">
                <h4 class="text-white">Mark wiens</h4>
                <p>12 Dec, 2017 11:21 am</p>
              </div>
              <img
                class="img-fluid user-img"
                src="{% static 'img/user.jpg' %}"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End banner Area -->

    <!-- Start category Area -->
    <section class="category-area section-gap" id="news">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="menu-content pb-70 col-lg-8">
            <div class="title text-center">
              <h1 class="mb-10">Latest News from all categories</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </div>
        </div>
        <div class="active-cat-carusel">
          <div class="item single-cat">
            <img src="{% static 'img/c1.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">It S Hurricane Season Visiting Hilton</a></h4>
          </div>
          <div class="item single-cat">
            <img src="{% static 'img/c2.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">What Makes A Hotel Boutique</a></h4>
          </div>
          <div class="item single-cat">
            <img src="{% static 'img/c3.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">Les Houches The Hidden Gem Valley</a></h4>
          </div>
        </div>
      </div>
    </section>
    <!-- End category Area -->

    <!-- Start travel Area -->
    <section class="travel-area section-gap" id="travel">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="menu-content pb-70 col-lg-8">
            <div class="title text-center">
              <h1 class="mb-10">Hot topics from Travel Section</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 travel-left">
            <div class="single-travel media pb-70">
              <img
                class="img-fluid d-flex mr-3"
                src="{% static 'img/t1.jpg' %}"
                alt=""
              />
              <div class="dates">
                <span>20</span>
                <p>Dec</p>
              </div>
              <div class="media-body align-self-center">
                <h4 class="mt-0">
                  <a href="#">Addiction When Gambling Becomes A Problem</a>
                </h4>
                <p>
                  inappropriate behavior Lorem ipsum dolor sit amet,
                  consectetur.
                </p>
                <div class="meta-bottom d-flex justify-content-between">
                  <p><span class="lnr lnr-heart"></span> 15 Likes</p>
                  <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
                </div>
              </div>
            </div>
            <div class="single-travel media">
              <img
                class="img-fluid d-flex mr-3"
                src="{% static 'img/t3.jpg' %}"
                alt=""
              />
              <div class="dates">
                <span>20</span>
                <p>Dec</p>
              </div>
              <div class="media-body align-self-center">
                <h4 class="mt-0">
                  <a href="#">Addiction When Gambling Becomes A Problem</a>
                </h4>
                <p>
                  inappropriate behavior Lorem ipsum dolor sit amet,
                  consectetur.
                </p>
                <div class="meta-bottom d-flex justify-content-between">
                  <p><span class="lnr lnr-heart"></span> 15 Likes</p>
                  <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 travel-right">
            <div class="single-travel media pb-70">
              <img
                class="img-fluid d-flex mr-3"
                src="{% static 'img/t2.jpg' %}"
                alt=""
              />
              <div class="dates">
                <span>20</span>
                <p>Dec</p>
              </div>
              <div class="media-body align-self-center">
                <h4 class="mt-0">
                  <a href="#">Addiction When Gambling Becomes A Problem</a>
                </h4>
                <p>
                  inappropriate behavior Lorem ipsum dolor sit amet,
                  consectetur.
                </p>
                <div class="meta-bottom d-flex justify-content-between">
                  <p><span class="lnr lnr-heart"></span> 15 Likes</p>
                  <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
                </div>
              </div>
            </div>
            <div class="single-travel media">
              <img
                class="img-fluid d-flex mr-3"
                src="{% static 'img/t4.jpg' %}"
                alt=""
              />
              <div class="dates">
                <span>20</span>
                <p>Dec</p>
              </div>
              <div class="media-body align-self-center">
                <h4 class="mt-0">
                  <a href="#">Addiction When Gambling Becomes A Problem</a>
                </h4>
                <p>
                  inappropriate behavior Lorem ipsum dolor sit amet,
                  consectetur.
                </p>
                <div class="meta-bottom d-flex justify-content-between">
                  <p><span class="lnr lnr-heart"></span> 15 Likes</p>
                  <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
                </div>
              </div>
            </div>
          </div>
          <a
            href="#"
            class="primary-btn load-more pbtn-2 text-uppercase mx-auto mt-60"
            >Load More
          </a>
        </div>
      </div>
    </section>
    <!-- End travel Area -->

    <!-- Start fashion Area -->
    <section class="fashion-area section-gap" id="fashion">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="menu-content pb-70 col-lg-8">
            <div class="title text-center">
              <h1 class="mb-10">Fashion News This Week</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6 single-fashion">
            <img class="img-fluid" src="{% static 'img/f1.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">Addiction When Gambling Becomes A Problem</a></h4>
            <p>
              inappropriate behavior ipsum dolor sit amet, consectetur.
            </p>
            <div class="meta-bottom d-flex justify-content-between">
              <p><span class="lnr lnr-heart"></span> 15 Likes</p>
              <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 single-fashion">
            <img class="img-fluid" src="{% static 'img/f2.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">Addiction When Gambling Becomes A Problem</a></h4>
            <p>
              inappropriate behavior ipsum dolor sit amet, consectetur.
            </p>
            <div class="meta-bottom d-flex justify-content-between">
              <p><span class="lnr lnr-heart"></span> 15 Likes</p>
              <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 single-fashion">
            <img class="img-fluid" src="{% static 'img/f3.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">Addiction When Gambling Becomes A Problem</a></h4>
            <p>
              inappropriate behavior ipsum dolor sit amet, consectetur.
            </p>
            <div class="meta-bottom d-flex justify-content-between">
              <p><span class="lnr lnr-heart"></span> 15 Likes</p>
              <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 single-fashion">
            <img class="img-fluid" src="{% static 'img/f4.jpg' %}" alt="" />
            <p class="date">10 Jan 2018</p>
            <h4><a href="#">Addiction When Gambling Becomes A Problem</a></h4>
            <p>
              inappropriate behavior ipsum dolor sit amet, consectetur.
            </p>
            <div class="meta-bottom d-flex justify-content-between">
              <p><span class="lnr lnr-heart"></span> 15 Likes</p>
              <p><span class="lnr lnr-bubble"></span> 02 Comments</p>
            </div>
          </div>
          <a
            href="#"
            class="primary-btn load-more pbtn-2 text-uppercase mx-auto mt-60"
            >Load More
          </a>
        </div>
      </div>
    </section>
    <!-- End fashion Area -->

    <!-- Start team Area -->
    <section class="team-area section-gap" id="team">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="menu-content pb-70 col-lg-8">
            <div class="title text-center">
              <h1 class="mb-10">About Blogger Team</h1>
              <p>Who are in extremely love with eco friendly system.</p>
            </div>
          </div>
        </div>
        <div class="row justify-content-center d-flex align-items-center">
          <div class="col-lg-6 team-left">
            <p>
              inappropriate behavior is often laughed off as “boys will be
              boys,” women face higher conduct standards especially in the
              workplace. That’s why it’s crucial that, as women, our behavior on
              the job is beyond reproach. inappropriate behavior is often
              laughed off as “boys will be boys,” women face higher conduct
              standards especially in the workplace. That’s why it’s crucial
              that.
            </p>
            <p>
              inappropriate behavior is often laughed off as “boys will be
              boys,” women face higher conduct standards especially in the
              workplace. That’s why it’s crucial that, as women.
            </p>
          </div>
          <div class="col-lg-6 team-right d-flex justify-content-center">
            <div class="row active-team-carusel">
              <div class="single-team">
                <div class="thumb">
                  <img
                    class="img-fluid"
                    src="{% static 'img/team1.jpg' %}"
                    alt=""
                  />
                  <div class="align-items-center justify-content-center d-flex">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-linkedin"></i></a>
                  </div>
                </div>
                <div class="meta-text mt-30 text-center">
                  <h4>Dora Walker</h4>
                  <p>Senior Core Developer</p>
                </div>
              </div>
              <div class="single-team">
                <div class="thumb">
                  <img
                    class="img-fluid"
                    src="{% static 'img/team2.jpg' %}"
                    alt=""
                  />
                  <div class="align-items-center justify-content-center d-flex">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-linkedin"></i></a>
                  </div>
                </div>
                <div class="meta-text mt-30 text-center">
                  <h4>Lena Keller</h4>
                  <p>Creative Content Developer</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End team Area -->

    <!-- start footer Area -->
    <footer class="footer-area section-gap">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-12">
            <div class="single-footer-widget">
              <h6>Top Products</h6>
              <ul class="footer-nav">
                <li><a href="#">Managed Website</a></li>
                <li><a href="#">Manage Reputation</a></li>
                <li><a href="#">Power Tools</a></li>
                <li><a href="#">Marketing Service</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6 col-md-12">
            <div class="single-footer-widget newsletter">
              <h6>Newsletter</h6>
              <p>
                You can trust us. we only send promo offers, not a single spam.
              </p>
              <div id="mc_embed_signup">
                <form
                  target="_blank"
                  novalidate="true"
                  action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
                  method="get"
                  class="form-inline"
                >
                  <div class="form-group row" style="width: 100%;">
                    <div class="col-lg-8 col-md-12">
                      <input
                        name="EMAIL"
                        placeholder="Enter Email"
                        onfocus="this.placeholder = ''"
                        onblur="this.placeholder = 'Enter Email '"
                        required=""
                        type="email"
                      />
                      <div style="position: absolute; left: -5000px;">
                        <input
                          name="b_36c4fd991d266f23781ded980_aefe40901a"
                          tabindex="-1"
                          value=""
                          type="text"
                        />
                      </div>
                    </div>

                    <div class="col-lg-4 col-md-12">
                      <button class="nw-btn primary-btn">
                        Subscribe<span class="lnr lnr-arrow-right"></span>
                      </button>
                    </div>
                  </div>
                  <div class="info"></div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-12">
            <div class="single-footer-widget mail-chimp">
              <h6 class="mb-20">Instragram Feed</h6>
              <ul class="instafeed d-flex flex-wrap">
                <li><img src="{% static 'img/i1.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i2.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i3.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i4.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i5.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i6.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i7.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i8.jpg' %}" alt="" /></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="row footer-bottom d-flex justify-content-between">
          <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
          <p class="col-lg-8 col-sm-12 footer-text">
            Copyright &copy;
            <script>
              document.write(new Date().getFullYear());
            </script>
            All rights reserved | This template is made with
            <i class="fa fa-heart-o" aria-hidden="true"></i> by
            <a href="https://colorlib.com" target="_blank">Colorlib</a>
          </p>
          <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
          <div class="col-lg-4 col-sm-12 footer-social">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-dribbble"></i></a>
            <a href="#"><i class="fa fa-behance"></i></a>
          </div>
        </div>
      </div>
    </footer>
    <!-- End footer Area -->

    <script src="{% static 'js/vendor/jquery-2.2.4.min.js' %}"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
      integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
      crossorigin="anonymous"
    ></script>
    <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.ajaxchimp.min.js' %}"></script>
    <script src="{% static 'js/parallax.min.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'js/jquery.sticky.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
  </body>
</html>
  • templates > single.html
single.html
<!DOCTYPE html>
<html lang="zxx" class="no-js">
  <head>
    <!-- Mobile Specific Meta -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/fav.png" />
    <!-- Author Meta -->
    <meta name="author" content="colorlib" />
    <!-- Meta Description -->
    <meta name="description" content="" />
    <!-- Meta Keyword -->
    <meta name="keywords" content="" />
    <!-- meta character set -->
    <meta charset="UTF-8" />
    <!-- Site Title -->
    <title>Blogger</title>

    {% load static %}
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700"
      rel="stylesheet"
    />
    <!--
        CSS
        ============================================= -->
    <link rel="stylesheet" href="{% static 'css/linearicons.css' %}" />
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" />
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" />
    <link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />
  </head>
  <body>
    <!-- Start Header Area -->
    <header class="default-header">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <a class="navbar-brand" href="index.html">
            <img src="{% static 'img/logo.png' %}" alt="" />
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div
            class="collapse navbar-collapse justify-content-end align-items-center"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav scrollable-menu">
              <li><a href="#home">Home</a></li>
              <li><a href="#news">News</a></li>
              <li><a href="#travel">Travel</a></li>
              <li><a href="#fashion">fashion</a></li>
              <li><a href="#team">team</a></li>
              <!-- Dropdown -->
              <li class="dropdown">
                <a
                  class="dropdown-toggle"
                  href="#"
                  id="navbardrop"
                  data-toggle="dropdown"
                >
                  Pages
                </a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="single.html">Single</a>
                  <a class="dropdown-item" href="category.html">Category</a>
                  <a class="dropdown-item" href="search.html">Search</a>
                  <a class="dropdown-item" href="archive.html">Archive</a>
                  <a class="dropdown-item" href="generic.html">Generic</a>
                  <a class="dropdown-item" href="elements.html">Elements</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- End Header Area -->

    <!-- Start top-section Area -->
    <section class="top-section-area section-gap">
      <div class="container">
        <div class="row justify-content-between align-items-center d-flex">
          <div class="col-lg-8 top-left">
            <h1 class="text-white mb-20">Post Details</h1>
            <ul>
              <li>
                <a href="index.html">Home</a
                ><span class="lnr lnr-arrow-right"></span>
              </li>
              <li>
                <a href="category.html">Category</a
                ><span class="lnr lnr-arrow-right"></span>
              </li>
              <li><a href="single.html">Fashion</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- End top-section Area -->

    <!-- Start post Area -->
    <div class="post-wrapper pt-100">
      <!-- Start post Area -->
      <section class="post-area">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <div class="single-page-post">
                <img
                  class="img-fluid"
                  src="{% static 'img/single.jpg' %}"
                  alt=""
                />
                <div class="top-wrapper">
                  <div class="row d-flex justify-content-between">
                    <h2 class="col-lg-8 col-md-12 text-uppercase">
                      A Discount Toner Cartridge Is Better Than Ever
                    </h2>
                    <div
                      class="col-lg-4 col-md-12 right-side d-flex justify-content-end"
                    >
                      <div class="desc">
                        <h2>Mark wiens</h2>
                        <h3>12 Dec ,2017 11:21 am</h3>
                      </div>
                      <div class="user-img">
                        <img src="{% static 'img/user.jpg' %}" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tags">
                  <ul>
                    <li><a href="#">lifestyle</a></li>
                    <li><a href="#">Art</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Fashion</a></li>
                  </ul>
                </div>
                <div class="single-post-content">
                  <p>
                    MCSE boot camps have its supporters and its detractors. Some
                    people do not understand why you should have to spend money
                    on boot camp when you can get the MCSE study materials
                    yourself at a fraction of the camp price. However, who has
                    the willpower to actually sit through a self-imposed MCSE
                    training.
                  </p>
                  <p>
                    MCSE boot camps have its supporters and its detractors. Some
                    people do not understand why you should have to spend money
                    on boot camp when you can get the MCSE study materials
                    yourself at a fraction of the camp price. However, who has
                    the willpower to actually sit through a self-imposed MCSE
                    training. who has the willpower to actually sit through a
                    self-imposed MCSE training.
                  </p>

                  <blockquote>
                    Ea possunt paria non esse. Pudebit te, inquam, illius
                    tabulae, quam Cleanthes sane commode verbis depingere
                    solebat. Urgent tamen et nihil remittunt. An vero displicuit
                    ea, quae tributa est animi virtutibus tanta praestantia?
                    Sint ista Graecorum; Cur igitur, cum de re conveniat, non
                    malumus usitate loqui? Huius ego nunc auctoritatem sequens
                    idem faciam. <cite>Wise Man</cite>
                  </blockquote>

                  <p>
                    MCSE boot camps have its supporters and its detractors. Some
                    people do not understand why you should have to spend money
                    on boot camp when you can get the MCSE study materials
                    yourself at a fraction of the camp price. However, who has
                    the willpower to actually sit through a self-imposed MCSE
                    training.
                  </p>
                  <p>
                    MCSE boot camps have its supporters and its detractors. Some
                    people do not understand why you should have to spend money
                    on boot camp when you can get the MCSE study materials
                    yourself at a fraction of the camp price. However, who has
                    the willpower to actually sit through a self-imposed MCSE
                    training. who has the willpower to actually sit through a
                    self-imposed MCSE training.
                  </p>
                </div>
                <div class="bottom-wrapper">
                  <div class="row">
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      <i class="fa fa-heart-o" aria-hidden="true"></i>
                      lily and 4 people like this
                    </div>
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      <i class="fa fa-comment-o" aria-hidden="true"></i> 06
                      comments
                    </div>
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      <ul class="social-icons">
                        <li>
                          <a href="#"
                            ><i class="fa fa-facebook" aria-hidden="true"></i
                          ></a>
                        </li>
                        <li>
                          <a href="#"
                            ><i class="fa fa-twitter" aria-hidden="true"></i
                          ></a>
                        </li>
                        <li>
                          <a href="#"
                            ><i class="fa fa-dribbble" aria-hidden="true"></i
                          ></a>
                        </li>
                        <li>
                          <a href="#"
                            ><i class="fa fa-behance" aria-hidden="true"></i
                          ></a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <!-- Start nav Area -->
                <section class="nav-area pt-50 pb-100">
                  <div class="container">
                    <div class="row justify-content-between">
                      <div
                        class="col-sm-6 nav-left justify-content-start d-flex"
                      >
                        <div class="thumb">
                          <img src="{% static 'img/prev.jpg' %}" alt="" />
                        </div>
                        <div class="details">
                          <p>Prev Post</p>
                          <h4 class="text-uppercase">
                            <a href="#">A Discount Toner</a>
                          </h4>
                        </div>
                      </div>
                      <div
                        class="col-sm-6 nav-right justify-content-end d-flex"
                      >
                        <div class="details">
                          <p>Prev Post</p>
                          <h4 class="text-uppercase">
                            <a href="#">A Discount Toner</a>
                          </h4>
                        </div>
                        <div class="thumb">
                          <img src="{% static 'img/next.jpg' %}" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <!-- End nav Area -->

                <!-- Start comment-sec Area -->
                <section class="comment-sec-area pt-80 pb-80">
                  <div class="container">
                    <div class="row flex-column">
                      <h5 class="text-uppercase pb-80">05 Comments</h5>
                      <br />
                      <div class="comment-list">
                        <div
                          class="single-comment justify-content-between d-flex"
                        >
                          <div class="user justify-content-between d-flex">
                            <div class="thumb">
                              <img
                                src="{% static 'img/asset/c1.jpg' %}"
                                alt=""
                              />
                            </div>
                            <div class="desc">
                              <h5><a href="#">Emilly Blunt</a></h5>
                              <p class="date">December 4, 2017 at 3:12 pm</p>
                              <p class="comment">
                                Never say goodbye till the end comes!
                              </p>
                            </div>
                          </div>
                          <div class="reply-btn">
                            <a href="" class="btn-reply text-uppercase"
                              >reply</a
                            >
                          </div>
                        </div>
                      </div>
                      <div class="comment-list left-padding">
                        <div
                          class="single-comment justify-content-between d-flex"
                        >
                          <div class="user justify-content-between d-flex">
                            <div class="thumb">
                              <img
                                src="{% static 'img/asset/c2.jpg' %}"
                                alt=""
                              />
                            </div>
                            <div class="desc">
                              <h5><a href="#">Emilly Blunt</a></h5>
                              <p class="date">December 4, 2017 at 3:12 pm</p>
                              <p class="comment">
                                Never say goodbye till the end comes!
                              </p>
                            </div>
                          </div>
                          <div class="reply-btn">
                            <a href="" class="btn-reply text-uppercase"
                              >reply</a
                            >
                          </div>
                        </div>
                      </div>
                      <div class="comment-list left-padding">
                        <div
                          class="single-comment justify-content-between d-flex"
                        >
                          <div class="user justify-content-between d-flex">
                            <div class="thumb">
                              <img
                                src="{% static 'img/asset/c3.jpg' %}"
                                alt=""
                              />
                            </div>
                            <div class="desc">
                              <h5><a href="#">Emilly Blunt</a></h5>
                              <p class="date">December 4, 2017 at 3:12 pm</p>
                              <p class="comment">
                                Never say goodbye till the end comes!
                              </p>
                            </div>
                          </div>
                          <div class="reply-btn">
                            <a href="" class="btn-reply text-uppercase"
                              >reply</a
                            >
                          </div>
                        </div>
                      </div>
                      <div class="comment-list">
                        <div
                          class="single-comment justify-content-between d-flex"
                        >
                          <div class="user justify-content-between d-flex">
                            <div class="thumb">
                              <img
                                src="{% static 'img/asset/c4.jpg' %}"
                                alt=""
                              />
                            </div>
                            <div class="desc">
                              <h5><a href="#">Emilly Blunt</a></h5>
                              <p class="date">December 4, 2017 at 3:12 pm</p>
                              <p class="comment">
                                Never say goodbye till the end comes!
                              </p>
                            </div>
                          </div>
                          <div class="reply-btn">
                            <a href="" class="btn-reply text-uppercase"
                              >reply</a
                            >
                          </div>
                        </div>
                      </div>
                      <div class="comment-list">
                        <div
                          class="single-comment justify-content-between d-flex"
                        >
                          <div class="user justify-content-between d-flex">
                            <div class="thumb">
                              <img
                                src="{% static 'img/asset/c5.jpg' %}"
                                alt=""
                              />
                            </div>
                            <div class="desc">
                              <h5><a href="#">Emilly Blunt</a></h5>
                              <p class="date">December 4, 2017 at 3:12 pm</p>
                              <p class="comment">
                                Never say goodbye till the end comes!
                              </p>
                            </div>
                          </div>
                          <div class="reply-btn">
                            <a href="" class="btn-reply text-uppercase"
                              >reply</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <!-- End comment-sec Area -->

                <!-- Start commentform Area -->
                <section class="commentform-area pb-120 pt-80 mb-100">
                  <div class="container">
                    <h5 class="text-uppercas pb-50">Leave a Reply</h5>
                    <div class="row flex-row d-flex">
                      <div class="col-lg-6">
                        <input
                          name="name"
                          placeholder="Enter your name"
                          onfocus="this.placeholder = ''"
                          onblur="this.placeholder = 'Enter your name'"
                          class="common-input mb-20 form-control"
                          required=""
                          type="text"
                        />
                        <input
                          name="email"
                          placeholder="Enter your email"
                          onfocus="this.placeholder = ''"
                          onblur="this.placeholder = 'Enter your email'"
                          class="common-input mb-20 form-control"
                          required=""
                          type="email"
                        />
                        <input
                          name="Subject"
                          placeholder="Subject"
                          onfocus="this.placeholder = ''"
                          onblur="this.placeholder = 'Enter your Subject'"
                          class="common-input mb-20 form-control"
                          required=""
                          type="text"
                        />
                      </div>
                      <div class="col-lg-6">
                        <textarea
                          class="form-control mb-10"
                          name="message"
                          placeholder="Messege"
                          onfocus="this.placeholder = ''"
                          onblur="this.placeholder = 'Messege'"
                          required=""
                        ></textarea>
                        <a class="primary-btn mt-20" href="#">Comment</a>
                      </div>
                    </div>
                  </div>
                </section>
                <!-- End commentform Area -->
              </div>
            </div>
            <div class="col-lg-4 sidebar-area">
              <div class="single_widget search_widget">
                <div id="imaginary_container">
                  <div class="input-group stylish-input-group">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="Search"
                    />
                    <span class="input-group-addon">
                      <button type="submit">
                        <span class="lnr lnr-magnifier"></span>
                      </button>
                    </span>
                  </div>
                </div>
              </div>

              <div class="single_widget about_widget">
                <img src="{% static 'img/asset/s-img.jpg' %}" alt="" />
                <h2 class="text-uppercase">Adele Gonzalez</h2>
                <p>
                  MCSE boot camps have its supporters and its detractors. Some
                  people do not understand why you should have to spend money
                </p>
                <div class="social-link">
                  <a href="#"
                    ><button class="btn">
                      <i class="fa fa-facebook" aria-hidden="true"></i> Like
                    </button></a
                  >
                  <a href="#"
                    ><button class="btn">
                      <i class="fa fa-twitter" aria-hidden="true"></i> follow
                    </button></a
                  >
                </div>
              </div>
              <div class="single_widget cat_widget">
                <h4 class="text-uppercase pb-20">post categories</h4>
                <ul>
                  <li>
                    <a href="#">Technology <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Lifestyle <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Fashion <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Art <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Food <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Architecture <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Adventure <span>37</span></a>
                  </li>
                </ul>
              </div>

              <div class="single_widget recent_widget">
                <h4 class="text-uppercase pb-20">Recent Posts</h4>
                <div class="active-recent-carusel">
                  <div class="item">
                    <img src="{% static 'img/asset/slider.jpg' %}" alt="" />
                    <p class="mt-20 title text-uppercase">
                      Home Audio Recording <br />
                      For Everyone
                    </p>
                    <p>
                      02 Hours ago
                      <span>
                        <i class="fa fa-heart-o" aria-hidden="true"></i> 06
                        <i class="fa fa-comment-o" aria-hidden="true"></i
                        >02</span
                      >
                    </p>
                  </div>
                  <div class="item">
                    <img src="{% static 'img/asset/slider.jpg' %}" alt="" />
                    <p class="mt-20 title text-uppercase">
                      Home Audio Recording <br />
                      For Everyone
                    </p>
                    <p>
                      02 Hours ago
                      <span>
                        <i class="fa fa-heart-o" aria-hidden="true"></i> 06
                        <i class="fa fa-comment-o" aria-hidden="true"></i
                        >02</span
                      >
                    </p>
                  </div>
                  <div class="item">
                    <img src="{% static 'img/asset/slider.jpg' %}" alt="" />
                    <p class="mt-20 title text-uppercase">
                      Home Audio Recording <br />
                      For Everyone
                    </p>
                    <p>
                      02 Hours ago
                      <span>
                        <i class="fa fa-heart-o" aria-hidden="true"></i> 06
                        <i class="fa fa-comment-o" aria-hidden="true"></i
                        >02</span
                      >
                    </p>
                  </div>
                </div>
              </div>

              <div class="single_widget cat_widget">
                <h4 class="text-uppercase pb-20">post archive</h4>
                <ul>
                  <li>
                    <a href="#">Dec'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Nov'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Oct'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Sept'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Aug'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Jul'17 <span>37</span></a>
                  </li>
                  <li>
                    <a href="#">Jun'17 <span>37</span></a>
                  </li>
                </ul>
              </div>
              <div class="single_widget tag_widget">
                <h4 class="text-uppercase pb-20">Tag Clouds</h4>
                <ul>
                  <li><a href="#">Lifestyle</a></li>
                  <li><a href="#">Art</a></li>
                  <li><a href="#">Adventure</a></li>
                  <li><a href="#">Food</a></li>
                  <li><a href="#">Technology</a></li>
                  <li><a href="#">Fashion</a></li>
                  <li><a href="#">Adventure</a></li>
                  <li><a href="#">Food</a></li>
                  <li><a href="#">Technology</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End post Area -->
    </div>
    <!-- End post Area -->

    <!-- start footer Area -->
    <footer class="footer-area section-gap">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-12">
            <div class="single-footer-widget">
              <h6>Top Products</h6>
              <ul class="footer-nav">
                <li><a href="#">Managed Website</a></li>
                <li><a href="#">Manage Reputation</a></li>
                <li><a href="#">Power Tools</a></li>
                <li><a href="#">Marketing Service</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6 col-md-12">
            <div class="single-footer-widget newsletter">
              <h6>Newsletter</h6>
              <p>
                You can trust us. we only send promo offers, not a single spam.
              </p>
              <div id="mc_embed_signup">
                <form
                  target="_blank"
                  novalidate="true"
                  action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
                  method="get"
                  class="form-inline"
                >
                  <div class="form-group row" style="width: 100%;">
                    <div class="col-lg-8 col-md-12">
                      <input
                        name="EMAIL"
                        placeholder="Enter Email"
                        onfocus="this.placeholder = ''"
                        onblur="this.placeholder = 'Enter Email '"
                        required=""
                        type="email"
                      />
                      <div style="position: absolute; left: -5000px;">
                        <input
                          name="b_36c4fd991d266f23781ded980_aefe40901a"
                          tabindex="-1"
                          value=""
                          type="text"
                        />
                      </div>
                    </div>

                    <div class="col-lg-4 col-md-12">
                      <button class="nw-btn primary-btn">
                        Subscribe<span class="lnr lnr-arrow-right"></span>
                      </button>
                    </div>
                  </div>
                  <div class="info"></div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-12">
            <div class="single-footer-widget mail-chimp">
              <h6 class="mb-20">Instragram Feed</h6>
              <ul class="instafeed d-flex flex-wrap">
                <li><img src="{% static 'img/i1.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i2.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i3.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i4.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i5.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i6.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i7.jpg' %}" alt="" /></li>
                <li><img src="{% static 'img/i8.jpg' %}" alt="" /></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="row footer-bottom d-flex justify-content-between">
          <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
          <p class="col-lg-8 col-sm-12 footer-text">
            Copyright &copy;
            <script>
              document.write(new Date().getFullYear());
            </script>
            All rights reserved | This template is made with
            <i class="fa fa-heart-o" aria-hidden="true"></i> by
            <a href="https://colorlib.com" target="_blank">Colorlib</a>
          </p>
          <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
          <div class="col-lg-4 col-sm-12 footer-social">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-dribbble"></i></a>
            <a href="#"><i class="fa fa-behance"></i></a>
          </div>
        </div>
      </div>
    </footer>
    <!-- End footer Area -->

    <script src="{% static 'js/vendor/jquery-2.2.4.min.js' %}"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
      integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
      crossorigin="anonymous"
    ></script>
    <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.ajaxchimp.min.js' %}"></script>
    <script src="{% static 'js/parallax.min.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'js/jquery.sticky.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
  </body>
</html>
  • Pillow 설치
pip install Pillow
  • blog > models.py
from django.db import models
from django.urls import reverse

# Create your models here.
# 글의 분류(일상, 유머, 정보)


class Category(models.Model):
    # 분류 : 최대길이 50자
    name = models.CharField(max_length=50, help_text="분류를 입력하세요.")

    def __str__(self):
        return self.name

# 블로그 글(제목, 작성일, 대표이미지, 내용, 분류)


class Post(models.Model):
    # 글 제목 : 최대길이 200자
    title = models.CharField(max_length=200)
    # 대표 이미지 : 비어있어도 됨
    title_image = models.ImageField(blank=True)
    # 글 내용 : 내용의 글자수는 정해지지 않으므로 TextField
    content = models.TextField()
    # 작성일 : 사용자가 입력하지 않고 현재 날짜를 받아옴
    createDate = models.DateTimeField(auto_now_add=True)
    # 수정일 : 사용자가 입력하지 않고 현재 날짜를 받아옴
    updateDate = models.DateTimeField(auto_now_add=True)
    # 분류 : 다대다 관계정의
    category = models.ManyToManyField(category, help_text='분류를 입력하세요.')

    def __str__(self):
        return self.title

    # 1번 글의 경우 -> single/1

    def get_absolute_url(self):
        return reverse('single'. args=[str(self.id)])
  • anjia > settings.py
# ImageField 사용
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  • anjia > urls.py
"""anjia URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import include
from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    # 주소창에 blog를 입력시 blog.urls가 처리
    path('blog/', include('blog.urls')),
    # 기본주소로 처리시 blog로 넘겨준다.
    path('', RedirectView.as_view(url='/blog/', permanent=True)),
]

urlpatterns += static(settings.STATIC_URL,
                      document_root=settings.STATIC_ROOT)  # 정적 파일 처리
urlpatterns += static(settings.MEDIA_URL,
                      document_root=settings.MEDIA_ROOT)   # ImageField 처리

3.5 lee windRider

3.5.1 설명

스마트팜

  • 온도,습도센서에서 데이타를 받아 환기및 물주기를 하고 작물별 생육과정을 기록할수 있게 한다..
  • 스마트폰에서 원격으로 물주기및 환기를 할 수 있도록 한다.

3.5.2 GitHub

https://github.com/kbntt/smartfarm.git


3.6 HJW

3.6.1 설명

첫번째 프로그램은 계산기 프로그램을 디자인해서 만드는것이고 두번째는 게임프로그램을 디자인해서 만들어보고 싶습니다.

3.6.2 GitHub

https://github.com/python


3.7 박성민

3.7.1 설명

스도쿠 인공지능을 만들고 싶습니다

3.7.2 GitHub

https://github.com/python


3.8 대박이아빠

3.8.1 설명

시간대별로 뉴스 검색해서 단체 카카오톡방에 전송하는 기능을 만들고 싶습니다.

3.8.2 GitHub

https://github.com/python


3.9 송윤희

3.9.1 설명

30분 간격으로 기록하는 다이어리 만들기

3.9.2 GitHub

https://github.com/python


3.10 Wonsik lee

3.10.1 설명

크롤링 또는 API 회사 업무와 연계된 자동화

3.10.2 GitHub

https://github.com/python


3.11 Goodmorn

3.11.1 설명

웹 스크래퍼 만들기

3.11.2 GitHub

https://github.com/python

3.12 ktkalpha

3.12.1 설명

1. 게임 만들기, 2. gui가 있는 게임 만들기.

3.12.2 코드

import turtle as t
t.write('hello python')

3.12.3 Github

https://github.com/ktkalpha

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}