手把手教你搭建个人博客（二）布局

手把手教你搭建个人博客（二）布局

前言

在上一篇文章中，我们已经完成了

1. 项目的基础开发框架搭建
2. 确定了 css 和 ui 方案
3. 确定了主题切换的方案

今天我们来搞一下页面的整体布局，主要包含以下几个内容

1. 页面的整体布局设计
2. 导航栏的开发
3. 侧边栏的开发

源码地址

每一章的完整代码都在这个仓里面

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 里，目前为止我们已经完成了页面的布局设计与开发，下一章我们来设计一下文章内容列表