用Hugo制作網(wǎng)頁P(yáng)PT

時(shí)間：2023-09-28 06:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-28 06:36:01 來源：網(wǎng)站運(yùn)營(yíng)

用Hugo制作網(wǎng)頁P(yáng)PT：

用 Hugo 與 Markdown 制作網(wǎng)頁 PPT

很久以前就在本站上看到可以用 reveal.js 在網(wǎng)頁上制作 PPT。但是一直沒有用過，直到最近課堂展示上看到有人用 HackMD 做網(wǎng)頁端 Slides 才又有了興致。

HackMD 提供網(wǎng)頁端服務(wù)，通過 Markdown 排版 Slides。看起來也是用的 reveal.js，可惜網(wǎng)絡(luò)不(bei)好(qiang)，在公用電腦上不方便進(jìn)行展示。于是我在網(wǎng)上尋找類似的功能，發(fā)現(xiàn)有 reveal.js 的 Hugo 主題 可以較好地實(shí)現(xiàn)。這里有一個(gè)Hugo 主題的 Demo和我自己的簡(jiǎn)單的 Demo。

文章目錄

• 安裝
• 制作第一個(gè) Slide 網(wǎng)頁
• 新建 Hugo 網(wǎng)站
• 配置主題
• 網(wǎng)站結(jié)構(gòu)
• 基本語法介紹
• Slide 分頁
• Hugo Shortcodes 功能
• 添加 reveal.js 插件
• 小功能
• 快捷鍵
• 導(dǎo)出為 PDF
• 更多
• 總結(jié)

安裝

Hugo 必裝，Git 推薦安裝。Hugo 在 Windows 下的安裝參考Hugo 安裝中文文檔，簡(jiǎn)單來說以下幾步：

1. 在 Latest Release · gohugoio/hugo 下載最新版 hugo_0.61.0_Windows-64bit.zip 或 hugo_extended_0.61.0_Windows-64bit.zip （32位電腦請(qǐng)自覺用 32bit）
2. 解壓安裝包，將 hugo_*.exe 文件重命名為 hugo.exe ，并添加該文件所在目錄到 PATH 環(huán)境變量中，方便命令行訪問
3. 輸入 hugo help 來驗(yàn)證配置是否成功，成功時(shí)輸出會(huì)包括以下內(nèi)容：

Hugo is a Fast and Flexible Static Site Generatorbuilt with love by spf13 and friends in Go.

制作第一個(gè) Slide 網(wǎng)頁

新建 Hugo 網(wǎng)站

在命令行中輸入命令創(chuàng)建一個(gè) Hugo 網(wǎng)站，并進(jìn)入該新建的文件夾：

hugo new site my-presentationcd my-presentation如果安裝了 git 可以使用 git 安裝主題：

git initgit submodule add git@github.com:dzello/reveal-hugo.git themes/reveal-hugo否則需要在 dzello/reveal-hugos 下載 ZIP 文件，解壓到 my-presentation/themes/ 并確保解壓出的文件夾名稱是 reveal-hugo

配置主題

修改 my-presentation 文件夾中的 config.toml 添加以下內(nèi)容：

theme = "reveal-hugo"RelativeURLs = trueCanonifyURLs = true[markup]defaultMarkdownHandler = "blackfriday"[outputFormats.Reveal]baseName = "index"mediaType = "text/html"isHTML = true最后，在 content 文件夾下，創(chuàng)建 _index.md 文件：

+++title = "My presentation"outputs = ["Reveal"]+++# Hello world!This is my first slide.---# Hello Mars!This is my second slide.上面 +++ 框起來的區(qū)域用來寫網(wǎng)頁相關(guān)配置頭部信息。后面開始是正文內(nèi)容。

生成靜態(tài)網(wǎng)站，只需在 my-presentation 目錄下執(zhí)行 hugo 命令。所有生成的靜態(tài)網(wǎng)站數(shù)據(jù)在 public 文件夾下，打開 index.html 來查看網(wǎng)站內(nèi)容。

要實(shí)時(shí)預(yù)覽，執(zhí)行 hugo server 命令，會(huì)有類似以下輸出（不要關(guān)閉這個(gè)窗口）：

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)這時(shí)可以打開 http://localhost:1313/ 即可實(shí)時(shí)預(yù)覽，當(dāng)文件有改動(dòng)時(shí)，網(wǎng)頁會(huì)自動(dòng)刷新。

網(wǎng)站結(jié)構(gòu)

- content - home # 特殊目錄，用于添加內(nèi)容到網(wǎng)站首頁 PPT 之后 - body.md # 添加到首頁 PPT 后 - conclusion.md # 添加到首頁 PPT 后 - _index.md # 網(wǎng)站首頁 PPT - ted-talk - _index.md # ted talk PPT 的開頭 - body.md # 添加到 ted talk PPT 后 - conclusion.md # 添加到 ted talk PPT 后在這個(gè)目錄結(jié)構(gòu)中，最后會(huì)生成兩個(gè) PPT，一個(gè)是根目錄的 PPT，一個(gè)是 /ted-talk 路徑下的 PPT。在文件夾中的補(bǔ)充 Markdown 文件會(huì)按照其中配置頭部信息中的 weight 屬性排序。如：

+++weight = 10+++# Slide 3---# Slide 4

基本語法介紹

Slide 分頁

---空行隔開的 --- 表示分隔到下一頁 Slide。

Hugo Shortcodes 功能

Hugo 提供了 Shortcodes 功能方便 Markdown 書寫而無需輸入大量的 HTML 代碼。

