1. 程式人生 > >Python學習筆記 Day 21 - Django設定樣式並部署

Python學習筆記 Day 21 - Django設定樣式並部署

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 %}
    
  • 部署到heroku
    牆了,別想了!