1

我一直在学习 Udacity Web Enginnering 课程,但在其中一项作业上遇到了困难。

我创建了一个基本博客,允许我创建帖子并将它们显示在主页上。此外,每次创建帖子时都会生成一个永久链接并显示页面。然而,虽然我的 HTML 渲染得很好,但所有的 CSS 都丢失了。从服务器返回的源中肯定会引用样式表,但不会显示。

相同的 CSS 文件 (stlye.css) 在其他地方成功使用。

目录结构如下所示:

blog:
    - app.yaml
    - main.py
templates:
    - index.html
    - newpost.html
    - styles.css
stylesheets
    - styles.css

这是我的应用程序代码:

import os
import webapp2
import jinja2

from google.appengine.ext import db

jinja_environment = jinja2.Environment(autoescape=True,
    loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates')))

# Defines the database model
class Post(db.Model):
    subject = db.StringProperty(required = True)
    content = db.TextProperty(required = True)
    created = db.DateTimeProperty(auto_now_add = True)

# Base handler class with utility functions
class Handler(webapp2.RequestHandler):
    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)
    def render_str(self, template, **params):
        t = jinja_environment.get_template(template)
        return t.render(params)
    def render(self, template, **kw):
        self.write(self.render_str(template, **kw))

class Blog(Handler):
    def get(self):
        posts = db.GqlQuery("SELECT * FROM Post ORDER BY created DESC")
        self.render('index.html', posts = posts)

# Render a single post
class Permalink(Handler):
    def get(self, post_id):
        post = Post.get_by_id(int(post_id))
        self.render("index.html", posts = [post])

# Submission form
class NewPost(Handler):
    def get(self):
        self.render("newpost.html")

    def post(self):
        subject = self.request.get("subject")
        content = self.request.get("content")

        if subject and content:
            post = Post(subject = subject, content = content)
            key = post.put()
            self.redirect("/blog/%d" % key.id())    
        else:
            error = "Something went wrong. We need both a subject and content"
            self.render("newpost.html",subject=subject, content=content, error=error)

app = webapp2.WSGIApplication([('/blog', Blog), ('/newpost', NewPost), ('/blog/(\d+)', Permalink)], debug=True)

还有我的 app.yaml:

application: 20-khz-udacity
version: 1
runtime: python27
api_version: 1
threadsafe: true

libraries:
- name: jinja2
  version: latest

handlers:
- url: /blog/(\d+)
  script: main.app

- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: main.app

最后,用于索引的模板:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />
  <title>CS 253 Blog</title>
</head>
<body>
  <a href="/blog" class="main-title">Ray's Blog</a>
  <div class="age">Queried 104973 seconds ago</div>
  <div id="content">
    {% for post in posts %}
    <div class="post">
        <div class="post-title">{{post.subject}}</div>
        <div class="post-date">{{post.created}}</div>
        <pre class="post-content">{{post.content}}</pre>
    </div>  
    {% endfor %}
  </div>
</body>
</html>

最后,可以在这里找到实际的应用程序:http: //20-khz-udacity.appspot.com/blog/

有人知道可能出了什么问题吗?

4

1 回答 1

5

我认为答案可能很简单,就像将指向 CSS 的链接设为绝对而不是相对一样。

当你这样说时:

<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

您告诉浏览器样式表地址是相对于当前页面的,所以它可能正在尝试加载http://?????.???/blog/stylesheets/styles.css/

如果你让它绝对,通过在href添加一个前导斜杠,

<link type="text/css" rel="stylesheet" href="/stylesheets/styles.css" />

它会尝试加载http://?????.???/stylesheets/styles.css/,这就是您的 app.yaml 配置的服务。

于 2012-07-11T19:31:00.023 回答