npm - 如何为 nunjucks 设置 baseurl

Question

我想将该站点部署到不同的服务器以进行测试、生产等。因此，通过更改一个变量或设置来定义基本路径将是首选方法。实现这一点的最佳方法是什么？

目前我在布局文件中设置了一个变量，如下所示。

{% set siteBaseurl = '/demo' %}

它在其他地方使用我定义路径如下

<img src="{{ siteBaseurl }}/images/logo.png" />

Answer 1

我找到了完美的解决方案。如 gulp-nunjucks-render 包中所述，您可以通过 gulp 任务将变量解析为模板。使用 dotenv 您可以从单个配置文件中获取它。这是我的设置方式

.env

NODE_ENV=development
BASEURL=\demo

gulpfile.js

const nunjucksData = {
    baseurl: process.env.BASEURL
};

gulp.task('nunjucks', function () {
    nunjucksRender.nunjucks.configure(['app/templates/']);
    // Gets .html and .nunjucks files in pages
    return gulp.src('app/pages/**/*.+(html|njk|nunj|nunjucks)')
        // Renders template with nunjucks
        .pipe(nunjucksRender({
            data: nunjucksData,
            path: ['app/templates/'] // String or Array
        }))
        .pipe(gulpif(isProd, htmlmin()))
        // output files in app folder
        .pipe(gulp.dest('dist'));
});

布局.njk

<img src="{{ baseurl }}/images/logo.png" />

希望这可以帮助