1

私は Udacity Web エンジニアリング コースに取り組んでいますが、宿題の 1 つで行き詰まっています。

投稿を作成してメイン ページに表示できる基本的なブログを作成しました。さらに、投稿が作成されるたびにパーマリンクが生成され、ページが表示されます。ただし、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 に答える