携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

这篇文章来讲解如何实现Layout布局，采用上中下的布局。

上方就是导航区域，中间是内容区域，下方是底部区域。

整个系统使用蚂蚁团队开源的 antd design UI库

我们先安装下 antd design

// 安装
yarn add antd

// 引入样式
import 'antd/dist/antd.css';

组件库

首先在根目录创建components文件夹，这里来放各个组件

Layout

在compoents 文件夹新建layout文件夹，在layout文件夹新建index.tsx

mkdir components
cd components
mkdir layout 
touch index.tsx

Navbar

在compoents 文件夹新建Navbar文件夹，在Navbar文件夹新建index.tsx，同时创建index.module.scss

cd components
mkdir Navbar
cd Navbar
touch index.tsx
touch index.module.scss

Footer

在compoents 文件夹新建Footer文件夹，在Footer文件夹新建index.tsx，同时创建index.module.scss

cd components
mkdir Footer
cd Footer
touch index.tsx
touch index.module.scss

这样先把Layout，Navbar, Footer的架子搭建起来。

然后开始写 Layout的布局

在 layout/index.tsx中写入, 中间的内容区域，由 props的children来填充，这样的话，就实现了上中下的布局

import type { NextPage } from 'next';
import Navbar from 'components/Navbar';
import Footer from 'components/Footer';


const Layout: NextPage = ({ children }) => {
    return (
        <div>
            <Navbar />
            <main>{children}</main>
            <Footer />
        </div>
    )
}

export default Layout;

写好上面代码以后，需要再入口文件引入 layout

在 _app.tsx中引入 layout

import Layout from 'components/layout'
import { NextPage } from 'next';


return (
        <Layout>
          <Component />
        </Layout>
      );

Navbar

接下来来开发上部导航区域

先看下要实现的效果图，如下：

这里采用 flex 布局

先把博客系统的名称写下,在Navbar/index.tsx文件下

<div className={styles.navbar}>
      <section className={styles.logoArea}>BLOG</section>
</div>

然后开始写标签，这几个标签，采用配置的方式，这里我们再 Navbar文件夹下新建 config.ts 来存放这几个导航数据

export const navs: any[] = [
    {
      label: '首页',
      value: '/',
    },
    {
      label: '咨询',
      value: '/info',
    },
    {
      label: '标签',
      value: '/tag',
    },
  ];

在Navbar/index.tsx拿到config中的导航数据，然后遍历渲染出来

同时引入 next提供的link，来进行路由跳转

import Link from 'next/link';
import { navs } from './config';


<section className={styles.linkArea}>
        {navs?.map((nav) => (
          <Link key={nav?.label} href={nav?.value}>
            <a className={pathname === nav?.value ? styles.active : ''}>
              {nav?.label}
            </a>
          </Link>
        ))}
      </section>

最后再添加两个写文章和登录的按钮

<section className={styles.operationArea}>
        <Button onClick={handleGotoEditorPage}>写文章</Button>
        <Button type="primary" onClick={handleLogin}>
            登录
        </Button>
</section>

最后整体的样式文件如下：

.navbar {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
  
    .logoArea {
      font-size: 30px;
      font-weight: bolder;
      margin-right: 60px;
    }
  
    .linkArea {
      a {
        font-size: 18px;
        padding: 0 20px;
        color: #515767;
      }
  
      .active {
        color: #1e80ff;
      }
    }
  
    .operationArea {
      margin-left: 150px;
  
      button {
        margin-right: 20px;
      }
    }
  }

这样导航部分的初始页面就完成了

Footer

接下来简单写下Footer部分

在 components/Footer/index.tsx中写入如下代码：

import type { NextPage } from 'next';
import styles from './index.module.scss';

const Footer: NextPage = () => {
  return (
    <div className={styles.footer}>
      <p>博客系统</p>
    </div>
  );
};

export default Footer;

.footer {
    text-align: center;
    color: #72777b;
    padding: 20px;
  }

这样简单的footer部分就完成了

最后看下这样写下来的效果

next.js搭建博客系统-02-实现Layout布局

组件库

Layout

Navbar

Footer

Navbar

Footer