Slidev

Ρυθμίστε το Windi CSS

Περιβάλλον: node
Αυτή η λειτουργία ρύθμισης θα εκτελεστεί μόνο σε περιβάλλον Node.js, μπορείτε να έχετε πρόσβαση στο API του Node.

WARNING

Από την έκδοση v0.42.0 του Slidev, το UnoCSS έγινε το προεπιλεγμένο framework CSS για το Slidev.

Μπορείτε ακόμη να χρησιμοποιήσετε το Windi CSS, θέτοντας την επιλογή css: windicss στο frontmatter.

---
css: windicss
---

Το markdown υποστηρίζει εκ φύσεως ενσωματωμένες επισημάνσεις HTML. Επομένως, μπορείτε να διαμορφώσετε το περιεχόμενό σας με τον τρόπο που θέλετε.

Για παράδειγμα:

<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Όνομα

- Στοιχείο 1
- Στοιχείο 2

</div>

Η Λειτουργία Attributify του Windi CSS v3.0 είναι ενεργοποιημένη από προεπιλογή.

Ρυθμίσεις

Για να ρυθμίσετε το Windi CSS, δημιουργήστε setup/windicss.ts με το εξής περιεχόμενο για να επεκτείνετε τις ενσωματωμένες ρυθμίσεις

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// επεκτείνοντας τις ενσωματωμένες ρυθμίσεις του windicss
export default defineWindiSetup(() => ({
  shortcuts: {
    // ρυθμίστε το προεπιλεγμένο φόντο
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
  theme: {
    extend: {
      // οι γραμματοσειρές μπορούν να αντικατασταθούν εδώ, θυμηθείτε να ενημερώσετε τους συνδέσμους των γραμματοσειρών στο `index.html`
      fontFamily: {
        sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
        mono: '"Fira Code", monospace',
      },
    },
  },
}))

Μάθετε περισσότερα για τις ρυθμίσεις Windi CSS