javascript - 在带有 Jinja/Flask 的 Javascript 文件中使用 url_for()

Question

我正在将静态 HTML 页面转换为 Flask 应用程序，它会根据屏幕大小动态更改其 CSS 文件。但是，当切换到 Flask 时，我必须像这样在 HTML 文件中获取文件的 URL:

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

但是在我的 Javascript init.js 中，我有这段代码可以在 CSS 文件之间切换。

(function($) {

    skel.init({
        reset: 'full',
        breakpoints: {
            'global':   { range: '*', href: 'static/css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
            'wide':     { range: '961-1880', href: 'static/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
            'normal':   { range: '961-1620', href: 'static/css/style-normal.css', containers: 960, grid: { gutters: 40 } },
            'narrow':   { range: '961-1320', href: 'static/css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
            'narrower': { range: '-960', href: 'static/css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
            'mobile':   { range: '-736', href: 'static/css/style-mobile.css', grid: { collapse: true } }
        },
        plugins: {
            layers: {
                sidePanel: {
                    hidden: true,
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'left',
                    animation: 'pushX',
                    width: 240,
                    height: '100%',
                    clickToHide: true,
                    html: '<div data-action="moveElement" data-args="header"></div>',
                    orientation: 'vertical'
                },
                sidePanelToggle: {
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'top',
                    height: '4em',
                    width: '5em',
                    html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>'
                }
            }
        }
    });

我无法将 {{ url_for('static', filename='css/style.css')}} 放入 Javascript 中。我有什么办法可以做到这一点吗？

Answer 1

你有两个选择:

<强>1。使用 Jinja 内联 Javascript: 很简单，如果您将 Javascript 放在 <script> 中标签，您可以使用 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>

<强>2。在不使用模板的情况下调用 css 文件:您可以简单地从 Javascript 文件中调用文件而不使用 Jinja。

  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 }
            }
        })

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