jinja2 链接到静态文件答案

【问题标题】：jinja2 link to static filesjinja2 链接到静态文件
【发布时间】：2017-06-23 05:21:05
【问题描述】：

我正在尝试了解如何在 jinja2 中创建指向静态文件的链接。

我查找的所有内容都与 Flask 相关，而我现阶段只使用 webapp2。

我的 main.py 文件如下所示：

import os
import urllib

from google.appengine.api import users
from google.appengine.ext import ndb

import jinja2
import webapp2

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
    extensions=['jinja2.ext.autoescape'],
    autoescape=True)

class MainPage(webapp2.RequestHandler):
    def get(self): 
    template = JINJA_ENVIRONMENT.get_template('/templates/base.html')  
    self.response.out.write(template.render())

class ConsultsPage(webapp2.RequestHandler):
    def get(self):
    template = JINJA_ENVIRONMENT.get_template('/templates/consults.html')  
    self.response.out.write(template.render())

class CreateConsultPage(webapp2.RequestHandler):
    def get(self):
    template = JINJA_ENVIRONMENT.get_template('/templates/create-consult.html')  
    self.response.out.write(template.render())

app = webapp2.WSGIApplication([
    ('/', MainPage),
    ('/consults', ConsultsPage),
    ('/schedule/create-consult', CreateConsultPage)
], debug=True)

我的 base.html 模板包含指向“/css”、“/js”、“/images”等静态文件的链接。

当我查看 localhost:8080/ 和 localhost:8080/consults 时，所有静态文件都在工作。页面看起来不错。

但是结构 localhost:8080/consults/create-consult 中的下一层没有链接到静态文件。

当我查看源代码时，我看到 css 链接已呈现为 localhost:8080/consults/css/style.css ，而实际位置是 localhost:8080/css/style.css。

我知道我可能需要通过一些名为 uri_for 的环境变量使所有链接动态化，但我找不到正确的实现方法。

我试图用

替换我的 css 链接

href="{{ uri_for('static', filename='css/screen.css') }}"

App Engine 告诉我 uri_for 未设置。

基本上想知道设置 uri_for 的正确过程，然后如何将其合并到我的静态文件链接的路径中。

任何帮助表示赞赏。

【问题讨论】：

uri_for() 是一个 Flask 函数；它将名称static 与路由匹配，然后可以使用该路由生成路径（如/static/css/screen.css，如果static 路由配置为处理/static/<path:filename> url）。您只需要将路径硬编码为/css/screen.css，没有任何功能。
感谢@martijn-pieters ，好的，当我在 localhost:8080/consults/create-consult 页面上查看页面源时，仔细检查没有正确呈现任何链接的静态文件。我发现源中的链接很好，但是单击源中 css 文件的链接会返回“该 url”/consults/css/bootstrap.min.css“与任何处理程序不匹配。”它似乎想在当前目录的父目录中查找 css。那么为什么它不尝试从根目录中查找该特定页面的 css 文件夹呢？
好的，所以我在路径前面缺少了一个“/”。哈哈哈我觉得很傻，但是你的回复有帮助-谢谢！！
如何将您的答案标记为正确？
您不能标记 cmets，但我在下面创建了一个包含更多信息的答案帖子。

标签： python css google-app-engine jinja2

【解决方案1】：

uri_for() 是一个Flask 特有的 函数；它将名称 static 匹配到一个路由，然后该路由可用于生成路径（如果 static 路由配置为处理 /static/<path:filename> url，则类似于 /static/css/screen.css）。

你只需要将路径硬编码为/css/screen.css，不需要函数。

注意前导/；这使它成为相对于您当前主机的绝对路径。对于http://localhost:8080/foo/bar 的页面，这样的路径然后以http://localhost:8080 为前缀以形成http://localhost:8080/css/screen.css。部署到应用引擎时，主机名会有所不同。

您可以将前缀 URL 或路径存储在全局中，以便以后可以轻松地将路径换成 CDN：

JINJA_ENVIRONMENT.globals['STATIC_PREFIX'] = '/'

并在您的模板中使用它：

<style src="{{ STATIC_PREFIX }}css/screen.css"></style>

您现在可以在一处更改所有此类 URL，方法是将 STATIC_PREFIX 设置为不同的值，包括 http://somecdn.cdnprovider.tld/prefix/。

【讨论】：