This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

④Django　デザイン設定

Last updated at 2020-04-05Posted at 2020-03-28

#はじめに
本記事は、Djnagoのデザイン設定を行った際の備忘録として書いたものである。

#前提条件

OS環境は、Virtualboxで稼働中のCentOS8.1です。以下、OS詳細情報となります。

# cat /etc/centos-release
CentOS Linux release 8.1.1911 (Core)

Virtualboxのネットワーク設定は、「NAT」「ホストオンリーアダプター」で構成。
Django環境が構築済みであること。
※Django環境の構築は、以下を参照してください。
①Django　環境構築
 ②Django　環境設定&管理者サイト表示
 ③Django　アプリケーション設定

#テンプレート用のWEBページを作成

前回の記事では、1ファイルで全てのHTMLを定義していたが、今回はそれをそれぞれ使いまわしができるようにテンプレート設定を行います。
各ページ(赤く塗りつぶしたところ)以外をテンプレート用のHTMLとし、それ以外の部分は共通テンプレートを呼び出すだけでOKになる。

▼base.htmlを作成(共通テンプレートの部分)

templates/base.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <!-- iCheck -->
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <!-- summernote -->
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <ul class="navbar-nav">
          <li>
            <a class="nav-link">ユーザ名：</a>
          </li>
          <li>
            <a class="nav-link" href="">
              <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="" class="brand-link">
      <span class="brand-text font-weight-light">Qiita Demo Site</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v1</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v2</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v3</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  {% block content %}
  {% endblock %}
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 3.0.2
    </div>
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- ChartJS -->
<script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>
<!-- Sparkline -->
<script src="{% static 'plugins/sparklines/sparkline.js' %}"></script>
<!-- JQVMap -->
<script src="{% static 'plugins/jqvmap/jquery.vmap.min.js' %}"></script>
<script src="{% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %}"></script>
<!-- jQuery Knob Chart -->
<script src="{% static 'plugins/jquery-knob/jquery.knob.min.js' %}"></script>
<!-- daterangepicker -->
<script src="{% static 'plugins/moment/moment.min.js' %}"></script>
<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js' %}"></script>
<!-- Summernote -->
<script src="{% static 'plugins/summernote/summernote-bs4.min.js' %}"></script>
<!-- overlayScrollbars -->
<script src="{% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.js' %}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{% static 'dist/js/pages/dashboard.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
</body>
</html>

▼index.htmlを作成(トップページ)

templates/app/index.html

{% extends '../base.html' %}
{% block content %}

<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">Top Page</h1>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-info">
          <div class="inner">
            <h3>150</h3>

            <p>New Orders</p>
          </div>
          <div class="icon">
            <i class="ion ion-bag"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-success">
          <div class="inner">
            <h3>53<sup style="font-size: 20px">%</sup></h3>

            <p>Bounce Rate</p>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h3>44</h3>

            <p>User Registrations</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h3>65</h3>

            <p>Unique Visitors</p>
          </div>
          <div class="icon">
            <i class="ion ion-pie-graph"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row (main row) -->
  </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
{% endblock %}

▼views.pyを修正

app/views.py


def index(request):
    return render(request, 'app/test.html')
↓
def index(request):
    return render(request, 'app/index.html')

▼動作確認

#  python manage.py runserver 192.168.56.201:8000

以下のURLにアクセスし、test.htmlの時と同一の画面が表示されればOK
http://192.168.56.201:8000/

正常に動作していればOK。
次項に続く（　＾ω＾）・・・
⑤Django　ログイン機能の実装

#以下、補足

#AdminLTEのローカルでの検証めも

AdminLTEでは、「Google Font」と「ionicons」を使用しており、これらはネットワークを介して、データの取得をおこないます。
そのため、ネットワーク環境があることが前提となっており、ネットワークがないところでの検証が難しいのが難点として挙げられます。
なので、それらのデータをローカルに格納し、検証が行えるようにする備忘録です。

##(1)base.html編集

templates/base.html


  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
↓
  <!-- Ionicons -->
  <link rel="stylesheet" href="{% static 'fonts/ionicons.min.css' %}">
  <!-- Google Font: Source Sans Pro -->
  <link href="{% static 'googlefont/googlefont.css' %}" rel="stylesheet">

※外部からのデータ取得から、ローカルからのデータ取得に切り替える。

##(2)Google Font　ローカルにデータを格納

▼Googlefont格納ディレクトリを作成

# mkdir static/googlefont

▼Googlefontの定義ファイル？をダウンロード

# wget -P static/googlefont https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700

▼Googlefontの定義ファイル？をリネーム

# mv static/googlefont/css?family=Source+Sans+Pro:300,400,400i,700  static/googlefont/googlefont.css

▼以下のURLにアクセスし、Googlefontのデータをダウンロードをおこなう(矢印でさしてるところ)
https://fonts.google.com/specimen/Source+Sans+Pro?selection.family=Source+Sans+Pro:300,400,400i,700

以下、キャプチャ参照

▼Googlefontを「static/googlefont」以下に全て格納する。

▼Googlefontの定義ファイル？を修正

static/googlefont/googlefont.css

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../googlefont/SourceSansPro-Italic.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../googlefont/SourceSansPro-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../googlefont/SourceSansPro-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../googlefont/SourceSansPro-Bold.ttf) format('truetype');
}

※上記のように、urlの部分をローカルファイル指定にすればOK！！
これで、Googlefontの環境設定は完了

##(3)ionicons　ローカルにデータを格納

▼ionicons格納ディレクトリを作成

# mkdir static/fonts

▼ioniconsの定義ファイルを？をダウンロード

# wget -P static/fonts https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

▼ioniconsのデータをダウンロード

# wget -P /tmp https://github.com/driftyco/ionicons/archive/v2.0.1.zip

▼圧縮ファイルを解凍

# unzip -d /tmp /tmp/v2.0.1.zip

▼ioniconsのデータをコピー

# cp /tmp/ionicons-2.0.1/fonts/* static/fonts

これで、ioniconsの設定も完了

##(4)動作確認

#  python manage.py runserver 192.168.56.201:8000

以下のURLにアクセスし、正常に動作すればOK
http://192.168.56.201:8000/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

④Django デザイン設定

④Django　デザイン設定