无法使用 python 包 web.py 提供本地静态 CSS 文件，仅 HTML 显示

Question

I am currently taking a python course and when the page loads it will not display with any of the CSS.我目前正在学习 python 课程，当页面加载时，它不会与任何 CSS 一起显示。

I have my Controller.py in the root directory D:\\Coding\\Python_Projects\\Py\\CodeWizard我的 Controller.py 位于根目录D:\\Coding\\Python_Projects\\Py\\CodeWizard

My CSS files are in D:\\Coding\\Python_Projects\\Py\\CodeWizard\\static\\css我的 CSS 文件位于D:\\Coding\\Python_Projects\\Py\\CodeWizard\\static\\css

My HTML files are in D:\\Coding\\Python_Projects\\Py\\CodeWizard\\Views\\Templates我的 HTML 文件位于D:\\Coding\\Python_Projects\\Py\\CodeWizard\\Views\\Templates

Controller.py控制器.py

import web


urls = (
    '/', 'home'
    )

render = web.template.render("Views/Templates", base="MainLayout")
app = web.application(urls, globals())


# Classes/Routes
class home:
    def GET(self):
        return render.home()


if __name__ == "__main__":
    app.run()

MainLayout.html: MainLayout.html：

$def with (page)
$var css: \\static\css\bootstrap.min.css \\static\css\bootstrap-material-design.min.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodeWizard</title>

    $if self.css:
        $for style in self.css.split():
            <link rel="stylesheet" href="$style"/>

</head>
<body>
  <div id="app">
    <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg">
      <div class="navbar-header">
        <a class="navbar-brand">CodeWizard</a>
      </div>

      <div class="nav navbar-nav mr-auto mt-2 mt-lg-0">
        <a class ="nav-item nav-link" href="/">Home Feed</a>
        <a class ="nav-item nav-link" href="/discover">Discover</a>
        <a class ="nav-item nav-link" href="/profile">Profile</a>
        <a class ="nav-item nav-link" href="/settings">Settings</a>
      </div>

      <div class="pull-right">
        <a href"/register" class="btn btn-raised btn-default">Register</a>
      </div>
    </div>
      $:page
  </nav>
</body>
</html>

home.html:主页.html：

<br /> <br /> <br />

<div class="container">
<h1>Hello CodeWizard</h1>
</div>

If I don't put the extra slash in front of static for the css file location I get a few console errors like StaticApp has no attribute directory and invalid literal for int() with base 10如果我没有在 css 文件位置的 static 前面添加额外的斜杠，我会收到一些控制台错误，例如 StaticApp 没有属性目录，并且 int() 的文字无效，基数为 10

With the extra slash included I get a 200 OK message.包含额外的斜杠后，我收到一条 200 OK 消息。 When I inspect the page and look at network it shows for the CSS files a status of cancelled.当我检查页面并查看网络时，它显示 CSS 文件的状态为已取消。

Not sure how to fix this.不知道如何解决这个问题。 I tried searching quite a bit.我试着搜索了很多。 I created a shortcut for chrome with我为 chrome 创建了一个快捷方式

"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --allow-file-access --disable-web-security --user-data dir="C:\\ChromeLocalFileAccess" "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --allow-file-access --disable-web-security --user-data dir="C:\\ChromeLocalFileAccess"

That did not work and I also tried the direct path to the css files along with also trying file:/// and numerous other combinations.那不起作用，我还尝试了 css 文件的直接路径，同时还尝试了file:///和许多其他组合。

If anyone can help me would be greatly appreciated so I can continue on in the course and learn more python :) Thank you in advance.如果有人可以帮助我，将不胜感激，因此我可以继续学习课程并学习更多 python :) 在此先感谢您。

Answer 1

This was an issue with web.py running in Python 3.7 environment.这是在 Python 3.7 环境中运行的 web.py 的问题。 It has been fixed by this pull request .它已被此拉取请求修复。

With that fixed your paths should not start with \\\\ :有了这个固定，你的路径不应该以\\\\开头：

either任何一个

$var css: static\css\bootstrap.min.css static\css\bootstrap-material-design.min.css

or或者

$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.min.css

will work将工作

Answer 2

this works for me so try this in the mainLayout.html这对我有用所以在 mainLayout.html 试试这个

$def with (page)
$var css: static/css/bootstrap.min.css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mainlayout</title>
    $if self.css:
        $for style in self.css.split( )
            <link rel ="stylesheet" href="$style" />
</head>
<body>
     <div id="app">
    <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg">
      <div class="navbar-header">
        <a class="navbar-brand">CodeWizard</a>
      </div>

      <div class="nav navbar-nav mr-auto mt-2 mt-lg-0">
        <a class ="nav-item nav-link" href="/">Home Feed</a>
        <a class ="nav-item nav-link" href="/discover">Discover</a>
        <a class ="nav-item nav-link" href="/profile">Profile</a>
        <a class ="nav-item nav-link" href="/settings">Settings</a>
      </div>

      <div class="pull-right">
        <a href="/register" class="btn btn-raised btn-default">Register</a>
      </div>

    </div>
   <div>
       $:page
   </div>


</body>
</html>

无法使用 python 包 web.py 提供本地静态 CSS 文件，仅 HTML 显示

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-12-12 00:39:51

解决方案2
0 2020-09-01 14:29:46

无法使用 python 包 web.py 提供本地静态 CSS 文件，仅 HTML 显示

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-12-12 00:39:51

解决方案2 0 2020-09-01 14:29:46

解决方案1
1 已采纳 2019-12-12 00:39:51

解决方案2
0 2020-09-01 14:29:46