[{"data":1,"prerenderedAt":220},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fnestjs-scalar":3,"surround:\u002Fposts\u002F2025\u002Fnestjs-scalar":209},{"id":4,"title":5,"body":6,"canonical":184,"categories":185,"date":187,"description":188,"draft":189,"extension":190,"image":191,"meta":192,"navigation":193,"path":194,"permalink":184,"readingTime":195,"recommend":184,"references":184,"seo":200,"sitemap":201,"stem":205,"tags":206,"type":184,"updated":187,"__hash__":208},"content\u002Fposts\u002F2025\u002Fnestjs-scalar.md","在 nestjs 中使用 scalar",{"type":7,"value":8,"toc":172},"minimark",[9,21,24,35,40,45,52,56,62,65,68,79,82,89,93,102,108,128,131,158,166,169],[10,11,12,13,20],"p",{},"在 nodejs 开发 API 时，使用 swagger 生成文档很方便，但是默认的样式看起来不是特别漂亮。而 ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fscalar.com\u002F",[18],"nofollow","scalar"," 为我们提供了很好的界面。今天我们就一起把它集成到 nestjs 中。",[10,22,23],{},"很简单，效果也很棒！",[25,26,27],"blockquote",{},[10,28,29,30,34],{},"后续的 API 文档还是参考 ",[31,32,33],"code",{"code":33},"@nestjs\u002Fswagger","，这个插件只是更改了一下 UI 展示🤣",[36,37,39],"h2",{"id":38},"我们看下效果先","我们看下效果先：",[41,42,44],"h3",{"id":43},"默认的-swagger-插件生成的-api-文档","默认的 Swagger 插件生成的 API 文档",[10,46,47],{},[48,49],"img",{"alt":50,"src":51},"@nestjs\u002Fswagger预览","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fnestjs-swagger.png",[41,53,55],{"id":54},"使用-scalar-包装后的-api-文档","使用 scalar 包装后的 API 文档",[10,57,58],{},[48,59],{"alt":60,"src":61},"scalar 预览","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fnestjs-scalar.png",[36,63,64],{"id":64},"使用前的基础操作",[10,66,67],{},"我们先引入 nestjs 提供的 swagger 插件。这里我把 swagger 插件抽离到一个单独的 setup-swagger 文件中，后续有关 API 文档的全局改动我们只需要在这里修改。",[69,70,77],"pre",{"className":71,"code":73,"filename":74,"language":75,"meta":76},[72],"language-ts","import { NestExpressApplication } from '@nestjs\u002Fplatform-express';\nimport { DocumentBuilder, SwaggerModule } from '@nestjs\u002Fswagger';\nimport { apiReference } from '@scalar\u002Fnestjs-api-reference';\n\nexport function setupSwagger(app: NestExpressApplication, port: number) {\n    const config = new DocumentBuilder()\n        .setTitle('Nest starter')\n        .setDescription('Symbol Nest setup template')\n        .setVersion('1.0')\n        .build();\n    const documentFactory = () => SwaggerModule.createDocument(app, config);\n    SwaggerModule.setup('docs-api', app, documentFactory, {\n        jsonDocumentUrl: 'swagger\u002Fjson', \u002F\u002F 这里在 swagger\u002Fjson 地址生成 swagger 的 json 文件，后续我们会使用\n    });\n\n    console.log(`docs start on http:\u002F\u002Flocalhost:${port}\u002Fdocs-api`);\n}\n","setup-swagger.ts","ts","",[31,78,73],{"__ignoreMap":76},[10,80,81],{},"在 main.ts 中使用",[69,83,87],{"className":84,"code":85,"filename":86,"language":75,"meta":76},[72],"async function bootstrap() {\n    \u002F\u002F ...其他内容\n    const port = Number(process.env.PORT || 3000);\n    setupSwagger(app, port);\n\n    await app.listen(port);\n}\n","main.ts",[31,88,85],{"__ignoreMap":76},[36,90,92],{"id":91},"引入-scalar","引入 scalar",[10,94,95,96,101],{},"我们可以在它的 ",[14,97,100],{"href":98,"rel":99},"https:\u002F\u002Fgithub.com\u002Fscalar\u002Fscalar\u002Fblob\u002Fmain\u002Fdocumentation\u002Fintegrations\u002Fnestjs.md",[18],"GitHub 文档","中找到 nestjs 相关的配置。",[10,103,104,105,107],{},"接下来我们改造之前的 ",[31,106,74],{"code":74}," 文件",[69,109,126],{"className":110,"code":111,"filename":74,"highlights":112,"language":75,"meta":76},[72],"import { NestExpressApplication } from '@nestjs\u002Fplatform-express';\nimport { DocumentBuilder, SwaggerModule } from '@nestjs\u002Fswagger';\nimport { apiReference } from '@scalar\u002Fnestjs-api-reference';\n\nexport function setupSwagger(app: NestExpressApplication, port: number) {\n    const config = new DocumentBuilder()\n        .setTitle('Nest starter')\n        .setDescription('Symbol Nest setup template')\n        .setVersion('1.0')\n        .build();\n    const documentFactory = () => SwaggerModule.createDocument(app, config);\n    SwaggerModule.setup('docs-api', app, documentFactory, {\n        jsonDocumentUrl: 'swagger\u002Fjson',\n    });\n\n    app.use(\n        '\u002Freference',\n        apiReference({\n            url: '\u002Fswagger\u002Fjson',\n            theme: 'default',\n            layout: 'modern',\n            targetKey: 'JavaScript',\n            clientKey: 'Axios',\n        }),\n    );\n\n    \u002F\u002F 这里我们改变文档地址，使用 scalar 来展示 API 文档\n    console.log(`docs start on http:\u002F\u002Flocalhost:${port}\u002Freference`);\n}\n",[113,114,115,116,117,118,119,120,121,122,123,124,125],16,17,18,19,20,21,22,23,24,25,26,27,28,[31,127,111],{"__ignoreMap":76},[10,129,130],{},"这里的一些配置解释",[132,133,134,141,152,155],"ul",{},[135,136,137,138],"li",{},"theme: 是 scalar 提供的一些主题，包括 ",[31,139,140],{"code":140},"'alternate'| 'default'| 'moon'| 'purple'| 'solarized'| 'bluePlanet'| 'deepSpace'| 'saturn'| 'kepler'| 'elysiajs'| 'fastify'| 'mars'| 'laserwave'| 'none'",[135,142,143,144,147,148,151],{},"layout: ",[31,145,146],{"code":146},"modern"," 是左右两栏，",[31,149,150],{"code":150},"classic"," 就是类似于默认 swagger 的样式",[135,153,154],{},"targetKey: 默认请求示例的语言，这里使用 JavaScript",[135,156,157],{},"clientKey: 默认请求示例的插件，这里我们使用 Axios",[10,159,160,161],{},"更多的配置可以查看 ",[14,162,165],{"href":163,"rel":164},"https:\u002F\u002Fgithub.com\u002Fscalar\u002Fscalar\u002Fblob\u002Fmain\u002Fdocumentation\u002Fconfiguration.md",[18],"configuration",[36,167,168],{"id":168},"结语",[10,170,171],{},"这样就完成啦，是不是很简单呢？快去试一下吧，将你的 API 文档美化一下。",{"title":76,"searchDepth":173,"depth":173,"links":174},4,[175,181,182,183],{"id":38,"depth":176,"text":39,"children":177},2,[178,180],{"id":43,"depth":179,"text":44},3,{"id":54,"depth":179,"text":55},{"id":64,"depth":176,"text":64},{"id":91,"depth":176,"text":92},{"id":168,"depth":176,"text":168},null,[186],"代码","2025-08-02 11:44:47","在 nodejs 开发 API 时，使用 swagger 生成文档很方便，但是默认的样式看起来不是特别漂亮。而 scalar 为我们提供了很好的界面。今天我们就一起把它集成到 nestjs 中。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fuse-scalar-in-nestjs.jpg",{},true,"\u002Fposts\u002F2025\u002Fnestjs-scalar",{"text":196,"minutes":197,"time":198,"words":199},"3 min read",2.615,156900,523,{"title":5,"description":188},{"loc":194,"images":202},[203,204],{"loc":51},{"loc":61},"posts\u002F2025\u002Fnestjs-scalar",[207],"nest","CpseMHbL7DT0zQcSmuI8sz2HosMNOiu6B3z_qSA81lA",[210,215],{"title":211,"path":212,"stem":213,"date":214,"type":184,"children":-1},"Vue Vapor mode 来了","\u002Fposts\u002F2025\u002Fvue-alpha-vapor-mode","posts\u002F2025\u002Fvue-alpha-vapor-mode","2025-07-19 17:59:31",{"title":216,"path":217,"stem":218,"date":219,"type":184,"children":-1},"在 Nestjs 中使用 Drizzle ORM","\u002Fposts\u002F2025\u002Fnestjs-drizzle","posts\u002F2025\u002Fnestjs-drizzle","2025-08-06 23:01:32",1789642588976]