jam*_*ean 1 python google-app-engine
我一直在研究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/
有没有人知道可能出现什么问题？
我认为答案可能就像制作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配置为服务.