Django 静态文件(django html加载静态文件)13

作者 : 慕源网 本文共5219个字,预计阅读时间需要14分钟 发布时间: 2021-11-21 共182人阅读

本文是Django教程的一部分,您可以点击Django教程系列查看所有教程。

Django 静态文件(django html加载静态文件)13

Django静态文件介绍

静态文件是应用程序中的图像、CSS 脚本。Django 提供了灵活的技术来将这些静态文件引入到应用程序中。这种管理这些静态文件的灵活方式将有助于更好地维护应用程序性能。django.contrib.staticfiles 负责维护 Django 中的静态文件。django 静态文件在所用项目的内容管理中发挥着广泛的作用。从 Django 的角度来看,该框架提供了方便的方法,通过这些方法可以非常有效地处理这些面向文件的资源。在生产中精确地提供这些静态文件也是当前派生的 Django 框架的关键功能之一。

静态文件如何在 Django 中工作?

让我们看看静态文件在 Django 中是如何工作的?

1. 确保 django.contrib.staticfiles

首先,我们需要确保将 django.contrib.staticfiles 添加为 SETTINGS.py 中已安装应用程序的一部分。

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.postgres',
'Django_app1'
]

2.确保静态url

接下来,我们需要确保将静态 url 设置为“/static/”。所有静态文件都将使用 url 提供给网页,并且此 url 将附加此 /static/ 。基本上,所有在 STATICFILES_DIRS 或 STATIC_ROOT 中收集的静态文件都被网页使用这个 url 访问

SETTINGS.py:

STATIC_URL = '/static/'

3. 确保 STATICFILES_DIRS 或 STATIC_ROOT

STATICFILES_DIRS 或 STATIC_ROOT 变量负责提及存储静态文件的路径。STATIC_ROOT 最好用于 PROD 系统,而 STATICFILES_DIRS 用于测试系统。这两个变量不能在同一个 SETTINGS.py 文件中声明。

SETTINGS.py:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] #STATIC_ROOT = os.path.join(BASE_DIR, 'static')

4. Python manage.py collect 静态命令

该命令用于收集系统中所有的静态文件,并将它们与静态目录关联起来。

python manage.py collectstatic

Django 静态文件(django html加载静态文件)13

5. 模板文件更改

最后,必须在模板文件中进行以下更改。这些更改将在渲染过程中加载模板文件中的静态文件。

  • 所有这些更改都与 html 文件的标题部分相关联。
  • 在模板头部部分添加静态文件加载命令。

{% 加载静态 %}

    • 将项目中的静态文件夹引用路径设置为拉取静态文件。
      • CSS 文件: <link href=”{% static ‘admin/css/font.css’ %}” rel=”stylesheet”>
      • 图片文件: <img src=”{% static ‘admin/css/font.css’ %}” ” alt=”My image” height=”300px” width=”700px”/>
  • 上述更改将成功从静态文件夹中拉取静态文件。

Django 静态文件示例

以下是示例:

示例#1

css文件:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] #STATIC_ROOT = os.path.join(BASE_DIR, 'static') body {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 36px;
letter-spacing: 2px;
word-spacing: 1.8px;
color: #02071C;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 34px;
letter-spacing: 2px;
word-spacing: 1.8px;
color: #02071C;
font-weight: 650;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h2 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 32px;
letter-spacing: 1px;
word-spacing: 2.0px;
color: #02071C;
font-weight: 600;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h3{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 30px;
letter-spacing: 1px;
word-spacing: 2.1px;
color: #02071C;
font-weight: 400;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}

图片位置:

Django 静态文件(django html加载静态文件)13

filehandeling.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Django App1</title>
{% load static %}
<link href="{% static 'admin/css/font.css' %}" rel="stylesheet">
<style>
body {
background-image: url("{% static 'admin/img/background.jpg' %}");
background-color: #acccbb;
}
</style>
</head>
<body>
<h1> <u> FILE UPLOAD HANDELING IN DJANGO </u> </h1>
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<div style = "max-width:470px;">
<form method =  'POST' enctype="multipart/form-data">
{{ file.as_p }}
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="submit">
</form>
</div>
</body>
</html>

输出:

Django 静态文件(django html加载静态文件)13

示例#2

css文件:

@import url(fonts.css);
body {
margin: 0;
padding: 0;
font-size: 45px;
font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: grey;
background: #fff;
}
a:link, a:visited {
color: #447e9b;
text-decoration: none;
}
a:focus, a:hover {
color: #036;
}
a:focus {
text-decoration: underline;
}
a img {
border: none;
}
a.section:link, a.section:visited {
color: #fff;
text-decoration: none;
}
a.section:focus, a.section:hover {
text-decoration: underline;
}
/* GLOBAL DEFAULTS */
p, ol, ul, dl {
margin:.2em 0.8em 0;
}
p {
padding: 0;
line-height: 140%;
}
h1,h2,h3,h4,h5 {
font-weight: bold;
}
h1 {
margin: 0 0 20px;
font-weight: 300;
font-size: 20px;
color: #666;
}
h2 {
font-size: 16px;
margin: 1em 0.5em 0;
}
h2.subhead {
font-weight: normal;
margin-top: 0;
}
h3 {
font-size: 14px;
margin:.8em 0.3em 0;
color: #666;
font-weight: bold;
}
h4 {
font-size: 12px;
margin: 1em 0.8em 0;
padding-bottom: 3px;
}
h5 {
font-size: 10px;
margin: 1.5em 0.5em 0;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
ul li {
list-style-type: square;
padding: 1px 0;
}
li ul {
margin-bottom: 0;
}
li, dt, dd {
font-size: 13px;
line-height: 20px;
}
dt {
font-weight: bold;
margin-top: 4px;
}
dd {
margin-left: 0;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
border: none;
border-top: 1px solid #eee;
}
blockquote {
font-size: 11px;
color: #777;
margin-left: 2px;
padding-left: 10px;
border-left: 5px solid #ddd;
}
code, pre {
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: #666;
font-size: 12px;
}
pre.literal-block {
margin: 10px;
background: #eee;
padding: 6px 8px;
}
code strong {
color: #930;
}

formhandeling.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Django App1</title>
{% load static %}
<link href="{% static 'admin/css/base.css' %}" rel="stylesheet">
<style>
body {
background-image: url("{% static 'admin/img/background.jpg' %}");
background-color: #acccbb;
}
</style>
</head>
<body>
<h1> <u> FORMS HANDELING IN DJANGO </u> </h1>
<div style = "max-width:470px;">
<form method =  'GET'>
{{ form.as_p }}
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="submit">
</form>
</div>
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</body>
</html>

输出:

Django 静态文件(django html加载静态文件)13

总结

这是 Django 静态文件的指南。在这里,我们还将讨论介绍以及静态文件在 Django 中的工作原理以及不同的示例及其代码实现。


慕源网 » Django 静态文件(django html加载静态文件)13

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录