[Day 6] Handle static files
January 11, 2021 ← Last time: Day 5 View and template basics
Precautionary statement
This article is not a single article. I wrote it as a diary, so I think it will be useful for those who are new to it. If you want to learn Django, we recommend reading it from [Day 1] Django Development Environment.
Introduction
The theme this time is "Handling static files". At this point, you can view the template file in views.py. Now we will be able to read static files such as CSS, Javascript, and images.
Location of Static files
First, create a static directory directly under the project. It is the same hierarchy as template.
(venv)$ mkdir -p static
#image
mysiste
└─--myiste
└─--base
└─--static
Now create css, js directories under static.
(venv)$ cd static
(venv)$ mkdir -p css
(venv)$ kidir -p js
This time I will introduce css and js of Symantec UI. Since we will not customize with lass this time, download the zip file from the Download page and place semantic.css and semantic.js in each directory created earlier.
- I've been confused here for several hours without reflecting css and js, so please download it firmly.
However, the file cannot be read yet in this state. I need to tell Django where the static files are. So add the settings to mysite/settings.py.
mysite/settimgs.py
STATIC_URL = '/static/'
+ STATICFILES_DIRS = [
+ os.psth.join(BASE_DIR, 'static'),
+ ]
Top page template with CSS applied
Django now recognizes the static directory. Now, let's load the CSS and JS from earlier into the template.
template/base/top.thml
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="{% static 'css/semantic.css' %}" rel="stylesheet">
<title>{{title}}</title>
</head>
<body>
<div class="ui stackable inverted menu">
<div class="header item">
{{title}}
</div>
<a class="item">
What is this site?
</a>
<div class="right menu">
<a class="item">
Log in
</a>
<a class="item">
Sign up
</a>
</div>
</div>
<div class="ui container" style="min-height:100vh;">
<div class="ui grid stackable">
<div class="eleven wide column">
<div class="ui breadcrumb">
<a class="section">TOP</a>
<i class="right angle icon divider"></i>
<a class="section">category</a>
<i class="right angle icon divider"></i>
<div class="active section">thread</div>
</div>
<div class="ui segment">
<div class="content">
<div class="header"><h3>New thread</h3></div>
<div class="ui divided items">
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="five wide column">
<div class="ui action input" style="width: 100%;">
<input type="text" placeholder="Search">
<button class="ui button"><i class="search icon"></i></button>
</div>
<div class="ui segment">
<div class="content">
<div class="header"><h4>Category</h4></div>
<div class="ui relaxed list small divided link">
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui inverted stackable footer segment">
<div class="ui container center aligned">
<div class="ui horizontal inverted small divided link list">
<a class="item">© 2019 IT Learning Channel(Temporary)</a>
<a class="item">Terms of service</a>
<a class="item">privacy policy</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="{% static 'js/semantic.js' %}"></script>
</body>
Since it is still a temporary front, it is in a temporary assembled state. The key point is {% load static%} at the very beginning of the file. This will allow you to use static in your template anymore. And at the place where CSS and JS are read, the file is read as {% static ‘js/semantic.js’%}.
If you check it with a browser, it should look like the figure below.
Django templates, like many web framework templates, have features such as conditional branching, iteration, and filtering.
In that case, write between {%%}. Be careful not to confuse it with {{}}, which applies the variable given by View in context.
(It seems. I don't really understand now ...)
in conclusion
This time I loaded the template. I forgot to download the Simantec UI, but I managed to survive.
See you again
← Last time: Day 5 View and template basics
→ Next time: Inheritance and include of Day 7 template
Recommended Posts