Section

reveal.js 提供了縱向的導(dǎo)航方式，可以用來將一個(gè)章節(jié)部份的內(nèi)容放到一個(gè)縱列中，從而實(shí)現(xiàn)在章節(jié)之間通過左右快速跳轉(zhuǎn)。

一個(gè)縱列中的 Slides 如下圖所示：

{{% section %}}# Vertical slide 1---# Vertical slide 2{{% /section %}}

Fragment

{{% fragment %}} One {{% /fragment %}}{{% fragment %}} Two {{% /fragment %}}{{% fragment %}} Three {{% /fragment %}}可以實(shí)現(xiàn)增量顯示，即開始不顯示，每次操作順次出現(xiàn)。

單行顯示 {{% frag c="One" %}} 通過 c 屬性確定內(nèi)容，同上面的第一行。

另外可以添加 index 屬性來指定顯示的順序，如 {{% fragment index=2 %}} One {{% /fragment %}}。生成的 html 如下：

<span class='fragment' data-fragment-index=2> One </span>data-fragment-index 屬性指定顯示順序，從小到大依次顯示，數(shù)值一樣則同時(shí)顯示。對(duì)于行內(nèi)文字用 <span> 包裹，而段(block)內(nèi)容（如代碼塊、圖片）用 <div> 包裹。主題默認(rèn)沒有提供 <div> 類型的 shortcode，可以自己將 themes/reveal-hugo/layouts/shortcodes/fragment.html 復(fù)制到 layouts/shortcodes/bfragment.html 文件中，將其中的兩個(gè) span 換成 div。之后用 {{% bfragment %}} 可以使段內(nèi)容增量顯示，而且同樣可以用 index 指定顯示順序。

Slide

---{{< slide id="custom-slide" >}}## Custom slide---id 屬性用來鏈接引用。如 [Try the link](#custom-slide) 會(huì)生成一個(gè)鏈接到對(duì)應(yīng) id 的 Slide 的鏈接。

note

使用 {{% note %}} 可以添加演講者注釋信息，在網(wǎng)頁端按 s 鍵可以打開演講者界面。

添加 reveal.js 插件

在 static 目錄下創(chuàng)建 plugin 文件夾，將 reveal.js 的插件放入其中。在需要使用插件的 Markdown 文件頭部添加：

[reveal_hugo]plugins = ["plugin/math-katex/math-katex.js"]slide_number = true路徑要對(duì)應(yīng)實(shí)際的 js 文件。順便說一句，最后一行的 slide_number 為可選設(shè)置，它可以設(shè)置是否顯示 Slide 頁碼，取值 true 或 false。

對(duì)于需要添加 css 的插件，還需要將 css 信息添加到頁面樣式中：

在 layouts/partials/<path-to-slide>/reveal-hugo 目錄下添加 head.html 文件，加上引用所需 css 的 html 代碼。

教程參考 Plugin Example，對(duì)應(yīng) css 配置見 reveal-hugo/head.html at master · dzello/reveal-hugo。

小功能

快捷鍵

• 上下左右控制 Slide 移動(dòng)方向
• s 進(jìn)入演講者模式
• o 進(jìn)入概覽模式
• f 進(jìn)入全屏模式

導(dǎo)出為 PDF

reveal.js 支持用 Chrome 瀏覽器導(dǎo)出為 PDF 文件，只需要在原來的網(wǎng)頁地址后加上 ?print-pdf，如 https://gkzhb.gitee.io/slides/?print-pdf，然后使用 Chrome 的打印功能即可導(dǎo)出為 PDF。

更多

參看官方 Demo

• 每張 Slide 可單獨(dú)設(shè)置背景顏色、出現(xiàn)的變換效果及快慢等。
• 通過修改 Markdown 文件頭部信息可以修改網(wǎng)頁設(shè)置，如添加插件。
• 使用 reveal.js 的 Markdown 語法渲染 Slide {{< markdown >}}與用 html 渲染 Slide <section data-noprocess> ... </section>

在 GitHub 項(xiàng)目 exampleSite/content 目錄下可以看到演示 Demo 的源 Markdown 文件，可以作為參考樣例。

Hugo 也提供了添加自定義樣式或 html 結(jié)構(gòu)到特定網(wǎng)頁的功能，感興趣的也可以自行探索，也歡迎大家一起討論。

總結(jié)

我個(gè)人覺得這個(gè) Slide 最大的優(yōu)點(diǎn)就是便攜性與兼容性。

• 我們可以將 Slides 部署到網(wǎng)上，方便在任何有網(wǎng)的地方進(jìn)行訪問，也可以將整個(gè) public 文件夾放到 U 盤通過瀏覽器打開。簡(jiǎn)單的部署可以選擇 Github 或碼云（國(guó)內(nèi)推薦，網(wǎng)速更快）的靜態(tài)網(wǎng)站托管服務(wù)。
• 相比于 PPT 來說兼容性比較不錯(cuò)，只是瀏覽器不能過于老舊（吐槽一下我們學(xué)校圖書館中居然還有用 XP 系統(tǒng)并且默認(rèn)瀏覽器不支持 HTTPS 的電腦）。
• 而且相比 PDF Beamer 不需要安裝龐大的 LaTeX 環(huán)境，卻又能提供簡(jiǎn)單的動(dòng)畫效果及 Hugo 提供的實(shí)時(shí)預(yù)覽功能。當(dāng)然如果夠大佬的話，也可以充分利用瀏覽器環(huán)境進(jìn)行各種刁炸天的騷操作。