ランゲージページの作成

このチュートリアルでは、音楽のリリース通知アプリケーションのランディングページを作成しますDjango . 開始するには、我々はdjangoプロジェクトを作成する必要があります.

プロジェクトの作成
Djangoがインストールされていると仮定しますが、そうでない場合はofficial installation guide .
プロジェクトを作成するには、次のコマンドを端末に実行します

django-admin startproject mun

プロジェクトが作成された後、cd コマンド

cd /mun

そして、サーバを起動するのは

python manage.py runserver

アフター訪問127.0.0.1:8000 あなたはすべてが素晴らしい画面を見る必要があります.

それはあなたの着陸ページではない.

どこから始めますか.
着陸ページを追加するには、あなたのアプリケーションに結合されていないもの(それは他のアプリケーションで使用することができます認証など)から抽出することができます物事のためのジャンゴコンセプトである“アプリ”を作成する必要があります.
しかし、あまりにも多くのことを取得しないだけの“着陸”のような静的なページが含まれている“ページ”と呼ばれるシンプルなアプリを作成し、“お問い合わせ”と“について”.

python manage.py startapp pages

アプリが準備ができたら、我々はそれを追加する必要がありますINSTALLED_APPS . 我々はちょうどそれらのいくつかを必要としているので、我々のアプリを他のものの最後に追加します.

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

新しく作成されたpages アプリは新しいpages Pythonファイルのカップルとフォルダ.私たちに興味を持っている特定のものはpages/urls.py and pages/views.py .

URL
要求がサーバーに来るとき、djangoは「View」を見つけなければなりません.Djangoがどのようにリクエストとビューで来たURLを接続する方法を見つける方法urlpatterns プロジェクトのメインディレクトリにあります.私の場合はmun/urls.py .
我々の着陸ページを示すために127.0.0.1:8000 そして、本質的に我々の主な領域で、我々は以下のコードを加える必要がありますpages/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

経路はURLのドメインの後に来るものです.例えば、URLhttps://www.google.com/search?q=mun パスは/search?q=mun . 我々の着陸ページがそうであるので/ path最初のパラメータpath 方法は'' . 番目の引数は、我々が何を表示する必要があるビューですindex 私たちのケースで表示します.
また、追加する必要がありますurlpatterns 我々のアプリからメインプロジェクトのurlpatterns 組み込み関数でinclude

from django.contrib import admin
from django.urls import include, path

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

眺め
あなたが思い出すならばindex ビューがまだ作成されていないので、先に行き、それを作成しましょうpages/views.py

from django.shortcuts import render

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

我々index アクションは単に'pages/index.html' 再度作成されたテンプレートです.それで、それをつくりましょう.

テンプレート
私は着陸ページにプロジェクトの名前、簡潔な説明と機能のリストを含めるようにしたい.
まず最初にヘッダから始めましょう.我々のサインinボタンは、現在彼らのhref is # (今のところ何もしないということです).次の話でそれを修正します.

<header class="header">
  <div class="header-text">Sign in via:</div>
  <a href="#" class="header-link">Spotify</a>
  <a href="#" class="header-link">Deezer</a>
</header>

第2に、ブランド名と説明を加えましょう

<section class="landing-section landing-main">
  <h1 class="brand">MuN</h1>
  <h2>
    <span class="brand-text">Mu</span>sic
    <span class="brand-text">N</span>otifications
  </h2>
  <p class="landing-main-text">
    Got tired of missing out on releases from your favourite artists?
    <br>
    You have found a perfect solution...
  </p>
</section>

第三に、機能のリスト:

<section class="landing-section langing-features">
  <section class="landing-feature feature-music-services">
    <h2>Connect your favourite <span class="brand-text">mu</span>sic services</h2>
    <ul>
      <li>Spotify</li>
      <li>Deezer</li>
    </ul>
  </section>
  <section class="landing-feature feature-notifications">
    <h2>Get <span class="brand-text">n</span>otifications wherever you want them</h2>
    <ul>
      <li>Email</li>
      <li>Telegram</li>
    </ul>
  </section>
</section>

しかし、今ブラウザをチェックしてみると、とても楽しい写真が見えます.


CSSは静的ファイルです
CJPにテンプレートを追加するには django.contrib.staticfiles . デフォルトでは、static すべてのアプリケーションのフォルダ.スタイルをテンプレートに追加するには、djangoに静的なファイルを使用し、スタイルシートのタグを追加するように指示する必要があります.

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'pages/style.css' %}">

また、私たちのページがモバイル上で良いように、次の行も必要になるでしょう

<meta name="viewport" content="width=device-width, initial-scale=1">

そして、我々がそれをしている間、我々のページのタイトルを加えましょう

<title>MuN: Music Notifications</title>

以下にまとめられます.

{% load static %}
<title>MuN: Music Notifications</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'pages/style.css' %}">

<header class="header">
  <div class="header-text">Sign in via:</div>
  <a href="#" class="header-link">Spotify</a>
  <a href="#" class="header-link">Deezer</a>
