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

【问题标题】：Why does the stylesheet not render in subpages?为什么样式表不在子页面中呈现？
【发布时间】：2014-05-25 07:35:06
【问题描述】：

当我转到 /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 %}

【问题讨论】：

标签： python html google-app-engine jinja2 webapp2

【解决方案1】：

您正在为您的 css 使用相对 URL，这意味着在像 page1/page2 这样的页面上，浏览器将尝试从 /page1/css/style.css 获取您的 css

把你的css链接改成

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

或将基本 href 设置为 /

【讨论】：