遇到困惑尝试将 Twitter Bootstrap 集成到 Google App Engine 驱动的 web 应用程序中

Question

我不确定如何让两者协同工作。我按照如何设置 Twitter Bootstrap 的说明进行操作，但由于某种原因，当我在本地运行服务器时，当我尝试引用 css/js 目录时出现 404。

我知道我可以去下载 Boilerplate，但是老板/导师给了我创建自己的 web 应用程序的任务，作为对 web 开发的一般介绍（我是菜鸟），我想构建尽可能多地从头开始。只是为了帮助巩固我对这一切的理解。

这就是我到目前为止所做的：

我获取了引导目录（css、js、img）并将它们放在我在我的应用程序目录中创建的名为“static”的文件夹中 - 我的 app.yaml 文件所在的目录。然后，在我的 app.yaml 文件中，我有：

handlers:
- url: /.*
  script: sorter.app

- url: /img/(.*\.(gif|png|jpg))
  static_files: static/img/\1
  upload: static/img/(.*\.(gif|png|jpg))

- url: /css
  static_dir: static/css

- url: /js
  mime_type: text/javascript
  static_dir: static/js

当我将 app 目录与 google 同步时，它告诉我复制了 8 个静态文件（有 8 个 twitter 引导文件）。然而，在我的 sorter.py 文件 (sorter.app) 中，我从这三个文件中得到了 404：

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<script src="js/bootstrap.min.js"></script>

Answer 1

您的 app.yaml 开头有一个包罗万象的网址，因此所有请求都将通过您的应用进行路由，而不是由 GAE 直接提供服务。将处理程序移动到处理程序列表的末尾：

handlers:
- url: /css
  static_dir: static/css
...
- url: /.*
  script: sorter.app

此外，您可能希望在 html 中使用绝对 URL 而不是相对 URL。例如/css/bootstrap.min.css 可能会比css/bootstrap.min.css 工作得更好。

Answer 2

我将引导程序与应用引擎一起使用。我的 app.yaml 文件有一个静态处理程序。当我发现更多差异时，我会更新这个答案。

handlers:
- url: /static
  static_dir: static

我的 app.yaml 文件和静态文件夹位于根应用程序目录中。我的目录结构有 css 文件夹的 static/css。

我的路也和你的略有不同：

<link href="../static/css/bootstrap.css" rel="stylesheet">