slide-template's Introduction

TonyCrane's Slide Template

一个 reveal-md 的简单主题，部分参考了 jyywiki 的主题。（应该会随着我的使用不断更新）

预览：https://slides.tonycrane.cc/RevealmdTemplate

custom.css：亮色主题，载入即可
dark.css：暗色配置，使用需附带在 custom.css 后面

~~对于我这种停留在 html+css 的前端水平，当然是宁可多糊 html 也不愿意写个预处理插件。~~ 在 .vscode/snippets.code-snippets 中是一些方便糊 html 的代码片段。

构建与部署

旧版指南

安装 reveal-md
```
$ npm install -g reveal-md
```
在浏览器中实时预览
```
$ reveal-md main.md -w
```
构建静态文件
```
$ reveal-md main.md --static site --assets-dir assets
```
- 生成 pdf 版：在 url 后面加上 ?print-pdf 使用浏览器打印
部署
- 很蠢的一个实现，总之就是用 Action 把 site 文件夹中的内容复制到我的另一个私有 repo 中，然后在那个 repo 里部署 GitHub Pages
- 构建出 site 文件夹后 commit & push，message 需要以 [deploy] 开头

使用 Makefile 来辅助预览与构建

安装 reveal-md
```
$ npm install -g reveal-md
```
开启本地实时预览
```
$ make  # or make live
```
构建静态文件
```
$ make build
```
- 生成 pdf 版：在 url 后面加上 ?print-pdf 使用浏览器打印

用法

和 reveal-js 的快捷键一致，在页面中按下 ? 可以查看所有快捷键。常用的：

N / SPACE：下一页
P / Shift SPACE：上一页
← / H：翻到左边页面
→ / L：翻到右边页面
↑ / K：翻到上边页面
↓ / J：翻到下边页面
B / .：暂停（黑屏）
F：全屏
ESC / O：显示概览
S：打开演讲者窗口

slide-template's People

Contributors

Stargazers

Watchers

slide-template's Issues

No page rendered

Like this.
I think it is due to update of template.html of reveal-md.

Compare old version (line 37-39 in this repo)

<div class="reveal">
  <div class="slides">{{{slides}}}</div>
</div>

with new version (line 35-43 in https://github.com/webpro/reveal-md/blob/main/lib/template/reveal.html)

<div class="reveal">
  <div class="slides">
    <section data-markdown {{{slidifyAttributes}}}>
      <textarea data-template>
        {{{markdown}}}
      </textarea>
    </section>
  </div>
</div>