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

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

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中简单地使用媒体查询根据屏幕尺寸设置不同的属性会不会更容易吗？

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

1 个答案: