diff --git a/docs/web/markdown/features/faq.md b/docs/web/markdown/features/faq.md index 275309bc..15280fed 100644 --- a/docs/web/markdown/features/faq.md +++ b/docs/web/markdown/features/faq.md @@ -856,6 +856,93 @@ export default { ``` +也可以像`Nuxt3` 一样使用 [@unhead](https://unhead.unjs.io/usage/composables/use-head) 来定义 `meta` 信息, 配置方式可参考模版[ssr-unhead](https://github.com/Ben-Ben-B/ssr-unhead)或者`@unhead`的配置 + +在 `controller/index` 中修改 + +```js +import { Controller, Get, Provide, Inject } from '@midwayjs/decorator' +import { Context } from '@midwayjs/koa' +import { render } from 'ssr-core' +import { IApiService, IApiDetailService } from '../interface' +import { renderSSRHead } from '@unhead/ssr' +import { Readable } from 'stream' + +interface IKoaContext extends Context { + apiService: IApiService + apiDeatilservice: IApiDetailService +} + +@Provide() +@Controller('/') +export class Index { + @Inject() + ctx: IKoaContext + + @Inject('ApiService') + apiService: IApiService + + @Inject('ApiDetailService') + apiDeatilservice: IApiDetailService + + @Get('/') + @Get('/detail/:id') + async handler (): Promise { + const { ctx } = this + try { + ctx.apiService = this.apiService + ctx.apiDeatilservice = this.apiDeatilservice + + let htmlStr = await render(this.ctx, { + stream: false + }) + const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = await renderSSRHead(ctx.head) + htmlStr = htmlStr.replace('', `${headTags}`).replace('', `${bodyTags}`).replace('', `${bodyTagsOpen}`).replace('', ``) + ctx.body = Readable.from(htmlStr) + } catch (error) { + console.log('ssr error', error) + const stream = await render(ctx, { + stream: true, + mode: 'csr' + }) + ctx.body = stream + } + } +} + +``` + +在 `layout/App.vue` 中给ctx回传`head`对象 + +```html + +``` + +在页面中使用 +```html + + + +``` `React` 使用则更简单 ```js