Django has a handy template tag called ** extends **, which can save you a lot of time writing HTML, so let's take advantage of it.
I created a directory called bases (whatever the name is) under templates and wrote base.html which is the framework of all pages.
templates/bases/base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>{% block title %}Shift-Maker{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-theme.min.css">
<script src="{{ STATIC_URL }}js/jquery-1.11.0.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
</head>
<body><div class="container">
{% block main %}
{% endblock %}
</div></body>
</html>
I want to use Bootstrap and jQuery on any page, so I have specified them here in advance. ** STATIC_URL ** is set in ** settings.py **, in my case
STATIC_URL = '/static'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
is. You can specify the directory to put the file in ** STATICFILES_DIRS **, so create a directory and apply it.
All you have to do is enter the content for each page. The flow is like declaring the parent template with ** extends ** and putting the contents in the place specified with ** block **. For example, write as follows.
{% extends 'bases/base.html' %}
{% block title %}Hello,world!{% endblock %}
{% block main %}
<h1>This is test!!</h1>
<button class="btn btn-lg">Click me</button>
<script type="text/javascript">
var count = 0;
$('.btn').click(function(){
alert(count + "click!");
});
</script>
{% endblock main %}
I've inherited Bootstrap and jQuery from my parents, so I don't have to write the same thing every time.
Well, actually I came here ** previously I noticed that there was a problem with the database model I made, and I fixed it significantly **, so next time I will post it again (I will leave the previous one as a memorial).
Let's say you create the view after that.
Recommended Posts