jinja2链接到静态文件 [英] jinja2 link to static files

问题描述

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

I am trying to understand how to create a link to static files in jinja2.

我查找的所有内容都与Flask有关，而在此阶段我仅使用webapp2.

Everything I look up relates to Flask whereas I am using just webapp2 at this stage.

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

My main.py file looks as follows:

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"等中的静态文件的链接.

My base.html template contains the links to the static files in "/css", "/js" "/images" etc.

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

When I look at the localhost:8080/ and localhost:8080/consults all the static files are working. Page looks fine.

但是结构localhost:8080/consults/create-consult中的下一级未链接到静态文件.

However the next level in the structure localhost:8080/consults/create-consult is not linking to static files.

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

When I view source I see that the css link has rendered as localhost:8080/consults/css/style.css , when the actual location is localhost:8080/css/style.css.

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

I understand I may need to make all links dynamic via some environment variable called uri_for, but I can't find the correct way to implement this.

我尝试用

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

App Engine uri_for告诉我未设置.

I was told by App Engine uri_for not set.

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

Basically would like to know the correct process for setting uri_for and then how to incorporate it in the paths for my links to static files.

任何帮助表示赞赏.

推荐答案

uri_for()是特定于Flask的函数；它将名称static与路由匹配，然后可以使用该路由生成路径(如果static路由配置为处理/static/<path:filename>网址，则可以使用该路径生成/static/css/screen.css).

uri_for() is a Flask-specific function; it matches the name static to a route, which in turn then can be used to generate a path (like /static/css/screen.css if the static route is configured to handle /static/<path:filename> urls).

您只需要将路径硬编码为/css/screen.css，而无需使用功能.

You just need to hardcode the path as /css/screen.css, no need for functions.

请注意开头的/；相对于您当前的主机，这是绝对路径.对于http://localhost:8080/foo/bar处的页面，该路径然后以http://localhost:8080为前缀以形成http://localhost:8080/css/screen.css.部署到应用程序引擎时，主机名将不同.

Note the leading /; that makes it an absolute path, relative to your current host. For a page at http://localhost:8080/foo/bar, such a path is then prefixed with http://localhost:8080 to form http://localhost:8080/css/screen.css. When you deploy to the app engine, the hostname will be different.

您可以将前缀URL或路径存储在全局变量中，以便稍后可以轻松地换出CDN的路径:

You could store a prefix URL or path in a global, so you can easily swap out the path for a CDN later:

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

并在您的模板中使用它:

and use that in your templates:

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

您现在可以通过将STATIC_PREFIX设置为另一个值(包括http://somecdn.cdnprovider.tld/prefix/)来在一处更改所有此类URL.

You can now alter all such URLs in one place, by setting the STATIC_PREFIX to a different value, including http://somecdn.cdnprovider.tld/prefix/.

这篇关于jinja2链接到静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！