們看一下以編程方式創建幻燈片的兩個框架，Reveal.js和Eagle.js，看看它們是如何疊加的。

我最近使用了幾個JS框架來制作幻燈片和最終的程序化視頻。以下是我對兩個框架 Reveal.js和Eagle.js的反饋。

介紹

正如我之前在Faveeo寫的那樣，我們正在努力從策劃文章中制作原創內容。團隊的一個想法是從書面文章中制作視頻，以最大限度地提高讀者的參與度，并生成新鮮，易于理解的材料。

我不得不探索以編程方式制作視頻的解決方案和我想出的一個解決方案，即構建有吸引力的幻燈片。幻燈片必須具有足夠的吸引力，以吸引讀者并給他們留下他們正在觀看視頻的印象。

通過團隊，我們探索了幾種解決方案：

• 使用JS生成幻燈片并記錄它們。
• 使用ffmpeg 和以編程方式構建視頻 imagemagick。
• 探索可用的SaaS平臺來編寫我們的視頻。
• 生成Adobe Premiere兼容格式。

長話短說，除了第一個解決方案外，所有解決方案都成了噩夢。

我一直在使用兩個框架來構建我的幻燈片，我保留了Eagle.js

Reveal.js

Reveal.js是一個很酷的框架，允許用戶使用HTML / CSS和一些JavaScript來構建自己的幻燈片。為了幫助初學者，它在https://slides.com/上提供了一個在線編輯器。

這篇文章不是教程，因此，這是我對我的用例的反饋。

好吧，Reveal.js非常受歡迎，很容易在網上找到很多例子。

WTF：我們如何開始？

我第一次使用Reveal.js時有這種反應，直到我明白我必須克隆一個git項目來創建我的第一個模板。我遇到的第二個問題是找不到代碼，直到我發現單個HTML頁面包含幻燈片放映的所有代碼。

豐富的功能和出色的文檔

Reveal.js有一系列令人印象深刻的功能，自動播放，錄音，音頻等等，它對大多數人來說都是完美的。

文檔也很棒，你會發現很多例子。

解決方案的缺點

Reveal.js有一些缺點：

• 它是純粹的，香草的JS，雖然我能夠使它與Vue.js友好，但它一直非常hacky。
• 當幻燈片出現時，我無法觸發文本動畫。
• 我必須在生成新幻燈片后重新啟動組件，因為我無法控制Reveal.js生命周期。

設計缺陷

Reveal.js帶有一個相當聰明的系統，可以正確定位幻燈片項目并計算它們的大小。

但是，如果你想為你的幻燈片制作一個絕對的設計，那就是一個純粹的噩夢，即底部的元素，左上角的圖片等。

我一直在努力獲得我的第一個視頻原型，其中包含Reveal.js附帶的CSS選項以及我們自定義模板的方式。

Eagle.js

Eagle.js是一個由Vue.js提供支持的最新JS框架，因此允許開發人員將幻燈片寫為Vue組件。

我一直對這個框架感興趣，因為它允許我的幻燈片與Vue的原生集成以及可能更容易的自動生成。

以下是我對Eagle.js的反饋。

Vue

我一直是Vue.js的大力支持者，并且使用基于它的庫讓事情變得非常簡單。我花了幾個小時將Reveal.js幻燈片移植到Eagle.js。

文檔很差

是的，文檔很差，即使Zulko提供了幾個很好的例子。但是所有邏輯和臟東西都隱藏在代碼中。好消息？只有兩個小代碼文件。

沒有特色

這些組件事實上 是缺少的，但是缺少一大堆功能，例如自動播放。

CSS

框架附帶一個主題，但一切都可以輕松覆蓋。

易于擴展

我擴展了框架，允許我進行一些調整和設計選擇（https://github.com/faveeo/eagle.js）。

結論

我保留了Eagle.js。雖然該框架具有較少的功能和較差的文檔，但我們可以輕松擴展設計或功能，這使我能夠創建更好的幻燈片和視頻。

譯自： https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer

譯者： geekpi

用這個有用工具從 Markdown 文件創建一個基礎的網站。

