使用Gulp+Pug生成JSON-LD时，如何处理@符号字段？

我之前也碰到过类似的情况——Pug的@符号是内置指令的前缀，直接写肯定会被解析成指令，而不是JSON键的一部分。结合你用Gulp+gulp-pug+gulp-xml2json的流程，给你几个简单可行的方案：

方案一：跳过XML中间步骤，直接用Pug生成JSON #

这是最直接的解决方法，完全避开XML的限制，也不用纠结@符号的解析问题。

在你的Pug文件（比如命名为data.json.pug）里，用JavaScript构造JSON-LD对象，再通过JSON.stringify输出：

- // 先定义JSON-LD数据
- const jsonLd = {
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://your-site.com",
  "name": "Your Page Title"
};
- // 输出格式化后的JSON
= JSON.stringify(jsonLd, null, 2)

然后调整Gulp任务，直接用gulp-pug编译成JSON文件，去掉gulp-xml2json的步骤：

const gulp = require('gulp');
const pug = require('gulp-pug');

gulp.task('build-jsonld', () => {
  return gulp.src('src/data.json.pug')
    .pipe(pug({ pretty: false })) // pretty设为false避免多余格式
    .pipe(gulp.dest('dist'));
});

这种方式下，@符号是作为JavaScript对象的键存在的，Pug不会把它当成指令，完美输出你需要的JSON-LD结构。

方案二：保留XML流程的适配方案 #

如果你的项目必须依赖XML转JSON的流程，那得调整XML的写法，因为XML标签不能包含@符号，我们可以用属性来存储带@的键名：

先修改你的data.json.xml.pug文件，用带key属性的item元素来定义键值对：

root
  item key="@context" value="https://schema.org"
  item key="@type" "Article"
  item key="headline" "Your Article Headline"

然后在Gulp任务里，给gulp-xml2json加一个自定义转换函数，把XML结构转换成带@符号的JSON：

const gulp = require('gulp');
const pug = require('gulp-pug');
const xml2json = require('gulp-xml2json');

gulp.task('xml-to-jsonld', () => {
  return gulp.src('src/data.json.xml.pug')
    .pipe(pug()) // 编译成XML
    .pipe(xml2json({
      explicitArray: false,
      transform: (xmlObj) => {
        const jsonLd = {};
        // 遍历所有item，把key属性作为JSON键，value属性/文本作为值
        xmlObj.root.item.forEach(item => {
          const key = item.$.key;
          jsonLd[key] = item.$.value || item._;
        });
        return jsonLd;
      }
    }))
    .pipe(gulp.dest('dist'));
});

为什么之前的插值无效？ #

Pug里的@是语法关键字，用于@each、@if这类指令，直接写@context会被Pug当成指令解析，而不是文本内容。只有把@放在字符串（比如JS对象的键）里，或者通过转义、JS输出的方式，才能让Pug把它当成普通字符处理。

内容的提问来源于stack exchange，提问作者Sean