Slidev
1.做什么用的❓2.优势❓3. 介绍❓3.1、功能3.2、技术栈
4.实操使用💪4.1创建项目4.2运行项目4.3实现自我介绍4.4效果图
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
开始进入
---
transition: fade-out
---
# 第一篇:输出语句
- 📝 **JavaScript**
``javascript
console.log('Hello, World!')
``
- 🎨 **Java**
``java
system.out.println('Hello, World!')
``
- 🧑💻 **Python**
``python
print('Hello, World!')
``
上方其实是3个点，由于博客会自动识别代码块导致我用两个点进行替换~
---
transition: slide-up
---
# 关于我
- CSDN:[点击前往](https://blog.csdn.net/m_xiaozhilei)
- 个人博客:[点击前往](https://blog.csdn.net/m_xiaozhilei)
- Git:[点击前往](https://blog.csdn.net/m_xiaozhilei)
### 自我介绍
| | |
| --- | --- |
| 兴趣 / 爱好| like Music love Study |
| 技术栈 | 探索中.... |
| 学习交流群 | QQ:796542949 |
> 总结:学无止境~💪
v-click class="absolute -bottom-9 -left-7 w-80 opacity-50" src="https://sli.dev/assets/arrow-bottom-left.svg" /> 加油!
---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---
编写以上内容即可实现一个3页的幻灯片网站
4.4效果图
第一页👇 键盘按↓即可前往下一页👇 继续下一页👇
这样就基本会用了,更多用法请参考官网~over👍