使用 Reveal.js 和 Git 創(chuàng)建網(wǎng)頁教程 | Linux 中國

時(shí)間：2023-07-10 21:57:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-10 21:57:01 來源：網(wǎng)站運(yùn)營

使用 Reveal.js 和 Git 創(chuàng)建網(wǎng)頁教程 | Linux 中國：

通過這個(gè)簡單的工作流程創(chuàng)建的研討會(huì)幻燈片，可以在任何瀏覽器、設(shè)備和平臺(tái)上獲得一致的查看效果。
-- Eric D. Schabell（作者）

無論你是學(xué)習(xí)者還是教師，你可能都會(huì)認(rèn)識(shí)到采用幻燈片放映來傳播知識(shí)的在線 研討會(huì)(workshop)的價(jià)值。如果你曾經(jīng)偶然看到過這樣一個(gè)逐頁、逐章設(shè)置的井井有條的教程，你可能會(huì)想知道創(chuàng)建這樣的一個(gè)網(wǎng)站有多難。

好吧，讓我在這里向你展示，使用全自動(dòng)化的流程來生成這樣的教程是多么容易。

介紹

當(dāng)我開始將學(xué)習(xí)內(nèi)容放到網(wǎng)上置時(shí)，體驗(yàn)并不是很好。我想要的是一種可重復(fù)的、一致的、易于維護(hù)的東西，因?yàn)槲业膬?nèi)容會(huì)隨著我教學(xué)的技術(shù)發(fā)展而變化。

我嘗試了許多交付模型，從 Asciidoctor 這樣的低級(jí)代碼生成器到在單個(gè) PDF 文件中放置教程。全都不能讓我滿意。當(dāng)我舉辦現(xiàn)場的在座研討會(huì)時(shí)，我喜歡使用幻燈片放映，因此我想知道我是否可以為我自己的在線的，自定進(jìn)度的研討會(huì)體驗(yàn)做同樣的事情。

經(jīng)過一番挖掘，我為創(chuàng)建無痛的研討會(huì)網(wǎng)站打下了基礎(chǔ)。當(dāng)時(shí)我已經(jīng)在使用一個(gè)演示文稿生成框架，這對(duì)我來說是很有幫助的，因?yàn)檫@個(gè)框架可以產(chǎn)生對(duì)網(wǎng)站友好的格式（HTML）。

設(shè)置

這里是這個(gè)項(xiàng)目所需要的基本組件。

• 研討會(huì)的想法（這是你的問題，我?guī)筒涣四悖?/li>
• 用于研討會(huì)幻燈片的 Reveal.js
• GitLab 項(xiàng)目倉庫
• 你常用的 HTML 代碼編輯器
• Web 瀏覽器
• 在你的機(jī)器上安裝好 Git

如果這個(gè)列表看起來令人望而生畏，那么有一個(gè)快速入門的方法，不需要把所有的東西一個(gè)個(gè)都拉到一起。你可以用我的模板項(xiàng)目來給你提供幻燈片和項(xiàng)目設(shè)置的入門教程。

本文假設(shè)你熟悉 Git 和在 Git 平臺(tái)（如 GitLab）上托管項(xiàng)目。如果你需要指導(dǎo)或教程，請(qǐng)查看我們的Git 入門系列。

首先，將模板項(xiàng)目克隆到本地機(jī)器上。

$ git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git為此設(shè)置一個(gè)新的 GitLab 項(xiàng)目，導(dǎo)入模板項(xiàng)目作為初始導(dǎo)入。

研討會(huì)網(wǎng)站有一些重要的文件。在根目錄下，你會(huì)發(fā)現(xiàn)一個(gè)名為 .gitlab-ci.yml 的文件，當(dāng)你向主分支提交修改時(shí)（即將拉取請(qǐng)求合并到 master 分支），這個(gè)文件會(huì)作為觸發(fā)器。它可以觸發(fā)將 slides 目錄的全部內(nèi)容復(fù)制到 GitLab 項(xiàng)目的 website 文件夾中。