有很多理由喜歡 Markdown，這是一門簡單的語言，有易于學習的語法，它可以與任何文本編輯器一起使用。使用像 Pandoc 這樣的工具，你可以將 Markdown 文本轉換為 各種流行格式 ，包括 HTML。你還可以在 Web 服務器中自動執行轉換過程。由 TimoD?rr 創建的名為 MDwiki 的 HTML5 和 JavaScript 應用可以將一堆 Markdown 文件在瀏覽器請求它們時轉換為網站。MDwiki 網站包含一個操作指南和其他信息可幫助你入門：

在 Web 服務器內部，基本的 MDwiki 站點如下所示：

我將此項目的 MDwiki HTML 文件重命名為 START.HTML。還有一個處理導航的 Markdown 文件和一個 JSON 文件來保存一些配置設置。其他的都是網站內容。

雖然整個網站設計被 MDwiki 固定了，但內容、樣式和頁面數量卻沒有。你可以在 MDwiki 站點 查看由 MDwiki 生成的一系列不同站點。公平地說，MDwiki 網站缺乏網頁設計師可以實現的視覺吸引力 —— 但它們是功能性的，用戶應該平衡其簡單的外觀與創建和編輯它們的速度和簡易性。

Markdown 有不同的風格，可以針對不同的特定目的擴展穩定的核心功能。MDwiki 使用 GitHub 風格 Markdown ，它為流行的編程語言添加了格式化代碼塊和語法高亮等功能，使其非常適合生成程序文檔和教程。

MDwiki 還支持 “gimmick”，它增加了如嵌入 YouTube 視頻和顯示數學公式等額外功能。如果在某些項目中需要它們，這些值得探索。我發現 MDwiki 是創建技術文檔和教育資源的理想工具。我還發現了一些可能不會立即顯現出來的技巧和 hack。

當部署在 Web 服務器中時，MDwiki 可與任何現代 Web 瀏覽器一起使用。但是，如果你使用 Mozilla Firefox 訪問 MDwiki，那么就不需要 Web 服務器。大多數 MDwiki 用戶會選擇在 Web 服務器上部署完整的項目，以避免排除潛在用戶，但只需使用文本編輯器和 Firefox 即可完成開發和測試。任何現代瀏覽器都可以讀取加載到 Moodle 虛擬學習環境（VLE）中的完整的 MDwiki 項目，這在教育環境中非常有用。 （對于其他 VLE 軟件，這可能也是如此，但你應該測試它。）

MDwiki 的默認配色方案并非適用于所有項目，但你可以將其替換為從 Bootswatch.com 下載的其他主題。為此，只需在編輯器中打開 MDwiki HTML 文件，找到 extlib/css/bootstrap-3.0.0.min.css，然后插入下載的 Bootswatch 主題。還有一個 MDwiki gimmick，讓用戶在瀏覽器中載入 MDwiki 后，選擇 Bootswatch 主題來替換默認值。我經常與有視力障礙的用戶一起工作，他們傾向于喜歡高對比度的主題，在深色背景上使用白色文字。

MDwiki、Markdown 文件和靜態圖像可以用于許多目的。但是，你有時可能希望包含 JavaScript 幻燈片或反饋表單。Markdown 文件可以包含 HTML 代碼，但將 Markdown 與 HTML 混合會讓人感到困惑。一種解決方案是在單獨的 HTML 文件中創建所需的功能，并將其顯示在帶有 iframe 標記的 Markdown 文件中。我從 Twine Cookbook 知道了這個想法，它是 Twine 交互式小說引擎的支持站點。Twine Cookbook 實際上并沒有使用 MDwiki，但結合 Markdown 和 iframe 標簽開辟了廣泛的創作可能性。

這是一個例子：

此 HTML 將顯示由 Markdown 文件中的 Twine 交互式小說引擎創建的 HTML 頁面。

<iframe height="400" src="sugarcube_dungeonmoving_example.html" width="90%"></iframe>

MDwiki 生成的站點結果如下所示：

簡而言之，MDwiki 是一個出色的小應用，可以很好地實現其目的。

via: https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer 選題： lujun9972 譯者： geekpi 校對： wxy

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

點擊“了解更多”可訪問文內鏈接