Slidev快速入门

1.做什么用的❓

• 用于网页端实现幻灯片效果
• 可用于自我介绍,拓展性较强

2.优势❓

• 有很多功能丰富的、通用的、所见即所得的幻灯片制作工具
• 采用markDown语法编写内容
• 学习成本低，易学
• 可定制主题,对开发者友好
• 支持录制、可移植性、可配置性

3. 介绍❓

官网:https://cn.sli.dev/guide/
通过它可实现炫酷的幻灯片效果网站

3.1、功能

3.2、技术栈

4.实操使用💪

这里我会编写一个简单的自我介绍幻灯片效果网站，跟着我一块吧<(￣︶￣)↗[GO!]~

4.1创建项目

我这里使用npm进行创建使用
Tip:保证npm版本号高于v14，这里我使用的版本号是v16.14.0

npm init slidev@latest

跟着指示一步一步往下走

4.2运行项目

npm run dev

运行即可打开一个幻灯片网站，这样表示创建成功!!!

根据官网的文档我们开始修改内容实现自己的内容吧~

4.3实现自我介绍

这里我简单介绍一下简单的用法

• 每个扉页信息都以分隔符 — 开始，以另一个分隔符 — 结束(通过该分隔符表示一页)
• 完全兼容markdown语法，例如代码块：
  
• 内容修改都在根目录下slides.md文件夹下
  进行编写我的内容:

---
# try also 'default' to start simple
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://source.unsplash.com/collection/94734566/1920x1080
# apply any windi css classes to the current slide
class: 'text-center'
# https://sli.dev/custom/highlighters.html
highlighter: shiki
# show line numbers in code blocks
lineNumbers: false
# some information about the slides, markdown enabled
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev](https://sli.dev)
# persist drawings in exports and build
drawings:
  persist: false
# page transition
transition: slide-left
# use UnoCSS
css: unocss
---

# 欢迎来到'碰磕'

welcome to pengke Study

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
    开始进入 <carbon:arrow-right class="inline"/>
  </span>
</div>

<div class="abs-br m-6 flex gap-2">
  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
    <carbon:edit />
  </button>
  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
    class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
    <carbon-logo-github />
  </a>
</div>

<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->

---
transition: fade-out
---

# 第一篇:输出语句
- 📝 **JavaScript**  
``javascript
console.log('Hello, World!')
``
- 🎨 **Java**  
``java
system.out.println('Hello, World!')
``
- 🧑‍💻 **Python**  
``python
print('Hello, World!')
``
上方其实是3个点，由于博客会自动识别代码块导致我用两个点进行替换~

<br>
<br>
<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>
---
transition: slide-up
---

# 关于我

- CSDN:[点击前往](https://blog.csdn.net/m_xiaozhilei)
- 个人博客:[点击前往](https://blog.csdn.net/m_xiaozhilei)
- Git:[点击前往](https://blog.csdn.net/m_xiaozhilei)

### 自我介绍

|     |     |
| --- | --- |
| <kbd>兴趣</kbd> / <kbd>爱好</kbd>| like Music  love Study |
| <kbd>技术栈</kbd> | 探索中.... |
| <kbd>学习交流群</kbd> | QQ:796542949 |

> 总结:学无止境~💪
<!-- https://sli.dev/guide/animations.html#click-animations -->
<img
  v-click
  class="absolute -bottom-9 -left-7 w-80 opacity-50"
  src="https://sli.dev/assets/arrow-bottom-left.svg"
/>
<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">加油!</p>

---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---

编写以上内容即可实现一个3页的幻灯片网站

4.4效果图

第一页👇

键盘按↓即可前往下一页👇

继续下一页👇

这样就基本会用了,更多用法请参考官网~over👍