使用Reveal.js，Gist和OpenShift进行响应式HTML演示

最新推荐文章于 2024-10-18 15:04:21 发布

danpu0978

最新推荐文章于 2024-10-18 15:04:21 发布

阅读量129

点赞数

文章标签：网络 java python vue linux ViewUI

Reveal.js是一个基于HTML的演示框架。您只需要具有CSS 3D转换的浏览器。这意味着支持Chrome，Firefox，Safari，Opera和IE 10-11。它还为其他旧版浏览器提供了很好的后备。自己查看现场演示。

该技术提示将展示如何使用Gist和OpenShift轻松创建基于Reveal.js的演示文稿。

为什么要问

这允许将表示层（OpenShift上的Node.js）和数据层（Gist上HTML源代码）分开，并使它们保持分布式。至少到目前为止，您可能无法使用此演示文稿进行演示，但至少不必担心笔记本电脑崩溃。当然，您可以将演示文稿的源代码保留在任何您喜欢的位置，例如github或其他回购协议，但需要相应地更改模板框架。

为什么选择OpenShift？

Reveal.js的完整设置要求安装Node.js，Grunt和其他一些依赖项。即使这样，您的幻灯片也只能在本地使用。为了使其完全分布式，在云中运行Node.js和其他依赖项很重要。 OpenShift是Red Hat的开源多语言PaaS，它允许Node.js在云中运行。当然，您也可以选择任何其他Node.js托管环境，但这是我最满意的。

认识Gist-Reveal.it

Ryan（ @ryanj ）创建了Gist-Reveal.it，这是一个开源幻灯片演示模板服务，可轻松在网络上创建，编辑，演示和共享Reveal.js幻灯片。

该框架的一个很酷的功能，即如何将一个浏览器配置为广播者 ，将所有其他浏览器配置为接收者 。这允许演示者（或广播者）共享幻灯片URL，并允许观看者（或接收者）在自己喜欢的设备上跟随幻灯片。特别是在会议环境中，这可能非常有用。

基于Gist的Reveal.js幻灯片演示了设置的快速介绍。本技术提示将使用Gist-Reveal.it + OpenShift，并向您展示如何为美丽HTML幻灯片设置自己的个人托管环境。

让我们开始吧！

在openshift.com/app/account/new上注册OpenShift。没有信用卡和免费帐户可以给您3个齿轮，每个齿轮是1GB磁盘和0.5GB内存。一个免费的工具足以托管Reveal.js的Web前端。
示例幻灯片可从slides-milestogo.rhcloud.com获得。单击左下角的按钮以创建一个新的OpenShift应用程序。该应用程序将从gist-reveal.it中克隆源代码，并将其用作新创建的应用程序的基础。
创建一个新的摘要并复制分配给它的唯一ID。例如，对于在gist.github.com/arun-gupta/9ac2cea40c302986a8e3中创建的要点，唯一的ID为“ 9ac2cea40c302986a8e3”。
在GitHub.github.com/settings/applications上注册新的API密钥。记下“客户端ID”和“客户端机密”。将“授权回调URL”保留为空，其他所有内容都将直接保留。
安装OpenShift CLI工具并进行设置。为OpenShift应用程序设置一些环境变量：
```
rhc env set GH_CLIENT_SECRET=<CLIENT_SECRET> --app slides
rhc env set GH_CLIENT_ID=<CLIENT_ID> --app slides
rhc env set DEFAULT_GIST=<GIST_ID> --app slides
rhc env set REVEAL_SOCKET_SECRET=<SUPER_SECRET_VALUE> --app slides
```
将<CLIENT_SECRET>，<CLIENT_ID>和<GIST_ID>替换为您的特定值。另请注意，“幻灯片”是此博客中使用的应用程序。如果您的OpenShift应用程序名称不同，请改用该名称。

REVEAL_SOCKET_SECRET是环境变量，模板框架使用它来查找特殊值以标识广播者（或演示者）。此值需要保密，不要与他人共享。可以通过访问以下URL将浏览器设置为广播器：
```
http://slides-milestogo.rhcloud.com/?setToken=<SUPER_SECRET_VALUE>
```
访问此URL会将此令牌存储在浏览器的本地存储中。确保更改URL以在OpenShift上反映您的特定应用程序和域。例如，在这种情况下，应用程序名称为“幻灯片”，域为“ milestogo”。