全站樣式切版

2022 iThome 鐵人賽

DAY 11

Modern Web

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 11 篇

全站樣式切版 - Modern Next.js Blog 系列 #11

14th鐵人賽 next.js tailwind css blog nextjs

EasonChang

2022-09-26 23:32:03

1583 瀏覽

分享至

TL;DR

這是「Modern Blog 30 天」系列第 11 篇文章，上一篇我們在 Next.js blog 搭配 Tailwind CSS 加入了「暗黑模式 Dark mode」。這篇讓我們使用 Tailwind CSS 開始全站切版，美化樣式！

結果截圖如下：

Home page

Home page in dark mode

Post page

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day10-darkmode...day11-basic-site-ui

我的個人網站裡也有此系列的好讀版，程式碼更易讀、也支援深色模式和側邊目錄，歡迎前往閱讀！

安裝 clsx，方便根據不同條件組合 className

我們主要使用各種現成 Tailwind CSS 的 className 來切版。

在許多元件裡，我們都會需要根據不同條件（prop 或 state 等），給定不同 className 組合。

這裡我們使用 clsx 這個套件幫助我們寫出簡單易讀又強大的 className 組合邏輯。

使用 pnpm 來安裝它：

pnpm add clsx

@tailwindcss/typography，開箱即用的文字樣式

Tailwind CSS 優點是方便客製化、修改迅速。但在一開始要針對基本的標題、內文、列表設定好看的樣式時，需要加入大量 className，font-size、font-weight、letter-spacing 等等都要明確指定，非常費工。

好在 Tailwind CSS 官方提供了數個 Plugins，其中包含了 @tailwindcss/typography，安裝之後會提供 prose 系列的 className，一個 className 就能指定完一系列好看的文字樣式。

安裝 @tailwindcss/typography

輸入以下指令安裝套件：

pnpm add -D @tailwindcss/typography

並修改 /tailwind.config.js，將它新增到 plugins 陣列中：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  // 修改下面這行
  plugins: [require('@tailwindcss/typography')],
};

這樣就完成安裝了，文章稍後我們會實際使用到它。

@svgr/webpack，讓 Next.js 支援 svg 圖檔 import

切版過程我們會用到 svg 圖檔，但要能在 Next.js 的 JSX/TSX 裡直接 import svg 圖檔，方便對圖檔做客製化的話，需要做些設定才能實現。

這裡我們參照這邊文章來實現：
Importing SVGs to Next.js - DEV Community ?‍??‍?

安裝 @svgr/webpack

輸入指令來安裝 @svgr/webpack：

pnpm add -D @svgr/webpack

修改 `/next.config.mjs`

修改 /next.config.mjs，加入客製 webpack 設定，使用 @svgr/webpack 來支援在 JS 裡 import svg 圖檔：

import { withContentlayer } from 'next-contentlayer';

/** @type {import('next').NextConfig} */
const nextConfig = withContentlayer({
  reactStrictMode: true,
  swcMinify: true,
  // 加入以下 custom webpack 設定
  // Support svg import
  // ref: https://dev.to/dolearning/importing-svgs-to-next-js-nna
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
  // 加入以上 custom webpack 設定
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  typescript: {
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    ignoreBuildErrors: true,
  },
});

export default nextConfig;

這裡我們會新增許多 component 和做不少修改，因為篇幅關係就不全部貼上來了，這些改動從這個 git commit 看會比較清楚：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/commit/61d2999b326d1dcefcc3ecb64108946ca78062b5

我們這個部落格的樣式主要是參照 timlrx/tailwind-nextjs-starter-blog 專案下去修改的，比起原專案多調整了一些配色、component 結構，和支援 TypeScript。