</header>
<section class="landing-section landing-main">
  <div class="landing-section-content">
    <h1 class="brand">MuN</h1>
    <h2>
      <span class="brand-text">Mu</span>sic
      <span class="brand-text">N</span>otifications
    </h2>
    <p class="landing-main-text">
      Got tired of missing out on releases from your favourite artists?
      <br>
      You have found a perfect solution...
    </p>
  </div>
</section>
<section class="landing-section langing-features">
  <section class="landing-feature feature-music-services">
    <h2>Connect your favourite <span class="brand-text">mu</span>sic services</h2>
    <ul>
      <li>Spotify</li>
      <li>Deezer</li>
    </ul>
  </section>
  <section class="landing-feature feature-notifications">
    <h2>Get <span class="brand-text">n</span>otifications wherever you want them</h2>
    <ul>
      <li>Email</li>
      <li>Telegram</li>
    </ul>
  </section>
</section>

スタイルの追加

まず始めに、プロジェクトの名前と真ん中の説明を背景に、フルスクリーンの写真を撮りたいです.
Flexboxで真ん中のテキストを行うことができます.まず、私たちは私たちを作る必要がありますlanding-section コンテナの幅と高さをフルスクリーンに.CSSには特別な単位がありますvh ) ビューポートの幅vw ). 両方を設定する場合100 それはスクリーン全体を見るでしょう.
しかし、我々はあまりにも多くのコンテンツと画面があまりにも小さい(例えば携帯電話)場合は、より多くのコンテンツを表示する必要があります100vh . 私たちはmin-height の代わりにheight そのために.

.landing-section {
  min-height: 100vh;
  width: 100vw;
}

今我々は我々のコンテナをフルスクリーンを取ることができます我々は、センターでコンテンツを配置することができますFlexboxで.まず第一に、我々は設定する必要がありますdisplay: flex flexboxを使うにはその後、我々は使用することができますalign-items: center and justify-content: center コンテンツを中心に配置します.

コンテンツの方向性は1つだけ問題が残っています.そのための修正プログラムはかなり海峡-追加flex-direction: column .

より多くのFlexboxのために、私は読書を推薦しますthis guide .
ここでどのように我々の最後のlanding-section クラスのようです

.landing-section {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
} 

バックグラウンドでのイメージ
使いましたUnsplash 私の好みに合うイメージを見つけるために.

私は、イメージを背景として少しの援助でセットしましたCSS-Tricks .

.landing-main { 
  background: url(https://images.unsplash.com/photo-1460667262436-cf19894f4774) no-repeat center center fixed; 
  background-size: cover;
}

しかし、そのイメージは明暗で、その上に黒や白の色は使えませんでした.それで、私は少しのオーバーレイを加えて、テキストを白くすることに決めました(白いものがあまりに強いので、むしろ淡い灰色).

.landing-section-content {
  padding: 2rem;
  background: rgba(0,0,0,0.5);
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ccc;
}

.brand {
  margin: 0;
  color: #c55e00;
}

.brand-text {
  color: #c55e00;
}

そして、ヘッダーのための少しのスタイル.

.header {
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  top: 0;
  left: 0;
  position: absolute;

  background: rgba(0,0,0,0.5);
}

.header-link {
  margin: 1rem;
  border-bottom: 3px solid #c55e00;
  font-size: 1.2rem;
  color: #222;
  text-decoration: none;
  color: #ccc;
}

.header-text {
  margin: 1rem;
  font-size: 1.2rem;
  color: #ccc;
}

そして、私が得たものは、ここにあります:

あなたは機能の一部のためのアイデアを持っている場合は、コメントは、現在はかなりひどいので、それを書いてください.

もう一つ
私たちは今ほとんどのことをしているが、もう一つある.それはアイコンです.好きですLogoMark この目的のためのウェブサイト.それは非常に使用するように簡単ですし、美しいアイコンやものがたくさんあります.

ときにアイコンをダウンロードすると、それが保存されます.png 拡張機能.ico より良いアイコンです.ICOConverter それのための素晴らしいウェブサイトです.
アイコンをダウンロードしたら.icon エクステンション、ちょうどそれをコピーしてくださいpages/static プロジェクトのフォルダを1行追加しますindex.html テンプレート

<link rel="shortcut icon" href="{% static 'favicon.ico' %}"/>

結論
私がカバーしたこの物語で:

プロジェクトを作成する方法

Djangoのアプリのコンセプト

ジャンゴの使い方urlpatterns あなたの見解を見つけるために

あなたの着陸ページのためにHTMLを書く方法

それがよく見えるように、あなたの着陸ページを様式化する方法

そして、ケーキの上にチェリー-あなたのアイコン

これは、Munに関する記事のシリーズの最初の部分です.パート2のために調整されてください.あなたは見つけることができますthe code of this project , 私の他のプロジェクトと同様に、私のGitHub page . あなたがこの記事が好きならば、あなたは私に続くことができます、そして、あなたがそうしなかったならば、あなたは下に怒ったコメントを残すことができます.