赞
踩
在上一篇文章中,我们已经完成了
今天我们来搞一下页面的整体布局,主要包含以下几个内容
每一章的完整代码都在这个仓里面
https://github.com/spuerzjj/how-to-build-blog
页面的布局,样式个人有个人的偏好,所谓好看的定义是不同的。我们只从 功能实现
和 便于开发
的角度上探讨,不讨论样式的选择。
这里只是色块展示布局,具体样式后面慢慢磨
根据上面的设计方案,整体布局分为 3 个主要部分
Outlet
由 React Router
提供,我们依次来开发 Navigator
和 SideBar
在 src/components
目录下新建 Navigator
和 SideBar
将这两个组件引入放到 App.tsx
里
这里有两个简单的处理
// App.tsx
function App() {
initSystemTheme() // 初始化当前主题
return (
<div _className_="min-w-[375px]">
<Navigator></Navigator>
<SideBar></SideBar>
<div _className_="pl-[300px]">
<Outlet></Outlet>
</div>
</div>
)
}
此时 Navigator 代码如下,
function Navigator() {
return (
<div _className_="sticky w-full h-[60px] top-0 left-0 transition-colors duration-500 bg-white/95 border-b border-slate-900/10 dark:border-slate-50/[0.06] dark:bg-slate-900/75 backdrop-blur z-10">
<div _className_="mx-2 lg:mx-20 duration-500 h-full flex items-center justify-between">
<Logo></Logo>
<Menu></Menu>
<ThemeBtn></ThemeBtn>
<GithubBtn></GithubBtn>
</div>
</div>
)
}
样式不做详细的介绍,后面会简单讲一下宽度自适应如何实现
这里先介绍一下,tailwind 提供了一种响应式的样式写法,实现不同宽度下采取不同的样式,我们后续的自适应都是依赖于这个功能来实现的
写法与 Dark Mode 的用法相似,通过在类名前添加前缀,例如 sm:
md:
表示满足条件时采用这个类
举个例子,下面这个图片在默认时是 16 个宽度,大于 768px 时 32 宽度,大于 1024px 时 48 宽度
<img class="w-16 md:w-32 lg:w-48" src="...">
具体写法请参考:https://www.tailwindcss.cn/docs/responsive-design
核心思路,在不同的宽度节点调整样式或者隐藏一些内容
经过测试,我设计了如下几条规则
lg:
宽度节点从 2 变化至 20mx-2 lg:mx-20
md:
宽度节点显影hidden md:flex
400px
宽度节点 1 行变 2 行w-12 min-[400px]:w-auto
mr-2 pr-2 sm:mr-5 sm:pr-5
sm:px-3
这个就非常简单了,在宽度小于 md:
时,隐藏掉侧边栏
这一章的完整代码已经更新到了 Github 里,目前为止我们已经完成了页面的布局设计与开发,下一章我们来设计一下文章内容列表
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。