FanMa 博客 包含了关于前端学习的一系列内容，涵盖了 HTML、CSS、JavaScript、TypeScript、React、Next.js 等全栈方面的学习笔记。博客以技术为核心，深入浅出地讲解了这些技术的基础概念、实际应用以及最佳实践，并且结合了博主的个人经验和实践经历进行分享，有助于读者更好地理解和掌握这些技术。如果你有前端学习的需求或者对这些技术感兴趣，那么 FanMa 博客 将是帮助你实现这些目标的绝佳资源。

使用 Next.js 完善全局布局
- 约 597 字

更新 components/layout.js

打开 components/layout.js 并用以下代码替换其内容，更改 FanMa 为您的实际名称：

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';

const name = 'FanMa';
export const siteTitle = 'This a FanMa blog.';

export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
      <link rel="icon" href="/favicon/favicon.ico" />
        <meta
          name="description"
          content="Welcome to Fanma's blog."
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
          
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={152}
              width={152}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

这是新功能：

  • meta 标签（如og:image），用于描述页面内容。
  • home 调整标题和图像大小的布尔属性。
  • home 如果是，底部的 ← Back to home 链接关闭。
  • 添加了图像 next/image 组件，这些图像预加载了priority属性。

设置头像

  • 1、在你的资产文件夹 public 里创建一个 images 文件夹.
  • 2、挑选一张帅气漂亮一点的照片做为你的头像，并将你的头像文件名命名为 profile.jpg 。
  • 3、把头像照片文件 profile.jpg 放到刚才创建的 images 文件夹里。

更新 pages/index.js

最后，让我们更新主页内容，打开 pages/index.js 并将其内容替换为：

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';

export default function Home() {
  return (
    <Layout home>
        <Head>
            <title>{siteTitle}</title>
        </Head>
        <main className={utilStyles.headingMd}>
            <h1>
                FanMa Blog's HomePage
            </h1>
            <p>
                This a FanMa Blog.
            </p>
            <p>This is a blog site created by FanMa using Next.js. It doesn't have any content yet, which means I will improve it slowly. I'm looking forward to new friends asking about my blog website, I'm really very happy.</p>
            <ul>
                <li>
                    <Link href="/posts/first-post">My first post.</Link>
                </li>
            </ul>
        </main>
    </Layout>
  );
}

在浏览器上刷新 http://localhost:3000 首页，可以看到您帅气漂亮的头像已经在首页已经显示出来了，在下面还有一些关于您的详细介绍。这就是我们想要的结果，我们的布局代码就已经完善好了。

← Back to home