Djangoアプリケーションの開始(3)-Template

9535 ワード
template python CSS django html テキストリンク
前回はviewを紹介しました.
実はviewは説明が多いのでもっと詳しくは後で説明しましょう
まずtemplate(html)を作成し、既存のindexビューでレンダリングします.
htmlは表記の基地です.私は直接やりました
フォルダ構造は私の方が便利なので、まずフォルダ構造を見せてあげます.

1.フォルダ構造とファイルの作成


次のようにapp mainの下にフォルダを追加します.
1.templates->htmlの保存
2.static->css、jsなどのファイルを保存する(htmlを華やかにする友達)
3.staticの下部にcssフォルダを作成します.
フォルダを作成するとhtmlとcssが作成されます.
1.テンプレートフォルダの下部にあるbase.htmlの作成
2.cssフォルダの下に「base.css」を作成する

2.静的を使用する前に設定


staticはhtmlで簡単に使用できるリソースを集めたグループだと思います.
使用しやすいようにsettingsに(パス)を設定する必要があります.
プロジェクトフォルダに移動して設定します.pyを検索します.
(config->settings.pyです)
STATIC_URL = '/static/'
この部分があります次のセクションを変更します.
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

3.cssファイルをhtmlにリンクする


cssファイルは何ですかhtmlは何ですか...気になるかもしれませんが
htmlページ上で領域の位置や大きさなどを指定し、ページの任意の位置に文字を配置します.
cssでは、領域の枠線、背景色、フォントサイズ、色を決定できます.
したがってhtmlにはcssアドレスを接続し,cssではhtmlで使用されるタグなどを設計定義する.
base.html
<!DOCTYPE html>
<html lang="ko">
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}">

    {% block header %}

    {% endblock %}
    <title> CSS 레이아웃 테스트</title>
</head>

<body>
    <section id="header">
        <div class="wrapper">
            <div class="header_title">
                <li class="bugger area">

                </li>
            </div>
            <div class="header_icon">
                HOKlNG
            </div>
            <div class="profile">Log In</div>
        </div>
    </section>
    <div class="container">
        <section class="item section-a">
            <h1> Section a</h1>
            <p>
                나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 영광을 위하여 충성을 다할 것을 굳게 다짐합니다


            </p>
        </section>
    </div>

    {% block contents %}

    {% endblock %}



</body>

</html>
base.css
body {
    margin:0;

}

h2, p{
    margin:0;
}
#header{
    font-weight: bold;
    background-color: #FF8C0A;
    font-size: 15px;
    color: white;

}
.wrapper{
    width: 100%;
    min-height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_icon{
    display: flex;
    margin: 0 auto;
    list-style:none;
}
.header_list li{
    margin-right: 4%;
}
.header_title{
    font-size: 30px;
    margin-left: 30px;
}
.profile{
    margin-right: 3%;
}

.container {

}

.item {
    padding: 5%;
}

.section-a {
    background-color: yellow;
}
このように組織する.
htmlのhead>linkのhref部分を表示すると、css/baseが表示されます.cssが見えます.さっきsettingsでパスbaseを設定しましたcssは直ちに有効になります.
viewでこれらのコンテンツを実行すると、次の画面が表示されます.
views.py -> index
def index(request):
    return render(request,'base.html')
[24007][伯俊/BOJ]6603号宝くじ
[git]git(4):プロジェクトをローカルストレージからリモートストレージにアップグレードする