README

展示插件是 Grav CMS 的扩展，提供了一种简单的方式来创建可以通过二维导航的全屏幻灯片展示，使用 Reveal.js 库。

在核心上，该插件促进了与库一起使用的内容的高效处理。您可以通过自定义初始化以任何方式使用 Reveal.js，同时仍然利用插件的内容处理。一个演示是可用的，以及一个骨架，以及演示内容。

特性

通过二维幻灯片展示进行展示
响应式，多设备兼容的样式
对展示和幻灯片的细粒度控制
- 通过简码和Admin插件提供级联样式和选项
便携式内容：所有内容都包含在Markdown中，包括设置
灵活、模糊、递归的页面结构
通过您的主题或插件进行扩展
打印友好的展示，带有或没有备注或仅文本模式
演示者模式：PowerPoint的现代、强大、易于使用的替代品
- 在您的展示中包含备注
- 本地或远程同步演示者模式和展示

安装

安装展示插件可以通过两种方式之一完成。GPM（Grav包管理器）安装方法允许您通过简单的终端命令快速轻松地安装插件，而手动方法允许您通过zip文件来完成。

GPM安装（推荐）

安装此插件最简单的方法是通过系统终端（也称为命令行）的 Grav包管理器（GPM）。从Grav安装的根目录中输入

bin/gpm install presentation

这将安装展示插件到您的Grav /user/plugins 目录中。其文件可以在 /your/site/grav/user/plugins/presentation 下找到。

手动安装

要安装此插件，只需下载此存储库的zip版本，并将其解压缩到 /your/site/grav/user/plugins 之下。然后将文件夹重命名为 presentation。您可以在 GitHub 或通过 GetGrav.org 上找到这些文件。

现在您应该在以下位置找到所有插件文件

/your/site/grav/user/plugins/presentation

注意：此插件是Grav的模块化组件，需要 Grav 以及 Error 和 Problems 来运行。

要求

此插件仅适用于 Grav v1.6 或更高版本，因为它需要 PHP v7.1.3 或更高版本。

配置

在配置此插件之前，您应该将 user/plugins/presentation/presentation.yaml 复制到 user/config/plugins/presentation.yaml，并且只编辑这个副本。

以下是默认配置以及可用的选项说明

# Enable Plugin if true, disable if false
enabled: true
# Theme to use from Reveal.js (https://github.com/hakimel/reveal.js/#theming)
theme: moon
# Order of how pages are rendered
order:
  by: folder
  dir: asc
# Load all registered CSS and JS assets
all_assets: false
# Include Theme's custom.css
theme_css: true
# Enable Reveal.js CSS
builtin_css: true
# Enable Reveal.js JS
builtin_js: true
# Enable Plugin's CSS
plugin_css: true
# Enable Plugin's JS
plugin_js: true
# Enable Plugin's dynamic text sizing
textsizing: true
# Synchronize Slide-navigation
sync: "none"
# URL Route to use for Poll-sync
api_route: "presentationapi"
# Poll-sync timeout in milliseconds
poll_timeout: 2000
# Poll-sync retry limit
poll_retry_limit: 10
# Enable Poll-sync token-authorization
token_auth: false
# Poll-sync token to use for authorization
token: Hd4HFdPvbpKzTqz
# Enable Save Content button and CTRL+SHIFT+S combo
admin_async_save: false
# Enable Save Content when typing
admin_async_save_typing: false
# Twig-template to inject below content
footer: ""
# Enable onLoad transition
transition: true
# Process HTML or raw Markdown
process: html
# Enable Plugin's shortcodes
shortcodes: true
# Default class for Presentation-shortcode
shortcode_classes: "presentation-iframe"
# Unwrap images from paragraph
unwrap_images: true
# Class to use for Content building
content: "Content"
# Class to use for Content parsing
parser: "Parser"
# Class to use for Styles, Classes, and Data management
transport: "Transport"
# Class to use for Shortcode parsing
shortcode_parser: RegularParser
# Breakpoints for responsive textsizing
breakpoints:
  240: "16"
  320: "20"
  576: "24"
  768: "28"
  992: "32"
  1200: "36"
  1600: "40"
# Styles to use as defaults for Presentations
style:
  ...
# Dynamic text scaling to use as defaults for Presentations
textsize:
  scale: string
  modifier: float
