使用这个简单的工作流程创建的研讨会幻灯片，以便在任何浏览器、设备和平台上进行一致的查看。无论您是学生还是教师，您可能已经认识到使用幻灯片来传播知识的网络研讨会的价值。如果您遇到过这样一个组织良好的教程，逐页、逐章设置，您可能想知道创建这样一个网站有多难。好吧，让我在这里向您展示使用全自动过程生成这样的教程是多么容易。简介当我开始将学习内容放到网上时，体验并不是很好。我想要的是可重复、一致且易于维护的东西，因为我的内容会随着我教授的技术的发展而变化。我尝试了很多交付模型，从像Asciidoctor这样的低级代码生成器到将教程放在一个PDF文件中。没有一个让我满意。我喜欢在现场举办现场研讨会时使用幻灯片，所以我想知道我是否可以为自己的在线、自定进度的研讨会体验做同样的事情。经过一番挖掘，我为创建无痛研讨会网站奠??定了基础。当时我已经在使用一个演示文稿生成框架，这对我很有帮助，因为这个框架可以生成网站友好的格式（HTML）。设置以下是该项目所需的基本组件。研讨会的想法（这是你的问题，我帮不了你）研讨会幻灯片的Reveal.jsGitLab项目存储库你最喜欢的HTML代码编辑器Web浏览器Git安装在你的机器上如果这个列表看起来令人生畏，有一种快速入门的方法，不需要将所有内容一一组合在一起。您可以使用我的模板项目为您提供有关幻灯片放映和项目设置的入门教程。本文假设您熟悉Git并在GitLab等Git平台上托管项目。如果您需要指导或教程，请查看我们的Git入门系列。首先，将模板项目克隆到本地计算机。$gitclonehttps://gitlab.com/eschabell/beginners-guide-automated-workshops.git为此建立一个新的GitLab项目，导入模板项目作为初始导入。研讨会网站有一些重要文件。在根目录中，您会找到一个名为.gitlab-ci.yml的文件，当您将更改提交到master分支时，它充当触发器（即将拉取请求合并到master分支）。它可以触发将slides目录的全部内容复制到GitLab项目的网站文件夹中。我将其托管在名为beginners-guide-automated-workshops的GitLab帐户中。部署后，您可以通过导航到浏览器中查看幻灯片目录的内容：https://eschabell.gitlab.io/beginners-guide-automated-workshops对于您的用户帐户和项目，URL如下所示此处：https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]这些是开始为您的网站创建内容所需的基本内容。当您推送更改时，它们会自动生成更新的研讨会网站。请注意，默认模板包含一些示例幻灯片，这将是您在完全签入存储库后的第一个研讨会网站。研讨会模板生成的结果是一个receive.js幻灯片，它可以在任何浏览器中运行并自动调整大小，几乎适用于任何人、任何地方、任何设备。创建一个像这样方便、易于访问的研讨会怎么样？它是如何工作的有了这些背景信息，您就可以开始探索研讨会的这些材料，并开始将您的内容组合在一起。您需要的一切都可以在项目的幻灯片目录中找到；这是您可以使用reveal.js在浏览器中创建研讨会幻灯片的地方。您将用于制作研讨会的文件和目录是：default.css文件images目录index.html文件在您最喜欢的HTML/CSS编辑器中打开每个文件并进行如下所述的更改。不管你使用哪个编辑器，我更喜欢RubyMineIDE，因为它在本机浏览器中提供页面预览。当我在将内容推送到研讨会站点之前测试我的内容时，这对我有很大帮助。default.css文件css/theme/default.css文件是一个基础文件，您可以在其中为研讨会幻灯片设置重要的全局设置。值得注意的两个主要项目是所有幻灯片的默认字体和背景图像。在default.css中，查看标有GLOBALSTYLES的部分。当前默认字体列在此行。字体系列：“RedHatDisplay”、“Overpass”、san-serif；如果您使用的是非标准字体类型，则必须在以下行中导入它（这是Overpass字体类型所做的）：@importurl('SOME_URL');背景是您创建的每张幻灯片的默认图像。它存储在图像目录中（见下文）并在下面的行中设置（重点是图像路径）。background:url("…/…/images/backgrounds/basic.png")要设置默认背景，只需将此行指向您要使用的图像。images目录顾名思义，images目录用于存储您要在研讨会幻灯片上使用的图像。例如，我通常会在我的个人幻灯片上放一些显示研讨会主题进展情况的屏幕截图。现在，您只需要知道您需要将背景图像存储在一个子目录(backgrounds)中，并将您计划在幻灯片中使用的图像存储在images目录中。index.html文件现在您已经组织好这两个文件，剩下的时间您可以在HTML文件中创建幻灯片，从index.html开始。要开始构建您的研讨会网站，请注意此文件中的以下三个部分。head部分，这里可以设置标题、作者和描述。正文部分，您可以在其中找到要设计的单独幻灯片。您可以定义每个部分中各个幻灯片的内容。从头部开始，因为它在顶部。模板项目有三个占位符行供您更新。