我把它托管在我的 GitLab 賬戶中，名為 beginners-guide-automated-workshops。當(dāng)它部署完畢后，你可以在瀏覽器中通過導(dǎo)航到下列地址查看 slides 目錄的內(nèi)容:

https://eschabell.gitlab.io/beginners-guide-automated-workshops對(duì)于你的用戶帳戶和項(xiàng)目，URL 如下所示：

https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]這些是你開始創(chuàng)建網(wǎng)站內(nèi)容所需要的基本素材。當(dāng)你推送修改后，它們會(huì)自動(dòng)生成更新過的研討會(huì)網(wǎng)站。請(qǐng)注意，默認(rèn)模板包含了幾個(gè)示例幻燈片，這將是你完成對(duì)存儲(chǔ)庫的完整簽入后的第一個(gè)研討會(huì)網(wǎng)站。

研討會(huì)模板生成的結(jié)果是一個(gè) receive.js 幻燈片，可以在任何瀏覽器中運(yùn)行，并可以自動(dòng)調(diào)整大小，幾乎可以讓任何人在任何地方、任何設(shè)備上觀看。

這樣創(chuàng)建一個(gè)方便、易訪問的研討會(huì)怎么樣？

它是如何工作的

有了這些背景信息，你就可以開始探索研討會(huì)的這些素材，并開始把你的內(nèi)容放在一起了。你需要的一切都可以在項(xiàng)目的 slides 目錄中找到；這里是使用 reveal.js 在瀏覽器中創(chuàng)建研討會(huì)幻燈片的地方。

你將用來制作研討會(huì)的文件和目錄是：

• default.css文件
• images 目錄
• index.html文件

在你常用的 HTML/CSS 編輯器中打開每一個(gè)文件，然后進(jìn)行下面描述的修改。你用哪個(gè)編輯器并不重要，我更喜歡 RubyMine IDE，因?yàn)樗茉诒镜貫g覽器中提供頁面預(yù)覽。這對(duì)我在將內(nèi)容推送到研討會(huì)網(wǎng)站之前測試內(nèi)容時(shí)很有幫助。

default.css 文件

文件 css/theme/default.css 是一個(gè)基礎(chǔ)文件，你將在這里為你的研討會(huì)幻燈片設(shè)置重要的全局設(shè)置。其中值得注意的兩個(gè)主要的項(xiàng)目是所有幻燈片的默認(rèn)字體和背景圖片。

在 default.css 中，看一下標(biāo)有 GLOBAL STYLES 的部分。當(dāng)前的默認(rèn)字體在這一行中列出了。

font-family: "Red Hat Display", "Overpass", san-serif;如果你使用的是非標(biāo)準(zhǔn)字體類型，則必須在以下行中將其導(dǎo)入（Overpass 字體類型就是這樣做的）：

@import url('SOME_URL');background 是你創(chuàng)建的每張幻燈片的默認(rèn)圖像。它存儲(chǔ)在 images 目錄下（見下面），并在下面這一行中設(shè)置（重點(diǎn)是圖像路徑）。

background: url("…/…/images/backgrounds/basic.png")要設(shè)置一個(gè)默認(rèn)背景，只需將這一行指向你要使用的圖片。

images 目錄

顧名思義，images 目錄是用來存儲(chǔ)你想在研討會(huì)幻燈片上使用的圖片。例如，我通常會(huì)把展示研討會(huì)主題進(jìn)展的截圖放在我的個(gè)人幻燈片上。

現(xiàn)在，你只需要知道你需要將背景圖片存儲(chǔ)在一個(gè)子目錄（backgrounds）中，并將你計(jì)劃在幻燈片中使用的圖片存儲(chǔ)在 images 目錄中。

index.html 文件

