当前位置: 首页 > 面试题库 >

应用程序未拾取.css文件(Flask/ python)

郭易安
2023-03-14
问题内容

我正在渲染一个模板,尝试使用外部样式表进行样式设置。文件结构如下。

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html看起来像这样

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

我的样式均未应用。它与html是我正在渲染的模板有关吗?python看起来像这样。

return render_template("mainpage.html", variables..)

我知道这很有效,因为我仍然能够渲染模板。但是,当我尝试将样式代码从html的“
head”标记中的“样式”块移动到外部文件时,所有样式消失了,仅留下了一个html页面。有人看到我的文件结构有任何错误吗?


问题答案:

您需要有一个“静态”文件夹设置(用于css / js文件),除非您在Flask初始化期间专门覆盖了它。我假设您没有覆盖它。

您的css目录结构应类似于:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

请注意,您的/ styles目录应位于/ static下

然后做

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

Flask现在将在static / styles / mainpage.css下查找css文件



 类似资料:
  • 问题内容: 我正在渲染一个模板,尝试使用外部样式表进行样式设置。文件结构如下。 mainpage.html看起来像这样 我的样式均未应用。它与html是我正在渲染的模板有关吗?python看起来像这样。 我知道这很有效,因为我仍然能够渲染模板。但是,当我尝试将样式代码从html的“ head”标记中的“样式”块移动到外部文件时,所有样式消失了,仅留下了一个html页面。有人看到我的文件结构有任何错

  • 我正在使用CreateReact应用程序引导我的应用程序。 我添加了两个文件和。 我的包括: 当我使用

  • 我正在使用Gradle应用程序插件,并尝试使用Log4J 2实现通过SLF4J配置日志记录。我已经放置了一个: 我的包含Log4j 2 SLF4J绑定(https://logging.apache.org/log4j/2.x/log4j-slf4j-impl/): 还有读取 而包含以下内容: 因此,我希望将日志级别设置为,如果我

  • 我有一个Spring Boot 1.4.3项目,它应该在启动时加载Liquibase。它应该是一个简单的配置,但我花了很多时间来实现以下功能。 考虑一个ModuleA(一个普通jar)和一个ModuleB(一个引导jar)。ModuleB对moduleA有依赖关系,所以当moduleB启动时,moduleA在它的类路径上。 ModuleA包含一些通用属性,编码在application.yml中,一

  • 主要内容:调试模式要测试Flask安装是否成功,在编辑器中输入以下代码,并保存到文件: 中。 在项目中导入模块是强制性的。 Flask类的一个对象是WSGI应用程序。 Flask构造函数将当前模块的名称()作为参数。 Flask类的函数是一个装饰器,它告诉应用程序哪个URL应该调用相关的函数。 rule 参数表示与该函数绑定的URL。 options 是要转发给底层Rule对象的参数列表。 在上面的例子中, URL

  • 问题内容: 我的Flask应用程序结构如下所示 当我运行时,它将在处启动服务器。在我,我尝试打开该文件作为 它给出了错误 如何访问此文件? 问题答案: 认为问题出在你/的道路上。删除,/因为与处于同一级别。 我建议将水平设置为或许多Flask用户喜欢使用,但我不喜欢。 如果这是你要设置的方式,请尝试以下操作: 现在,你可以轻松执行以下操作: 根据需要调整路径和级别。