Django配置Bootstrap及JS静态资源与locals()技巧详解
发布时间：2026-10-14 |
5人浏览过
本文详细讲解如何在Django项目中配置Bootstrap及JavaScript静态资源，包括创建static目录、设置settings.py中的STATIC_ROOT以及HTML模板中的引用方法。同时介绍了Django视图中locals()函数的使用技巧，通过示例展示如何简化视图代码并正确传递变量至模板，帮助开发者更高效地管理前端资源与后端数据交互。
Django静态资源目录配置
首先，在Django项目的APP目录下新建一个名为static的文件夹，用于存放静态资源文件。
具体目录结构如图所示。
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'appBook.apps.AppbookConfig',
]settings.py静态路径设置
接下来，打开settings.py文件，在文件末尾添加静态文件相关的配置代码。
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT=(
os.path.join(BASE_DIR,"appBook/static"),
)HTML模板中引入静态文件
在HTML页面的头部，需要引入静态文件加载标签及Bootstrap样式表。
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}" rel="external nofollow" >
<style>
.container{
margin-top: 80px;
}
</style>
</head>
<body>静态资源调用方式对比
在HTML模板页面中，可以通过以下两种方式来调用静态资源。
<img src="{% static 'images/logo.gif' %}" alt=""/>
<img src="/static/images/acer.gif" alt=""/>
推荐使用第二种，因为如果图片名称是动态的，可以通过views这么绑定：
<img src="/static/images/{{name}}.gif" alt=""/> css的引用同样如此： <link rel="stylesheet" href="{% static ‘style/base.css' %}" rel="external nofollow" type="text/css"> <link rel="stylesheet" href="/static/style/base.css" rel="external nofollow" type="text/css"> js的引用同样如此： <script type="text/javascript" src="{% static ‘js/jquery-1.8.3.min.js' %}"/> <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"/>
可以用 python manage.py findstatic css/index.css 寻找 cssDjango locals()函数使用技巧
Django视图中的locals()函数应用技巧。
locals()函数会返回一个字典，包含当前作用域内所有变量及其对应的值。
因此，可以将视图函数改写为使用locals()传递上下文的方式。
def current_datetime(request):
current_date = datetime.datetime.now()
return render_to_response('current_datetime.html', locals())需要注意的是，如果模板中使用的变量名与视图中不同，需确保重命名正确，例如将now重命名为current_date以匹配模板需求。
在HTML模板中，变量通过{{ current_date }}的形式进行定义和显示。
<html>
<body>
<font color = "blue">It is is now {{ current_date }}.</font>
</body>
</html>以上即为Django配置Bootstrap、处理JS静态文件以及使用locals()函数的完整过程，希望对您的学习有所帮助，欢迎继续支持本站获取更多技术内容。
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
