网站 PPT 生成工具 Slidev

1
2
3
4
5
6
7

npm init slidev@latest  #创建PPT项目，根据向导进行操作：
                        #1、输入项目名称（文件夹名称，例如输入：myppt）
                        #2、询问是否启动服务（输入：y）
                        #3、选择资源服务器（选择：npm）
                        #4、之后自动拉取资源包，最后自动启动本地演示服务
                        #5、根据提示在浏览器输入网址浏览PPT网站：http://localhost:3030
                        #6、如果想退出服务按`Ctrl + C`组合键退出

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

npm i -g @slidev/cli    #安装 slidev 工具（方便以后操作）
slidev -v               #查看版本（用于验证是否安装成功）

####命令基本使用####
cd myppt                #进入之前创建的项目文件夹
slidev                  #启动本地演示服务（浏览网址：http://localhost:3030，按`Ctrl + C`组合键退出）
slidev build            #构建静态网站网页（存到 dist 文件夹，并且手工把 index.html 网页内容的 href="/assets/ 改为 href="/网站相对路径/assets/ 相对路径）
slidev build --base aaa #同上，并指定网站相对路径，无须手工改 index.html（例如主页为 https://o2ospring.github.io 则网站相对路径 https://o2ospring.github.io/aaa）
slidev export           #构建PPT为PDF文件（测试不成功，以后再补充！！！！）
                        #构建PPT事前需要安装依赖包：npm i -D playwright-chromium

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
# 主题方案选择（默认：'default'，更多：https://cn.sli.dev/themes/gallery.html）
theme: 'default'
# 配色方案选择（自动：'auto'，明亮：'light'，暗黑：'dark'）
colorSchema: 'auto'
# 幻灯片长宽比（默认：'16/9'）
aspectRatio: '16/9'
# 幻灯片的宽度（默认：空白，单位为 px）
canvasWidth: 980
# 幻灯片总标题（默认：空白->首页标题，否则这里指定总标题）
title: ''
# 总标题的后缀（默认：'%s'，加入后缀如：'%s-我的PPT'）
titleTemplate: '%s - Slidev'
# 幻灯片的信息（点击左下角导航栏中感叹号查看），可以使用 markdown 语法来书写
info: |
  ## 关于本 PPT
  这是我的第一个 PPT 演示，请关注我博客 [o2ospring's blog](https://o2ospring.github.io)!

# 语法高亮设置（目前可选 'prism' 或 'shiki' 方案）
highlighter: 'prism'
# 显示代码行号（显示行号：true，不显示行号：false）
lineNumbers: false

# 启用 monaco 编辑器，默认情况下仅在开发者（dev）模式中启用
#monaco: 'dev'
# 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
#download: true
# vue-router 模式，可以使用 'history' 或 'hash' 模式
#routerMode: 'history'
# 字体将从 Google 字体自动导入
# 了解更多：https://sli.dev/custom/fonts
#fonts:
#  sans: 'Roboto'
#  serif: 'Roboto Slab'
#  mono: 'Fira Code'
# 为所有幻灯片添加默认的 frontmatter
#defaults:
#  layout: 'default'

# 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'
# persist drawings in exports and build
drawings:
  persist: false
---

# 这是第一页标题

本行内容为首页内容（一般是幻灯片主题）....

<!-- 扩展文字按钮，一般用于在首页点击进入下一页 -->
<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>

<!-- 专门做的 github 链接小图标（在页面右下角） -->
<div class="abs-br m-6 flex gap-2">
  <a href="https://github.com/o2ospring" target="_blank" alt="GitHub"
    class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
    <carbon-logo-github />
  </a>
</div>

<!--
在页尾注释的文字是备注，不是注释！
-->

---

# 这是第二页标题

这是普通文本内容
* 这是无序列表
1. 这是有序列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- 左右分割布局格式，如下 -->

---
layout: two-cols
---

<template v-slot:default>

# 左半页标题

这是左半页内容
![插入图片1](https://o2ospring.github.io/android-chrome-192x192.png)

</template>
<template v-slot:right>

# 右半页标题

这是右半页内容
![插入图片2](https://o2ospring.github.io/about/o2ospring_blog.png)

</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- 代码块及扩展，其中{all|2|1-3|all}为扩展语法，表示分四步高亮显示：全部、第2行、第1-3行、全部代码，如下 -->

`` `json {all|2|1-3|all}
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}
`` `

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 针对行内容的显示顺序，如下 -->
<div v-click="3">111 此行内容最后显示</div>
<div v-click="2">222 此行内容次之显示</div>
<div v-click="2">222 此行内容次之显示</div>
<div v-click="1">333 此行内容最先显示</div>

<!-- 针对列表项的显示顺序，如下 -->
<v-clicks>

- 无序列表内容一；//点一步显示下一项列表（注意：列表动画扩展语法需要空行隔开↑）
- 无序列表内容二。//点一步显示下一项列表（注意：列表动画扩展语法需要空行隔开↓）

</v-clicks>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- 在文本中插入图标(小火箭)，如下 -->
<uim-rocket />

<!-- 改图标(小火箭)大小及颜色，如下 -->
<uim-rocket class="text-3xl text-red-400 mx-2" />

<!-- 改图标(小火箭)大小及颜色，并加入动效，如下 -->
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

<!-- 默认模式插入本地图片，如下 -->
![Remote Image](./img/android-chrome-192x192.png)

<!-- 指定相对位置及大小插入图片，如下 -->
<!-- `m-10`相对位置，`h-20`大小(50:貌似一比一)，`rounded shadow`表示圆角阴影 -->
<img src="./img/android-chrome-192x192.png" class="m-10 h-20 rounded shadow" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

######初次发布######
slidev build --base test_ppt #【构建】静态网站网页（存到 dist 文件夹）（注意：test_ppt 是 GitHub 的仓库名称，也就是主页相对路径）
cd dist                      #【进入】"dist"目录，为建git本地仓库准备  
git init                     #【创建+初始化】Git本地仓库  
git add .                    #【添加】工作区所有文件到【暂存区】  
git commit -m "first commit" #【提交】暂存区所有文件到【本地库】  
                             #【关联】github远程仓库(使用HTTP协议方式)(使用仓库默认名称:origin)  
git remote add origin https://github.com/o2ospring/test_ppt.git
git push -u origin master    #【推送】本地仓库到【远程仓库】(仓库默认名称:origin)（之后提示输入仓库托管网站账号和token密码）  
                             # -u 刚创建这个远程仓库时首次push才加此选项。  
######之后发布######
slidev build --base test_ppt #【构建】静态网站网页（存到 dist 文件夹）（注意：test_ppt 是 GitHub 的仓库名称，也就是主页相对路径）
cd dist                      #【进入】"dist"目录。 
git add .                    #【添加】工作区所有文件到【暂存区】  
git commit --amend --no-edit #【提交】暂存区所有文件到【本地库】（更新PPT但不用版本管理）  
git push -f origin master    #【推送】本地仓库到【远程仓库】（强制推送，因为版本没有更新）