~ djangoで webアプリに挑戦 part.2~

プログラミング絶

こんにちはrunzou。
これは前回の続きです、前回はこちら

~ djangoで webアプリに挑戦 ~ - runzou’s diary


前回は django でローカルサーバーを立ち上げて、ロケットの画面（インストールおめでと画面）を真っ白の背景に文字があるという
最高につまらないページにする事をしました。

今回は、また、この動画を勝手に参考にして、テンプレートなるものを使用して、上の部分にメニューがあるようなサイトを作成する〜

テンプレートをマスターしよう！ | 初心者向けdjangoチュートリアル #2 - YouTube



ナビゲーションバー（上のメニュー）を表示~

<!DOCTYPE HTML>
<html>
    <head>

    </head>


    <body>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/about/">自己紹介</a>
        </div>
        <h1>Home</h1>
    </body>
</html>

を使うことでナビゲーションバーを使うことができる！
わあ　ナビゲしょんばーだあぁ

・・・。

しかし、このままでは他のページに丸々コピーしたり、何かを変えた時も全てのページを変えなければならなくなる、ので

テンプレートをパーツに分ける~

{% include "" %} というやつを使うそうだ
というわけで、新しく _navbar.html というファイルを作り、 

<div class="navbar">
    <a href="/">Home</a>
    <a href="/about/">自己紹介</a>
</div>
この部分を貼り付けて保存、そして、元々この分があったところに include の文章を書いておく~

ので、こんな感じになる 
<!DOCTYPE HTML>
<html>
    <head>



    </head>



<span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>

    {% include &quot;_navbar.html&quot; %}

    <span class="synIdentifier">&lt;</span><span class="synStatement">h1</span><span class="synIdentifier">&gt;</span>Home<span class="synIdentifier">&lt;/</span><span class="synStatement">h1</span><span class="synIdentifier">&gt;</span>

<span class="synIdentifier">&lt;/</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>




</html>
👆これ表示おかしくなる、なんでだろ
おかしいな　マークダウン方式が悪いのかな、、本当はこう書いてますぇ

footerも同じような具合で、_fotter.htmlというファイルを作って書いていく~
そしてこうなった

CSSをしてみる~

CSSというページのスタイル（色とか）を少し変えるものを使ってみたいので
index.html　に少し追加の記述をする~(href="{% static 'main.css' %}")のやつ

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="styiesheet" href="{% static 'main.css' %}">
    </head>



<span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>
    {% include &quot;_navbar.html&quot; %}
    <span class="synIdentifier">&lt;</span><span class="synStatement">h1</span><span class="synIdentifier">&gt;</span>Home<span class="synIdentifier">&lt;/</span><span class="synStatement">h1</span><span class="synIdentifier">&gt;</span>
    {% include &quot;_footer.html&quot; %}
<span class="synIdentifier">&lt;/</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span>




</html>
相変わらず、{include}の周辺になぜか謎のタグが発生している・・・
ので画像

そして、runzou_web_appフォルダの中にstaticというフォルダを作り、その中に
main.css
というファイルを作る~ 

.navbar {
    background: pink;
}
ナビゲーションバーがピンクになるという分らしい、
しかしエラーになる！ので、
index.htmlの　先頭に
{% load static %}をつけると解消されたが、このロードってやつはサーバーを再起動しなければならないらしい、、、

そして再起動して確認~

あれ、ピンクに　ならないぞwwwwwwwwwww

runzou(死亡)

続くかどうかはわからない~