Big快速上手：如何用简单的Markdown语法创建专业演示文稿

【免费下载链接】big presentations for busy messy hackers 项目地址: https://gitcode.com/gh_mirrors/bi/big

想要快速制作专业演示文稿却不想学习复杂的软件？Big是专为创意工作者和忙碌开发者设计的极简演示系统，让你告别繁琐配置，专注于内容本身。本文将为你介绍Big的核心功能、快速入门方法以及如何用简单的HTML创建令人印象深刻的演示文稿。

🚀 什么是Big演示文稿系统？

Big是一个轻量级的演示文稿系统，整个系统仅约16KB大小，采用纯HTML+CSS+JavaScript技术栈。它专为创意工作者、开发者和需要快速制作演示文稿的忙碌人士设计，无需复杂配置即可创建专业级演示文稿。

Big演示文稿系统支持三种模式：演讲、打印和跳转模式，满足不同场景需求

📦 快速安装与启动

方法一：直接使用（最简单）

1. 克隆项目仓库：

   git clone https://gitcode.com/gh_mirrors/bi/big
   

2. 进入项目目录：

   cd big
   

3. 打开 index.html 文件即可开始编辑演示文稿

方法二：使用npm快速获取

如果你使用npm，可以通过以下命令快速获取Big：

npx degit tmcw/big

本地预览演示文稿只需双击 index.html 文件。要使用真实服务器预览，可以安装 serve：

npm install -g serve
serve

✍️ 编写你的第一个演示文稿

基本幻灯片结构

Big演示文稿就是网页：每个幻灯片都是一个 div 元素，文本会自动调整大小以适应屏幕。最简单的幻灯片只需：

<div>Big演示文稿</div>

添加演讲者笔记

想要在演讲时看到提示但不想让观众看到？使用 <notes> 元素：

<div>
  柑橘类水果
  <notes>橙子、柠檬和青柠是不是很棒？</notes>
</div>

打开浏览器的开发者控制台，当你访问该幻灯片时，演讲者笔记就会显示在其中！大多数浏览器都支持将控制台分离到另一个屏幕或窗口。

🎮 演示文稿导航与模式

基本导航方式

• 点击幻灯片前进
• 使用左右箭头键导航
• 使用上下箭头键导航
• 在触摸设备上，通过点击前进，通过滑动前进和后退

三种演示模式

Big提供三种模式，可通过快捷键切换：

模式	快捷键	用途
talk（演讲模式）	t	默认模式，一次显示一张幻灯片
print（打印模式）	p	打印输出或概览，每页显示两张幻灯片并包含演讲者笔记
jump（跳转模式）	j	显示多张幻灯片，用于快速查找和跳转到特定幻灯片

🎨 高级布局与自定义

图片与文本布局

如果想让幻灯片只包含图片：

<div>
  <img src='your-image.jpg'/>
</div>

Big会自动调整图片大小并将其置于中心位置。

创建复杂布局

想要图片和文本并排？使用CSS Grid布局：

<div class='layout' style='grid-template-columns: 50% 50%;'>
  <img src='airplane.gif'/>
  <div>图片描述文字</div>
</div>

自定义宽高比

默认情况下，Big使用4:3的宽高比。你可以通过设置 BIG_ASPECT_RATIO 变量来自定义：

<script>BIG_ASPECT_RATIO=2;</script>
<script src='big.js'></script>

要关闭此功能并让演示文稿适应设备宽高比：

<script>BIG_ASPECT_RATIO=false;</script>
<script src='big.js'></script>

🎭 主题与样式

内置主题

Big提供了几个内置主题，位于 themes/ 目录：

• dark：深色背景和浅色文字，适合投影仪效果不佳的环境
• light：浅色背景和深色文字，适合明亮环境
• white：纯黑白配色，对比强烈

自定义主题

Big演示文稿具有高度可定制性，你可以：

• 从零开始设计自己的主题
• 修改默认主题文件
• 使用自定义CSS覆盖样式

💡 实用技巧与最佳实践

避免文本换行

默认情况下，Big会自动换行文本。如果某些文本不希望换行，使用 nowrap 类：

<div>
  超越for循环
  <br />
  <small class=nowrap>@tmcw / Tom MacWright</small>
</div>

自动前进幻灯片

对于PechaKucha或Ignite风格的演示，可以使用 data-time-to-next 属性实现自动前进：

<div data-time-to-next=20>
  20秒销售演讲
</div>

代码高亮显示

Big鼓励简洁的代码展示方式，建议每张幻灯片不超过8行代码：

<div>
  问题一：让动物摇滚起来
  <pre>var animals = <em>['cats', 'dogs']</em>;</pre>
</div>

🚀 开始你的Big演示文稿之旅

现在你已经了解了Big的核心功能和基本用法，是时候开始创建你的第一个演示文稿了！记住，Big的设计理念是极简和专注，让你从繁琐的配置中解放出来，专注于内容创作。

下一步行动

1. 克隆项目：git clone https://gitcode.com/gh_mirrors/bi/big
2. 打开模板：编辑 index.html 文件
3. 添加内容：使用简单的HTML结构创建幻灯片
4. 预览效果：在浏览器中打开查看
5. 分享发布：将文件上传到任何静态托管服务

Big演示文稿系统为忙碌的创作者提供了完美的解决方案，让你用最少的精力创建最专业的演示文稿。现在就开始吧！

【免费下载链接】big presentations for busy messy hackers 项目地址: https://gitcode.com/gh_mirrors/bi/big