การจัดการ Styling ใน VitePress

การปรับแต่ง CSS พื้นฐาน

VitePress มีวิธีการปรับแต่ง CSS หลายรูปแบบ ทั้งการเขียนโดยตรงและการใช้ไฟล์ภายนอก

การเพิ่ม CSS โดยตรง

// .vitepress/theme/custom.css
:root {
	--vp-c-brand: #646cff;
	--vp-c-brand-light: #747bff;
}

การ Import CSS ไฟล์

// .vitepress/theme/index.ts
import "./custom.css";

Theme Customization

การปรับแต่งธีมใน VitePress ทําได้ผ่าน Theme Config และการกําหนดค่าสี

ตัวอย่างการกําหนดค่าสีหลัก

// .vitepress/config.ts
export default {
  themeConfig: {
    colors: {
      primary: "#646cff",
      secondary: "#747bff",
    },
  },
};

Component Styling

การจัดการ Style ของ Component สามารถทําได้หลายวิธี ทั้งแบบ Scoped CSS และ CSS Modules

การใช้ Scoped CSS

<template>
  <div class="custom-component">
    <h1>Hello VitePress</h1>
  </div>
</template>

<style scoped>
.custom-component {
  padding: 20px;
  background: var(--vp-c-bg);
}
</style>

Layout Customization

การปรับแต่ง Layout ทําได้โดยการแก้ไข Layout Components และการใช้ CSS Grid/Flexbox

ตัวอย่างการปรับแต่ง Layout

<template>
  <div class="custom-layout">
    <slot name="header" />
    <main>
      <slot />
    </main>
    <slot name="footer" />
  </div>
</template>

<style>
.custom-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
</style>

Responsive Design

การทํา Responsive Design ใน VitePress ใช้ Media Queries และ CSS Variables

ตัวอย่าง Media Queries

/* .vitepress/theme/custom.css */
@media (max-width: 768px) {
  :root {
    --vp-sidebar-width: 100%;
  }
}

CSS Variables

VitePress มี CSS Variables มาให้ใช้งานมากมาย สามารถ Override ได้ตามต้องการ

ตัวอย่าง CSS Variables ที่สําคัญ

:root {
  --vp-c-bg: #ffffff;
  --vp-c-text: #213547;
  --vp-layout-max-width: 1440px;
  --vp-sidebar-width: 272px;
  --vp-nav-height: 64px;
}