溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用Reveal.js和Git創(chuàng)建網(wǎng)頁

發(fā)布時間：2021-09-06 14:23:17 來源：億速云 閱讀：140 作者：小新 欄目：web開發(fā)

小編給大家分享一下如何使用Reveal.js和Git創(chuàng)建網(wǎng)頁，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！


通過這個簡單的工作流程創(chuàng)建的研討會幻燈片，可以在任何瀏覽器、設(shè)備和平臺上獲得一致的查看效果。

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

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

介紹

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

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

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

設(shè)置

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

  • 研討會的想法（這是你的問題，我?guī)筒涣四悖?/p>

  • 用于研討會幻燈片的 Reveal.js

  • GitLab 項目倉庫

  • 你常用的 HTML 代碼編輯器

  • Web 瀏覽器

  • 在你的機(jī)器上安裝好 Git

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

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

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

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

為此設(shè)置一個新的 GitLab 項目，導(dǎo)入模板項目作為初始導(dǎo)入。

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

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

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

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

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

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

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

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

它是如何工作的

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

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

  • default.css文件

  • images 目錄

  • index.html文件

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

default.css 文件

文件 css/theme/default.css 是一個基礎(chǔ)文件，你將在這里為你的研討會幻燈片設(shè)置重要的全局設(shè)置。其中值得注意的兩個主要的項目是所有幻燈片的默認(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)圖像。它存儲在 images 目錄下（見下面），并在下面這一行中設(shè)置（重點是圖像路徑）。

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

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

images 目錄

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

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

index.html 文件

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

  • head部分，在這里你可以設(shè)置標(biāo)題、作者和描述。

  • body 部分，你可以在這里找到要設(shè)計的單個幻燈片。

  • 你可以在每個 section 中定義各個幻燈片的內(nèi)容。

從 head 部分開始，因為它在頂部。模板項目有三個占位符行供你更新。

<title>INSERT-YOUR-TITLE-HERE</title><meta name="description" content="YOUR DESCIPTION HERE."><meta name="author" content="YOUR NAME">

title 標(biāo)簽包含文件打開時顯示在瀏覽器選項卡中的文字。請將其改為與你的研討會的標(biāo)題相關(guān)的內(nèi)容（或研討會的某個部分），但記得要簡短，因為標(biāo)簽頁的標(biāo)題空間有限。description 元標(biāo)簽包含了對你的工作坊的簡短描述，而 author 元標(biāo)簽是你應(yīng)該把你的名字（如果你是為別人寫的，則是工作坊創(chuàng)建者的名字）。

現(xiàn)在繼續(xù)到 body 部分。你會注意到它被分成了許多 section 標(biāo)簽。body 的開頭包含了一個注釋，說明你正在為每個標(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)建你的各個幻燈片，每張幻燈片都用 section 標(biāo)簽封裝起來。這個模板包括了一些幻燈片來幫助你開始制作。例如，這里是第一張幻燈片。

<section>      <div style="width: 1056px; height: 300px">            <h2>Beginners guide</h2>            <h3>to automated workshops</h3>      </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>

這張幻燈片有兩個區(qū)域，用 div 標(biāo)簽分隔。用空格隔開了標(biāo)題和作者。

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

一旦你對你的研討會感到滿意，推送你的修改，然后等待它們通過持續(xù)集成管道。它們將像模板項目一樣被托管在 

以上是“如何使用Reveal.js和Git創(chuàng)建網(wǎng)頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手