mcpField
S
slidev-styling

slidev-styling

github.com/yoanbernabeu文档处理41308 次安装39 周前更新
代码仓库

关于 slidev-styling

slidev-styling 是面向 Slidev 演示文稿作者的样式指南，涵盖 UnoCSS、CSS 和逐页样式，帮助定制视觉并构建响应式布局与动画。

主要功能

  1. 01UnoCSS 实用类与自定义快捷方式
  2. 02自定义颜色与字体
  3. 03全局及逐页作用域样式
  4. 04暗色模式与动画
  5. 05响应式布局工具

适用场景

  1. 01统一演示文稿的颜色和排版
  2. 02为单页添加专属样式
  3. 03创建可复用的卡片和按钮样式
  4. 04制作响应式幻灯片布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-styling

安装后在 Claude Code 中输入/slidev-styling确认已加载。

详细介绍

Slidev 中的样式

本技能涵盖 Slidev 的所有样式选项，包括 UnoCSS 工具类、自定义 CSS、作用域样式和高级样式技巧。

何时使用此技能

  • 自定义幻灯片外观
  • 添加自定义颜色和字体排版
  • 创建可复用的样式模式
  • 实现动画
  • 构建响应式布局

UnoCSS 基础

Slidev 使用 UnoCSS，这是一种类似于 Tailwind CSS 的原子化 CSS 框架。

内联类
<div class="text-xl font-bold text-blue-500">
  Styled text
</div>
常用工具类

字体排版：

<span class="text-sm">Small</span>
<span class="text-base">Base</span>
<span class="text-lg">Large</span>
<span class="text-xl">Extra Large</span>
<span class="text-2xl">2XL</span>

<span class="font-bold">Bold</span>
<span class="font-semibold">Semibold</span>
<span class="italic">Italic</span>
<span class="underline">Underlined</span>

颜色：

<span class="text-red-500">Red text</span>
<span class="text-blue-600">Blue text</span>
<span class="bg-green-100">Green background</span>
<span class="bg-yellow-200 text-yellow-800">Yellow combo</span>

间距：

<div class="p-4">Padding 4</div>
<div class="m-2">Margin 2</div>
<div class="px-4 py-2">Horizontal/Vertical padding</div>
<div class="mt-8">Margin top 8</div>

布局：

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

颜色系统

默认颜色

<span class="text-gray-100">100</span>
<span class="text-gray-500">500</span>
<span class="text-gray-900">900</span>


<span class="text-red-500">Red</span>
<span class="text-orange-500">Orange</span>
<span class="text-yellow-500">Yellow</span>
<span class="text-green-500">Green</span>
<span class="text-blue-500">Blue</span>
<span class="text-purple-500">Purple</span>
<span class="text-pink-500">Pink</span>
自定义颜色

在 uno.config.ts 中：

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      brand: {
        DEFAULT: '#5d8392',
        light: '#8bb4c4',
        dark: '#3d5a65',
      },
      accent: '#f59e0b',
    },
  },
})

用法：

<span class="text-brand">Brand color</span>
<span class="bg-brand-light">Light brand background</span>
<span class="text-accent">Accent color</span>

字体排版

