首页 > 其他分享 >Django优化模版拆分css文件

Django优化模版拆分css文件

时间:2023-09-02 21:56:22浏览次数:33  
标签:文件 模版 Django html 拆分 目录 css

Django优化模版拆分css文件

可以发现前面写项目将css放在html一个文件中,虽然简单省事但是带来的问题就是文件过于冗长不方便查看和修改。这里做个分离优化提供两种方式

方式一:html和css存放同一目录

 将原因html中</style>内容移动到home.css文件中,然后再html移动空白位置,替换指向home.css文件即可:

<head>
  <meta charset="utf-8">
  <title>My Goods</title>
  <link rel="stylesheet" type="text/css" href="/goods_service/templates/home.css">
</head>

方式二: 将css存放到指定目录中【推荐】

 

若是模版文件较多随之拆分的css文件也增多,放在一个目录中显得非常杂乱,这时候可以新建目录,将拆分的css文件统一存放到单独的目录,css内容不变,将home.html修改路径指导css文件即可,同理将移动<style>位置替换如下内容:

<head>
  <meta charset="utf-8">
  <title>My Goods</title>
  <link rel="stylesheet" type="text/css" href="/goods_service/templates/static/home.css">
</head>

 

 

标签:文件,模版,Django,html,拆分,目录,css
From: https://www.cnblogs.com/weiweirui/p/17674265.html

相关文章

  • vue项目中全局引入cass(scss)变量和sass(scss) mixin
    1、使用场景variable.scss文件样例//颜色定义规范$color-background:#222;mixin.scss文件样例//背景图片@mixinbg-image($url){background-image:url($url+"@2x.png");@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background-i......
  • Django系统报错总结 1
    Django系统报错总结1 本章节,继续总结前面商品系统编写中遇到的报错问题TypeError:Product()gotunexpectedkeywordarguments:'update_time','seller'因为在Product类中没有定义参数update_time和seller。要解决这个问题,你需要确保在Product类中添加这些参数的定义。......
  • 20230829-面试题html+css5道题记录
    css预处理工具参考答案:CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。css预处理器种类繁多,三种主流css预处理器是Less、Sass(Scss)及Stylus;它们各自的背景如下:Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框......
  • 20230825-面试题html+css5篇简单记录
    html标签的类型(head,body,!Doctype)他们的作用是什么!DOCTYPE标签:它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令.head:是所有头部元素的容器,绝大多数头部标签的内容不会显示给读者该标签下所包含的部分可加入的标签有base,link,meta,script,style和title......
  • django+drf开发一些个人的标准化
    最近在改造一下个人的开发风格。特分享一下。子应用我一般放在apps中,每个不同模块的子应用起不同的名字。startapp后自己移动一下,记得修改一下Appconfig中的name即可。子应用中创建services.py或者如有需要可以创建services模块再细分。所有业务放到services中编写。views一律......
  • CSSE7610互斥算法分析
    Assignment1:MutualexclusionCSSE7610Answerquestions1to3below.Thisassignmentisworth25%ofyourfinalmark.Itistobecompletedindividually,andyouarerequiredtoreadandunderstandtheSchoolStatementonMisconduct,availableontheSchoo......
  • std模版库 队列、优先队列、双端队列
    queue为单端队列deque为双端队列priority_queue为优先队列includeincludepriority_queue<int,vector,less>//最大堆默认为对大堆也即和priority_queue等价priority_queue<int,vector,greater>//最小堆......
  • 一个CSS动画的demo
       .lineBarDis{height:8px;background-image:linear-gradient(toright,#011c720%,#c7ced2100%);animation:myAnimation1.5sinfinite;/*设置动画为2秒钟的时间,并无限循环*/}@keyframesmyAnimation{0......
  • 使用css3给网页元素出场动画让页面动起来
    使用css3给网页元素出场动画让页面动起来一般情况下网页元素都是静态显示的,能不能做一个幻灯片那样增加个动画出场效果呢这里使用css实现简单效果css样式test.css*,*:after,*::before{ -moz-box-sizing:border-box; box-sizing:border-box; }body,h1,h2,h3,h4,h5,h......
  • 开发指导—利用CSS动画实现HarmonyOS动效(一)
    注:本文内容分享转载自HarmonyOS Developer官网文档一. CSS语法参考CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。尺寸单位● 逻辑像素px(文档中以......