django 实战(5): django配置静态文件步骤_django配置static

作者：凡人多烦事01 | 2024-04-26 06:34:40

踩

django配置static

1 在工程根目录下创建 static 目录

利用vsCode在工程根目录AuthDemo目录下创建static目录，并在在 statics 目录下创建

2 修改settings.py文件，设置静态目录

在 settings.py 文件的最下方配置添加以下配置：

STATIC_URL = '/static/' #别名

# 配置部署静态文件，存放(CSS，JS，image,plugin)

# 需要事先在工程根目录中创建存放静态文件的目录一般为static

# 在 static 目录下创建

# css 目录，存放 css文件

# js 目录，存放 js文件

# images 目录，存放图片文件

# plugins 目录，存放插件

# 再指定该目录static为静态资源目录，就需要新建下面内容：

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

别名也是一种安全机制，浏览器上通过调试台你能够看到的是别名的名字，这样别人就不能知道你静态文件夹的名字了，不然别人就能通过这个文件夹路径进行攻击。

3 下载bootstrap框架，并将其放入plugins目录

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

访问起步 · Bootstrap v4 中文文档 | Bootstrap 中文网

点击下载bootstrap-4.5.3-dist.zip。保存到本地，解压文件为bootstrap-4.5.3-dist

将解压后的目录文件`bootstrap-4.5.3-dist存入plugins目录中`

4 下载`jQuery库`

Bootstrap依赖于jQuery库，需要下载jQuery库

访问jquery下载所有版本（实时更新）

点击下载jquery-3.5.1.zip。保存到本地，解压文件为jquery-3.5.1。

将解压后的目录文件jquery-3.5.1存入js目录

5 bootstrap4中使用Font Awesome图标

bootstrap4中默认取消了Font Awesome图标的应用，所以如果要使用相关图标就需要我们自己手动添加。

访问Download Font Awesome Free or Pro | Font Awesome

基本图标下载免费版就可以了。

将下载的文件解压到bootstrp-4.5.3-dist目录

6 新建模板文件base.html

在项目根目录下的templates目录中新建模板文件base.html作为所有模板文件的父模板。

在 HTML 文件的 <head> 标签中引入 bootstrap、fontawesom、jquery，注意顺序不能错

其中的

模板文件base.html的详细代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">



<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



<link rel="stylesheet" href="/static/plugins/bootstrap-4.5.3-dist/css/bootstrap.min.css">



<link rel="stylesheet" href="/static/plugins/bootstrap-4.5.3-dist/fontawesome-free-6.4.0-web/css/all.css">



<script type="text/javascript" src="/static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>



<script src="/static/plugins/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>



<script src="/static/plugins/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>

<title>讲座签到系统</title>

</head>

<body>

<div class="container-liquid">

<div class="row">

<div class="col-2 text-white text-center bg-info">

<p class="bg-primary text-white nav-justified"><h3>讲座签到系统</h3></p>

</div>

<div class="col-10 text-white bg-light" style="background-color:rgb(33, 3, 13);">

{# 子模板要替换的标题块名为titleBody #}

{% block titleBody %}

<div >

<p><h4>Title Bar Demo</h4></p>

</div>

{% endblock %}

</div>

</div>

<div class="row">

<div class="col-2 text-center text-white bg-light" >

<div class="row" style="height: 20px;">&emsp;</div>

<ul class="nav flex-column nav-justified">

<li class="nav-item">

<div class='col-12'>

<h4><a class="nav-link" href="#">老师信息</a></h4>

</div>

</li>

<li class="nav-item">

<div>

<h4><a class="nav-link" href="#">学生信息</a></h4>

</div>

</li>

<li class="nav-item">

<div>

<h4><a class="nav-link" href="#">学术讲座</a></h4>

</div>

</li>

<li class="nav-item">

<div>

<h4><a class="nav-link" href="#">出席学生</a></h4>

</div>

</li>

</ul>

</div>

<div class="col-10" >

{# 子模板要替换的主体块名为mainBody #}

{% block mainBody %}

{% endblock %}

</div>

</div>

</div>

</body>

</html>

说明：

1 {% block mainBody %} {% endblock %}是django模板的标签。在子模板中的可以用新的代码块来替换该位置的代码块
2 html文件中所有的样式都是引用bootstrap4的样式，页面分为两行两列，
第一行: 第一列为导航栏标题，第二列为主体标题
第二行: 第一列为导航栏，第二列为主体

至此，所有准备工作已经做完。GO!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/489523