这是一个 Hugo Even 主题集成 impress.js 实现幻灯片效果和集成过程的演示。

支持功能

  • 支持 markdown 语法
  • 支持 html 语法
  • 支持 css 动画
  • 支持自定义 js 交互逻辑

实现依赖工具

  • impress.js
  • showdown.js
  • mermaid.js

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

----- --- data-x: -1000 data-y: -1500 --- # Hugo 中简单 PPT 效果演示 ## 使用 Impress.js 实现 * markdown 支持 * html 支持 * 依赖库 * [showdown](https://github.com/showdownjs/showdown) * impress.js ----- --- data-rel-x: 1000 data-rel-y: 0 --- # 支持 markdown 样式 * 可以使用常用 markdown 语法 * 例如:*italics* 、 **bold** 、 `code` ----- # 分页和配置语法 * 由于 markdown 本身没有分页支持,所以这里使用 `-----` 作为分页标志 * 每个页面都可以有自己的配置,配置必须放在页面的最前面放在 **两个 `---`** 之间 * 例如 ``` ----- --- data-rel-x: 1000 data-rel-y: 0 --- 你的内容 ``` ----- --- data-rel-x: 300 data-rel-y: 1100 data-rotate: 90 --- # html 和 动画支持 ## 这是一个 html 元素支持的演示。

Fly in

Fade in

And zoom in

*这个有点像 ppt。需要使用 css3 动画库.* **如果只要 html 解析,请加入配置选项: `html: true`** ----- --- id: acme --- # graph 演示
Q1¥234
Q2¥255
Q3(insert here)
Q4
----- # 2 ``` data-rel-x: 800 data-rel-y: 800 data-rotate: 60 ``` ----- --- data-x: 6200 data-y: 4300 data-z: -100 data-rotate-x: -40 data-rotate-y: 10 data-scale: 2 class: step slide markdown step-3d --- # This is 3D

have you noticed it’s in 3D*?

* beat that, prezi ;) ----- # 子步骤演示 1 ## 多步骤显示
  • Press 'P' to open a presenter console.
  • When you move the mouse, navigation controls are visible on your bottom left
  • Autoplay makes the slides advance after a timeout
  • Relative positioning plugin is often a more convenient way to position your slides when editing. (See html for this presentation.)
----- # 子步骤演示 2 ## 单步骤显示
  • Press 'P' to open a presenter console.
  • When you move the mouse, navigation controls are visible on your bottom left
  • Autoplay makes the slides advance after a timeout
  • Relative positioning plugin is often a more convenient way to position your slides when editing. (See html for this presentation.)