Python 3.8 django log 9 - Add template, ccs and image
1. Go to website create folder static , website, and style.css
2. Edit style.css
body{font-family: sans-serif;
color: cornflowrblue;
background-color: floralwhite;
}<!DOCTYPE html>
3. Add css in welcome page
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" href="/static/website/style.css"/>
</head>
<body>
<h1>Welcome to our site</h1>
<p>This is demo applicaiton for the course
<em>Getting started</em>
<a href="www.google.com">Google</a>
</p>
<h2>Meeting</h2>
<ul> {% for meeting in meetings %}
<li>
<a href="{% url 'detail' meeting.id %}">
{{ meeting.title }}
</a>
</li>
{% endfor %}
</ul>
<a href="{% url 'rooms' %}">Rooms list</a>
</body>
</html>
4. Check
5. Change to dynamic and Add image{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" href="{% static 'website/style.css' %}"/>
</head>
<body>
<h1>Welcome to our site</h1>
<p>This is demo applicaiton for the course
<em>Getting started</em>
<a href="www.google.com">Google</a>
</p>
<h2>Meeting</h2>
<img src="{% static 'website/calendar.png' %}" width="100px" >
<ul> {% for meeting in meetings %}
<li>
<a href="{% url 'detail' meeting.id %}">
{{ meeting.title }}
</a>
</li>
{% endfor %}
</ul>
<a href="{% url 'rooms' %}">Rooms list</a>
</body>
</html>
6. Check website7. Add template, first add base.html under templates
8. edit base html{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} </title>
<link rel="stylesheet" href="{% static 'website/style.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>9. rewrite welcome.html{% extends "base.html" %}
{% block content %}
<h1>Welcome to our site</h1>
<p>This is demo applicaiton for the course
<em>Getting started</em>
<a href="www.google.com">Google</a>
</p>
<h2>Meeting</h2>
<img src="/static/website/calendar.png" width="100px" >
<ul> {% for meeting in meetings %}
<li>
<a href="{% url 'detail' meeting.id %}">
{{ meeting.title }}
</a>
</li>
{% endfor %}
</ul>
<a href="{% url 'rooms' %}">Rooms list</a>
{% endblock %}10. Check
留言
張貼留言