在前端框架里都会提供内容插槽这种东西，就是在定义组件的时候可以预先设计一些内容插槽，这样在使用这个组件的时候，可以设置这些内容插槽里要显示的东西。React 框架里，内容插槽其实就是组件里的属性。

比如在这个 AppCard 组件里，我们可以添加一个内容插槽，先在组件的属性类型里添加一个 footer? ，问号表示这个属性的值可以是 undefined ，类型是 ReactNode。

在组件 render 方法这里，把 footer 从 props 里解构出来，然后再设计一个 footer 内容插槽，一组大括号，footer && 后面用一组 div，className 是 footer，在里面绑定输出 footer 属性的值。这样如果在使用这个组件的时候，给组件设置的 footer 属性的值，就会放到这个位置显示。

打开 PostIndex 组件，在组件的 render 方法里，可以先声明一个 footer，让这个 small 元素作为这个 footer 的值，然后在 AppCard 组件的上面添加一个 footer 属性，值就是上面定义的 footer，这样这个 footer 就会放在 AppCard 组件的 footer 位置上显示。

在浏览器上预览一下，检查一下列表项目元素，你会发现，内容的作者，也就是这个用 small 标签包装的内容，会出现在这个带 footer 类的标签里。

样式

下面我们再简单给界面添加点样式，回到项目，先给 PostIndex 组件准备一个样式表，新建一个文件，放在 src/post/index 里面，名字是 post-index.css，在这个样式表里，用 .post-index > .content 作为样式选择器，把元素的 display 设置成 grid，gap 是 16px，再设置一下 grid-template-columns，repeat，第一个参数是 auto-fit，第二个参数是 minmax，360px，1fr。

打开 post-index.tsx，在文件顶部导入样式表，位置是当前目录下的 ./post-index.css。然后我们要在组件视图的这个包装元素上添加一个 className，值是 post-index，在 posts 周围再添加一个包装，一组 div，把类名设置成 content。现在这个内容列表会使用 css 的网格布局。

再给卡片组件添加点样式，新建一个样式文件，放在 src/app/components ，名字是 app-card.css，用 .app-card 作为样式选择器，display 是 flex，flex-direction 设置成 column，padding 是 16px，border-radius 圆角是 8 像素，再用 border 添加 1px 的 solid 边框，颜色是 #eaeaea 。

下面设计一下 .app-card > .content ，flex-grow 是 1 ，font-size 是 18px ，font-weight 设置成 bold。然后是 .app-card > .footer ，padding-top 设置成 8px。

打开 app-card 组件 ，在文件的顶部导入一个样式表，位置是当前目录下面的 app-card.css。

最后再回到浏览器预览一下。