Question

目前我知道如何使用gulp将json数据注入jade，但我的json数据中的markdown没有以正确的方式格式化。我听说过marked但不知道如何在我的gulp文件或jade文件中使用它。

我正在使用

直接管道数据

.pipe(data(JSON.parse(fs.readFileSync(file)))
.pipe(pug())
.pipe(gulp.dest(destdir))

我试过了

.pipe(data(marked(JSON.parse(fs.readFileSync(file)))))

和

.pipe(marked(data(JSON.parse(fs.readFileSync(file)))))

都说TypeError：src.replace不是函数

我不确定如何在此处或我的玉码中嵌入marked。有什么建议吗？

EDITED 所以我对JSON.parse得到的json对象进行了一些预处理。在注入我的jade数据之前，我先在marked中为每个json对象中的字符串写了一个函数。类似的东西：

 var marked = require("marked")
 function preprocess(){
     var data = JSON.parse(fs.readFileSync(file));
     iterate through data and do marked(string)
     return data
 }

现在我能够将渲染的字符串变为jade，但是jade无法理解markdown符号，例如<p> </p>在我的网页中显示为<p> </p>。任何解决方法？

Answer 1

由于我之前没有直接使用像你这样的工作流程，我无法通过一个建议直接解决您的问题，但我会尝试分享一些可能会在组合应用时解决您的问题的事情。

让我们从Markdown开始。您可以将标记与 gulp-markdown-to-json 一起使用。常见的工作流程如下所示：

gulp.task('compilePug', function() {
    return gulp.src('templates/**/*.pug')
        .pipe(pug({
            pretty: true,
            data: {
                'posts' : JSON.parse(fs.readFileSync('content/json/content.json'))
            }
        })) 
        .on('error', onError)
        .pipe(gulp.dest('./')); 
});

这将使您的降价并以JSON格式包装，同时将markdown的主体转换为HTML。如果你看一下标记的选项，有一些方法可以清理你的降价。它们可能很有用，因为您已经说过格式化存在问题。

现在我们有一个JSON文件，我们需要管道到Jade。您还可以使用数据（本地）通过Jade编译任务进行管道传输。

!{posts.HTMLfromJSON} // Jade will expect HTML
#{posts.HTMLfromJson} // Jade won't expect HTML it will treat it like plain text

编译完成后，您将可以在Jade的 posts 变量下访问您的JSON。

最后，您提到段落标记出现在您的Jade模板中。这听起来像是你试图将纯HTML管道传输给Jade。这很好，事实上，如果你使用我在开始时分享的gulp工作流程，你就会将HTML传递给Jade。你只需要告诉Jade HTML即将到来：

{{1}}

希望其中任何一项都可以帮助您解决问题。

将json转换为markdown并使用gulp注入jade

1 个答案: