先打开内容列表页面 .. 下面我们重新再设计一下这个页面的显示 .. 打开 pages .. posts .. index.vue .. 找到组件的视图 ..

剪切一下这个标题列表 .. 在这个大标题的下面先添加一排内容 .. 一个 div，上面加上 row .. justify-content-center ..

把标题列表粘贴过来 .. 在这个包装上添加一个 class ... 名字是 col-md-6 .. 调整一下编辑窗口的尺寸 ... 可以在浏览器上预览一下 ..

暂时先去掉绑定输出的内容标题 .. 用一个 nuxt-link .. 添加一个链接 .. 绑定一个 to .. 设置一下链接到的地方 .. 路由的名字是 posts-id .. params 是地址里的参数 .. 里面有个 id 参数 .. 值是 post.id ..

这样点击列表项目打开的就是当前这个内容的详情页面 ..

链接里面用一个 div .. 加上 card .. my-3 ..

卡片组件里面先添加一个图像 .. 用一个 img 标签 .. 绑定一下 :src 属性 .. 值是 post.imageUrl ..

再绑定一个 :alt 属性 .. 属性的值是 post 里的 title ..

然后添加一个 class .. 加上一个 card-img-top ..

下面是卡片的主体内容 ... 包装上加上一个 card-body .. 里面先是一个标题 .. 加上 card-title 这个类 .. 输出的内容是 post 里的 title ..

在标题的下面再添加一个子标题 .. 加上 card-subtitle .. mb-2 .. text-black-50 .. 子标题的内容是 post.author .

页面大标题的上下可以再给它添加点外边距 .. 在包装上加上一个 my-5 .. 回到浏览器，再预览一下这个内容列表页面 ..

点击列表项目 ... 打开的就是内容的详情页面 ..

回到编辑器，重新再设计一下这个内容详情页面 .. 打开 pages .. posts .. _id.vue .. 这个整体包装上的 container 类可以去掉，换成一个 my-5 .. 上下添加点外边距 ..

页面大标题的容器上也可以再添加点外边距 ...

大标题的下面，可以添加一张图片 .. 用一个 img .. 先绑定一下 src 属性 .. 值是 post 里的 imageUrl .. 然后绑定 :alt 属性 .. 对应的值是 post.title ..

图像上面添加两个 class .. 一个是 rounded .. 再加上一个 w-100 .. 预览一下 ..

图像的下面可以再加点边距 .. 然后再预览一下 ..