reveal.js下载教程_使用Reveal.js和Git创建网络教程
reveal.js下载教程
无论您是学习者还是老师，您都可能认识到在线研讨会（如幻灯片放映）的价值，用于交流知识。 如果您偶然发现了这些井井有条的教程，这些教程是逐页，逐章设置的，那么您可能想知道创建这样一个网站有多么困难。
好吧，我在这里向您展示使用全自动流程生成此类研讨会的过程有多么容易。
介绍
当我开始将学习内容在线放置时，这并不是一种很好的无缝体验。 因此，我希望可以重复且一致的东西也易于维护，因为随着我所教授的技术的进步，我的内容也会发生变化。
Asciidoctor ，以单个PDF文件布置研讨会。 所有人都不能使我满意。 当我提供现场现场研讨会时，我喜欢使用幻灯片放映，因此我想知道我是否可以为自己的在线，自定进度的研讨会体验做同样的事情。经过一番挖掘，我为创建无痛的研讨会网站奠定了基础。 这有助于我已经使用了演示生成框架，该框架生成了网站友好格式（HTML）。
设定
这里是该项目所需的基本组件：
- 研讨会的想法（这是您的问题，在这里不能为您提供帮助）
- 展示幻灯片的Reveal.js
- GitLab项目存储库
- 您最喜欢HTML代码编辑器
- 网页浏览器
- 安装在您机器上的Git
如果这个列表看起来令人生畏，那么有一种快速的上手方法，它不需要一一将所有部分拉在一起：您可以使用我的模板项目为您提供幻灯片和项目设置的快速入门。
本文假定您熟悉Git和在Git平台（如GitLab）上托管的项目。 如果您需要复习或教程，请查看我们的入门Git系列 。
首先将模板项目克隆到本地计算机：
$ git clone https: // gitlab.com / eschabell / beginners-guide-automated-workshops.git
为此设置一个新的GitLab项目，并将模板项目导入为初始导入。
研讨会网站上有许多重要文件。 在根目录中，您会找到一个名为.gitlab-ci.yml的文件，该文件在将更改提交到master分支（即，将pull请求合并到master ）时用作触发器。 它触发将幻灯片目录的完整内容复制到GitLab项目的网站文件夹中。
我在我的GitLab帐户中将其托管为一个名为Beginners-guide-automated-workshops的项目。 部署后，您可以通过导航到以下位置在浏览器中查看幻灯片目录的内容：
https://eschabell.gitlab.io/beginners-guide-automated-workshops
对于您的用户帐户和项目，URL如下所示：
https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]
这些是开始创建网站内容所需的基本材料。 当您进行更改时，它们将自动生成您更新的研讨会网站。 请注意，默认模板包含几个示例幻灯片，这些幻灯片将是您完成对存储库的完整签入之后的第一个讲习班网站。
讲习班模板生成了一个show.js幻灯片，该幻灯片可以在任何浏览器中运行，并具有自动调整大小的功能，几乎可以在任何设备上的任何地方，任何位置查看该幻灯片。
如何创建方便且易于访问的讲习班？
这个怎么运作
有了这样的背景，您就可以开始探索讲习班的资料，并开始将您的内容放到一起。 您需要的所有内容都可以在项目的幻灯片目录中找到。 在这里，recover.js的所有魔术都可以在浏览器中创建研讨会幻灯片。
您将用来制作研讨会的文件和目录是：
- default.css文件
- 图片目录
- index.html文件
在您喜欢HTML / CSS编辑器中打开每个窗口，然后进行以下描述的更改。 使用哪个编辑器都没有关系； 我更喜欢RubyMine IDE，因为它在本地浏览器中提供页面预览。 当我在在线将内容推送到研讨会网站之前测试内容时，这会有所帮助。
Default.css文件
文件css / theme / default.css是基本文件，您可以在其中为研讨会幻灯片设置重要的全局设置。 感兴趣的两个主要项目是所有幻灯片的默认字体和背景图像。
在default.css中 ，查看标记为GLOBAL STYLES的部分。 当前的默认字体在行中列出：
font-family: "Red Hat Display", "Overpass", san-serif;
如果您使用的是非标准字体类型，则必须在以下行中将其导入（与Overpass字体类型相同）：
@ import url ( 'SOME_URL' ) ;
背景是您创建的每张幻灯片的默认图像。 它存储在图像目录中（请参见下文），并在下面的行中进行设置（集中在图像路径上）：
background: url("…/…/images/backgrounds/basic.png")
要设置默认背景，只需将此行指向您要使用的图像即可。
图片目录
顾名思义， images目录用于存储要在车间幻灯片上使用的图像。 例如，我通常在个人幻灯片上放一些屏幕快照，以演示研讨会主题的进度。
现在，只需知道您需要将背景图像存储在一个子目录（ backgrounds ）中，并将您打算在幻灯片中使用的图像存储在Images目录中。
Index.html文件
现在您已经整理好了这两个文件，接下来将花费剩余的时间在HTML文件中创建幻灯片，从index.html开始。 为了使您的研讨会网站开始成型，请注意此文件中的以下三个部分：
- 头段，在这里设置标题，作者和描述
- 正文部分，您可以在其中找到要设计的单个幻灯片
- 每个部分 ，您在其中定义单个幻灯片的内容
从头部开始，因为它在顶部。 模板项目具有三个占位符行供您更新：
INSERT-YOUR-TITLE-HERE
标题标签包含打开文件时显示在浏览器选项卡中的文本。 将其更改为与您的工作坊（或您的工作坊的一部分）标题相关的内容，但请记住要简短，因为制表符标题空间有限。 description meta标记包含对您的研讨会的简短描述， author meta标记是您应放置您的姓名（或研讨会创建者的名称，如果您正在为其他人这样做的话）的地方。
现在转到正文部分。 您会注意到，它分为许多部分标签。 主体的开头包含一条注释，它说明您正在为每个带有标签的section的打开和关闭标签创建幻灯片：
接下来，创建您自己的幻灯片，每张幻灯片都包含在section标签中。 该模板包括一些幻灯片，可帮助您入门。 例如，这是第一张幻灯片：
Beginners guide
to automated workshops
Brought to you by,
YOUR-NAME
这张幻灯片有两个区域，每个区域都用div标签划分。 间距将标题和作者分开。
假设您具有使用HTML的知识，请尝试各种方法来开发您的工作室。 预览结果时使用浏览器非常方便。 某些IDE提供对更改的本地查看，但是您也可以打开index.html文件并查看更改，然后再将其推送到存储库。
对车间感到满意之后，请推送您的更改，然后等待它们通过持续集成流程。 它们将像模板项目一样托管在https://eschabell.gitlab.io/beginners-guide-automated-workshops 。
学到更多
要了解有关使用此工作流程的更多信息，请查看以下示例工作坊和托管工作坊收藏的网站。 所有这些都是基于本文描述的工作流程。
讲习班示例：
- 红帽流程自动化管理研讨会
- JBoss Travel Agency BPM Suite在线研讨会
工作坊收藏：
- 统治世界：实用决策和过程自动化开发研讨会
- 云研讨会中的应用程序开发
- 项目组合架构：创建有影响力的架构图的研讨会
希望本初学者指南和模板研讨会项目向您展示轻松而轻松的过程，以一致的方式开发和维护研讨会网站。 我也希望该工作流使您的研讨会的观众能够在几乎任何设备上完全访问您的内容，以便他们可以从共享的知识中学习。
翻译自: https://opensource.com/article/20/4/create-web-tutorial-git
reveal.js下载教程