這是我用 ChatGPT 幫我從一個我選定的基本顏色所產生的色票集。

我選的色票顏色：#2c387e

他幫我產生的色票集是這個：

import type { Config } from "tailwindcss";

const config: Config = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#e3e6f4",
          100: "#c0c8e8",
          200: "#9ca9db",
          300: "#788acc",
          400: "#5c6bc0",
          500: "#2c387e", // ( Primary)
          600: "#243072",
          700: "#1b285a",
          800: "#141d48",
          900: "#0a1035",
        },
        secondary: {
          50: "#fff8e1",
          100: "#ffecb3",
          200: "#ffe082",
          300: "#ffd54f",
          400: "#ffca28", // ( Secondary )
          500: "#ffc107",
          600: "#ffb300",
          700: "#ffa000",
          800: "#ff8f00",
          900: "#ff6f00",
        },
        tertiary: {
          50: "#e0f2f1",
          100: "#b2dfdb",
          200: "#80cbc4",
          300: "#4db6ac",
          400: "#26a69a", // ( Teritary )
          500: "#009688",
          600: "#00897b",
          700: "#00796b",
          800: "#00695c",
          900: "#004d40",
        },
        neutral: {
          50: "#fafafa",
          100: "#f5f5f5",
          200: "#eeeeee",
          300: "#e0e0e0", // (Neutral)
          400: "#bdbdbd",
          500: "#9e9e9e",
          600: "#757575",
          700: "#616161",
          800: "#424242",
          900: "#212121",
        },
        "nuetral-variant": {
          50: "#f5f7f7",
          100: "#e4ebec",
          200: "#d3dfe0",
          300: "#c2d3d4",
          400: "#b3c7c8",
          500: "#a4babe",
          600: "#92a4a8",
          700: "#7e8e91",
          800: "#6a787b",
          900: "#536063",
        },
      },
    },
  },
  plugins: [],
};
export default config;

然後再 global.css 中設定一下全域的 css 變數：

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  body {
    @apply bg-neutral-900 text-primary-50;
    font-family: var(--font-jetbrains-mono), var(--font-noto-sans);
  }

  .markdown-body {
    @apply bg-neutral-900 text-neutral-50 !important;
    font-family: var(--font-jetbrains-mono), var(--font-noto-sans) !important;
  }

  .markdown-body h1 {
    @apply text-neutral-200 !important;
  }

  .markdown-body a {
    @apply text-secondary-300 hover:underline !important;
  }

  .markdown-body pre {
    @apply bg-neutral-800 text-neutral-50 p-4 rounded-md !important;
  }
}

接下來是文章的簡單排版設定了，這邊也先不抽成 component 了，先一次寫下去：

import { client } from "@/app/sanity/lib/client";
import { notFound } from "next/navigation";
import { BLOG_POSTS_BY_SLUG_QUERY } from "@/app/sanity/lib/queries";
import SanityImage from "@/app/components/SanityImage";
import MarkdownBlock from "@/app/components/MarkdownBlock";
import { FaCalculator } from "react-icons/fa";

export default async function Post({ params }: { params: { slug: string } }) {
  // 取得 slug ( 也就是 "centos-離線安裝-docker-ce" )
  const { slug } = params;

  const post = await client.fetch(BLOG_POSTS_BY_SLUG_QUERY, {
    slug: decodeURI(slug),
  });

  if (!post) {
    // 如果沒有查詢到文章則顯示 404 頁面的內容
    return notFound();
  }

  return (
    <div className="post max-w-screen-md p-5">
      <div className="flex text-xs">
        <div className="flex items-center px-2 py-1 border-primary-300 text-primary-300 border rounded-3xl">
          <FaCalculator className="mr-1" />
          <span>{post.publishedAt}</span>
        </div>
        <div className="flex items-center uppercase">
          {post.tags?.map((tag) => (
            <span
              className="mx-1 px-2 py-1 bg-primary-500 rounded-3xl"
              key={tag}
            >
              {tag}
            </span>
          ))}
        </div>
      </div>
      <h1 className="text-3xl tracking-wider font-bold text-neutral-200 mt-3">
        {post.title}
      </h1>
      <h3 className="text-lg font-light mt-1">{post.subtitle}</h3>
      <div className="relative w-full max-w-[770px] aspect-[770/480] mt-5">
        <SanityImage
          source={post.heroImage}
          alt={`${post.title} banner image`}
          fill
          sizes="(max-width: 770px) 50vw, 770px" // 這裡是設定圖片的大小
        />
      </div>
      <div className="mt-4">
        <MarkdownBlock content={post.content} />
      </div>
    </div>
  );
}