現(xiàn)在你已經(jīng)把這兩個(gè)文件整理好了，剩下的時(shí)間你就可以在 HTML 文件中創(chuàng)建幻燈片了，從 index.html 開始。為了讓你的研討會(huì)網(wǎng)站開始成形，請(qǐng)注意這個(gè)文件中的以下三個(gè)部分。

• head部分，在這里你可以設(shè)置標(biāo)題、作者和描述。
• body 部分，你可以在這里找到要設(shè)計(jì)的單個(gè)幻燈片。
• 你可以在每個(gè) section 中定義各個(gè)幻燈片的內(nèi)容。

從 head 部分開始，因?yàn)樗陧敳俊Ｄ０屙?xiàng)目有三個(gè)占位符行供你更新。

<title>INSERT-YOUR-TITLE-HERE</title><meta name="description" content="YOUR DESCIPTION HERE."><meta name="author" content="YOUR NAME">title 標(biāo)簽包含文件打開時(shí)顯示在瀏覽器選項(xiàng)卡中的文字。請(qǐng)將其改為與你的研討會(huì)的標(biāo)題相關(guān)的內(nèi)容（或研討會(huì)的某個(gè)部分），但記得要簡短，因?yàn)闃?biāo)簽頁的標(biāo)題空間有限。description 元標(biāo)簽包含了對(duì)你的工作坊的簡短描述，而 author 元標(biāo)簽是你應(yīng)該把你的名字（如果你是為別人寫的，則是工作坊創(chuàng)建者的名字）。

現(xiàn)在繼續(xù)到 body 部分。你會(huì)注意到它被分成了許多 section 標(biāo)簽。body 的開頭包含了一個(gè)注釋，說明你正在為每個(gè)標(biāo)有 section 的打開和關(guān)閉的標(biāo)簽創(chuàng)建幻燈片。

<body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides">接下來，創(chuàng)建你的各個(gè)幻燈片，每張幻燈片都用 section 標(biāo)簽封裝起來。這個(gè)模板包括了一些幻燈片來幫助你開始制作。例如，這里是第一張幻燈片。

<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>這張幻燈片有兩個(gè)區(qū)域，用 div 標(biāo)簽分隔。用空格隔開了標(biāo)題和作者。

如果你有一定的 HTML 使用知識(shí)，可以嘗試各種東西來開發(fā)你的研討會(huì)。使用瀏覽器預(yù)覽結(jié)果的時(shí)候真的很方便。有些 IDE 提供了本地查看修改，但你也可以打開 index.html 文件查看你的修改，然后再推送到資源庫中。

一旦你對(duì)你的研討會(huì)感到滿意，推送你的修改，然后等待它們通過持續(xù)集成管道。它們將像模板項(xiàng)目一樣被托管在 https://eschabell.gitlab.io/beginners-guide-automated-workshops。

了解更多

要了解更多關(guān)于這個(gè)工作流程可以做什么，請(qǐng)查看下面的示例研討會(huì)和托管了研討會(huì)集合的網(wǎng)站。所有這些都是基于本文中描述的工作流程。

研討會(huì)例子：

• Red Hat Process Automation Manage workshop
• JBoss Travel Agency BPM Suite online workshop

研討會(huì)集合：

• Rule the world: Practical decisions & process automation development workshops
• Application development in the cloud workshop
• Portfolio architecture: Workshops for creating impactful architectural diagrams

我希望這本新手指南和模板研討會(huì)項(xiàng)目能讓你看到，在開發(fā)和維護(hù)研討會(huì)網(wǎng)站的過程中，可以輕松、無痛地完成。我也希望這個(gè)工作流程能讓你的研討會(huì)受眾幾乎在任何設(shè)備上都能完全訪問你的內(nèi)容，這樣他們就能從你分享的知識(shí)中學(xué)習(xí)到你的知識(shí)。

---

via: https://opensource.com/article/20/4/create-web-tutorial-git

作者：Eric D. Schabell 選題：lujun9972 譯者：wxy 校對(duì)：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽(yù)推出