Django 美化網頁

日期：2020/05/03

講者：Arashi

Outline

  • Template tags
  • CSS
  • Base
  • Reference

Template tags

{% for post in post_list %}
  <li>{{ post.text }}</li>
{% empty %}
  <li>Sorry, no posts in this list.</li>
{% endfor %}

For 迴圈

{% if post.text %}
    text: {{ post.text }}
{% else %}
    No text.
{% endif %}

If...else

{# test #}hello

{# {% if foo %}bar{% else %} #}

註解模板

{% comment %}
    <p>Commented out text with {{ create_date|date:"c" }}</p>
{% endcomment %}

單行註解

多行註解

{% load libraries name %}

引入 libraries

{% extends "base.html" %}

Extends

base.html 可換成其他想要繼承過來的父模板名稱

Block

定義一個可以被子模板覆蓋的區塊

<head>
  {% block title %}
  {% endblock %} 
</head>

base.html

<head>
  {% block title %}
      <title>{{ post.title }} | My Adventure</title>
  {% endblock %}
</head>

繼承 base 的 html

CSS

.blog/templates/home.html

<!--新增-->
{% load static %}

<head>
  <!--新增-->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>

指定標籤

h1 {
  color: #FCA205;
  background-color: #A89797;
}

改變顏色

.blog/static/css/blog.css

指定標籤

body p {
    font-style:italic;
}

將字體改為斜體

.blog/static/css/blog.css

指定標籤

body p {
   border-style: solid;
   border-width: 5px;
   border-color: blue;
}

加上邊框

功用 語法
虛線(點) dotted
虛線(條) dashed
實線 solid
雙邊框 double  
.blog/static/css/blog.css

指定標籤

h2 a {
    font-family: 'Dancing Script', cursive;
}

改變字體

<head>
  <!--增加-->
  <link href="字體網址" rel="stylesheet">
</head>

.blog/templates/home.html

.blog/static/css/blog.css

指定 class

.page-header {
    background-color: #A89797;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

<body>
  <div class="page-header">
    <h1><a href="/home">My Adventure</a></h1>
  </div>
</body>

.blog/templates/home.html
.blog/static/css/blog.css

指定 id

#test {
  color: #FCA205;
  padding-left: 50%;
}
<body>
  <!--新增-->
  <div id = "test">
    <p>it just a test</p>
  </div>
</body>

.blog/templates/home.html
.blog/static/css/blog.css

Base

{% load static %}
<html>
<head>
    <meta charset="utf-8">
    {% block title %}
    {% endblock %}
    <style>
        h1{
            text-align: center;
        }
        .container{
            display: flex;
            justify-content: space-around;
        }
    </style>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>
    <div class="page-header">
        <h1><a href="/home">My Blog</a></h1>
    </div>
    {% block content %}
    {% endblock %}
</body>
</html>

./blog/templates/base.html

{% extends 'base.html' %}
<head>
    {% block na %}
        <title>My Blog</title>
    {% endblock %}
</head>
<body>
    {% block content %}
    <div class="container">
        {% for post in post_list %}
            <div class="post">
                <h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
                <p>published: {{ post.published_date }}</p>
                <p>{{ post.text|linebreaksbr|slice:":30" }}</p>
            </div>
        {% endfor %}
    </div>
    <div id = "test">
        <p>it just a test</p>
    </div>
     {% endblock %}
</body>

./blog/templates/home.html

Reference

THANKS FOR LISTENING

HP：1/100

Made with Slides.com