Django前端静态模板要怎么用

大多数使用 Django 的人都不具备多高的前端水平，通常也没有专业的前端工程师配合，自己写的CSS和JS却又往往惨不忍睹。怎么办？没关系，我们有现成的开源前端CSS框架！但是, 如何导入这些前端模板呢?

Django系列文章:

远程调用模板

一种最简单的方法就是直接使用远程js脚本和CSS文件, 例如使用 Bootstrap4 的前端模板, 比如这样:

为了阻止HTML代码加载, 因此把所有标签前后的符号(尖括号, 引号和百分号)都去掉了, 请自行补足.

CSS：

link href= https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css rel= stylesheet 

以及JS：

script src= https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js  /script

由于Bootstrap依赖JQuery，所以我们也需要使用CDN引用JQuery 3.3.1:

script src= https://cdn.bootcss.com/jquery/3.3.1/jquery.js  /script

另外，从Bootstrap4开始，额外需要popper.js的支持，依旧使用CDN的方式引入:

script src= https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js  /script

本地调用模板

但是, 如果你是直接从网站上下载模板的话, 就稍微要麻烦一些了.

根据官方的教程和 CSDN 上的教程1 和教程2, 你需要先在 settings.py 中配置模板(html)和静态文件(js, css, font). 在文件末尾定义

在settings.py中设置templates路径:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'myapp/templates').replace('\\', '/'),
                 os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
     }
]

STATIC_URL = '/static/'

在项目的根目录或应用(APP)目录下创建一个名为 static 的目录, 并根据需要在其中创建名为 js, images, fonts, css 的子目录.

在settings.py 文件末尾定义根目录下

STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\', '/')
STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
    ('fonts', os.path.join(STATIC_ROOT, 'fonts').replace('\\', '/')),
    ('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
)

或应用(APP)目录下:

STATIC_ROOT = os.path.join(BASE_DIR, 'myapp/templates/myapp/static').replace('\\', '/')
STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
)

在 urls.py 文件头和尾分别加入各一行代码

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns += staticfiles_urlpatterns()

之后就能在 html 文件中, 使用以下两种方法使用 (模板里的 href, src 改成下面这样就可以正常使用了)

link href= /static/css/bootstrap.css  rel= stylesheet  type= text/css  media= all  /

load static 
img src=  static  my_app/example.jpg    alt= My image 

这周虽然很快就解决了这个问题, 在 Django 内使用前端静态模板的过程中并没有遇到什么样的困扰(目前找模板的烦恼更甚). 不过这是我第一次做网页前端开发, 觉得还挺好玩的, 因此还是根据最近作项目的经历, 稍稍记录一下全栈的 Django 的开发过程.

参考资料:

Django前端静态模板要怎么用

远程调用模板

本地调用模板

Join Newsletter

Written by DolorHunter