# Stack slides horizontally or vertically (default), on thematic breaks
horizontal: false
# Options to pass to Reveal.js
options:
  width: "100%"
  height: "100%"
  margin: "0"
  minScale: "1"
  maxScale: "1"
  transition: "fade"
  controlsTutorial: "false"
  history: "true"
  display: "flex"
  pdfSeparateFragments: false

Reveal.js 库的所有可配置配置选项都可以通过 options 进行配置，请参阅其文档以获取可用选项。

页面特定配置

在 presentation.yaml 中设置的任何配置都可以通过页面的 FrontMatter 覆盖，如下所示

---
title: Alice’s Adventures in Wonderland
presentation:
  order:
    by: date
    dir: desc
  options:
    transition: "fade"
---

用法

在 Grav 中，Presentation 插件使用的页面结构基本上与正常情况相同，但有几个值得注意的例外：任何水平线，Markdown 中的 --- 和 HTML 中的 <hr /> 被视为一个 主题中断，正如它在 HTML5 中定义的那样。这意味着当插件遍历它们时，Grav 中的每个页面都被视为一个普通的、水平的幻灯片，但是主题中断创建了一个 垂直幻灯片。

您可以在根页面下拥有任意多的页面，每个页面都将被视为一个幻灯片。当您在页面内创建主题中断时，幻灯片将创建在页面本身的下方 -- 适应 Reveal.js 的二维幻灯片。

有关使用 Reveal.js 本身的信息，请参阅有关开始使用演示和演讲者视图的文档。

命名法

使用 Reveal.js 时，演示并非完全线性。相反，它有一个从左到右的线性部分，每个部分组成一个幻灯片，并且可以向下添加额外的幻灯片。因此，您可以从每个部分开始线性地通过演示，向下移动直到结束，然后继续到下一个部分，或者按您选择的任意顺序在它们之间移动。

此外，每个幻灯片中还可以使用片段。这些片段像幻灯片一样线性地显示，但一次只显示一个元素，而不是幻灯片的全部内容。

结构

/user/pages/book
├── presentation.md
├── 01.down-the-rabbit-hole
│   └── slide.md
├── 02.advice-from-a-caterpillar
│   └── slide.md
├── 03.were-all-mad-here
│   └── slide.md
├── 04.a-mad-tea-party
│   └── slide.md
├── 05.the-queens-crocquet-ground
│   └── slide.md
├── 06.postscript
└───└── slide.md

如这个示例结构所示，只有初始页面使用了 presentation.html.twig 模板。子页面使用的模板是 slide.html.twig，尽管无论模板如何都会处理这些页面的内容。将它们命名为 slide.md 启用了 Admin 插件中的幻灯片蓝图。插件定义了 presentation.html.twig 模板，但您可以通过您的主题覆盖它。

样式

该插件模拟了层叠样式表（CSS）的逻辑，即页面可以使用 FrontMatter 或简码分配类、样式属性或隐藏。这就像在 FrontMatter 中使用 class: custom-slide-class 或者在 Markdown 内容中使用简码 [class=custom-slide-class] 一样简单。样式以相同的方式应用，其中 FrontMatter 接受类似于这样的 CSS 属性

style:
  color: green

即，将每个属性映射到值，而不是列表。也可以使用 [style-color=green] 为单个幻灯片设置相同的设置，如下所述。样式根据它们出现的位置赋予优先级，因此插件按此顺序查找它们

插件选项
页面 FrontMatter
子页面 FrontMatter
页面内容（Markdown）作为简码

属性是累积收集的，链中较靠下的属性优先于较靠上的属性。

当然，您也可以通过主题的 /css/custom.css 文件使用插件进行样式设计，通过 .reveal 选择器针对所有插件内容。可以使用 theme_css 设置启用或禁用此行为。所有幻灯片的章节都有一个设置 id 属性，这可以通过 CSS 利用，如下所示

.reveal #down-the-rabbit-hole-0 {
  background: red;
}

将文本适应到幻灯片

该插件提供了一种在幻灯片中动态缩放文本的方法，这与PowerPoint 2016中的操作类似但又有区别。而不是完全自动地进行缩放，这往往在不同设备和分辨率下表现不佳，您可以设置一个缩放和一个可选的修饰符，例如。

[data-textsize-scale=1.125]
[data-textsize-modifier=1.05]

如果插件选项和页面上的文本大小调整已启用，则块文本（任何不在标题元素中的文本）与标题文本（h1、h2、h3、h4、h5、h6）之间的关系由textsize-scale属性确定。也就是说，标题元素的文本相对于基本字体大小的大小。

