手把手教你搭建个人博客(二)布局
前言
在上一篇文章中,我们已经完成了
- 项目的基础开发框架搭建
- 确定了 css 和 ui 方案
- 确定了主题切换的方案
今天我们来搞一下页面的整体布局,主要包含以下几个内容
- 页面的整体布局设计
- 导航栏的开发
- 侧边栏的开发
源码地址
每一章的完整代码都在这个仓里面
https://github.com/spuerzjj/how-to-build-blog
一、页面的整体布局设计
页面的布局,样式个人有个人的偏好,所谓好看的定义是不同的。我们只从 功能实现
和 便于开发
的角度上探讨,不讨论样式的选择。
博客页面需要满足哪些基本功能
- 页面导航清晰明了
- 博主个人信息要醒目展示,但是不要影响阅读体验
- 符合主流操作逻辑,简单易用
- 跨端可用性,对不同大小的屏幕有良好兼容性,主要考虑 PC,但是移动端至少达到能用,能看的程度
解决方案
- 导航栏采用顶部吸顶导航栏,跟大多数门户类网站类似的效果
- 在页面左侧区域 fixed 一小块区域,用于展示博主自己的个人信息
- 内容区域采用瀑布流布局,这样在 PC 和移动操作都很便捷
- 顶部导航栏自适应,在宽度不够的情况下舍弃部分内容,仅保留主要菜单和按钮
- 侧栏在移动端不展示
效果示意图
这里只是色块展示布局,具体样式后面慢慢磨
- PC 端
- 移动端
代码结构
根据上面的设计方案,整体布局分为 3 个主要部分
- Navigator - 顶部导航栏
- SideBar - 左侧侧边栏
- Outlet - 页面内容区
Outlet
由 React Router
提供,我们依次来开发 Navigator
和 SideBar
在 src/components
目录下新建 Navigator
和 SideBar
将这两个组件引入放到 App.tsx
里
这里有两个简单的处理
- 给 App 设置了 375px 的最小宽度,这是 iPhone SE 的宽度,比这个再小的屏幕我们就不做适配了
- Outlet 组件外层套了一个 div 使用 padding-left 将内容区域往右挤出一定距离,留给 SideBar
// App.tsx
function App() {
initSystemTheme() // 初始化当前主题
return (
<div _className_="min-w-[375px]">
<Navigator></Navigator>
<SideBar></SideBar>
<div _className_="pl-[300px]">
<Outlet></Outlet>
</div>
</div>
)
}
二、Navigator 导航栏的开发
放哪些内容
- 博客图标与名称
- 菜单
- 一些按钮,例如主题切换
- 放一些 slogan 什么的
进一步拆分 Navigator 组件
- Logo 组件 - 放置图标,大标题,slogan
- Menu 组件 - 放置菜单,暂时先写 3 个菜单
- ThemeBtn - 主题切换按钮
- GithubBtn - 跳转至 Github 主页的按钮
此时 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 的响应式方案
这里先介绍一下,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
设计导航栏自适应宽度的方案
核心思路,在不同的宽度节点调整样式或者隐藏一些内容
经过测试,我设计了如下几条规则
- Navigator 的左右边距,在
lg:
宽度节点从 2 变化至 20
mx-2 lg:mx-20
- slogan 在
md:
宽度节点显影
hidden md:flex
- 标题文字在
400px
宽度节点 1 行变 2 行
w-12 min-[400px]:w-auto
- Menu 的右侧内外边距
mr-2 pr-2 sm:mr-5 sm:pr-5
- Menu 每个 Link 按钮的左右内边距
sm:px-3
375px 宽度下的显示效果
三、SideBar
响应式方案
这个就非常简单了,在宽度小于 md:
时,隐藏掉侧边栏
放置的内容与组件的拆分
- Contac:博主个人信息,包括头像,联系方式,其他门户网站链接等
- Stat -:站点统计数据,包括页面累计访问量,博文数量,分类等
填充样式后的效果
结语
这一章的完整代码已经更新到了 Github 里,目前为止我们已经完成了页面的布局设计与开发,下一章我们来设计一下文章内容列表