使用Nextjs+Tailwind+Contentlayer搭建博客

本文章首发地址 使用 Nextjs+Tailwind+Contentlayer 搭建博客

Nextjs 是一个基于 React 的服务端渲染框架.
Tailwind 无需书写 CSS,即可快速构建美观的网站的组件库.
Contentlayer 将内容转换成 JSON 并导入应用程序.

前期准备

初始化项目

bash 复制代码
# 使用命令行
npx create-next-app@latest

Nextjs应用页面层次如下

  • layout.js
  • template.js
  • error.js (React error boundary)
  • loading.js (React suspense boundary)
  • not-found.js (React error boundary)
  • page.js

对应React渲染路由如下

嵌套路由只需要嵌套父应用里面即可

新建博客页面

ts 复制代码
type BlogSlugProps = {
  params: {
    slug: string
  }
}

export default function BlogSlug({ params }: BlogSlugProps) {
  return (
    <section>
      {params.slug}
    </section>
  )
}

新建 MDX 文件

md 复制代码
---
title: 'template'
publishedAt: '2023-11-11'
summary: 'This is your first blog post.'
---

first blog

解析 MDX

使用Contentlayer来解析 mdx 文件,新建contentlayer.config.ts文件

安装以下依赖

sh 复制代码
pnpm add contentlayer next-contentlayer @tailwindcss/typography reading-time remark-gfm rehype-slug rehype-autolink-headings rehype-pretty-code
ts 复制代码
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import readingTime from 'reading-time'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: '**/*.mdx',
  contentType: 'mdx',
  // 定义入口字段
  fields: {
    title: {
      type: 'string',
      required: true,
    },
    summary: {
      type: 'string',
      required: true,
    },
    publishedAt: {
      type: 'string',
      required: true,
    },
  },
  // 定义额外出参
  computedFields: {
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath,
    },
    readingTime: {
      type: 'nested',
      resolve: (doc) => readingTime(doc.body.code),
    },
  },
}))

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [
        rehypePrettyCode,
        {
          // 代码主题类型 https://unpkg.com/browse/shiki@0.14.2/themes/
          theme: 'one-dark-pro',
          // To apply a custom background instead of inheriting the background from the theme
          keepBackground: false,
        },
      ],
      [
        rehypeAutolinkHeadings,
        {
          properties: {
            // 锚点类名
            className: ['anchor'],
          },
        },
      ],
    ],
  },
})

修改next.config.js文件

js 复制代码
const { withContentlayer } = require('next-contentlayer')

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = withContentlayer(nextConfig)

运行 pnpm dev 会发现项目中新增一个 .contentlayer 文件夹,打开后可以找到我们编写的 .mdx 文件已经被解析成对应的 .json 文件。由于 .contentlayer 该文件夹是运行的时候生成的,我们需要在提交代码的时候忽略掉,需要在 .gitignore 文件中增加 .contentlayer

tailwind.config.ts 文件需要配置 @tailwindcss/typography 插件

ts 复制代码
import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'

const config: Config = {
  darkMode: 'class',
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './content/**/*.mdx',
  ],
  theme: {
    extend: {},
  },
  plugins: [typography],
}
export default config

解析数据

我们打开 app/page.tsx 文件,修改代码如下

ts 复制代码
import { allBlogs } from 'contentlayer/generated'
import Link from 'next/link'

export default function Home() {
  return (
    <section>
      {allBlogs
        .sort((a, b) => {
          if (new Date(a.publishedAt) > new Date(b.publishedAt)) {
            return -1
          }
          return 1
        })
        .map((item) => (
          <Link
            key={item.slug}
            href={`/blog/${item.sulg}`}
            className='mb-5'
          >
            {item.title}
          </Link>
        ))}
    </section>
  )
}

页面展示如下

修改 app/blog/[slug]/page.tsx 文件

ts 复制代码
import { allBlogs } from 'contentlayer/generated'
import { notFound } from 'next/navigation'
import { useMDXComponent } from 'next-contentlayer/hooks'

type BlogSlugProps = {
  params: {
    slug: string
  }
}

export default function BlogSlug({ params }: BlogSlugProps) {
  const post = allBlogs.find((post) => post.slug === params.slug)
  if (!post) {
    notFound()
  }

  const Component = useMDXComponent(post.body.code)

  return (
    <section className="prose prose-stone">
      <Component />
    </section>
  )
}

页面展示如下

目前为止,整个博客结构体系搭建完成,可以愉快的编写 MDX 文件来写博客了

相关推荐
蚂蚁RichLab前端团队37 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20501 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js