嘗試將Twitter Bootstrap集成到Google App Engine驅動的Web應用程序

Question

我不確定如何讓這兩者一起工作。我遵循瞭如何設置Twitter Bootstrap的說明，但由於某些原因，當我嘗試引用css/js目錄時，我在本地運行服務器時得到了404s。

我知道我可以去下載Boilerplate，但是我被老闆/導師創建了自己的webapp，作爲web開發的一般介紹（我是noob），我希望儘可能從頭開始構建它。只是爲了幫助鞏固我對這一切的理解。

所以這裏就是我這樣做的遠：

我把引導目錄（CSS，JS，IMG），並把它們稱爲「靜態」的文件夾，我在我的應用程序目錄中創建的 - 目錄我的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 

當我同步與谷歌的應用程序目錄，它告訴我，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 Engine。我的app.yaml文件有一個靜態處理程序。我會更新這個答案，因爲我發現更多的差異。

handlers: 
- url: /static 
    static_dir: static 

我的app.yaml文件和靜態文件夾位於根應用程序目錄中。我的目錄結構有css文件夾的靜態/ css。

我的道路也比你們的略有不同：

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