什么是 sli？
sli 是一个基于 Vue.js 开发的幻灯片应用，它提供了一个命令行工具和一个 Webpack 插件，可以方便地创建和编辑幻灯片，还可以自定义主题和模板等。
安装 sli
使用 npm 进行全局安装：
npm i sli -g
创建幻灯片项目
在命令行中输入以下命令创建一个新的幻灯片项目：
sli create my-slide
这将创建一个名为 my-slide 的目录，其中包含了一个默认的幻灯片。
编辑幻灯片
进入 my-slide 目录并启动本地开发服务器：
cd my-slide npm run dev
在浏览器中打开 http://localhost:8080 访问幻灯片演示页面。现在，我们可以编辑 src/slides 目录下的 .md 文件来更新幻灯片内容了。
自定义主题
Sli 内置了几个常用的主题，如 default、dark 和 sky 等。如果想要自定义主题，可以通过在项目的 src/theme 目录下存放一个 index.styl 文件实现。
添加一个新的自定义主题：
- 在
src/theme目录下新建一个文件夹，命名为你的主题名称（例如my-theme）。 - 在该文件夹下创建一个名为
index.styl的文件，并自定义样式。
在 src/slides 目录下的 .md 文件中，使用 theme 属性指定要使用的主题名：
--- theme: my-theme --- # 幻灯片标题
自定义模板
默认情况下，Sli 采用一个简单的模板来渲染幻灯片内容。如果想要自定义模板，可以通过在项目的 src/template 目录下存放一个 index.html 文件实现。
添加一个新的自定义模板：
- 在
src/template目录下新建一个文件夹，命名为你的模板名称（例如my-template）。 - 在该文件夹下创建一个名为
index.html的文件，并自定义模板内容。
在 src/slides 目录下的 .md 文件中，使用 template 属性指定要使用的模板名：
--- theme: my-theme template: my-template --- # 幻灯片标题
构建幻灯片静态文件
在项目根目录下执行以下命令将幻灯片构建为静态文件：
npm run build构建后的文件保存在 dist 目录中。
总结
通过 sli，我们可以更加方便地创建和编辑幻灯片，并可以进行自定义主题和模板等操作。同时，它还具有快速构建和打包的优势，是前端开发中非常有用的工具之一。
示例代码
自定义主题样式（src/theme/my-theme/index.styl）：
-- -------------------- ---- ------- -------- - ------- ---------- - ---- ---- ----------- ---------- --- --- --- --- --- -- ------------ ------ ---- ------ -------- -------- -------- -- - ------ -------- ---------- --- ------------- ---展开代码
自定义模板内容（src/template/my-template/index.html）：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------ ----- --------------- ---------------------------- ------------------- ----- ---------------- ---------------------------------- ----- ---------------- ------------------------------------- ----- ---------------- ---------------------------------------- ------- ------ ---- --------------- ------- ------------------------------------------ ------- ---------------------------------------- ------- ------------------------------------- ------- -------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da786
