anaconda × django

# anaconda

```shell
# 開発環境立ち上げ
$ conda activate

# 開発環境閉じる
$ conda deactivate
```

# django
## 導入

```bash
# ディレクトリ作成
$ mkdir {ディレクトリ名} && cd $_

# プロジェクト作成
$ django-admin startproject {プロジェクト名} . # config

# アプリケーション作成
$ python manage.py startapp {アプリ名} # mysite

# url設定用ファイル作成
$ touch mysite/urls.py

# テンプレートディレクトリ・ファイル作成
$ mkdir -p mysite/templates/components/{atoms,molecules,organisms}
$ mkdir -p mysite/templates/{layouts,pages}
$ touch mysite/templates/{layouts/index.html,pages/index.html}

# static用ディレクトリ作成
$ mkdir -p mysite/static/css/{common,atoms,molecules,organisms}
$ mkdir -p mysite/static/javascript/{common,atoms,molecules,organisms}
$ mkdir -p mysite/static/images/{common,pages}
$ touch mysite/static/{css/common.css,javascript/common.js}

# 何らかの初期化
$ python manage.py migrate

# 開発サーバーを動かす
$ python manage.py runserver
```

## 設定

```python
# config/settings.py

~

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_DIR = os.path.join(BASE_DIR, "static") # 追記

~

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
		'mysite', # 追記
]

~

LANGUAGE_CODE = 'en-us' # → 'ja'

TIME_ZONE = 'UTC' # → 'Asia/Tokyo'

~

STATIC_URL = '/static/'
STATICFILES_DIRS = [ # 追記
    STATIC_DIR, # 追記
] # 追記
```

```python
# config/urls.py

from django.contrib import admin
from django.urls import path, include # 追記
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('mysite.urls')) # 追記
]
```

```python
# mysite/urls.py

from django.conf.urls import url
from . import views
 
app_name='mysite'
 
urlpatterns = [
    url(r'^$', views.index, name='index'),
]
```

```python
# mysite/views.py

from django.shortcuts import render

def index(request): # 追記
    return render(request, 'pages/index.html') # 追記
```

## 静的ファイル準備

```python
# mysite/templates/layouts/index.html

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <title>僕らの日記</title>
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <script src="{% static 'javascript/common.js' %}"></script>
  </head>
  <body>
		{% block header %}{% endblock %}

		{% block main %}
	    <h1>僕らの日記</h1>
      <img src="{% static 'images/common/dammy.jpg' %}" alt="">
	    <h2>僕らの日記を公開するホームページです。</h2>
	
	    <p>今日はおにぎりを食べました</p>
	    <p>トイレで食べました</p>
	    <p>泣きながら食べました</p>
	    <p>さっきキスをしたベンキーを見ながら</p>
      <a href="{% url 'mysite:index' %}">ようこそ</a>
		{% endblock %}

		{% block footer %}{% endblock %}
  </body>
</html>
```

```python
# mysite/templates/pages/index.html

{% extends 'layouts/index.html' %}
```

```python
# mysite/static/css/common.css

body {
	text-align: center;
}
```

```python
# mysite/static/javascript/common.js

console.log('loaded common.js')
```

```python
# mysite/static/images/common/dammy.jpg

# 適当な画像を用意
```

## コンポーネント

```python
# ディレクトリ作成
$ mkdir -p mysite/templatetags

# ファイル作成
$ touch mysite/templatetags/{__init__.py,components.py}
```

```python
# mysite/templatetags/components.py
from django.template import Library

register = Library()

@register.inclusion_tag('components/organisms/footer/index.html')
def footer(class_name='is-black', text='©︎copyright oblivion 2020'):
    return {
        'class_name': str(class_name),
        'text': str(text)
    }
```

```python
# mysite/templates/layouts/index.html
<!DOCTYPE html>
{% load static %}
{% load components %}

~

{% block footer %}
  {% footer text='text' class_name='is-class' %}
{% endblock %}
```

```python
# mysite/templates/components/organisms/footer/index.html

<footer class="{{ class_name }}">{{ text }}</footer>
```

## stylus+js

```python
# プラグインのインストール

$ pip install django-compressor

$ npm install -g stylus
```

```python
# mysite/templates/layouts/index.html

~

{% compress css %}
	<link rel="stylesheet" type="text/stylus" href="{% static 'css/common.styl' %}" />
{% endcompress %}
{% compress js %}
  <script type="text/javascript" src="{% static 'javascript/common.js' %}"></script>
{% endcompress %}

~
```

```python
# config/settings.py

STATIC_ROOT = STATIC_DIR
# STATICFILES_DIRS = [
#     STATIC_DIR,
# ]

COMPRESS_ROOT = STATIC_DIR
COMPRESS_PRECOMPILERS = [
    ('text/stylus', 'stylus < {infile} > {outfile}'),
]
```

## 新規ページ追加

```python
# mysite/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def welcome(request): # 追記
	return render(request, 'welcome/index.html') # 追記
```

```python
# mysite/urls.py

from django.conf.urls import url
from . import views
 
app_name='mysite'
 
urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^welcome/$', views.welcome, name='welcome'), # 追記
]
```

## テンプレート記法

```python
# data送信
def index(request):
    data = {
	    'text': 'Django'
    }
    return render(request, 'index.html', data)

{{ text }}

# コメントアウト
{# greeting #}

# 条件式
{% if is_weekday %}
	<p>Today is weekday.</p>
{% else %}
	<p>Today is holiday.</p>
{% endif %}

{% ifequal athlete.name coach.name %}
  ...
{% endifequal %}

{% ifnotequal athlete.name "Joe" %}
  ...
{% endifequal %}

# 繰り返し
{% for athlete in athlete_list %}
  <p>{{ athlete.name }}</p>
{% endfor %}

# filter
# app変数に対しカウントするfilterをかけて出力
{{ app|length }} 
# https://djangoproject.jp/doc/ja/1.0/ref/templates/builtins.html#ref-templates-builtins-filters

# 継承
# base.html
<html>
	<head>
		<title>template test</title>
	</head>
	<body>
		{% block body %}
		{% endblock %}
	</body>
</html>

# index.html
<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <title>僕らの日記</title>
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <script src="{% static 'javascript/common.js' %}"></script>
  </head>
  <body>
		{% block header %}{% endblock %}

		{% block main %}
	    <h1>僕らの日記</h1>
      <img src="{% static 'images/dammy.jpg' %}" alt="">
	    <h2>僕らの日記を公開するホームページです。</h2>
	
	    <p>今日はおにぎりを食べました</p>
	    <p>トイレで食べました</p>
	    <p>泣きながら食べました</p>
	    <p>さっきキスをしたベンキーを見ながら</p>
      <a href="{% url 'myapp:welcome' %}">ようこそ</a>
		{% endblock %}

		{% block footer %}{% endblock %}
  </body>
</html>
 
{% block body %}
	<p>This is {{ app }} test.</p>
	{% if is_weekday %}
		<p>Today is weekday.</p>
	{% else %}
		<p>Today is holiday.</p>
	{% endif %}
{% endblock %}

# 取り込み
{% include 'common/header.html' with variable='value' %}

# エスケープ
# 単体エスケープ解除
{{ data|safe }}
# ブロックエスケープ解除
{% autoescape off %}
  こんにちは {{ name }} さん
{% endautoescape %}

# 初期値の設定
{{ data|default:"文字列リテラルだよ" }}
```

## 参照

```bash
# django

https://www.python.jp/install/anaconda/macos/install.html
https://qiita.com/ha_se/items/bb1ba4af6608d69eeb61
```