Linux中國

使用 Reveal.js 和 Git 創建網頁教程

119 views0
By
Share

無論你是學習者還是教師，你可能都會認識到採用幻燈片放映來傳播知識的在線 研討會 workshop 的價值。如果你曾經偶然看到過這樣一個逐頁、逐章設置的井井有條的教程，你可能會想知道創建這樣的一個網站有多難。

好吧，讓我在這裡向你展示，使用全自動化的流程來生成這樣的教程是多麼容易。

介紹

當我開始將學習內容放到網上置時，體驗並不是很好。我想要的是一種可重複的、一致的、易於維護的東西，因為我的內容會隨著我教學的技術發展而變化。

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

經過一番挖掘，我為創建無痛的研討會網站打下了基礎。當時我已經在使用一個演示文稿生成框架，這對我來說是很有幫助的，因為這個框架可以產生對網站友好的格式（HTML）。

設置

這裡是這個項目所需要的基本組件。

  • 研討會的想法（這是你的問題，我幫不了你）
  • 用於研討會幻燈片的 Reveal.js
  • GitLab 項目倉庫
  • 你常用的 HTML 代碼編輯器
  • Web 瀏覽器
  • 在你的機器上安裝好 Git

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

本文假設你熟悉 Git 和在 Git 平台（如 GitLab）上託管項目。如果你需要指導或教程，請查看我們的Git 入門系列。

首先，將模板項目克隆到本地機器上。

$ git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git

為此設置一個新的 GitLab 項目，導入模板項目作為初始導入。

研討會網站有一些重要的文件。在根目錄下，你會發現一個名為 .gitlab-ci.yml 的文件，當你向主分支提交修改時（即將拉取請求合併到 master 分支），這個文件會作為觸發器。它可以觸發將 slides 目錄的全部內容複製到 GitLab 項目的 website 文件夾中。

我把它託管在我的 GitLab 賬戶中，名為 beginners-guide-automated-workshops。當它部署完畢後，你可以在瀏覽器中通過導航到下列地址查看 slides 目錄的內容:

https://eschabell.gitlab.io/beginners-guide-automated-workshops

對於你的用戶帳戶和項目，URL 如下所示：

https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]

這些是你開始創建網站內容所需要的基本素材。當你推送修改後，它們會自動生成更新過的研討會網站。請注意，默認模板包含了幾個示例幻燈片，這將是你完成對存儲庫的完整簽入後的第一個研討會網站。

研討會模板生成的結果是一個 receive.js 幻燈片，可以在任何瀏覽器中運行，並可以自動調整大小，幾乎可以讓任何人在任何地方、任何設備上觀看。

這樣創建一個方便、易訪問的研討會怎麼樣？

它是如何工作的

有了這些背景信息，你就可以開始探索研討會的這些素材，並開始把你的內容放在一起了。你需要的一切都可以在項目的 slides 目錄中找到；這裡是使用 reveal.js 在瀏覽器中創建研討會幻燈片的地方。

你將用來製作研討會的文件和目錄是：

  • default.css文件
  • images 目錄
  • 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 是你創建的每張幻燈片的默認圖像。它存儲在 images 目錄下（見下面），並在下面這一行中設置（重點是圖像路徑）。

background: url("…/…/images/backgrounds/basic.png")

要設置一個默認背景，只需將這一行指向你要使用的圖片。

images 目錄

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

現在，你只需要知道你需要將背景圖片存儲在一個子目錄（backgrounds）中，並將你計劃在幻燈片中使用的圖片存儲在 images 目錄中。

index.html 文件

現在你已經把這兩個文件整理好了，剩下的時間你就可以在 HTML 文件中創建幻燈片了，從 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 標籤分隔。用空格隔開了標題和作者。

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

一旦你對你的研討會感到滿意，推送你的修改，然後等待它們通過持續集成管道。它們將像模板項目一樣被託管在 https://eschabell.gitlab.io/beginners-guide-automated-workshops。

了解更多

要了解更多關於這個工作流程可以做什麼，請查看下面的示例研討會和託管了研討會集合的網站。所有這些都是基於本文中描述的工作流程。

研討會例子：

研討會集合：

我希望這本新手指南和模板研討會項目能讓你看到，在開發和維護研討會網站的過程中，可以輕鬆、無痛地完成。我也希望這個工作流程能讓你的研討會受眾幾乎在任何設備上都能完全訪問你的內容，這樣他們就能從你分享的知識中學習到你的知識。

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

作者：Eric D. Schabell 選題：lujun9972 譯者：wxy 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何？

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽
    Previous
    Next

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據。

    More in:Linux中國