Question

当我转到 / page1 时，我可以看到我的样式表正常工作，但当我转到 / page1 / page2 时，我的样式表就松了。我已经去了webapp2网站并查看了路由规范，但似乎无法理解它。

文件夹结构

/main.py
/index.html
/css/style.css
/templates/page1.html
/templates/page2.html

的 main.py

dir = os.path.dirname(__file__)
JINJA_ENVIRONMENT = jinja2.Environment(loader=jinja2.FileSystemLoader(dir),
                                       autoescape=True,
                                       extensions=['jinja2.ext.autoescape'])

class HomePage(webapp2.RequestHandler):
  def get(self):
    template = JINJA_ENVIRONMENT.get_template('index.html')
    self.response.write(template.render())

class Page1(webapp2.RequestHandler):
  def get(self):
    template = JINJA_ENVIRONMENT.get_template('templates/page1.html')
    self.response.write(template.render())

class Page2(webapp2.RequestHandler):
  def get(self):
    template = JINJA_ENVIRONMENT.get_template('templates/page2.html')
    self.response.write(template.render())

app = webapp2.WSGIApplication(
  [('/', HomePage),
   ('/page1', Page1),
   ('/page1/page2', Page2)
  ], debug=True)

的的index.html

<html>
  <head>
    <link rel="stylesheet" href="css/style.css" media="all">
  </head>
  <body>
    {% block section %}
    {% endblock %}
  </body>
</html>

的 page1.html

{% extends "index.html" %}
{% block section %}
  <p>Page 1</p>
{% endblock %}

的 page2.html

{% extends "index.html" %}
{% block section %}
  <p>Page 2</p>
{% endblock %}

Answer 1

您正在使用css的相对网址，这意味着在page1/page2这样的网页上，浏览器会尝试从/page1/css/style.css

获取您的CSS

将您的css链接更改为

 <link rel="stylesheet" href="/css/style.css" media="all">

或将base href设置为/

为什么样式表不在子页面中呈现？

1 个答案: