下面我们再去设计一下内容页面，点击内容列表页面的内容标题，会打开内容页面。

再打开内容页面组件，pages/[id] 下面的 index.vue。在组件的脚本标签的上面，用 lang 属性设置一下组件的脚本语言，设置成 ts，表示 typescript。

在脚本里，解构使用 useRuntimeConfig 得到的结果，把 public 解构出来，再把 apiBaseUrl 解构出来。显示内容图像的时候会用到这个 apiBaseUrl 的值。

下面可以请求内容数据，使用 useApiFetch，类型是 Post，请求的接口地址是 posts/${id}，把结果里的 data 解构出来，重命名为 post。

修改一下组件的模板，先用一组 Head，里面包装的是一组 Title，然后绑定输出 post.title。下面用一个图像元素，用 style 设置一下样式，把 width 设置成 100%。然后绑定一下 src 属性，它的值可以用一个字符模板，先是 apiBaseUrl，然后是 /files ，再加上 ${post.file.id}，/serve，添加一个 size 查询符，把它的值设置成 large。

内容图像的下面添加一组 h1 ，显示一个内容标题，绑定输出 post.title。标题的下面是内容正文，一组 div，里面绑定输出 post.content。 再添加一组 div，小横线，后面绑定输出 post.user.name，内容的作者的名字。

在浏览器可以预览一下现在的内容页面。页面上会显示内容图像，标题，正文，还有内容作者的名字。