LoginSignup
6
6

More than 3 years have passed since last update.

Djangoでbase.htmlを用いたブログを作成する。

Last updated at Posted at 2019-05-17

こんにちは!
今回は、Djangoブログをテンプレートを用いて作成したいと思います。

使用環境は以下となります。
python==3.6, django==2.2, OS==windows10

初めに仮想環境を作成し、設定してDjangoをインストールします。

command
python -m venv venv
venv\Scripts\activate
pip install django

その後、プロジェクトを作成します。(今回はproject1にします。)

command
python -m django startproject project1

ここで軽くファイルの紹介をします。

project1
manage.py 開発用サーバーの起動やデータベースへのデータの反映に用います
db.sqlite3 データの保存先ですデータベースと考えてください
__pycahe .pyをコンパイルした.pycの保存先ですdjangoでは軽量化のために.pyを.pycにします
__init__.py パッケージを読んだ際の初期化用のファイル
wsgi.py djangoを実際のサーバーにデプロイする際に必要なファイル
urls.py URLに対応した処理を実行するファイル
setting.py django全体の設定をするファイル

次にdjangoの設定を日本語にします。

setting.py
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

次にアプリケーションを追加します。ここではnewappとします。

command
python manage.py startapp newapp

newapp内のファイルも紹介します。

newapp
migrations データベース関連のフォルダーですが基本的に触ることはありません
admin.py 管理画面の設定ファイル
apps.py アプリケーションの詳細ですが基本的に触ることはありません
models.py データベースの設定や追加を行うファイルです
tests.py djangoアプリケーションのテストを書くファイルです
views.py urls.pyから呼び出される処理を書きます

次に作成したアプリケーションをsetting.pyに登録します。

setting.py
INSTALLED_APPS = [
    'newapp.apps.NewappConfig', 追記
...
]

次にproject1内のurls.pyを編集します

```python:urls.py
from django.contrib import admin
from django.urls import path, include #includeはURLの対応を整理するのに便利です。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('newapp', include('myapp.urls'))
]

次にnewapp内にurls.pyを作成します。

newapp/urls.py
from django.urls import path
from .import views

app_name = 'newapp'

urlpatterns = [
    path('', views.index, name='index'), #viewsのindex関数を利用する。
    path('about/', views.about, name='about'),
]

次にviews.pyを編集します。

views.py
from django.shortcuts import render

def index(request):
    context = {
        'name':'newappuser' #nameをindex.htmlへ送る
    }
    #return render(request, 'newapp/index.html') #コメントありがとうございます。
    return render(request, 'newapp/index.html',context)

def about(request):
    return render(request, 'newapp/about.html')

templates内にbase.htmlを作成します。
base.htmlの存在理由は共通設定を繰り返し利用と修正をしやすくするためです。

templates/newapp/base.html
<!doctype html>
<html lang="ja">
  <head>
    <title>newapp</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    {% block content %}
    {% endblock %}

    <!-- 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

次にindex.htmlを作成します。

templates/newapp/index.html
{% extends 'myapp/base.html' %}

{% block content %}
<h1>Hello, {{ name }}</h1>
{% endblock %}

次にabout.htmlを作成します。

templates.newapp/about.html
{% extends 'newapp/base.html' %}

{% block content %}
<h1>Aboutページです</h1>
{% endblock %}

最後にサーバーを立ち上げれば完成です。

command
python manage.py runserver

image.png

6
6
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6