字号
<p class="text-xs">Extra small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">XL (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-3xl">3XL (30px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-5xl">5XL (48px)</p>
自定义字体

在 frontmatter 中：

---
fonts:
  sans: 'Inter'
  serif: 'Merriweather'
  mono: 'Fira Code'
---

在 uno.config.ts 中：

export default defineConfig({
  theme: {
    fontFamily: {
      display: ['Inter', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
  },
})

用法：

<h1 class="font-display">Display heading</h1>
<p class="font-body">Body text</p>
Google Fonts
---
fonts:
  sans: 'Roboto'
  serif: 'Playfair Display'
  mono: 'JetBrains Mono'
  provider: 'google'
---

全局样式

styles/index.css
/* styles/index.css */

/* Root variables */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-size-base: 16px;
}

/* Global typography */
.slidev-layout h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.slidev-layout h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* Custom utility classes */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

.shadow-brand {
  box-shadow: 0 4px 14px 0 rgba(93, 131, 146, 0.39);
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

作用域样式

单页样式

在幻灯片末尾添加 <style>：

# My Styled Slide

<div class="custom-box">
  Special content
</div>

<style>
.custom-box {
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  color: white;
}

h1 {
  color: #667eea;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>
作用域样式与全局样式

<style> 中的样式会自动限定在当前幻灯片内。

要在幻灯片中使用全局样式：

<style>
:global(.slidev-layout) {
  /* Affects all slides */
}
</style>

布局工具类

Flexbox
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex items-center justify-center h-full">
  <p>Centered content</p>
</div>

<div class="flex flex-wrap gap-2">
  <span class="badge">Tag 1</span>
  <span class="badge">Tag 2</span>
</div>
Grid
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  
</div>
定位
<div class="relative">
  <div class="absolute top-0 right-0">
    Top right corner
  </div>
</div>

<div class="fixed bottom-4 right-4">
  Fixed position
</div>

自定义快捷方式

在 uno.config.ts 中
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
    'btn-outline': 'px-4 py-2 rounded border border-blue-500 text-blue-500 hover:bg-blue-50',
    'card': 'p-4 rounded-lg shadow-md bg-white dark:bg-gray-800',
    'section-title': 'text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4',
    'badge': 'px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800',
  },
})

用法：

<button class="btn">Click me</button>
<div class="card">Card content</div>
<h2 class="section-title">Section</h2>

深色模式样式

深色模式类
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Adapts to dark mode
</div>
在自定义 CSS 中
.my-component {
  background: #ffffff;
  color: #1a1a1a;
}

.dark .my-component {
  background: #1a1a1a;
  color: #ffffff;
}

动画

过渡工具类
<div class="transition-all duration-300 hover:scale-110">
  Scales on hover
</div>

<div class="transition-colors duration-200 hover:bg-blue-500">
  Color transition
</div>
自定义动画
/* styles/index.css */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}
使用 v-motion 制作动画
<div
  v-motion
  :initial="{ opacity: 0, y: 50 }"
  :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
>
  Animated content
</div>

响应式设计

断点
<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  Responsive grid
</div>

<div class="hidden lg:block">
  Only visible on large screens
</div>
默认断点
前缀宽度
sm640px
md768px
lg1024px
xl1280px
2xl1536px

常见模式

卡片组件
<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
  <h3 class="text-lg font-semibold mb-2">Card Title</h3>
  <p class="text-gray-600 dark:text-gray-300">Card content</p>
</div>
徽标
<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
  Active
</span>
提示框
<div class="p-4 rounded-lg bg-yellow-50 border-l-4 border-yellow-400">
  <p class="text-yellow-700">Warning message</p>
</div>
代码注释
<div class="relative">

```js
const x = 1 // [!code highlight]
重要行！
```

Best Practices

1. Use Utilities First

<div class="p-4 bg-blue-500 text-white rounded">
  Good
</div>
2. 为重复模式创建快捷方式
shortcuts: {
  'btn-primary': 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
}
3. 保持一致性

使用相同的间距比例：

  • 始终使用 gap-4，不要混用 gap-3 和 gap-5
4. 支持深色模式

始终为自定义样式提供深色模式变体。

5. 测试导出

某些 CSS 功能无法很好地导出为 PDF：

  • 复杂渐变
  • 某些滤镜
  • 动画（会变成静态效果）

输出格式

设置幻灯片样式时：

# [Slide Title]

<div class="[utility classes]">
  Content
</div>

<style>
/* Scoped styles if needed */
.custom-class {
  property: value;
}
</style>

样式决策：

  • 颜色：[主色、辅色]
  • 字体排版：[字体选择]
  • 间距：[统一比例]
  • 自定义快捷方式：[列表]

修改的文件：

  • uno.config.ts（快捷方式、主题）
  • styles/index.css（全局样式）

评论

支持 Markdown