Python學習筆記 Day 21 - Django設定樣式並部署
阿新 • • 發佈：2018-12-30
Python學習筆記 Day 20 - Django設定樣式並部署
- 設定樣式
- 安裝django-bootstrap3
(env) learning_log$ pip install django_bootstrap3- 修改base.html
{% load bootstrap3 %} <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1"> <title>Learning Log</title> {% bootstrap_css %} {% bootstrap_javascript %} </head> <body> <!-- Static nabar --> <nav class="navbar navbar-default navbar-static-top"> <div class = "container"> <div class = "navbar-header"> <button type="button" class = "navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button> <a class="navbar-brand" href="{% url 'learning_logs:index' %}"> Learning Log</a> </div> <div id="`" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="{% url 'learning_logs:topics' %} ">Topics</a></li> </ul> <ul class="nav navbar-nav navbar-right"> {% if user.is_authenticated %} <li><a>Hello, {{ user.username }}.</a></li> <li><a href="{% url 'users:logout' %}">log out</a></li> {% else %} <li><a href="{% url 'users:register' %}">Register</a></li> <li><a href="{% url 'users:login' %}">log in</a></li> {% endif %} </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class = "page-header"> {% block header %}{% endblock %} </div> <div> {% block content %}{% endblock %} </div> </div><!-- /container --> </body> </html>- 修改index.html
{% extends "learning_logs/base.html" %} {% block header %} <div class='jumbotron'> <h1>Track your learning.</h1> </div> {% endblock header %} {% block content %} <h2> <a href="{% url 'users:register' %}">Register an account</a>to make your own Learning log, and list the topics you're learning about. </h2> <h2> Whenever you learn something new about a topic, make an entry summarizing what you've learned. </h2> {% endblock content %}- 修改login.html
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Log in to your account.</h2> {% endblock header %} {% block content %} <form method='post' action="{% url 'users:login' %}" class="form"> {% csrf_token %} {{ form.as_p}} {% buttons %} <button name = "submit" class="btn btn-primary">log in</button> {% endbuttons %} <input type="hidden" name ="next" value="{% url 'learning_logs:index' %}" /> </form> {% endblock content %}- 修改topics.html
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Topics</h2> {% endblock header%} {% block content %} <ul> {% for topic in topics%} <li> <h3> <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }} </a> </h3> </li> {% empty %} <li> No topics have been added yet.</li> {% endfor %} </ul> <a href = "{% url 'learning_logs:new_topic' %}" >Add a new topic:</a> {% endblock content %}- 修改topic.html
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>{{ topic }}</h2> {% endblock header%} {% block content %} <p> <a href = "{% url 'learning_logs:new_entry' topic.id %}"">add new entry</a> </p> {% for entry in entries%} <div class = "panel panel-default"> <div class="panel-heading"> <h3> {{ entry.date_added|date:'M d, Y H:i' }} <small> <a href = "{% url 'learning_logs:edit_entry' entry.id %}" >edit entry</a> </small> </h3> </div> <div class = "panel-body"> {{ entry.text|linebreaks}} </div> </div> {% empty %} <li> No entries have been added yet.</li> {% endfor %} {% endblock content %}- 照貓畫虎修改edit_entry.html和new_entry.html
# edit_entry.html {% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Edit Eentry:</h2> {% endblock header%} {% block content %} <h2><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h2> <form action = "{% url 'learning_logs:edit_entry' entry.id %}" method='post' class="form"> {% csrf_token %} <!-- #防禦csrf攻擊的方式--> {{ form.as_p }} <!-- #把form表單在前端頁面渲染成p標籤的形式展示，此外還有as_ul,as_table等 --> {% buttons %} <button name='submit' class="btn btn-primary">save changes</button> {% endbuttons%} </form> {% endblock content %}#new_entry.html {% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Add a new entry:</h2> {% endblock header%} {% block content %} <h2><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h2> <form action = "{% url 'learning_logs:new_entry' topic.id %}" method='post' class="form"> {% csrf_token %} <!-- #防禦csrf攻擊的方式--> {{ form.as_p }} <!-- #把form表單在前端頁面渲染成p標籤的形式展示，此外還有as_ul,as_table等 --> {% buttons %} <button name='submit' class="btn btn-primary">add entry</button> {% endbuttons%} </form> {% endblock content %} - 安裝django-bootstrap3
- 部署到heroku
牆了，別想了！