Skip to content

Getting Started

0phoff edited this page Nov 16, 2023 · 8 revisions

TLDR
Create a slidev presentation and set theme: eavise in your frontmatter.

[01] Get NodeJS and (P)NPM

In order to create slides with Slidev, you need to install NodeJS on your machine.

Each slide deck you create will basically be its own javascript project. This means that each presentation will live in a separate folder, each with its own package.json file and necessary dependencies. The nice thing about this is that for each presentation you create, you get to install the latest version of slidev, the slidev-eavise-theme, etc. without breaking previous presentations!

One downside of this approach is that each presentation will download a separate instance of all the dependencies (node_modules folder), taking up a lot of valuable space on your computer. We thus recommend installing pnpm, as this package manager will only download the various versions of a package once and then symlinks the correct folder whenever you create a new presentation.

# After installing NodeJS and NPM
npm install -g pnpm

NOTE
If you do not want to install pnpm, feel free to replace pnpm by npm in the remainder of this guide.

[02] Start a Slidev deck

Slidev provides a handy starter template to get started.

  • Run pnpm create slidev (or npm init slidev) in your terminal, answer the questions and it will create a folder with all the necessary files.
  • When it asks to "Install and start it now?", enter "No" as it will install unnecessary packages.
  • Open the newly created folder with your favorite editor.
  • Edit package.json:
    // Optionally enter a specific version of the theme
    + "slidev-theme-eavise": "latest"
    - "@slidev/theme-default": "latest",
    - "@slidev/theme-seriph": "latest"
  • Replace the content of slides.md
    ---
    theme: eavise
    author: <your name>
    ---
    
    # Presentation Title
    ## Subtitle
    
    ---
    
    # Slide
    This is the first slide of your presentation
  • [OPTIONAL] Remove the pages and components folders.
  • [OPTIONAL] Remove the netlify.toml and vercel.json files.
  • Install the necessary packages by running pnpm install
  • Start the presentation server with pnpm run dev

[03] Create your presentation

You are now ready to create your presentation by editing the slides.md file.
Refer to the Slidev documentation for the specifics about the syntax for writing your slides. Optionally, you can configure this theme to your likings.

This wiki contains additional information about the various features of the eavise theme.
The layouts section shows all the pre-made layouts you can choose from. Unless you override it, all you slides will use the default layout. The only exception to this rule is that the first slide of a presentation will always be created with the cover layout. All the other layouts are there for your convenience and require you to actively enable them by setting layout: <name> in your slide frontmatter.
The components section shows a few Vue components we already made for you. Feel free to use them in your presentation by entering <CamelCasedComponentName />.
Finally, the css section shows some predefined css classes and variables which you can use to more easily style your presentation.