【问题标题】:Google App Engine, Permalinks and CSSGoogle App Engine、固定链接和 CSS
【发布时间】:2012-07-11 10:24:38
【问题描述】:

我一直在学习 Udacity 网络工程课程,但在其中一项作业上卡住了。

我创建了一个基本博客,允许我创建帖子并将它们显示在主页上。此外,每次创建帖子时都会生成一个永久链接并显示页面。然而,虽然我的 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/

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

【问题讨论】:

  • 能不能把你的项目结构,app.yaml,以及模板的相关代码贴出来。如果 css 没有呈现最可能的原因是因为 url 错误,请检查它是使用 Chrome 中的开发人员工具或 Firefox 中的 Firebug 下载的。
  • 在目录结构部分,您将styesheets 列为您的目录之一。这只是一个错字,对吧?

标签: python google-app-engine


【解决方案1】:

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

当你这样说时:

&lt;link type="text/css" rel="stylesheet" href="stylesheets/styles.css" /&gt;

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

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

&lt;link type="text/css" rel="stylesheet" href="/stylesheets/styles.css" /&gt;

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-28
    • 1970-01-01
    • 1970-01-01
    • 2018-08-01
    • 2011-07-09
    • 1970-01-01
    相关资源
    最近更新 更多