在上面的示例中，缩放设置为“主要第二音阶”，基本字体大小为16（推荐的网页最小字体大小），这为标题提供了以下大小：28.83（《h1》），25.63（《h2》），22.78（《h3》），20.25（《h4》），18（《h5》），和16（《h6》）。随着屏幕大小的增加，基本字体大小（以及文本）向上调整，以实现动态、响应式的文本大小调整。这是通过breakpoints选项完成的。

如果设置了修饰符，则通过乘法改变匹配断点的基字体大小。所以如果设置为1.05，它会使它在断点处的基字体大小比正常情况下大5%。

使用章节或幻灯片特定的样式

如果配置了shortcodes: true，任何章节或幻灯片都可以使用简码来声明特定的样式。这些样式采用[style-property=value]格式，并定义了多个，例如

[style-background=#195b69]
[style-color=cyan]

如果找到了简码并将其应用，则从进一步评估的内容中删除该简码。此方法使用正则表达式以提高速度，并且优先于插件或页面定义的styles。

注意：语法限制为[style-property=value]。不符合字母数字或破折号的意外字符可能导致简码无法被提取。style-property或value必须基本上符合正则表达式 [a-zA-Z0-9-]+，由等号（=）分隔，并用方括号（[]）包围。用于测试，请使用Regex101。 但是，您可能需要将值用双引号括起来，以便解析器理解它。

居中内容

要在幻灯片中垂直居中内容，当Reveal.js设置display: 'flex'时，您需要向幻灯片添加justify-content: center。这就像向页面FrontMatter添加以下内容一样简单。

style:
  justify-content: center

或者将简码[style-justify-content=center]添加到单个幻灯片。

通过data-attributes使用Reveal.js的背景图片、视频或网站

Reveal.js支持通过其Slide backgrounds轻松使用幻灯片的背景图片、视频或网站。以及通过简码的行内样式，任何以data开头的属性都作为数据属性传递给幻灯片，因此您可以执行像添加背景图片这样的操作。

[data-background-image=https://upload.wikimedia.org/wikipedia/commons/5/50/Sylvilagus_bachmani_01035t.JPG]
[data-background-size=contain]

背景视频

[data-background-video=https://dl3.webmfiles.org/big-buck-bunny_trailer.webm]
[data-background-video-loop=true]
[data-background-video-muted=true]
[data-background-size=contain]

背景网站

[data-background-iframe=https://en.wikipedia.org/wiki/Rabbit]

前景（交互式）网站

[data-background-iframe=https://en.wikipedia.org/wiki/Rabbit]
[data-background-interactive]

当使用data-background-interactive时，可以与iFrame进行交互。因此，您必须手动点击演示的控制箭头以离开此幻灯片。具有背景iFrame的幻灯片始终使用浏览器窗口的完整宽度和高度。

注意：可能需要将简码的值/参数用双引号括起来，例如[data-background-iframe="https://en.wikipedia.org/wiki/Rabbit"]，才能正常工作。

覆盖幻灯片的大锚点

有一个link-overlay简码可用于创建覆盖幻灯片的链接，适合与背景一起使用。例如：[link-overlay="https://google.com/"]。

变量命名

从版本3.1.4开始，插件在查找自定义样式方面的灵活性更高。您可以命名这些style或styles，或者将它们嵌套在页面FrontMatter中的presentation内。插件配置首先查找style，然后是styles，在处理幻灯片时，它将继续在presentation内查找。以下是一个FrontMatter的示例，其中首先找到style，因此被应用。

style:
  justify-content: center
styles:
  justify-content: space-around
presentation:
  style:
    justify-content: space-between
presentation:
  styles:
    justify-content: space-evenly

注释

每个幻灯片都可以有与它关联的注释，就像PowerPoint演示文稿一样。这些注释可以在任何幻灯片上使用[notes] ... [/notes]设置，其中短代码应该包围组成注释的Markdown内容。例如

[notes]

- Rabbits don't lay eggs
- Porpoises don't tell lies
- Camels don't smoke cigarettes

[/notes]

高级用法

贡献和开发

待办事项

升级到Reveal.js的新主要版本

致谢

Grav presentation-插件由Ole Vik编写
Reveal.js-插件
两者都受MIT许可
核心开发由UiB资助，Save Content功能由Paul Hibbitts赞助
特别感谢Paul Hibbitts进行了广泛的测试

olevik / grav-plugin-presentation

维护者

详细信息