Python+Django에서 외부 CSS, JS 사용

7701 단어 Django2.0python3.6
외부 파일의 샘플은 Django의 Template에서 사용됩니다.참조할 만큼 고생했으니까 적어두세요.
"useexternal"응용 프로그램
1. 환경
  • windows10 home 64bit
  • Python 3.6.5
  • Django==2.0.4
    • • 샘플 애플리케이션 제작
    명령 프롬프트에서 activate 가상 환경에서 응용 프로그램을 만듭니다.
    c:\data\python\venv>Scripts\activate
(venv) c:\data\python\mysite>django-admin startapp useexternal
    실행 후 다음과 같은 파일로 구성됩니다.
    C:\DATA\PYTHON\MYSITE
│  db.sqlite3
│  manage.py
├─mysite
│  │  settings.py
│  │  urls.py
├─static
│  ├─css
│  │      bootstrap.min.css
│  ├─js
│  │      jquery-3.3.1.min.js
├─templates
│  └─useexternal
│          index.html
└─useexternal
    │  urls.py
    │  views.py
    ※ 편집할 서류만 기재되어 있습니다.
    2.mysite/settings.py
    settings.py
    ・・・
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'useexternal',
]
・・・
TEMPLATES = [
    {
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
            ],
        },
    },
]
・・・

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"),
    ]
)
    Point
    - INSTALLED_APPS에서 만든 응용 프로그램 이름 "useexternal"추가
    - TEAMPLATES DIRS는 "os.path.join(BASE DIR,"templates")"
    - STATICFILES_DIRS는 "os.path.join(BASE DIR,"static")"
    3.mysite/urls.py
    urls.py
    from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^useexternal/', include('useexternal.urls')),
    url(r'^admin/', admin.site.urls),
]
    Point
    urlpatterns에 "url(r'^useexternal/', include('useexternal.urls')를 추가합니다."
    4.useexternal/urls.py
    urls.파일을 만들면py는 다음과 같이 편집합니다
    urls.py
    from django.conf.urls import url
from . import views
urlpatterns = [
    url('', views.index, name='useexternal'),
]
    5.useexternal/views.py
    from django.shortcuts import render
def index(request):
    return render(request, 'useexternal/index.html')
    6.templates/useexternal/index.html
    Template)은templates/"appname"아래에서 제작되었습니다.
    index.html
    {% load static %}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>外部css,jsを使用する</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>
    Point
    더하기 - {%load static%}
    -css의 외부 파일 이름은 <link href="{% static '<cssファイル名>' %}" rel="stylesheet">
    입니다.
  • js의 외부 파일 이름은 <script type="text/javascript" src="{% static '<jsファイル名>' %}"></script>
    • 7.css, js 구성
    static 폴더 아래 css, js 만들기
    ├─static
    │ ├─css
    │ │ bootstrap.min.css
    │ ├─js
    │ │ jquery-3.3.1.min.js
    8. 확인 실행

    문제 없을 것 같습니다.
    Genetic Programing은 미리 처리해야 합니까?
    인형 배우에서 극작가로의 전환

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage