|
1 | | -# Welcome to [Slidev](https://github.com/slidevjs/slidev)! |
| 1 | +# Presentations Template |
2 | 2 |
|
3 | | -To start the slide show: |
| 3 | +A ready-to-use template for creating beautiful, interactive presentations using [Slidev](https://sli.dev/). This template includes Vue components, pre-configured deployment settings, and a structured project layout to help you quickly build and deploy professional presentations. Learn more about Slidev at the [documentation](https://sli.dev/). |
4 | 4 |
|
5 | | -- `pnpm install` |
6 | | -- `pnpm dev` |
7 | | -- visit <http://localhost:3030> |
| 5 | +## Features |
8 | 6 |
|
9 | | -Edit the [slides.md](./slides.md) to see the changes. |
| 7 | +- ✨ **Slidev Integration** - Powerful slide deck framework with markdown support |
| 8 | +- 🎨 **Multiple Themes** - Pre-configured with Seriph and Default themes |
| 9 | +- 🧩 **Vue Components** - Reusable interactive components (e.g., Counter) |
| 10 | +- 📁 **Organized Structure** - Clean separation of slides, components, and snippets |
| 11 | +- 🚀 **Deploy Ready** - Pre-configured for Netlify and Vercel deployment |
| 12 | +- 📝 **Slide Splitting** - Split presentations across multiple markdown files |
10 | 13 |
|
11 | | -Learn more about Slidev at the [documentation](https://sli.dev/). |
| 14 | +## Quick Start |
| 15 | + |
| 16 | +Install dependencies: |
| 17 | + |
| 18 | +```bash |
| 19 | +pnpm install |
| 20 | +``` |
| 21 | + |
| 22 | +Start the development server: |
| 23 | + |
| 24 | +```bash |
| 25 | +pnpm dev |
| 26 | +``` |
| 27 | + |
| 28 | +Visit <http://localhost:3030> to view your presentation. |
| 29 | + |
| 30 | +Edit [slides.md](./slides.md) to customize your content. Changes will hot-reload automatically. |
| 31 | + |
| 32 | +## Project Structure |
| 33 | + |
| 34 | +``` |
| 35 | +. |
| 36 | +├── slides.md # Main presentation file |
| 37 | +├── components/ # Vue components for slides |
| 38 | +│ └── Counter.vue # Example interactive component |
| 39 | +├── pages/ # Additional slide pages |
| 40 | +│ └── imported-slides.md # Example of split slides |
| 41 | +├── snippets/ # Code snippets and external files |
| 42 | +│ └── external.ts # Example TypeScript file |
| 43 | +├── netlify.toml # Netlify deployment configuration |
| 44 | +└── vercel.json # Vercel deployment configuration |
| 45 | +``` |
| 46 | + |
| 47 | +## Building for Production |
| 48 | + |
| 49 | +Build static files for deployment: |
| 50 | + |
| 51 | +```bash |
| 52 | +pnpm build |
| 53 | +``` |
| 54 | + |
| 55 | +The built files will be output to the `dist/` directory. |
| 56 | + |
| 57 | +## Deployment |
| 58 | + |
| 59 | +### Netlify |
| 60 | + |
| 61 | +This template includes a [netlify.toml](./netlify.toml) configuration. Simply connect your repository to Netlify, and it will automatically build and deploy your presentation. |
| 62 | + |
| 63 | +### Vercel |
| 64 | + |
| 65 | +This template includes a [vercel.json](./vercel.json) configuration. Connect your repository to Vercel for automatic deployments. |
| 66 | + |
| 67 | +### Manual Deployment |
| 68 | + |
| 69 | +After running `pnpm build`, deploy the `dist/` directory to any static hosting service. |
| 70 | + |
| 71 | +## Customization |
| 72 | + |
| 73 | +### Changing Themes |
| 74 | + |
| 75 | +Edit the theme property in the frontmatter of [slides.md](./slides.md): |
| 76 | + |
| 77 | +```yaml |
| 78 | +--- |
| 79 | +theme: seriph # or 'default', or install other themes |
| 80 | +--- |
| 81 | +``` |
| 82 | + |
| 83 | +### Adding Components |
| 84 | + |
| 85 | +Place Vue components in the `components/` directory. They will be automatically available in your slides without imports. |
| 86 | + |
| 87 | +### Splitting Slides |
| 88 | + |
| 89 | +Use the `src` attribute to import slides from other files: |
| 90 | + |
| 91 | +```markdown |
| 92 | +--- |
| 93 | +src: ./pages/my-slides.md |
| 94 | +--- |
| 95 | +``` |
| 96 | + |
| 97 | +## License |
| 98 | + |
| 99 | +This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. |
0 commit comments