Nunjucks 访问 window 屏幕尺寸

Question

有没有办法用 Nunjucks 获取 window 尺寸参数？目前我正在尝试：

{% if window.screen.width < 800 %}
    {% include 'partials/sort.html' %}
{% endif %}

据我了解，Nunjucks 模板无法访问前端参数，但有什么办法可以解决这个问题吗？（为了记录，我将 nodejs 用于服务器端代码）

Answer 1

您可以在 cookie 中存储 window 大小并将它们的值传递给渲染器 res.render(templ, {cookies})：如果页面请求中不存在大小 cookie，则 return "special" 将 window 大小存储到 cookie 并重定向到请求页面的页面。

这里是这种方式的示例（app.js 需要安装 express 和 nunjucks 模块）：

// app.js
var express = require ('express');
var nunjucks  = require('nunjucks');
var app = express();
var env = nunjucks.configure('.', {autoescape: true, express: app});

function parseCookies(cookies) {
    return cookies && cookies.split(';').reduce(function(res, cookie) {
        var pair = cookie.split('=');
        res[pair.shift().trim()] = decodeURI(pair.join('='));
        return res;
    }, {}) || {};
}

app.get('/set-cookie', function(req, res) {
    res.render('setter.html');
});

app.get('*', function(req, res){
    let cookies = parseCookies(req.headers.cookie) || {};
    if (!cookies.width || !cookies.height)
        return res.redirect('/set-cookie?' + req.url);

    res.render('index.html', {width: cookies.width, height: cookies.height});   
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000...');
});

// index.html
<html>
<body>
{{width}} x {{height}}
</body>
</html>

// setter.html
<html>
<head>
<script type="text/javascript">
    // store window size to cookies and redirect to origin page 
    function setWindowSize () {
        document.cookie = 'width=' + window.innerWidth;
        document.cookie = 'height=' + window.innerHeight;
        location = location.search.substring(1); 
    }
</script>
</head>
<body onload = "setWindowSize()">
</body>
</html>

Nunjucks 访问 window 屏幕尺寸

Nunjucks access window screen size

templating

nunjucks