这篇文章是一个新系列的一部分，我们用Next.js建立一个克隆的Airbnb。请看第一篇文章。
- 第一部分。让我们从安装Next.js开始
- 第2部分：建立房屋列表
- 第3部分：建立房屋详细视图
- 第4部分：CSS和导航栏
- 第5部分：从日期选择器开始
在这里，我想做的第一件事是为单个房屋页面添加一个侧边栏，这就是我们要添加的日期选择器。
这里是Airbnb。
这是我们现在的页面。
我想在我们的页面上添加一个小的侧边栏，以容纳日历。
我们要做的第一件事是标记。
现在，这是我们的pages/houses/[id].js 内容。
pages/houses/[id].js
export default function House(props) {
return (
<Layout
content={
<div>
<Head>
<title>{props.house.title}</title>
</Head>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</div>
}
/>
)
}
我想用一个article 标签包住所有这些内容，并在<div> 容器的末尾添加一个aside 标签（我也要给它分配一个container 类别）。
pages/houses/[id].js
export default function House(props) {
return (
<Layout
content={
<div className="container">
<Head>
<title>{props.house.title}</title>
</Head>
<article>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</article>
<aside></aside>
</div>
}
/>
)
}
旁白标签通常用于添加一段与主要内容相关的内容。在我们的例子中，它是完美的。
让我们添加一些CSS，使页面的主要部分和旁白像Airbnb页面那样对齐。
<style jsx>{`
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
}
`}</style>
这里是pages/houses/[id].js ，现在的完整代码。
pages/houses/[id].js
import Head from 'next/head'
import houses from '../../houses.js'
import Layout from '../../components/Layout'
export default function House(props) {
return (
<Layout
content={
<div className="container">
<Head>
<title>{props.house.title}</title>
</Head>
<article>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</article>
<aside></aside>
<style jsx>{`
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
}
`}</style>
</div>
}
/>
)
}
export async function getServerSideProps({ query }) {
const { id } = query
return {
props: {
house: houses.filter((house) => house.id === parseInt(id))[0]
}
}
}
这就是我们的结果。
下一部分。添加 react-day-picker
