时间：2023-07-10 21:57:01 | 来源：网站运营
时间：2023-07-10 21:57:01 来源：网站运营
使用 Reveal.js 和 Git 创建网页教程 | Linux 中国：通过这个简单的工作流程创建的研讨会幻灯片，可以在任何浏览器、设备和平台上获得一致的查看效果。
-- Eric D. Schabell（作者）
在线咨询
$ git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git为此设置一个新的 GitLab 项目，导入模板项目作为初始导入。.gitlab-ci.yml 的文件，当你向主分支提交修改时（即将拉取请求合并到 master 分支），这个文件会作为触发器。它可以触发将 slides 目录的全部内容复制到 GitLab 项目的 website 文件夹中。beginners-guide-automated-workshops。当它部署完毕后，你可以在浏览器中通过导航到下列地址查看 slides 目录的内容:https://eschabell.gitlab.io/beginners-guide-automated-workshops对于你的用户帐户和项目，URL 如下所示：https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]这些是你开始创建网站内容所需要的基本素材。当你推送修改后，它们会自动生成更新过的研讨会网站。请注意，默认模板包含了几个示例幻灯片，这将是你完成对存储库的完整签入后的第一个研讨会网站。slides 目录中找到；这里是使用 reveal.js 在浏览器中创建研讨会幻灯片的地方。default.css文件images 目录index.html文件css/theme/default.css 是一个基础文件，你将在这里为你的研讨会幻灯片设置重要的全局设置。其中值得注意的两个主要的项目是所有幻灯片的默认字体和背景图片。default.css 中，看一下标有 GLOBAL STYLES 的部分。当前的默认字体在这一行中列出了。font-family: "Red Hat Display", "Overpass", san-serif;如果你使用的是非标准字体类型，则必须在以下行中将其导入（Overpass 字体类型就是这样做的）：@import url('SOME_URL');background 是你创建的每张幻灯片的默认图像。它存储在 images 目录下（见下面），并在下面这一行中设置（重点是图像路径）。background: url("…/…/images/backgrounds/basic.png")要设置一个默认背景，只需将这一行指向你要使用的图片。images 目录是用来存储你想在研讨会幻灯片上使用的图片。例如，我通常会把展示研讨会主题进展的截图放在我的个人幻灯片上。backgrounds）中，并将你计划在幻灯片中使用的图片存储在 images 目录中。index.html 开始。为了让你的研讨会网站开始成形，请注意这个文件中的以下三个部分。head部分，在这里你可以设置标题、作者和描述。body 部分，你可以在这里找到要设计的单个幻灯片。section 中定义各个幻灯片的内容。head 部分开始，因为它在顶部。模板项目有三个占位符行供你更新。<title>INSERT-YOUR-TITLE-HERE</title><meta name="description" content="YOUR DESCIPTION HERE."><meta name="author" content="YOUR NAME">title 标签包含文件打开时显示在浏览器选项卡中的文字。请将其改为与你的研讨会的标题相关的内容（或研讨会的某个部分），但记得要简短，因为标签页的标题空间有限。description 元标签包含了对你的工作坊的简短描述，而 author 元标签是你应该把你的名字（如果你是为别人写的，则是工作坊创建者的名字）。body 部分。你会注意到它被分成了许多 section 标签。body 的开头包含了一个注释，说明你正在为每个标有 section 的打开和关闭的标签创建幻灯片。<body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides">接下来，创建你的各个幻灯片，每张幻灯片都用 section 标签封装起来。这个模板包括了一些幻灯片来帮助你开始制作。例如，这里是第一张幻灯片。<section> <div style="width: 1056px; height: 300px"> <h1>Beginners guide</h1> <h2>to automated workshops</h2> </div> <div style="width: 1056px; height: 200px; text-align: left"> Brought to you by,<br/> YOUR-NAME<br/> </div> <aside class="notes">Here are notes: Welcome to the workshop!</aside></section>这张幻灯片有两个区域，用 div 标签分隔。用空格隔开了标题和作者。index.html 文件查看你的修改，然后再推送到资源库中。关键词：教程,中国,创建,使用
