在带有Jinja/Flask的Javascript文件中使用url_for（）

我正在将静态HTML页面转换为Flask应用程序，该应用程序将根据屏幕大小动态更改其CSS文件。但是，当切换到Flask时，我必须获取HTML文件中文件的URL，如下所示：

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>

我无法将

{{url\u for（'static'，filename='css/style.css'）}}

放在Javascript内部。有什么办法可以做到这一点吗？

您有两个选择：

1。使用Jinja内联Javascript:非常简单，如果您将Javascript放入

标记中，您可以使用Jinja添加文件：

<script>
  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: {{ url_for ("static", filename="'css/style.css'" ) }},
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: {{ url_for ("static", filename="'css/style=wide.css'" ) }},
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: {{ url_for ("static", filename="'css/style-normal.css'" ) }},
                containers: 960,
                grid: { gutters: 40 }
            }
        })
</script>

---

在我看来，无法在JS文件中使用模板是Flask和Jinja的一个问题。不过，对于您的情况，在CSS中简单地使用媒体查询来根据屏幕大小设置不同的属性不是更容易吗？

非常感谢。我最终用Jinja编写了内联脚本。很完美！

<script>
  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: {{ url_for ("static", filename="'css/style.css'" ) }},
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: {{ url_for ("static", filename="'css/style=wide.css'" ) }},
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: {{ url_for ("static", filename="'css/style-normal.css'" ) }},
                containers: 960,
                grid: { gutters: 40 }
            }
        })
</script>

  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: 'https://example.com/static/css/style.css', 
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: 'https://example.com/static/css/style-wide.css', 
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: 'https://example.com/static/css/style-normal.css',
                containers: 960,
                grid: { gutters: 40 }
            }
        })