Django套用现成模板,导入css,js,images等文件【转】

环境

  • windows10
  • pycharm2017.3.3 professional edition(必须专业版)
  • python3.6.4
  • django2.0.2

参考资料
http://blog.csdn.net/qq_21182587/article/details/69936510
找了很多资料,就这个最全,使用最方便,感谢作者

方法

1、创建项目

  参考Django项目创建流程

2、从网络上下载模板,比如模板之家

3、将模板中的html文件放入项目的template文件夹下,其实也可以放到其他目录下,只是设置的时候改一下目录即可。

4、在项目的根目录或APP下创建一个文件夹命名为static用于保存css、js、images等文件

5、打开项目,在settings.py文件里寻找TEMPLATES选项,添加static文件

  ‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘),
  os.path.join(BASE_DIR, ‘static‘).replace(‘\\‘, ‘/‘)],

  在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(‘\\‘, ‘/‘)),
)

6、修改urls.py文件在文件头添加

  from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  在文件尾部添加

  urlpatterns += staticfiles_urlpatterns()

7、修改HTML文件里面的路径

  导入css

  <link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />

  导入js

  <script src="/static/js/jquery-1.11.1.min.js"></script>

  插图

  <img src="/static/images/4.jpg" alt=" " class="img-responsive" />
---------------------
作者:Uncle_Gen
来源:CSDN
原文:https://blog.csdn.net/mildddd/article/details/79557803
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/dahuan/p/10471652.html

时间: 2024-11-14 06:00:18

Django套用现成模板,导入css,js,images等文件【转】的相关文章

spring mvc 处理html,css,js等静态文件

在spring mvc,可以使用<mvc:resources/>标签来处理css,js,images等文件,使用方法如下: <mvc:resources location="/WEB-INF/pages/welcome/" mapping="/welcome/*.html"/> <mvc:resources location="/WEB-INF/pages/welcome/js/" mapping="/we

vue导入css,js和放置html代码

1.在vue页面导入css,在style scoped中(注意文件路径) <style scoped> @import "../assets/css/index.css"; @import "../assets/css/share.css"; </style> 2.js 暂时不知道怎么处理 3.html代码复制粘贴 注意:vue的template只能写一个跟div,所以在最外层套一个div然后再赋值粘贴所需要的html代码 原文地址:http

Django框架(八)—— 模板层:模板导入、模板继承、静态文件

模板导入.继承.静态文件 一.模板导入 要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可 在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div class="adv"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-t

Django使用本地css/js文件

在网上看了很多说Django如何使用本地css/js的文章, 但都不能用 今天终于找到一个可以用的, 记录下 在manager.py同层级下创建static文件夹, 里面放上css , js, image等文件或者文件夹 我的文件夹层级 然后很简单,只需在settings.py中进行设置就行, 在末尾添加以下代码 STATIC_URL = '/static/' HERE = os.path.dirname(os.path.abspath(__file__)) HERE = os.path.joi

Django框架之模板基础,静态文件配置

一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里面,也就是html要在浏览器显示的内容3.在right里面写个盒子 {% block classinfo %} {% endblock %} 在这里面写个空盒子,以后谁来扩展就在这个盒子里面添加相应的内容就行了 4.然后再创建一个.html文件,让这个继承base.html文件, {% extend

Django框架之模板继承和静态文件配置

https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件, 2.把要显示的页面的内容写在这里面,也就是html要在浏览器显示的内容 3.在right里面写个盒子 {% block classinfo %} {% endblock %} 在这里面写个空盒子,以后谁来扩展就在这个盒子里面添加相应

vs合并压缩css,js插件——Bundler &amp; Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,

【Python学习笔记】Django1.8设置模板路径和CSS,JS,image等路径的方法

1.将templates和media(包含js.css.images目录)放到了项目目录的根目录下 2.设定模板路径 设置模板路径比较简单,只要在setting.py里面的TEMPLATE_DIRS选项里面添加: import os.path TEMPLATE_DIRS = ( os.path.join(os.path.dirname(__file__), '../templates').replace('\\','/'), ) 即,可以在网站项目的根目录下,建立一个templates文件夹,里

html 导入css 文件和js文件

切记!!!!!!!导入css文件正确格式 ,这是写给自己的.代码规范,一个标点可能影响大局,步步为营...细节决定成败...j 今天由由于在css文件导入的时候<link >写成了<link/> 但css样式有效,但是js完全无效.然后可以说一天碌碌无为,现在瞌睡的要死,还是得继续工作,记住!!细节决定成败!!!! 不要再一定正确的方法上修改,也永远不要在编程上使用试错法,不要失去对程序的信仰,问题一定在自己...