From 5f8a072af45c70d4c388846aa43f98ac64d017f0 Mon Sep 17 00:00:00 2001 From: Edit-Mr Date: Tue, 28 May 2024 07:58:31 +0800 Subject: [PATCH 01/20] Add new i18n translations and dependencies --- eleventy.config.js | 119 ++++--- package.json | 1 + src/_layouts/default.njk | 2 +- src/_layouts/home.njk | 2 +- src/{ => en-US}/api.md | 0 src/{ => en-US}/auto-animate.md | 0 src/{ => en-US}/auto-slide.md | 0 src/{ => en-US}/backgrounds.md | 0 src/{ => en-US}/code.md | 0 src/{ => en-US}/config.md | 0 src/{ => en-US}/course.md | 0 src/{ => en-US}/creating-plugins.md | 0 src/en-US/en-US.json | 4 + src/{ => en-US}/events.md | 0 src/{ => en-US}/fragments.md | 0 src/{ => en-US}/fullscreen.md | 0 src/{ => en-US}/index.md | 0 src/{ => en-US}/initialization.md | 0 src/{ => en-US}/installation.md | 0 src/{ => en-US}/jump-to-slide.md | 0 src/{ => en-US}/keyboard.md | 0 src/{ => en-US}/layout.md | 0 src/{ => en-US}/links.md | 0 src/{ => en-US}/markdown.md | 0 src/{ => en-US}/markup.md | 0 src/{ => en-US}/math.md | 0 src/{ => en-US}/media.md | 0 src/{ => en-US}/multiplex.md | 0 src/{ => en-US}/overview.md | 0 src/{ => en-US}/pdf-export.md | 0 src/{ => en-US}/plugins.md | 0 src/{ => en-US}/postmessage.md | 0 src/{ => en-US}/presentation-size.md | 0 src/{ => en-US}/presentation-state.md | 0 src/{ => en-US}/react.md | 0 src/{ => en-US}/scroll-view.md | 0 src/{ => en-US}/slide-numbers.md | 0 src/{ => en-US}/slide-visibility.md | 0 src/{ => en-US}/speaker-view.md | 0 src/{ => en-US}/themes.md | 0 src/{ => en-US}/touch-navigation.md | 0 src/{ => en-US}/transitions.md | 0 src/{ => en-US}/upgrading.md | 0 src/{ => en-US}/vertical-slides.md | 0 src/zh-TW/api.md | 145 +++++++++ src/zh-TW/auto-animate.md | 282 +++++++++++++++++ src/zh-TW/auto-slide.md | 60 ++++ src/zh-TW/backgrounds.md | 152 +++++++++ src/zh-TW/code.md | 210 +++++++++++++ src/zh-TW/config.md | 282 +++++++++++++++++ src/zh-TW/course.md | 88 ++++++ src/zh-TW/creating-plugins.md | 65 ++++ src/zh-TW/events.md | 72 +++++ src/zh-TW/fragments.md | 161 ++++++++++ src/zh-TW/fullscreen.md | 18 ++ src/zh-TW/index.md | 29 ++ src/zh-TW/initialization.md | 83 +++++ src/zh-TW/installation.md | 83 +++++ src/zh-TW/jump-to-slide.md | 36 +++ src/zh-TW/keyboard.md | 58 ++++ src/zh-TW/layout.md | 129 ++++++++ src/zh-TW/links.md | 64 ++++ src/zh-TW/markdown.md | 172 ++++++++++ src/zh-TW/markup.md | 84 +++++ src/zh-TW/math.md | 142 +++++++++ src/zh-TW/media.md | 83 +++++ src/zh-TW/multiplex.md | 11 + src/zh-TW/overview.md | 34 ++ src/zh-TW/pdf-export.md | 61 ++++ src/zh-TW/plugins.md | 98 ++++++ src/zh-TW/postmessage.md | 56 ++++ src/zh-TW/presentation-size.md | 64 ++++ src/zh-TW/presentation-state.md | 23 ++ src/zh-TW/react.md | 114 +++++++ src/zh-TW/scroll-view.md | 160 ++++++++++ src/zh-TW/slide-numbers.md | 65 ++++ src/zh-TW/slide-visibility.md | 47 +++ src/zh-TW/speaker-view.md | 76 +++++ src/zh-TW/themes.md | 39 +++ src/zh-TW/touch-navigation.md | 27 ++ src/zh-TW/transitions.md | 85 +++++ src/zh-TW/upgrading.md | 59 ++++ src/zh-TW/vertical-slides.md | 47 +++ src/zh-TW/zh-TW.json | 4 + yarn.lock | 434 ++++++++------------------ 85 files changed, 3769 insertions(+), 361 deletions(-) rename src/{ => en-US}/api.md (100%) rename src/{ => en-US}/auto-animate.md (100%) rename src/{ => en-US}/auto-slide.md (100%) rename src/{ => en-US}/backgrounds.md (100%) rename src/{ => en-US}/code.md (100%) rename src/{ => en-US}/config.md (100%) rename src/{ => en-US}/course.md (100%) rename src/{ => en-US}/creating-plugins.md (100%) create mode 100644 src/en-US/en-US.json rename src/{ => en-US}/events.md (100%) rename src/{ => en-US}/fragments.md (100%) rename src/{ => en-US}/fullscreen.md (100%) rename src/{ => en-US}/index.md (100%) rename src/{ => en-US}/initialization.md (100%) rename src/{ => en-US}/installation.md (100%) rename src/{ => en-US}/jump-to-slide.md (100%) rename src/{ => en-US}/keyboard.md (100%) rename src/{ => en-US}/layout.md (100%) rename src/{ => en-US}/links.md (100%) rename src/{ => en-US}/markdown.md (100%) rename src/{ => en-US}/markup.md (100%) rename src/{ => en-US}/math.md (100%) rename src/{ => en-US}/media.md (100%) rename src/{ => en-US}/multiplex.md (100%) rename src/{ => en-US}/overview.md (100%) rename src/{ => en-US}/pdf-export.md (100%) rename src/{ => en-US}/plugins.md (100%) rename src/{ => en-US}/postmessage.md (100%) rename src/{ => en-US}/presentation-size.md (100%) rename src/{ => en-US}/presentation-state.md (100%) rename src/{ => en-US}/react.md (100%) rename src/{ => en-US}/scroll-view.md (100%) rename src/{ => en-US}/slide-numbers.md (100%) rename src/{ => en-US}/slide-visibility.md (100%) rename src/{ => en-US}/speaker-view.md (100%) rename src/{ => en-US}/themes.md (100%) rename src/{ => en-US}/touch-navigation.md (100%) rename src/{ => en-US}/transitions.md (100%) rename src/{ => en-US}/upgrading.md (100%) rename src/{ => en-US}/vertical-slides.md (100%) create mode 100644 src/zh-TW/api.md create mode 100644 src/zh-TW/auto-animate.md create mode 100644 src/zh-TW/auto-slide.md create mode 100644 src/zh-TW/backgrounds.md create mode 100644 src/zh-TW/code.md create mode 100644 src/zh-TW/config.md create mode 100644 src/zh-TW/course.md create mode 100644 src/zh-TW/creating-plugins.md create mode 100644 src/zh-TW/events.md create mode 100644 src/zh-TW/fragments.md create mode 100644 src/zh-TW/fullscreen.md create mode 100644 src/zh-TW/index.md create mode 100644 src/zh-TW/initialization.md create mode 100644 src/zh-TW/installation.md create mode 100644 src/zh-TW/jump-to-slide.md create mode 100644 src/zh-TW/keyboard.md create mode 100644 src/zh-TW/layout.md create mode 100644 src/zh-TW/links.md create mode 100644 src/zh-TW/markdown.md create mode 100644 src/zh-TW/markup.md create mode 100644 src/zh-TW/math.md create mode 100644 src/zh-TW/media.md create mode 100644 src/zh-TW/multiplex.md create mode 100644 src/zh-TW/overview.md create mode 100644 src/zh-TW/pdf-export.md create mode 100644 src/zh-TW/plugins.md create mode 100644 src/zh-TW/postmessage.md create mode 100644 src/zh-TW/presentation-size.md create mode 100644 src/zh-TW/presentation-state.md create mode 100644 src/zh-TW/react.md create mode 100644 src/zh-TW/scroll-view.md create mode 100644 src/zh-TW/slide-numbers.md create mode 100644 src/zh-TW/slide-visibility.md create mode 100644 src/zh-TW/speaker-view.md create mode 100644 src/zh-TW/themes.md create mode 100644 src/zh-TW/touch-navigation.md create mode 100644 src/zh-TW/transitions.md create mode 100644 src/zh-TW/upgrading.md create mode 100644 src/zh-TW/vertical-slides.md create mode 100644 src/zh-TW/zh-TW.json diff --git a/eleventy.config.js b/eleventy.config.js index ca89e1f7..a2351095 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,90 +1,111 @@ -const htmlmin = require('html-minifier') -const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); +/** @format */ + +const htmlmin = require("html-minifier"); +const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); +const i18n = require("eleventy-plugin-i18n"); module.exports = eleventyConfig => { + // i18n support + + module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(i18n, { + // translations: { + // hello: { + // "en-US": "Hello", + // }, + // }, + fallbackLocales: { + "*": "en-US", + }, + }); + }; // Minify our HTML - eleventyConfig.addTransform('htmlmin', (content, outputPath) => { - if ( outputPath.endsWith('.html') ) - { + eleventyConfig.addTransform("htmlmin", (content, outputPath) => { + if (outputPath.endsWith(".html")) { let minified = htmlmin.minify(content, { useShortDoctype: true, removeComments: true, - collapseWhitespace: true - }) - return minified + collapseWhitespace: true, + }); + return minified; } - return content - }) + return content; + }); // Layout aliases - eleventyConfig.addLayoutAlias('default', 'default.njk') - eleventyConfig.addLayoutAlias('home', 'home.njk') + eleventyConfig.addLayoutAlias("default", "default.njk"); + eleventyConfig.addLayoutAlias("home", "home.njk"); // Include our static assets - eleventyConfig.addPassthroughCopy('images') - eleventyConfig.addPassthroughCopy('demos') + eleventyConfig.addPassthroughCopy("images"); + eleventyConfig.addPassthroughCopy("demos"); eleventyConfig.addPlugin(syntaxHighlight, { - alwaysWrapLineHighlights: false + alwaysWrapLineHighlights: false, }); - let md = require('markdown-it')({ + let md = require("markdown-it")({ html: true, breaks: true, - linkify: true + linkify: true, }); - md.use( require('markdown-it-attrs') ); - md.use( require('markdown-it-anchor') ); + md.use(require("markdown-it-attrs")); + md.use(require("markdown-it-anchor")); - eleventyConfig.setLibrary('md', md); + eleventyConfig.setLibrary("md", md); // Cut back on terminal noise during development eleventyConfig.setQuietMode(true); // Collection of pages that can appear in search results - eleventyConfig.addCollection('searchPages', collection => { - return collection.getFilteredByGlob('src/*.md').sort((a,b) => { - if(a.data.title < b.data.title) return -1; - if(a.data.title > b.date.title) return 1; - return 0; - }).filter( page => { - return !page.data.hidden; - } ); + eleventyConfig.addCollection("searchPages", collection => { + return collection + .getFilteredByGlob("src/*.md") + .sort((a, b) => { + if (a.data.title < b.data.title) return -1; + if (a.data.title > b.date.title) return 1; + return 0; + }) + .filter(page => { + return !page.data.hidden; + }); }); // Helper for extracting the searchable content in a page - eleventyConfig.addShortcode('searchContent', page => { - if( !page.hasOwnProperty('templateContent') ) { - console.warn('Failed to extract excerpt: Document has no property "templateContent".'); + eleventyConfig.addShortcode("searchContent", page => { + if (!page.hasOwnProperty("templateContent")) { + console.warn( + 'Failed to extract excerpt: Document has no property "templateContent".' + ); return null; } - return JSON.stringify( page.templateContent ).slice( 1,-1 ) - .replace( /[\n]\s*[\n]/gm, '\n' ) - .replace( /]*.*<\/h1>/gm, '' ) - .replace( /<[^>]*>/g, '' ) - .replace( /^\\n/g, '' ) - .trim(); + return JSON.stringify(page.templateContent) + .slice(1, -1) + .replace(/[\n]\s*[\n]/gm, "\n") + .replace(/]*.*<\/h1>/gm, "") + .replace(/<[^>]*>/g, "") + .replace(/^\\n/g, "") + .trim(); }); // eleventyConfig.addWatchTarget("js/"); // eleventyConfig.addWatchTarget("css/"); return { - templateFormats: ['md', 'njk'], - markdownTemplateEngine: 'njk', - htmlTemplateEngine: 'njk', + templateFormats: ["md", "njk"], + markdownTemplateEngine: "njk", + htmlTemplateEngine: "njk", passthroughFileCopy: true, dir: { - input: 'src', - output: 'dist', - layouts: '_layouts', - includes: '_includes', - data: '_data' - } - } - -} + input: "src", + output: "dist", + layouts: "_layouts", + includes: "_includes", + data: "_data", + }, + }; +}; diff --git a/package.json b/package.json index d0f618ff..89c1b685 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "yarn": "^1.22.19" }, "dependencies": { + "eleventy-plugin-i18n": "^0.1.3", "highlight.js": "^11.9.0", "reveal.js": "github:hakimel/reveal.js#master" } diff --git a/src/_layouts/default.njk b/src/_layouts/default.njk index 89afaa6b..e1bfdc39 100644 --- a/src/_layouts/default.njk +++ b/src/_layouts/default.njk @@ -1,5 +1,5 @@ - + diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk index 447329d3..8cec1457 100644 --- a/src/_layouts/home.njk +++ b/src/_layouts/home.njk @@ -1,5 +1,5 @@ - + diff --git a/src/api.md b/src/en-US/api.md similarity index 100% rename from src/api.md rename to src/en-US/api.md diff --git a/src/auto-animate.md b/src/en-US/auto-animate.md similarity index 100% rename from src/auto-animate.md rename to src/en-US/auto-animate.md diff --git a/src/auto-slide.md b/src/en-US/auto-slide.md similarity index 100% rename from src/auto-slide.md rename to src/en-US/auto-slide.md diff --git a/src/backgrounds.md b/src/en-US/backgrounds.md similarity index 100% rename from src/backgrounds.md rename to src/en-US/backgrounds.md diff --git a/src/code.md b/src/en-US/code.md similarity index 100% rename from src/code.md rename to src/en-US/code.md diff --git a/src/config.md b/src/en-US/config.md similarity index 100% rename from src/config.md rename to src/en-US/config.md diff --git a/src/course.md b/src/en-US/course.md similarity index 100% rename from src/course.md rename to src/en-US/course.md diff --git a/src/creating-plugins.md b/src/en-US/creating-plugins.md similarity index 100% rename from src/creating-plugins.md rename to src/en-US/creating-plugins.md diff --git a/src/en-US/en-US.json b/src/en-US/en-US.json new file mode 100644 index 00000000..aa677573 --- /dev/null +++ b/src/en-US/en-US.json @@ -0,0 +1,4 @@ +{ + "dir": "ltr", + "locale": "en-US" + } \ No newline at end of file diff --git a/src/events.md b/src/en-US/events.md similarity index 100% rename from src/events.md rename to src/en-US/events.md diff --git a/src/fragments.md b/src/en-US/fragments.md similarity index 100% rename from src/fragments.md rename to src/en-US/fragments.md diff --git a/src/fullscreen.md b/src/en-US/fullscreen.md similarity index 100% rename from src/fullscreen.md rename to src/en-US/fullscreen.md diff --git a/src/index.md b/src/en-US/index.md similarity index 100% rename from src/index.md rename to src/en-US/index.md diff --git a/src/initialization.md b/src/en-US/initialization.md similarity index 100% rename from src/initialization.md rename to src/en-US/initialization.md diff --git a/src/installation.md b/src/en-US/installation.md similarity index 100% rename from src/installation.md rename to src/en-US/installation.md diff --git a/src/jump-to-slide.md b/src/en-US/jump-to-slide.md similarity index 100% rename from src/jump-to-slide.md rename to src/en-US/jump-to-slide.md diff --git a/src/keyboard.md b/src/en-US/keyboard.md similarity index 100% rename from src/keyboard.md rename to src/en-US/keyboard.md diff --git a/src/layout.md b/src/en-US/layout.md similarity index 100% rename from src/layout.md rename to src/en-US/layout.md diff --git a/src/links.md b/src/en-US/links.md similarity index 100% rename from src/links.md rename to src/en-US/links.md diff --git a/src/markdown.md b/src/en-US/markdown.md similarity index 100% rename from src/markdown.md rename to src/en-US/markdown.md diff --git a/src/markup.md b/src/en-US/markup.md similarity index 100% rename from src/markup.md rename to src/en-US/markup.md diff --git a/src/math.md b/src/en-US/math.md similarity index 100% rename from src/math.md rename to src/en-US/math.md diff --git a/src/media.md b/src/en-US/media.md similarity index 100% rename from src/media.md rename to src/en-US/media.md diff --git a/src/multiplex.md b/src/en-US/multiplex.md similarity index 100% rename from src/multiplex.md rename to src/en-US/multiplex.md diff --git a/src/overview.md b/src/en-US/overview.md similarity index 100% rename from src/overview.md rename to src/en-US/overview.md diff --git a/src/pdf-export.md b/src/en-US/pdf-export.md similarity index 100% rename from src/pdf-export.md rename to src/en-US/pdf-export.md diff --git a/src/plugins.md b/src/en-US/plugins.md similarity index 100% rename from src/plugins.md rename to src/en-US/plugins.md diff --git a/src/postmessage.md b/src/en-US/postmessage.md similarity index 100% rename from src/postmessage.md rename to src/en-US/postmessage.md diff --git a/src/presentation-size.md b/src/en-US/presentation-size.md similarity index 100% rename from src/presentation-size.md rename to src/en-US/presentation-size.md diff --git a/src/presentation-state.md b/src/en-US/presentation-state.md similarity index 100% rename from src/presentation-state.md rename to src/en-US/presentation-state.md diff --git a/src/react.md b/src/en-US/react.md similarity index 100% rename from src/react.md rename to src/en-US/react.md diff --git a/src/scroll-view.md b/src/en-US/scroll-view.md similarity index 100% rename from src/scroll-view.md rename to src/en-US/scroll-view.md diff --git a/src/slide-numbers.md b/src/en-US/slide-numbers.md similarity index 100% rename from src/slide-numbers.md rename to src/en-US/slide-numbers.md diff --git a/src/slide-visibility.md b/src/en-US/slide-visibility.md similarity index 100% rename from src/slide-visibility.md rename to src/en-US/slide-visibility.md diff --git a/src/speaker-view.md b/src/en-US/speaker-view.md similarity index 100% rename from src/speaker-view.md rename to src/en-US/speaker-view.md diff --git a/src/themes.md b/src/en-US/themes.md similarity index 100% rename from src/themes.md rename to src/en-US/themes.md diff --git a/src/touch-navigation.md b/src/en-US/touch-navigation.md similarity index 100% rename from src/touch-navigation.md rename to src/en-US/touch-navigation.md diff --git a/src/transitions.md b/src/en-US/transitions.md similarity index 100% rename from src/transitions.md rename to src/en-US/transitions.md diff --git a/src/upgrading.md b/src/en-US/upgrading.md similarity index 100% rename from src/upgrading.md rename to src/en-US/upgrading.md diff --git a/src/vertical-slides.md b/src/en-US/vertical-slides.md similarity index 100% rename from src/vertical-slides.md rename to src/en-US/vertical-slides.md diff --git a/src/zh-TW/api.md b/src/zh-TW/api.md new file mode 100644 index 00000000..a71c5f2b --- /dev/null +++ b/src/zh-TW/api.md @@ -0,0 +1,145 @@ +--- +id: methods +title: API Methods +layout: default +--- + +# API + +We provide an extensive JavaScript API for controlling navigation and checking the current state of a presentation. If you're working with a single presentation instance the API can be accessed via the global `Reveal` object. + +### Navigation +```javascript +// Navigate to a specific slide +Reveal.slide( indexh, indexv, indexf ); + +// Relative navigation +Reveal.left(); +Reveal.right(); +Reveal.up(); +Reveal.down(); +Reveal.prev(); +Reveal.next(); + +// Fragment navigation +Reveal.navigateFragment( indexf ); // (-1 means all fragments are invisible) +Reveal.prevFragment(); +Reveal.nextFragment(); + +// Checks which directions we can navigate towards +// {top: false, right: true, bottom: false, left: false} +Reveal.availableRoutes(); + +// Checks which fragment directions we can navigate towards +// {prev: false, next: true} +Reveal.availableFragments(); +``` + +### Misc +```javascript +// Call this if you add or remove slides to update controls, progress, etc +Reveal.sync(); +// Call this to sync just one slide +Reveal.syncSlide(slide=currentSlide); +// Call this to sync just one slide's fragments +Reveal.syncFragments(slide=currentSlide); + +// Call this to update the presentation scale based on available viewport +Reveal.layout(); + +// Randomize the order of slides +Reveal.shuffle(); + +// Returns the present configuration options +Reveal.getConfig(); + +// Fetch the current scale of the presentation +Reveal.getScale(); + +// Returns an object with the scaled presentationWidth & presentationHeight +Reveal.getComputedSlideSize(); + +Reveal.getIndices(slide=currentSlide); // Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 }) +Reveal.getProgress(); // (0 == first slide, 1 == last slide) + +// Array of key:value maps of the attributes of each slide in the deck +Reveal.getSlidesAttributes(); + +// Returns the slide background element at the specified index +Reveal.getSlideBackground( indexh, indexv ) + +// Returns the speaker notes for the slide +Reveal.getSlideNotes(slide=currentSlide); + +// Retrieves query string as a key:value map +Reveal.getQueryHash(); + +// Returns the path to the slide as represented in the URL +Reveal.getSlidePath(slide=currentSlide); +``` + +### Slides +```javascript +// Returns the slide element matching the specified index +Reveal.getSlide( indexh, indexv ) + +// Retrieves the previous and current slide elements +Reveal.getPreviousSlide(); +Reveal.getCurrentSlide(); + +// Returns an all horizontal/vertical slides in the deck +Reveal.getHorizontalSlides(); +Reveal.getVerticalSlides(); + +// Total number of slides +Reveal.getTotalSlides(); +Reveal.getSlidePastCount(); + +// Array of all slides +Reveal.getSlides(); +``` + +### Slide State +```javascript +// Checks if the presentation contains two or more +// horizontal/vertical slides +Reveal.hasHorizontalSlides(); +Reveal.hasVerticalSlides(); + +// Checks if the deck has navigated on either axis at least once +Reveal.hasNavigatedHorizontally(); +Reveal.hasNavigatedVertically(); + +Reveal.isFirstSlide(); +Reveal.isLastSlide(); +Reveal.isVerticalSlide(); +Reveal.isLastVerticalSlide(); +``` + +### Modes +```javascript +// Shows a help overlay with keyboard shortcuts, optionally pass true/false +// to force on/off +Reveal.toggleHelp(); + +// Toggle presentation states, optionally pass true/false to force on/off +Reveal.toggleOverview(); +Reveal.toggleAutoSlide(); +Reveal.togglePause(); + +Reveal.isOverview(); +Reveal.isAutoSliding(); +Reveal.isPaused(); +``` + +### DOM Elements +```javascript +// Retrieve key DOM elements +Reveal.getRevealElement(); //
+Reveal.getSlidesElement(); //
+Reveal.getViewportElement(); //
+Reveal.getBackgroundsElement(); //
+``` + +## More Reading +- [Plugin API](/plugins/#api) diff --git a/src/zh-TW/auto-animate.md b/src/zh-TW/auto-animate.md new file mode 100644 index 00000000..7a3a96be --- /dev/null +++ b/src/zh-TW/auto-animate.md @@ -0,0 +1,282 @@ +--- +id: auto-animate +title: Auto-Animate +layout: default +--- + +# Auto-Animate 4.0.0 + +reveal.js can automatically animate elements across slides. All you need to do is add `data-auto-animate` to two adjacent slide `
` elements and Auto-Animate will animate all matching elements between the two. + +Here's a simple example to give you a better idea of how it can be used. +```html +
+

Auto-Animate

+
+
+

Auto-Animate

+
+``` +
+
+
+

Auto-Animate

+
+
+

Auto-Animate

+
+
+
+ +This example uses the `margin-top` property to move the element but internally reveal.js will use a CSS transform to ensure smooth movement. This same approach to animation works with most animatable CSS properties meaning you can transition things like `position`, `font-size`, `line-height`, `color`, `background-color`, `padding` and `margin`. + +### Movement Animations + +Animations are not limited to changes in style. Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide. All without a single line of inline CSS. + +```html +
+

Implicit

+
+
+

Implicit

+

Animation

+
+``` +
+
+
+

Implicit

+
+
+

Implicit

+

Animation

+
+
+
+ +## How Elements are Matched +When you navigate between two auto-animated slides we'll do our best to automatically find matching elements in the two slides. For text, we consider it a match if both the text contents and node type are identical. For images, videos and iframes we compare the `src` attribute. We also take into account the order in which the element appears in the DOM. + +In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching `data-id` attribute. We prioritize matching `data-id` values above our automatic matching. + +Here's an example where we've given both blocks a matching ID since automatic matching has no content to go on. + +```html +
+
+
+
+
+
+``` +
+
+
+
+
+
+
+
+
+
+ +## Animation Settings +You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element: + +| Attribute                                             | Default | Description +| :------------------------------- | ---------: | :---------- +| data-auto-animate-easing | ease | A CSS [easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). +| data-auto-animate-unmatched | true | Determines whether elements with no matching auto-animate target should fade in. Set to false to make them appear instantly. +| data-auto-animate-duration | 1.0 | Animation duration in seconds. +| data-auto-animate-delay | 0 | Animation delay in seconds (can only be set for specific elements, not at the slide level). +| data-auto-animate-id | _absent_ | An [id](#auto-animate-id-%26-restart) tying auto-animate slides together. +| data-auto-animate-restart | _absent_ | [Breaks apart](#auto-animate-id-%26-restart) two adjacent auto-animate slides (even with the same id). + +If you'd like to change the defaults for the whole deck, use the following config options: +```javascript +Reveal.initialize({ + autoAnimateEasing: 'ease-out', + autoAnimateDuration: 0.8, + autoAnimateUnmatched: false +}) +``` + +## Auto-Animate Id & Restart +When you want separate groups of auto-animated slides right next to each other you can use the `data-auto-animate-id` and `data-auto-animate-restart` attributes. + +With `data-auto-animate-id` you can specify arbitrary ids for your slides. Two adjacent slides will only auto-animate if they have the same id or if both don't have one. + +Another way to control auto-animate is the `data-auto-animate-restart` attribute. Applying this attribute to a slide will prevent auto-animate between the previous slide and it (even if they have the same id) but _not_ between it and the next slide. + +```html +
+

Group A

+
+
+

Group A

+
+
+

Group B

+
+
+

Group B

+
+
+

Group C

+
+
+

Group C

+
+``` +
+
+
+

Group A

+
+
+

Group A

+
+
+

Group B

+
+
+

Group B

+
+
+

Group C

+
+
+

Group C

+
+
+
+ +## Events + +The `autoanimate` event is dispatched each time you step between two auto-animated slides. + +```javascript +Reveal.on( 'autoanimate', event => { + // event.fromSlide, event.toSlide +} ); +``` + +## Example: Animating Between Code Blocks +We support animations between code blocks. Make sure that the code block has `data-line-numbers` enabled and that all blocks have a matching `data-id` value. +```html +
+ 

+    let planets = [
+      { name: 'mars', diameter: 6779 },
+    ]
+
+
+
+ 

+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+
+
+
+ 

+    let circumferenceReducer = ( c, planet ) => {
+      return c + planet.diameter * Math.PI;
+    }
+
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+
+    let c = planets.reduce( circumferenceReducer, 0 )
+
+
+``` +
+
+
+ 

+        let planets = [
+          { name: 'mars', diameter: 6779 },
+        ]
+
+
+
+ 

+        let planets = [
+          { name: 'mars', diameter: 6779 },
+          { name: 'earth', diameter: 12742 },
+          { name: 'jupiter', diameter: 139820 }
+        ]
+
+
+
+ 

+        let circumferenceReducer = ( c, planet ) => {
+          return c + planet.diameter * Math.PI;
+        }
+         
+        let planets = [
+          { name: 'mars', diameter: 6779 },
+          { name: 'earth', diameter: 12742 },
+          { name: 'jupiter', diameter: 139820 }
+        ]
+         
+        let c = planets.reduce( circumferenceReducer, 0 )
+
+
+
+
+ +## Example: Animating Between Lists +We match list items individually to let you animate new items being added or removed. +```html/2-4,10,12 +
+
    +
  • Mercury
    • +
  • Jupiter
    • +
  • Mars
    • +
+
+
+
    +
  • Mercury
    • +
  • Earth
    • +
  • Jupiter
    • +
  • Saturn
    • +
  • Mars
    • +
+
+``` +
+
+
+
    +
  • Mercury
    • +
  • Jupiter
    • +
  • Mars
    • +
+
+
+
    +
  • Mercury
    • +
  • Earth
    • +
  • Jupiter
    • +
  • Saturn
    • +
  • Mars
    • +
+
+
+
+ +## Advanced: State Attributes +We add state attributes to the different elements involved in an auto-animation. These attributes can be tied into if you want to, for example, fine-tune the animation behavior with custom CSS. + +Right before an auto-animation starts we add `data-auto-animate="pending"` to the slide `
` coming into view. At this point the upcoming slide is visible and all of the animated elements have been moved to their starting positions. Next we switch to `data-auto-animate="running"` to indicate when the elements start animating towards their final properties. + +Each individual element is decorated with a `data-auto-animate-target` attribute. The value of the attribute is a unique ID for this particular animation OR "unmatched" if this element should animate as unmatched content. diff --git a/src/zh-TW/auto-slide.md b/src/zh-TW/auto-slide.md new file mode 100644 index 00000000..1e1ba364 --- /dev/null +++ b/src/zh-TW/auto-slide.md @@ -0,0 +1,60 @@ +--- +id: auto-slide +title: Auto-Slide +layout: default +--- + +# Auto-Slide + +Presentations can be configured to step through slides automatically, without any user input. To enable this you will need to specify an interval for slide changes using the `autoSlide` config option. The interval is provided in milliseconds. + +```javascript +// Slide every five seconds +Reveal.initialize({ + autoSlide: 5000, + loop: true +}); +``` +
+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+ +A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It's also possible to pause or resume sliding by pressing »A« on the keyboard (won't work in the embedded demo here). + +You can disable the auto-slide controls and prevent sliding from being paused by specifying `autoSlideStoppable: false` in your [config options](/config/). + +## Slide Timing + +It's also possible to override the slide duration for individual slides and fragments by using the `data-autoslide` attribute. + +```html +
+

After 2 seconds the first fragment will be shown.

+

After 10 seconds the next fragment will be shown.

+

Now, the fragment is displayed for 2 seconds before the next slide is shown.

+
+``` + +## Auto-Slide Method + +The `autoSlideMethod` config option can be used to override the default function used for navigation when auto-sliding. + +We step through all slides, both horizontal and [vertical](/vertical-slides/), by default. To only navigate along the top layer and ignore vertical slides, you can provide a method that calls `Reveal.right()`. + +```js +Reveal.configure({ + autoSlideMethod: () => Reveal.right() +}); +```` + +## Events +We fire events whenever auto-sliding is paused or resumed. + +```javascript +Reveal.on( 'autoslideresumed', event => { /* ... */ } ); +Reveal.on( 'autoslidepaused', event => { /* ... */ } ); +``` \ No newline at end of file diff --git a/src/zh-TW/backgrounds.md b/src/zh-TW/backgrounds.md new file mode 100644 index 00000000..9cff1c52 --- /dev/null +++ b/src/zh-TW/backgrounds.md @@ -0,0 +1,152 @@ +--- +id: backgrounds +title: Backgrounds +layout: default +--- + +# Slide Backgrounds + +Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `data-background` attribute to your `
` elements. Four different types of backgrounds are supported: color, image, video and iframe. + +## Color Backgrounds + +All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`. + +```html/0,3 +
+

🍦

+
+
+

🍰

+
+``` +
+
+
+

🍦

+
+
+

🍰

+
+
+
+ +## Gradient Backgrounds + +All CSS gradient formats are supported, including `linear-gradient`, `radial-gradient` and `conic-gradient`. + +```html/0,3 +
+

🐟

+
+
+

🐳

+
+``` +
+
+
+

🐟

+
+
+

🐳

+
+
+
+ +## Image Backgrounds + +By default, background images are resized to cover the full page. Available options: + +| Attribute | Default
| Description | +| :------------------------------- | :--------- | :---------- | +| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | +| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | +| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | +| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | +| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +{.nowrap-1st} + +```html/0,3-4 +
+

Image

+
+
+

This background image will be sized to 100px and repeated

+
+``` + +## Video Backgrounds + +Automatically plays a full size video behind the slide. + +| Attribute | Default | Description | +| :--------------------------- | :------ | :---------- | +| data-background-video | | A single video source, or a comma separated list of video sources. | +| data-background-video-loop | false | Flags if the video should play repeatedly. | +| data-background-video-muted | false | Flags if the audio should be muted. | +| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | +| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +{.nowrap-1st} + +```html/0-1 +
+

Video

+
+``` +
+
+
+

Video

+
+
+
+ +## Iframe Backgrounds + +Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute. + +| Attribute | Default | Description +| :- | :- | :- +| data-background-iframe | | URL of the iframe to load +| data-background-interactive | false | Include this attribute to make it possible to interact with the iframe contents. Enabling this will prevent interaction with the slide content. +{.nowrap-1st} + +```html/0-1 +
+

Iframe

+
+``` + +Iframes are lazy-loaded when they become visible. If you'd like to preload iframes ahead of time, you can append a `data-preload` attribute to the slide `
`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. + +## Background Transitions + +We'll use a cross fade to transition between slide backgrounds by default. This can be changed using the [`backgroundTransition`](/transitions/#background-transitions) config option. + + +## Parallax Background + +If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional). + +```javascript/1-11 +Reveal.initialize({ + // Parallax background image + parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" + + // Parallax background size + parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) + + // Number of pixels to move the parallax background per slide + // - Calculated automatically unless specified + // - Set to 0 to disable movement along an axis + parallaxBackgroundHorizontal: 200, + parallaxBackgroundVertical: 50 +}); +``` + +Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](/demo?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). \ No newline at end of file diff --git a/src/zh-TW/code.md b/src/zh-TW/code.md new file mode 100644 index 00000000..5847dd75 --- /dev/null +++ b/src/zh-TW/code.md @@ -0,0 +1,210 @@ +--- +id: code +title: Presenting Code +layout: default +--- + +# Presenting Code + +reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by [highlight.js](https://highlightjs.org/). This functionality lives in the highlight plugin and is included in our default presentation boilerplate. + +Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace within the `` is automatically removed. + +HTML will be escaped by default. To avoid this, add `data-noescape` to the `` element. + +```html +
+ 

+(def lazy-fib
+  (concat
+   [0 1]
+   ((fn rfib [a b]
+        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
+
+
+``` +
+
+
+ 

+      (def lazy-fib
+        (concat
+         [0 1]
+         ((fn rfib [a b]
+              (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
+
+
+
+
+ +## Theming +Make sure that a syntax highlight theme is included in your document. We include Monokai by default, which is distributed with the reveal.js repo at [plugin/highlight/monokai.css](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css). A full list of available themes can be found at . + +```html + + + +``` + +## Line Numbers & Highlights + +You can enable line numbers by adding `data-line-numbers` to your `` tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 3 and 8-10 are highlighted: + +```html +

+
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+
Apples$17
Oranges$218

+
+``` +
+
+
+

+<table>
+  <tr>
+    <td>Apples</td>
+    <td>$1</td>
+    <td>7</td>
+  </tr>
+  <tr>
+    <td>Oranges</td>
+    <td>$2</td>
+    <td>18</td>
+  </tr>
+</table>
+
+
+
+
+ +#### Line Number Offset 4.2.0 +You can offset the line number if you want to showcase a excerpt of a longer set of code. In the example below, we set `data-ln-start-from="7"` to make the line numbers start from 7. + +```html +

+
+  Oranges
+  $2
+  18
+
+
+``` +
+
+
+

+<tr>
+  <td>Oranges</td>
+  <td>$2</td>
+  <td>18</td>
+</tr>
+
+
+
+
+ + +## Step-by-step Highlights + +You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the `|` character. For example `data-line-numbers="1|2-3|4,6-10"` will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10. + +```html +

+
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+
Apples$17
Oranges$218
Kiwi$31

+
+``` +
+
+
+

+<table>
+  <tr>
+    <td>Apples</td>
+    <td>$1</td>
+    <td>7</td>
+  </tr>
+  <tr>
+    <td>Oranges</td>
+    <td>$2</td>
+    <td>18</td>
+  </tr>
+  <tr>
+    <td>Kiwi</td>
+    <td>$3</td>
+    <td>1</td>
+  </tr>
+</table>
+
+
+
+
+ +## HTML Entities 4.1.0 +Content added inside of a `` block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;). + +To avoid having to escape these characters manually, you can wrap your code in ` +``` + +## The highlight.js API & beforeHighlight 4.2.0 +If you want to interact with highlight.js before your code is highlighted you can use the `beforeHighlight` callback. For example, this can be useful if you want to register a new language via the [highlight.js API](https://highlightjs.readthedocs.io/en/latest/api.html). +```js +Reveal.initialize({ + highlight: { + beforeHighlight: hljs => hljs.registerLanguage(/*...*/) + }, + plugins: [ RevealHighlight ] +}) +``` + +## Manual Highlighting +All of your code blocks are automatically syntax highlighted when reveal.js starts. If you want to disable this behavior and trigger highlighting on your own you can set the `highlightOnLoad` flag to false. +```js +Reveal.initialize({ + highlight: { + highlightOnLoad: false + }, + plugins: [ RevealHighlight ] +}).then(() => { + const highlight = Reveal.getPlugin( 'highlight' ); + highlight.highlightBlock( /* code block element to highlight */ ); +}); +``` + diff --git a/src/zh-TW/config.md b/src/zh-TW/config.md new file mode 100644 index 00000000..ad296629 --- /dev/null +++ b/src/zh-TW/config.md @@ -0,0 +1,282 @@ +--- +id: config +title: Config +layout: default +--- + +# Configuration Options + +Presentation behavior can be fine-tuned using a wide array of configuration options. These objects can be included where you [initialize](/initialization/) reveal.js. It's also possible to [change config values at runtime](#reconfiguring). + +Note that **all** configuration values are **optional** and will default to the values specified below. + +```javascript +Reveal.initialize({ + + // Display presentation control arrows + controls: true, + + // Help the user learn the controls by providing hints, for example by + // bouncing the down arrow when they first encounter a vertical slide + controlsTutorial: true, + + // Determines where controls appear, "edges" or "bottom-right" + controlsLayout: 'bottom-right', + + // Visibility rule for backwards navigation arrows; "faded", "hidden" + // or "visible" + controlsBackArrows: 'faded', + + // Display a presentation progress bar + progress: true, + + // Display the page number of the current slide + // - true: Show slide number + // - false: Hide slide number + // + // Can optionally be set as a string that specifies the number formatting: + // - "h.v": Horizontal . vertical slide number (default) + // - "h/v": Horizontal / vertical slide number + // - "c": Flattened slide number + // - "c/t": Flattened slide number / total slides + // + // Alternatively, you can provide a function that returns the slide + // number for the current slide. The function should take in a slide + // object and return an array with one string [slideNumber] or + // three strings [n1,delimiter,n2]. See #formatSlideNumber(). + slideNumber: false, + + // Can be used to limit the contexts in which the slide number appears + // - "all": Always show the slide number + // - "print": Only when printing to PDF + // - "speaker": Only in the speaker view + showSlideNumber: 'all', + + // Use 1 based indexing for # links to match slide number (default is zero + // based) + hashOneBasedIndex: false, + + // Add the current slide number to the URL hash so that reloading the + // page/copying the URL will return you to the same slide + hash: false, + + // Flags if we should monitor the hash and change slides accordingly + respondToHashChanges: true, + + // Enable support for jump-to-slide navigation shortcuts + jumpToSlide: true, + + // Push each slide change to the browser history. Implies `hash: true` + history: false, + + // Enable keyboard shortcuts for navigation + keyboard: true, + + // Optional function that blocks keyboard events when retuning false + // + // If you set this to 'focused', we will only capture keyboard events + // for embedded decks when they are in focus + keyboardCondition: null, + + // Disables the default reveal.js slide layout (scaling and centering) + // so that you can use custom CSS layout + disableLayout: false, + + // Enable the slide overview mode + overview: true, + + // Vertical centering of slides + center: true, + + // Enables touch navigation on devices with touch input + touch: true, + + // Loop the presentation + loop: false, + + // Change the presentation direction to be RTL + rtl: false, + + // Changes the behavior of our navigation directions. + // + // "default" + // Left/right arrow keys step between horizontal slides, up/down + // arrow keys step between vertical slides. Space key steps through + // all slides (both horizontal and vertical). + // + // "linear" + // Removes the up/down arrows. Left/right arrows step through all + // slides (both horizontal and vertical). + // + // "grid" + // When this is enabled, stepping left/right from a vertical stack + // to an adjacent vertical stack will land you at the same vertical + // index. + // + // Consider a deck with six slides ordered in two vertical stacks: + // 1.1 2.1 + // 1.2 2.2 + // 1.3 2.3 + // + // If you're on slide 1.3 and navigate right, you will normally move + // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you + // from 1.3 -> 2.3. + navigationMode: 'default', + + // Randomizes the order of slides each time the presentation loads + shuffle: false, + + // Turns fragments on and off globally + fragments: true, + + // Flags whether to include the current fragment in the URL, + // so that reloading brings you to the same fragment position + fragmentInURL: true, + + // Flags if the presentation is running in an embedded mode, + // i.e. contained within a limited portion of the screen + embedded: false, + + // Flags if we should show a help overlay when the question-mark + // key is pressed + help: true, + + // Flags if it should be possible to pause the presentation (blackout) + pause: true, + + // Flags if speaker notes should be visible to all viewers + showNotes: false, + + // Global override for autolaying embedded media (video/audio/iframe) + // - null: Media will only autoplay if data-autoplay is present + // - true: All media will autoplay, regardless of individual setting + // - false: No media will autoplay, regardless of individual setting + autoPlayMedia: null, + + // Global override for preloading lazy-loaded iframes + // - null: Iframes with data-src AND data-preload will be loaded when within + // the viewDistance, iframes with only data-src will be loaded when visible + // - true: All iframes with data-src will be loaded when within the viewDistance + // - false: All iframes with data-src will be loaded only when visible + preloadIframes: null, + + // Can be used to globally disable auto-animation + autoAnimate: true, + + // Optionally provide a custom element matcher that will be + // used to dictate which elements we can animate between. + autoAnimateMatcher: null, + + // Default settings for our auto-animate transitions, can be + // overridden per-slide or per-element via data arguments + autoAnimateEasing: 'ease', + autoAnimateDuration: 1.0, + autoAnimateUnmatched: true, + + // CSS properties that can be auto-animated. Position & scale + // is matched separately so there's no need to include styles + // like top/right/bottom/left, width/height or margin. + autoAnimateStyles: [ + 'opacity', + 'color', + 'background-color', + 'padding', + 'font-size', + 'line-height', + 'letter-spacing', + 'border-width', + 'border-color', + 'border-radius', + 'outline', + 'outline-offset' + ], + + // Controls automatic progression to the next slide + // - 0: Auto-sliding only happens if the data-autoslide HTML attribute + // is present on the current slide or fragment + // - 1+: All slides will progress automatically at the given interval + // - false: No auto-sliding, even if data-autoslide is present + autoSlide: 0, + + // Stop auto-sliding after user input + autoSlideStoppable: true, + + // Use this method for navigation when auto-sliding (defaults to navigateNext) + autoSlideMethod: null, + + // Specify the average time in seconds that you think you will spend + // presenting each slide. This is used to show a pacing timer in the + // speaker view + defaultTiming: null, + + // Enable slide navigation via mouse wheel + mouseWheel: false, + + // Opens links in an iframe preview overlay + // Add `data-preview-link` and `data-preview-link="false"` to customise each link + // individually + previewLinks: false, + + // Exposes the reveal.js API through window.postMessage + postMessage: true, + + // Dispatches all reveal.js events to the parent window through postMessage + postMessageEvents: false, + + // Focuses body when page changes visibility to ensure keyboard shortcuts work + focusBodyOnPageVisibilityChange: true, + + // Transition style + transition: 'slide', // none/fade/slide/convex/concave/zoom + + // Transition speed + transitionSpeed: 'default', // default/fast/slow + + // Transition style for full page slide backgrounds + backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom + + // The maximum number of pages a single slide can expand onto when printing + // to PDF, unlimited by default + pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY, + + // Prints each fragment on a separate slide + pdfSeparateFragments: true, + + // Offset used to reduce the height of content within exported PDF pages. + // This exists to account for environment differences based on how you + // print to PDF. CLI printing options, like phantomjs and wkpdf, can end + // on precisely the total height of the document whereas in-browser + // printing has to end one pixel before. + pdfPageHeightOffset: -1, + + // Number of slides away from the current that are visible + viewDistance: 3, + + // Number of slides away from the current that are visible on mobile + // devices. It is advisable to set this to a lower number than + // viewDistance in order to save resources. + mobileViewDistance: 2, + + // The display mode that will be used to show slides + display: 'block', + + // Hide cursor if inactive + hideInactiveCursor: true, + + // Time before the cursor is hidden (in ms) + hideCursorTime: 5000 + +}); +``` + +## Reconfiguring + +The configuration can be updated after initialization using the `configure` method. + +```javascript +// Turn autoSlide off +Reveal.configure({ autoSlide: 0 }); + +// Start auto-sliding every 5s +Reveal.configure({ autoSlide: 5000 }); +``` diff --git a/src/zh-TW/course.md b/src/zh-TW/course.md new file mode 100644 index 00000000..e1d18837 --- /dev/null +++ b/src/zh-TW/course.md @@ -0,0 +1,88 @@ +--- +id: course +title: Mastering reveal.js +description: An upcoming video course covering the reveal.js basics all the way up to advanced customization and features. +layout: default +hidden: true +hide_ads: true +--- + +# Mastering reveal.js + + + +This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js. + +We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting topics like presenting syntax highlighted code, animating slide content with Auto-Animate and using the speaker view. In the advanced videos we'll explore the reveal.js JavaScript API, plugin creation and how to customize keyboard bindings. (See [full list of videos](#table-of-contents).) + + +### Who is this for? +The course is aimed at people who are new to reveal.js as well as those of you who already understand the fundamentals but are ready to explore the full feature set. + +You'll need to have a basic understanding of HTML, CSS and JavaScript. HTML is the backbone of reveal.js and used extensively throughout the course. CSS and JavaScript are mostly used for advanced videos on topics such as creating custom themes, working with the reveal.js API and editing the source code. + + +### Who is presenting? +👋 I'm Hakim—a Swedish front-end developer and the creator of reveal.js. I co-founded and am currently working on [Slides.com](https://slides.com)—a presentation platform and graphical editor built on top of reveal.js. Beyond that I love to work on visual demos and experiments at [hakim.se](https://hakim.se). + +I released the first version of reveal.js 10 years ago (!) and couldn't have imagined that it would eventually grow to be used by hundreds of thousands of people. I hope you'll join in and experience first hand why so many choose to create their presentations with reveal.js! + +
+
+ +
+
+

+ $99 + $79 +

+ Buy course +
+
+
    +
  • 22 videos
    • +
  • 5h 39m total runtime
    • +
  • Stream in HD
    • +
  • Download in 4K
    • +
  • Free updates
    • +
+
+
+ + +The course is sold via [Gumroad](https://gumroad.com/). VAT is added at the time of purchase, if applicable. 100% money back if the course isn't a good fit for you—no questions asked. + +## Table of Contents +The course is divided into relatively short videos so that you can easily skip topics that aren't relevant to you or that you are already familiar with. The total runtime is 5.5 hours. + + +| Getting Started | | +| :- | -: | +| **Getting Started** | Duration | +|   Installing reveal.js and setting up the development server. | 5:40 +|   Creating slides, linking between them and saving drafts. | 10:04 +|   Configuring your presentation. | 8:23 +|   Working with vertical slides. | 9:05 +|   Creating slides using Markdown. | 16:34 +| **Content Creation** | +|   Adding text, images, videos and iframes to your slides. | 10:47 +|   Layout slide content using stacks and auto-sized text. | 13:58 +|   Fullscreen background images, videos, colors and iframes. | 16:26 +|   Presenting syntax highlighted code. | 21:51 +|   Using Fragments to build up slides in steps. | 13:14 +|   Animating slide content with Auto-Animate. | 17:01 +| **Configuration & Features** | +|   Presentation size and scale. | 14:34 +|   Slide transitions. | 12:36 +|   Theming your content and creating your own theme. | 16:12 +|   Speaker notes & using the speaker view. | 11:27 +|   Slide numbers & URLs. | 19:55 +|   Converting your presentation to PDF. | 10:23 +| **Advanced (JS)** | +|   Initialization & running multiple presentations. | 19:06 +|   Plugins; where to find and how to create them. | 14:52 +|   Using the reveal.js API to control your presentation. | 40:32 +|   Customizing keyboard shortcuts. | 15:04 +|   Working with the source code. | 21:09 +{.toc .hide-header} + diff --git a/src/zh-TW/creating-plugins.md b/src/zh-TW/creating-plugins.md new file mode 100644 index 00000000..0cea4098 --- /dev/null +++ b/src/zh-TW/creating-plugins.md @@ -0,0 +1,65 @@ +--- +id: creating-plugins +title: Creating Plugins +layout: default +--- + +# Creating a Plugin 4.0.0 + +We provide a lightweight specification and API for plugins. This is used by our default plugins like [code highlighting](/code/) and [Markdown](/markdown/) but can also be used to create your own plugins. + +## Plugin Definition + +Plugins are objects that contain the following properties. + +| Property | Value +| :- | :- +| id String | The plugins unique ID. This can be used to retrieve the plugin instance via `Reveal.getPlugin()`. +| init Function | An optional function that is called when the plugin should run. It's invoked with one argument; a reference to the [presentation instance](/api/) that the plugin was registered with.

The init function can optionally return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). If a Promise is returned, reveal.js will wait for it to resolve before the presentation finishes initialization and fires the [ready event](/events/#ready). +| destroy Function | Optional function that is called when the reveal.js instance that this plugin is registered to is uninitialized. +{.key-value} + +Here's an example plugin which shuffles all slides in a presentation when the T key is pressed. Note that we export a function that returns a new plugin object. This is done because there may be [multiple presentation instances on the same page](/initialization/#multiple-presentations), and each should have their own instance of our plugin. + + +```js +// toaster.js +export default () => ({ + id: 'toaster', + init: ( deck ) => { + deck.addKeyBinding( { keyCode: 84, key: 'T' }, () => { + deck.shuffle(); + console.log('🍻'); + } ); + } +}) +``` + +## Registering a Plugin + +Plugins are registered by including them in the `plugins` array of the [config options](/config/). You can also register a plugin at runtime using `Reveal.registerPlugin( Plugin )`. + +```js +import Reveal from 'dist/reveal.esm.js'; +import Toaster from 'toaster.js'; + +Reveal.initialize({ + plugins: [ Toaster ] +}); +``` + +### Async Plugins +If your plugin needs to run asynchronous code before reveal.js finishes initializing it can return a Promise. Here's an example plugin that will delay initialization for three seconds. + +```js +let WaitForIt = { + id: "wait-for-it", + init: deck => { + return new Promise( resolve => setTimeout( resolve, 3000 ) ) + } +} + +Reveal.initialize({ plugins: [ WaitForIt ] }).then( () => { + console.log( "Three seconds later..." ); +} ) +``` diff --git a/src/zh-TW/events.md b/src/zh-TW/events.md new file mode 100644 index 00000000..9dc48b27 --- /dev/null +++ b/src/zh-TW/events.md @@ -0,0 +1,72 @@ +--- +id: events +title: Events +layout: default +--- + +# Events + +We dispatch a number of events to make it easy for you to react to changes in the presentation. `Reveal.on()` is used to add event listeners, and `Reveal.off()` is used to remove them. + +```js +Reveal.on( 'eventname', callbackFunction ); +``` + +## Ready + +The `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to accept API calls. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`. + +```javascript +Reveal.on( 'ready', event => { + // event.currentSlide, event.indexh, event.indexv +} ); +``` + +We also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS. + +The `Reveal.initialize` method also returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which resolves when the presentation is ready. The following is synonymous to adding a listener for the `ready` event: + +```javascript +Reveal.initialize().then( () => { + // reveal.js is ready +} ) +``` + + +## Slide Changed + +The `slidechanged` event is fired each time the slide changes. The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML elements. + +Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. + +```javascript +Reveal.on( 'slidechanged', event => { + // event.previousSlide, event.currentSlide, event.indexh, event.indexv +} ); +``` + +## Slide Transition End + +The `slidechanged` event fires instantly as soon as the slide changes. If you'd rather invoke your event listener when the slide has finished transitioning and is fully visible, you can use the `slidetransitionend` event. The `slidetransitionend` event includes the same event data as `slidechanged`. + +```javascript +Reveal.on( 'slidetransitionend', event => { + console.log( event.currentSlide ); +}); +``` + + +## Resize + +The `resize` event is fired when reveal.js changes the scale of the presentation. + +```javascript +Reveal.on( 'resize', event => { + // event.scale, event.oldScale, event.size +} ); +``` + +## Feature-specific Events +- [Overview mode events](/overview/#events) +- [Fragment events](/fragments/#events) +- [Auto-Slide events](/auto-slide/#events) diff --git a/src/zh-TW/fragments.md b/src/zh-TW/fragments.md new file mode 100644 index 00000000..9e57a448 --- /dev/null +++ b/src/zh-TW/fragments.md @@ -0,0 +1,161 @@ +--- +id: fragments +title: Fragments +layout: default +--- + +# Fragments + +Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class `fragment` will be stepped through before moving on to the next slide. + +The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment. + +```html +

Fade in

+

Fade out

+

Highlight red

+

Fade in, then out

+

Slide up while fading in

+``` +
+
+
+

Fade in

+

Fade out

+

Highlight red

+

Fade in, then out

+

Slide up while fading in

+
+
+
+ +| Name | Effect | +| :- |:- | +| fade-out | Start visible, fade out | +| fade-up | Slide up while fading in | +| fade-down | Slide down while fading in | +| fade-left | Slide left while fading in | +| fade-right | Slide right while fading in | +| fade-in-then-out | Fades in, then out on the next step | +| current-visible | Fades in, then out on the next step | +| fade-in-then-semi-out | Fades in, then to 50% on the next step | +| grow | Scale up | +| semi-fade-out | Fade out to 50% | +| shrink | Scale down | +| strike | Strike through | +| highlight-red | Turn text red | +| highlight-green | Turn text green | +| highlight-blue | Turn text blue | +| highlight-current-red | Turn text red, then back to original on next step | +| highlight-current-green | Turn text green, then back to original on next step | +| highlight-current-blue | Turn text blue, then back to original on next step | +{.key-value} + +## Custom Fragments 4.5.0 + +Custom effects can be implemented by defining CSS styles for `.fragment.effectname` and `.fragment.effectname.visible` respectively. The `visible` class is added to each fragment as they are stepped through in the presentation. + +For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through. + +```html + +
+

One

+

Two

+

Three

+
+``` +
+
+ +
+

One

+

Two

+

Three

+
+
+
+ +Note that we are adding a `custom` class to each fragment. This tells reveal.js to avoid applying its default fade-in fragment styles. + +If you want all elements to remain blurred except the current fragment, you can substitute `visible` for `current-fragment`. + +```css +.fragment.blur.current-fragment { + filter: none; +} +``` + + +## Nested Fragments + +Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step, turn it red on the second and fade out on the third. + +```html + + + + Fade in > Turn red > Fade out + + + +``` +
+
+
+ + + + Fade in > Turn red > Fade out + + + +
+
+
+ +## Fragment Order + +By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using the `data-fragment-index` attribute. Note that multiple elements can appear at the same index. + +```html +

Appears last

+

Appears first

+

Appears second

+``` +
+
+
+

Appears last

+

Appears first

+

Appears second

+
+
+
+ +## Events + +When a fragment is either shown or hidden reveal.js will dispatch an event. + +```javascript +Reveal.on( 'fragmentshown', event => { + // event.fragment = the fragment DOM element +} ); +Reveal.on( 'fragmenthidden', event => { + // event.fragment = the fragment DOM element +} ); +``` diff --git a/src/zh-TW/fullscreen.md b/src/zh-TW/fullscreen.md new file mode 100644 index 00000000..ff93ac99 --- /dev/null +++ b/src/zh-TW/fullscreen.md @@ -0,0 +1,18 @@ +--- +id: fullscreen +title: Fullscreen +layout: default +--- + +### Fullscreen mode + +There's built-in support for fullscreen mode. Press »F« on your keyboard to view your presentation in fullscreen mode. Once in fullscreen mode, press the »ESC« key to exit. + +Try it out below. Note that this example uses an [embedded](/presentation-size/#embedded) presentation, you will need to click to give it focus before pressing F. + +
+
+
Click here to focus, then the F key.
+
Slide 2
+
+
\ No newline at end of file diff --git a/src/zh-TW/index.md b/src/zh-TW/index.md new file mode 100644 index 00000000..9a8086f8 --- /dev/null +++ b/src/zh-TW/index.md @@ -0,0 +1,29 @@ +--- +id: home +title: The HTML presentation framework +description: Documentation and demos for the open source reveal.js HTML presentation framework. +layout: home +hidden: true +--- + +# Create Stunning Presentations on the Web + +reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. + +Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an ` + +
+``` + +### Lazy Loading Iframes + +Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden. + +When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background. + +You can override this behavior with the `data-preload` attribute. The iframe below will be loaded according to the `viewDistance`. + +```html/1 +
+ +
+``` + +You can also change the default globally with the `preloadIframes` configuration option. If set to `true` ALL iframes with a `data-src` attribute will be preloaded when within the `viewDistance` regardless of individual `data-preload` attributes. If set to `false`, all iframes will only be loaded when they become visible. + + +## Iframes + +Using iframes is a convenient way to include content from external sources, like a YouTube video or Google Sheet. reveal.js automatically detects YouTube and Vimeo embed URLs and autoplays them when the slide becomes visible. + +If you add an ` +
+ +
+

全局狀態

+

+ 在幻燈片上設置 data-state="something"，當幻燈片開啟時， + "something" 將被添加為文檔元素的類別。這讓你可以應用更廣泛的樣式更改，如切換頁面背景。 +

+
+ +
+

狀態事件

+

+ 此外，可以通過綁定到 data-state 名稱，在每個幻燈片的基礎上觸發自定義事件。 +

+ 

+Reveal.on( 'customevent', function() {
+  console.log( '"customevent" has fired' );
+} );
+
+
+ +
+

欸等等

+

+ 在鍵盤上按 B 或 . 鍵來暫停簡報。當你在台上希望聚焦觀眾的注意力時很有用。 +

+
+ +
+

更多功能

+ +
+ +
+

THE END

+

+ - 試試線上編輯器
+ - + 原始碼倉庫 +

+
+
+
diff --git a/src/_includes/header.njk b/src/_includes/header.njk index e1ba8703..ac30294b 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -17,14 +17,18 @@
-## Image Backgrounds +## 圖片背景 -By default, background images are resized to cover the full page. Available options: +預設情況下，背景圖片被調整大小以覆蓋整個頁面。可用選項包括： -| Attribute | Default
| Description | +| 屬性 | 預設值 | 描述 | | :------------------------------- | :--------- | :---------- | -| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | -| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | -| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | -| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | -| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +| data-background-image | | 顯示的圖片的URL。幻燈片開啟時，GIF將重新開始。 | +| data-background-size | cover | 參見 MDN 上的 [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size)。 | +| data-background-position | center | 參見 MDN 上的 [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)。 | +| data-background-repeat | no-repeat | 參見 MDN 上的 [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat)。 | +| data-background-opacity | 1 | 背景圖片的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | {.nowrap-1st} ```html/0,3-4 @@ -73,21 +74,23 @@ By default, background images are resized to cover the full page. Available opti
-

This background image will be sized to 100px and repeated

+

這張背景圖將被設置為100px並重複

``` -## Video Backgrounds +## 視頻背景 + +自動播放全尺寸視頻作 -Automatically plays a full size video behind the slide. +為幻燈片背景。 -| Attribute | Default | Description | +| 屬性 | 預設值 | 描述 | | :--------------------------- | :------ | :---------- | -| data-background-video | | A single video source, or a comma separated list of video sources. | -| data-background-video-loop | false | Flags if the video should play repeatedly. | -| data-background-video-muted | false | Flags if the audio should be muted. | -| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | -| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +| data-background-video | | 一個視頻源或逗號分隔的多個視頻源。 | +| data-background-video-loop | false | 標記視頻是否應重複播放。 | +| data-background-video-muted | false | 標記音頻是否應靜音。 | +| data-background-size | cover | 使用 `cover` 全屏和部分裁剪，或 `contain` 以信箱格式顯示。 | +| data-background-opacity | 1 | 背景視頻的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | {.nowrap-1st} ```html/0-1 @@ -105,14 +108,14 @@ Automatically plays a full size video behind the slide.
-## Iframe Backgrounds +## Iframe 背景 -Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute. +在幻燈片背景中嵌入一個網頁，覆蓋 100% 的 reveal.js 寬度和高度。iframe 位於背景層，位於你的幻燈片後面，因此默認情況下無法與之互動。若要使你的背景可互動，可以添加 `data-background-interactive` 屬性。 -| Attribute | Default | Description +| 屬性 | 預設值 | 描述 | | :- | :- | :- -| data-background-iframe | | URL of the iframe to load -| data-background-interactive | false | Include this attribute to make it possible to interact with the iframe contents. Enabling this will prevent interaction with the slide content. +| data-background-iframe | | 要加載的 iframe 的 URL | +| data-background-interactive | false | 添加此屬性可以與 iframe 內容互動。啟用此功能將阻止與幻燈片內容的互動。 | {.nowrap-1st} ```html/0-1 @@ -122,31 +125,33 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width ``` -Iframes are lazy-loaded when they become visible. If you'd like to preload iframes ahead of time, you can append a `data-preload` attribute to the slide `
`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. +iframes 會在變得可見時懶加載。如果你想提前預加載 iframes，你可以在幻燈片 `
` 上添加 `data-preload` 屬性。你也可以使用 `preloadiframes` 配置選項為所有 iframes 啟用全局預加載。 -## Background Transitions +## 背景過渡 -We'll use a cross fade to transition between slide backgrounds by default. This can be changed using the [`backgroundTransition`](/transitions/#background-transitions) config option. +我們將使用交叉淡入來過渡幻燈片背景，這是預設設置。可以使用 [`backgroundTransition`](/transitions/#background-transitions) 配置選項更改此設置。 -## Parallax Background +## 視差背景 -If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional). +如果你想使用視差滾動背景，初始化 reveal.js 時設置下面的前兩個屬性（另外兩個是可選的）。 ```javascript/1-11 Reveal.initialize({ - // Parallax background image - parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" + // 視差背景圖片 + parallaxBackgroundImage: '', // 例如 "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" + + // 視差背景大小 + parallaxBackgroundSize: '', // CSS 語法，例如 "2100px 900px" - 目前只支持像素（不要使用 % 或 auto） + + // 每張幻燈片移動視差背景的像素數 + // - 除非指定，否則自動計算 + // - 設置為 0 禁用沿軸移動 - // Parallax background size - parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) - // Number of pixels to move the parallax background per slide - // - Calculated automatically unless specified - // - Set to 0 to disable movement along an axis parallaxBackgroundHorizontal: 200, parallaxBackgroundVertical: 50 }); ``` -Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](/demo?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). \ No newline at end of file +確保背景大小遠大於屏幕大小，以允許一定的滾動。[查看示範](/demo?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). \ No newline at end of file diff --git a/src/zh-Hant/code.md b/src/zh-Hant/code.md index 5847dd75..46b474fb 100644 --- a/src/zh-Hant/code.md +++ b/src/zh-Hant/code.md @@ -1,16 +1,17 @@ --- + id: code -title: Presenting Code +title: 展示代碼 layout: default --- -# Presenting Code +# 展示代碼 -reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by [highlight.js](https://highlightjs.org/). This functionality lives in the highlight plugin and is included in our default presentation boilerplate. +reveal.js 包含一套強大的功能，旨在展示語法高亮的代碼 — 由 [highlight.js](https://highlightjs.org/) 提供支持。這些功能位於 highlight 插件中，並包含在我們的預設簡報模板中。 -Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace within the `` is automatically removed. +下面是一個將被語法高亮的 clojure 代碼示例。當 `` 標籤存在 `data-trim` 屬性時，會自動移除代碼周圍的空白。 -HTML will be escaped by default. To avoid this, add `data-noescape` to the `` element. +預設會對 HTML 進行轉義。要避免這一點，可以在 `` 元素上添加 `data-noescape` 屬性。 ```html
@@ -37,8 +38,8 @@ HTML will be escaped by default. To avoid this, add `data-noescape` to the ` -## Theming -Make sure that a syntax highlight theme is included in your document. We include Monokai by default, which is distributed with the reveal.js repo at [plugin/highlight/monokai.css](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css). A full list of available themes can be found at . +## 主題 +確保在你的文檔中包含了一個語法高亮主題。我們預設包含了 Monokai，它隨 reveal.js 儲存在 [plugin/highlight/monokai.css](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css) 中。可用的主題完整列表可以在 上找到。 ```html @@ -50,9 +51,9 @@ Make sure that a syntax highlight theme is included in your document. We include ``` -## Line Numbers & Highlights +## 行號與高亮 -You can enable line numbers by adding `data-line-numbers` to your `` tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 3 and 8-10 are highlighted: +你可以通過在你的 `` 標籤上添加 `data-line-numbers` 屬性來啟用行號。如果你想高亮特定行，可以使用同一屬性提供以逗號分隔的行號列表。例如，在以下示例中，第3行和第8-10行被高亮： ```html 

@@ -91,10 +92,12 @@ You can enable line numbers by adding `data-line-numbers` to your `` tags.
   
 
 
-#### Line Number Offset 4.2.0
-You can offset the line number if you want to showcase a excerpt of a longer set of code. In the example below, we set `data-ln-start-from="7"` to make the line numbers start from 7.
+#### 行號偏移 4.2.0
+如果你想展示一長串代碼的片段，你可以偏移行號。在下面的示例中，我們設置 `data-ln-start-from="7"` 使行號從7開始。
 
 ```html
+
+
 

 
   Oranges
@@ -118,9 +121,9 @@ You can offset the line number if you want to showcase a excerpt of a longer set
 
 
 
-## Step-by-step Highlights
+## 分步高亮
 
-You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the `|` character. For example `data-line-numbers="1|2-3|4,6-10"` will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10.
+你可以在同一代碼塊上分步進行多次代碼高亮。用 `|` 字符分隔每個高亮步驟。例如 `data-line-numbers="1|2-3|4,6-10"` 會產生三個步驟。開始時高亮第1行，下一步是第2-3行，最後是第4行和第6到10行。
 
 ```html
 

@@ -167,44 +170,4 @@ You can step through multiple code highlights on the same code block. Delimit ea
- - -## HTML Entities 4.1.0 -Content added inside of a `` block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;). - -To avoid having to escape these characters manually, you can wrap your code in ` -``` - -## The highlight.js API & beforeHighlight 4.2.0 -If you want to interact with highlight.js before your code is highlighted you can use the `beforeHighlight` callback. For example, this can be useful if you want to register a new language via the [highlight.js API](https://highlightjs.readthedocs.io/en/latest/api.html). -```js -Reveal.initialize({ - highlight: { - beforeHighlight: hljs => hljs.registerLanguage(/*...*/) - }, - plugins: [ RevealHighlight ] -}) -``` - -## Manual Highlighting -All of your code blocks are automatically syntax highlighted when reveal.js starts. If you want to disable this behavior and trigger highlighting on your own you can set the `highlightOnLoad` flag to false. -```js -Reveal.initialize({ - highlight: { - highlightOnLoad: false - }, - plugins: [ RevealHighlight ] -}).then(() => { - const highlight = Reveal.getPlugin( 'highlight' ); - highlight.highlightBlock( /* code block element to highlight */ ); -}); -``` - + \ No newline at end of file diff --git a/src/zh-Hant/config.md b/src/zh-Hant/config.md index ad296629..f4c387ed 100644 --- a/src/zh-Hant/config.md +++ b/src/zh-Hant/config.md @@ -1,181 +1,172 @@ --- + id: config -title: Config +title: 配置 layout: default --- -# Configuration Options +# 配置選項 -Presentation behavior can be fine-tuned using a wide array of configuration options. These objects can be included where you [initialize](/initialization/) reveal.js. It's also possible to [change config values at runtime](#reconfiguring). +可以通過使用大量的配置選項來微調簡報行為。這些選項可以在您[初始化](/initialization/) reveal.js 時包含進去。也可以在運行時[更改配置值](#reconfiguring)。 -Note that **all** configuration values are **optional** and will default to the values specified below. +注意，**所有**配置值都是**可選的**，將默認為下面指定的值。 ```javascript Reveal.initialize({ - // Display presentation control arrows + // 顯示簡報控制箭頭 controls: true, - // Help the user learn the controls by providing hints, for example by - // bouncing the down arrow when they first encounter a vertical slide + // 通過提供提示來幫助用戶學習控制，例如當他們首次遇到垂直幻燈片時使下箭頭彈跳 controlsTutorial: true, - // Determines where controls appear, "edges" or "bottom-right" + // 決定控制出現的位置，"edges" 或 "bottom-right" controlsLayout: 'bottom-right', - // Visibility rule for backwards navigation arrows; "faded", "hidden" - // or "visible" + // 向後導航箭頭的可見性規則；"faded", "hidden" 或 "visible" controlsBackArrows: 'faded', - // Display a presentation progress bar + // 顯示簡報進度條 progress: true, - // Display the page number of the current slide - // - true: Show slide number - // - false: Hide slide number + // 顯示當前幻燈片的頁碼 + // - true: 顯示幻燈片編號 + // - false: 隱藏幻燈片編號 // - // Can optionally be set as a string that specifies the number formatting: - // - "h.v": Horizontal . vertical slide number (default) - // - "h/v": Horizontal / vertical slide number - // - "c": Flattened slide number - // - "c/t": Flattened slide number / total slides + // 可選地設置為指定編號格式的字符串： + // - "h.v": 水平 . 垂直幻燈片編號（默認） + // - "h/v": 水平 / 垂直幻燈片編號 + // - "c": 扁平化幻燈片編號 + // - "c/t": 扁平化幻燈片編號 / 總幻燈片數 // - // Alternatively, you can provide a function that returns the slide - // number for the current slide. The function should take in a slide - // object and return an array with one string [slideNumber] or - // three strings [n1,delimiter,n2]. See #formatSlideNumber(). + // 或者，您可以提供一個返回當前幻燈片的幻燈片編號的函數。 + // 該函數應該接受一個幻燈片對象並返回一個字符串[幻燈片編號]或 + // 三個字符串[n1,delimiter,n2]。見 #formatSlideNumber()。 slideNumber: false, - // Can be used to limit the contexts in which the slide number appears - // - "all": Always show the slide number - // - "print": Only when printing to PDF - // - "speaker": Only in the speaker view + // 可用於限制幻燈片編號出現的上下文 + // - "all": 總是顯示幻燈片編號 + // - "print": 僅在打印到PDF時 + // - "speaker": 僅在演講者視圖中 showSlideNumber: 'all', - // Use 1 based indexing for # links to match slide number (default is zero - // based) + // 使用基於1的索引為 # 鏈接以匹配幻燈片編號（默認是基於0的） hashOneBasedIndex: false, - // Add the current slide number to the URL hash so that reloading the - // page/copying the URL will return you to the same slide + // 將當前幻燈片編號添加到URL哈希中，以便重新加載頁面/複製URL將返回到相同的幻燈片 hash: false, - // Flags if we should monitor the hash and change slides accordingly + // 標記是否應監控哈希並相應地更改幻燈片 respondToHashChanges: true, - // Enable support for jump-to-slide navigation shortcuts + // 啟用跳轉到幻燈片的導航快捷方式 jumpToSlide: true, - // Push each slide change to the browser history. Implies `hash: true` + // 將每次幻燈片更改推送到瀏覽器歷史記錄。意味著 `hash: true` history: false, - // Enable keyboard shortcuts for navigation + // 啟用用於導航的鍵盤快捷 + +鍵 keyboard: true, - // Optional function that blocks keyboard events when retuning false + // 可選函數，當返回 false 時阻止鍵盤事件 // - // If you set this to 'focused', we will only capture keyboard events - // for embedded decks when they are in focus + // 如果您將此設置為 'focused'，我們只會在嵌入式幻燈片聚焦時捕獲鍵盤事件 keyboardCondition: null, - // Disables the default reveal.js slide layout (scaling and centering) - // so that you can use custom CSS layout + // 禁用默認的 reveal.js 幻燈片佈局（縮放和居中） + // 以便您可以使用自定義 CSS 佈局 disableLayout: false, - // Enable the slide overview mode + // 啟用幻燈片概覽模式 overview: true, - // Vertical centering of slides + // 幻燈片的垂直居中 center: true, - // Enables touch navigation on devices with touch input + // 啟用具有觸控輸入的設備上的觸控導航 touch: true, - // Loop the presentation + // 循環播放簡報 loop: false, - // Change the presentation direction to be RTL + // 將簡報方向更改為從右到左 rtl: false, - // Changes the behavior of our navigation directions. + // 更改我們的導航方向的行為。 // // "default" - // Left/right arrow keys step between horizontal slides, up/down - // arrow keys step between vertical slides. Space key steps through - // all slides (both horizontal and vertical). + // 左/右箭頭鍵在水平幻燈片之間步進，上/下箭頭鍵在垂直幻燈片之間步進。空格鍵步進 + // 通過所有幻燈片（水平和垂直）。 // // "linear" - // Removes the up/down arrows. Left/right arrows step through all - // slides (both horizontal and vertical). + // 移除上/下箭頭。左/右箭頭步進通過所有幻燈片（水平和垂直）。 // // "grid" - // When this is enabled, stepping left/right from a vertical stack - // to an adjacent vertical stack will land you at the same vertical - // index. + // 啟用時，從一個垂直堆疊向相鄰的垂直堆疊進行左/右步進時，將使您處於相同的垂直 + // 索引。 // - // Consider a deck with six slides ordered in two vertical stacks: + // 考慮一個有六張幻燈片按兩個垂直堆疊排序的套件： // 1.1 2.1 // 1.2 2.2 // 1.3 2.3 // - // If you're on slide 1.3 and navigate right, you will normally move - // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you - // from 1.3 -> 2.3. + // 如果您在幻燈片1.3上並向右導航，您通常會從1.3 -> 2.1。如果使用 "grid"，相同的導航將帶您 + // 從1.3 -> 2.3。 navigationMode: 'default', - // Randomizes the order of slides each time the presentation loads + // 每次加載簡報時隨機化幻燈片的順序 shuffle: false, - // Turns fragments on and off globally + // 全局開啟或關閉片段 fragments: true, - // Flags whether to include the current fragment in the URL, - // so that reloading brings you to the same fragment position + // 標記是否將當前片段包含在URL中， + // 以便重新加載後您會回到相同的片段位置 fragmentInURL: true, - // Flags if the presentation is running in an embedded mode, - // i.e. contained within a limited portion of the screen + // 標記簡報是否在嵌入模式下運行， + // 即包含在屏幕的有限部分內 embedded: false, - // Flags if we should show a help overlay when the question-mark - // key is pressed + // 標記是否應在按下問號鍵時顯示幫助覆蓋 help: true, - // Flags if it should be possible to pause the presentation (blackout) + // 標記是否應該可以暫停簡報（黑屏） pause: true, - // Flags if speaker notes should be visible to all viewers + // 標記是否應向所有觀眾顯示演講者筆記 showNotes: false, - // Global override for autolaying embedded media (video/audio/iframe) - // - null: Media will only autoplay if data-autoplay is present - // - true: All media will autoplay, regardless of individual setting - // - false: No media will autoplay, regardless of individual setting + // 全局覆蓋用於自動播放嵌入式媒體（視頻/音頻/iframe） + // - null: 媒體只有在存在 data-autoplay 時才會自動播放 + // - true: 所有媒體將自動播放，無論個別設定如何 + // - false: 無論個別設定如何，都不會自動播放媒體 autoPlayMedia: null, - // Global override for preloading lazy-loaded iframes - // - null: Iframes with data-src AND data-preload will be loaded when within - // the viewDistance, iframes with only data-src will be loaded when visible - // - true: All iframes with data-src will be loaded when within the viewDistance - // - false: All iframes with data-src will be loaded only when visible + // 全球覆蓋用於預加載懶加載 iframes + // - null: 帶有 data-src 和 data-preload 的 iframes 將在進入 viewDistance 範圍內時加載，只帶有 data-src 的 iframes 將在可見時加載 + // - true: 所有帶有 data-src 的 iframes 將在進入 viewDistance 範圍內時加載 + // - false: 所有帶有 data-src 的 iframes 將只在可見時加載 preloadIframes: null, - // Can be used to globally disable auto-animation + // 可用於全球禁用自動動畫 autoAnimate: true, - // Optionally provide a custom element matcher that will be - // used to dictate which elements we can animate between. + // 可選提供一個自定義元素匹配器， + // 將用於決定我們可以在哪些元素之間進行動畫。 autoAnimateMatcher: null, - // Default settings for our auto-animate transitions, can be - // overridden per-slide or per-element via data arguments + // 我們自動動畫過渡的預設設定，可以通過數據參數 + // 在每張幻燈片或每個元素上進行覆蓋 autoAnimateEasing: 'ease', autoAnimateDuration: 1.0, autoAnimateUnmatched: true, - // CSS properties that can be auto-animated. Position & scale - // is matched separately so there's no need to include styles - // like top/right/bottom/left, width/height or margin. + // 可以自動動畫的 CSS 屬性。位置 & 縮放 + // 分別匹配，因此無需包括 + // 像 top/right/bottom/left, width/height 或 margin 這樣的樣式。 autoAnimateStyles: [ 'opacity', 'color', @@ -191,92 +182,89 @@ Reveal.initialize({ 'outline-offset' ], - // Controls automatic progression to the next slide - // - 0: Auto-sliding only happens if the data-autoslide HTML attribute - // is present on the current slide or fragment - // - 1+: All slides will progress automatically at the given interval - // - false: No auto-sliding, even if data-autoslide is present + // 控制自動進入下一幻燈片 + // - 0: 自動播放只在當前幻燈片或片段上存在 data-autoslide HTML 屬性時發生 + // - 1+: 所有幻燈片將以給定間隔自動進行 + // - false: 即使存在 data-autoslide，也不進行自動播放 autoSlide: 0, - // Stop auto-sliding after user input + // 用戶輸入後停止自動播放 autoSlideStoppable: true, - // Use this method for navigation when auto-sliding (defaults to navigateNext) + // 自動播放時用於導航的方法（默認為 navigateNext） autoSlideMethod: null, - // Specify the average time in seconds that you think you will spend - // presenting each slide. This is used to show a pacing timer in the - // speaker view + // 指定你認為你將花在每張幻燈片上的平均時間（秒）。這用於在演講者視圖中顯示配速計時器 defaultTiming: null, - // Enable slide navigation via mouse wheel + // 啟用通過鼠標滾輪進行幻燈片導航 mouseWheel: false, - // Opens links in an iframe preview overlay - // Add `data-preview-link` and `data-preview-link="false"` to customise each link - // individually + // 在 iframe 預覽覆蓋層中打開鏈接 + // 添加 `data-preview-link` 和 `data-preview-link="false"` 以自定義每個鏈接 previewLinks: false, - // Exposes the reveal.js API through window.postMessage + // 通過 window.postMessage 暴露 reveal.js API + + postMessage: true, - // Dispatches all reveal.js events to the parent window through postMessage + // 通過 postMessage 將所有 reveal.js 事件派發給父窗口 postMessageEvents: false, - // Focuses body when page changes visibility to ensure keyboard shortcuts work + // 當頁面可見性改變時聚焦 body 以確保鍵盤快捷鍵工作 focusBodyOnPageVisibilityChange: true, - // Transition style + // 過渡樣式 transition: 'slide', // none/fade/slide/convex/concave/zoom - // Transition speed + // 過渡速度 transitionSpeed: 'default', // default/fast/slow - // Transition style for full page slide backgrounds + // 全頁幻燈片背景的過渡樣式 backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom - // The maximum number of pages a single slide can expand onto when printing - // to PDF, unlimited by default + // 單張幻燈片可以擴展到多個頁面時打印到PDF的最大頁數， + // 預設為無限制 pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY, - // Prints each fragment on a separate slide + // 打印每個片段到一張幻燈片 pdfSeparateFragments: true, - // Offset used to reduce the height of content within exported PDF pages. - // This exists to account for environment differences based on how you - // print to PDF. CLI printing options, like phantomjs and wkpdf, can end - // on precisely the total height of the document whereas in-browser - // printing has to end one pixel before. + // 用於減少導出PDF頁面內容高度的偏移量。 + // 這存在於根據您如何打印到PDF來解釋環境差異。 + // CLI打印選項，如 phantomjs 和 wkpdf，可以精確地 + // 結束在文檔的總高度，而在瀏覽器中打印必須在 + // 一個像素之前結束。 pdfPageHeightOffset: -1, - // Number of slides away from the current that are visible + // 離當前幻燈片可見的幻燈片數 viewDistance: 3, - // Number of slides away from the current that are visible on mobile - // devices. It is advisable to set this to a lower number than - // viewDistance in order to save resources. + // 在移動設備上離當前幻燈片可見的幻燈片數。 + // 建議將此數字設置為比 viewDistance 更低的數字以節省資源。 mobileViewDistance: 2, - // The display mode that will be used to show slides + // 用於顯示幻燈片的顯示模式 display: 'block', - // Hide cursor if inactive + // 如果不活動則隱藏光標 hideInactiveCursor: true, - // Time before the cursor is hidden (in ms) + // 隱藏光標的時間（毫秒） hideCursorTime: 5000 }); ``` -## Reconfiguring +## 重新配置 -The configuration can be updated after initialization using the `configure` method. +使用 `configure` 方法可以在初始化後更新配置。 ```javascript -// Turn autoSlide off +// 關閉 autoSlide Reveal.configure({ autoSlide: 0 }); -// Start auto-sliding every 5s +// 每5秒開始自動播放 Reveal.configure({ autoSlide: 5000 }); -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/course.md b/src/zh-Hant/course.md index e1d18837..2964645c 100644 --- a/src/zh-Hant/course.md +++ b/src/zh-Hant/course.md @@ -1,31 +1,30 @@ --- + id: course -title: Mastering reveal.js -description: An upcoming video course covering the reveal.js basics all the way up to advanced customization and features. +title: 精通 reveal.js +description: 一個即將推出的視頻課程，涵蓋從 reveal.js 基礎到高級自定義和功能的所有內容。 layout: default hidden: true hide_ads: true --- -# Mastering reveal.js +# 精通 reveal.js -This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js. - -We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting topics like presenting syntax highlighted code, animating slide content with Auto-Animate and using the speaker view. In the advanced videos we'll explore the reveal.js JavaScript API, plugin creation and how to customize keyboard bindings. (See [full list of videos](#table-of-contents).) +這個視頻課程將教你如何使用 reveal.js 創建精美的簡報。 +我們將從安裝 reveal.js、創建幻燈片和配置你的簡報的基礎開始。然後，我們將進一步探討更有趣的話題，如展示語法高亮代碼、使用自動動畫讓幻燈片內容動起來，以及使用演講者視圖。在高級視頻中，我們將探索 reveal.js JavaScript API、插件創建和如何自定義鍵盤綁定。（見[完整視頻列表](#table-of-contents)。） -### Who is this for? -The course is aimed at people who are new to reveal.js as well as those of you who already understand the fundamentals but are ready to explore the full feature set. +### 這是為誰設計的？ +這個課程面向剛接觸 reveal.js 的人，以及那些已經理解基礎但準備探索完整功能集的你。 -You'll need to have a basic understanding of HTML, CSS and JavaScript. HTML is the backbone of reveal.js and used extensively throughout the course. CSS and JavaScript are mostly used for advanced videos on topics such as creating custom themes, working with the reveal.js API and editing the source code. +你需要對 HTML、CSS 和 JavaScript 有基本的了解。HTML 是 reveal.js 的骨幹，在整個課程中廣泛使用。CSS 和 JavaScript 主要用於高級視頻，涵蓋如創建自定義主題、使用 reveal.js API 和編輯源代碼等主題。 +### 誰來講解？ +👋 我是 Hakim——一名瑞典前端開發人員和 reveal.js 的創建者。我共同創辦並目前在 [Slides.com](https://slides.com) 工作——一個基於 reveal.js 構建的簡報平台和圖形編輯器。除此之外，我喜歡在 [hakim.se](https://hakim.se) 上進行視覺演示和實驗。 -### Who is presenting? -👋 I'm Hakim—a Swedish front-end developer and the creator of reveal.js. I co-founded and am currently working on [Slides.com](https://slides.com)—a presentation platform and graphical editor built on top of reveal.js. Beyond that I love to work on visual demos and experiments at [hakim.se](https://hakim.se). - -I released the first version of reveal.js 10 years ago (!) and couldn't have imagined that it would eventually grow to be used by hundreds of thousands of people. I hope you'll join in and experience first hand why so many choose to create their presentations with reveal.js! +我在10年前 (!) 發布了 reveal.js 的第一個版本，當時沒有想到它最終會被成千上萬的人使用。我希望你能加入進來，親身體驗為什麼這麼多人選擇使用 reveal.js 創建他們的簡報！
@@ -36,53 +35,53 @@ I released the first version of reveal.js 10 years ago (!) and couldn't have ima $99 $79

- Buy course + 購買課程
    -
  • 22 videos
    • -
  • 5h 39m total runtime
    • -
  • Stream in HD
    • -
  • Download in 4K
    • -
  • Free updates
    • +
  • 22視頻
    • +
  • 總時長5小時39分鐘
    • +
  • 以高清格式流媒體
    • +
  • 以4K格式下載
    • +
  • 免費更新
+ +
-The course is sold via [Gumroad](https://gumroad.com/). VAT is added at the time of purchase, if applicable. 100% money back if the course isn't a good fit for you—no questions asked. - -## Table of Contents -The course is divided into relatively short videos so that you can easily skip topics that aren't relevant to you or that you are already familiar with. The total runtime is 5.5 hours. +課程通過 [Gumroad](https://gumroad.com/) 銷售。購買時將添加增值稅（如果適用）。如果課程不適合你——無需問題退款保證100%。 +## 目錄 +課程分為相對較短的視頻，以便你可以輕鬆跳過與你無關或你已熟悉的主題。總時長為5.5小時。 -| Getting Started | | +| 起步 | | | :- | -: | -| **Getting Started** | Duration | -|   Installing reveal.js and setting up the development server. | 5:40 -|   Creating slides, linking between them and saving drafts. | 10:04 -|   Configuring your presentation. | 8:23 -|   Working with vertical slides. | 9:05 -|   Creating slides using Markdown. | 16:34 -| **Content Creation** | -|   Adding text, images, videos and iframes to your slides. | 10:47 -|   Layout slide content using stacks and auto-sized text. | 13:58 -|   Fullscreen background images, videos, colors and iframes. | 16:26 -|   Presenting syntax highlighted code. | 21:51 -|   Using Fragments to build up slides in steps. | 13:14 -|   Animating slide content with Auto-Animate. | 17:01 -| **Configuration & Features** | -|   Presentation size and scale. | 14:34 -|   Slide transitions. | 12:36 -|   Theming your content and creating your own theme. | 16:12 -|   Speaker notes & using the speaker view. | 11:27 -|   Slide numbers & URLs. | 19:55 -|   Converting your presentation to PDF. | 10:23 -| **Advanced (JS)** | -|   Initialization & running multiple presentations. | 19:06 -|   Plugins; where to find and how to create them. | 14:52 -|   Using the reveal.js API to control your presentation. | 40:32 -|   Customizing keyboard shortcuts. | 15:04 -|   Working with the source code. | 21:09 -{.toc .hide-header} - +| **起步** | 時長 | +|   安裝 reveal.js 和設置開發服務器。 | 5:40 +|   創建幻燈片，互相鏈接並保存草稿。 | 10:04 +|   配置你的簡報。 | 8:23 +|   使用垂直幻燈片。 | 9:05 +|   使用 Markdown 創建幻燈片。 | 16:34 +| **內容創建** | +|   向幻燈片添加文本、圖片、視頻和 iframe。 | 10:47 +|   使用棧和自動大小文本佈局幻燈片內容。 | 13:58 +|   全屏背景圖片、視頻、顏色和 iframe。 | 16:26 +|   展示語法高亮代碼。 | 21:51 +|   使用 Fragments 逐步構建幻燈片。 | 13:14 +|   使用 Auto-Animate 動畫幻燈片內容。 | 17:01 +| **配置與功能** | +|   簡報大小和比例。 | 14:34 +|   幻燈片過渡。 | 12:36 +|   主題化你的內容並創建你自己的主題。 | 16:12 +|   演講者筆記和使用演講者視圖。 | 11:27 +|   幻燈片編號與 URL。 | 19:55 +|   將你的簡報轉換為 PDF。 | 10:23 +| **高級 (JS)** | +|   初始化和運行多個簡報。 | 19:06 +|   插件；在哪裡找到以及如何創建它們。 | 14:52 +|   使用 reveal.js API 控制你的簡報。 | 40:32 +|   自定義鍵盤快捷鍵。 | 15:04 +|   與源代碼一起工作。 | 21:09 +{.toc .hide-header} \ No newline at end of file diff --git a/src/zh-Hant/creating-plugins.md b/src/zh-Hant/creating-plugins.md index 0cea4098..b2ec6d2c 100644 --- a/src/zh-Hant/creating-plugins.md +++ b/src/zh-Hant/creating-plugins.md @@ -1,25 +1,26 @@ --- + id: creating-plugins -title: Creating Plugins +title: 創建插件 layout: default --- -# Creating a Plugin 4.0.0 +# 創建插件 4.0.0 -We provide a lightweight specification and API for plugins. This is used by our default plugins like [code highlighting](/code/) and [Markdown](/markdown/) but can also be used to create your own plugins. +我們提供了一個輕量級的插件規範和API。這被我們的預設插件如[代碼高亮](/code/)和[Markdown](/markdown/)使用，但也可以用來創建你自己的插件。 -## Plugin Definition +## 插件定義 -Plugins are objects that contain the following properties. +插件是包含以下屬性的對象。 -| Property | Value +| 屬性 | 值 | :- | :- -| id String | The plugins unique ID. This can be used to retrieve the plugin instance via `Reveal.getPlugin()`. -| init Function | An optional function that is called when the plugin should run. It's invoked with one argument; a reference to the [presentation instance](/api/) that the plugin was registered with.

The init function can optionally return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). If a Promise is returned, reveal.js will wait for it to resolve before the presentation finishes initialization and fires the [ready event](/events/#ready). -| destroy Function | Optional function that is called when the reveal.js instance that this plugin is registered to is uninitialized. +| id 字符串 | 插件的唯一ID。這可以用來通過 `Reveal.getPlugin()` 檢索插件實例。 +| init 函數 | 可選的函數，當插件應該運行時被調用。它被調用時有一個參數；插件註冊的[簡報實例](/api/)的引用。

init 函數可以選擇性地返回一個 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果返回了Promise，reveal.js將等待它解析完成，然後簡報初始化完成並觸發[準備好的事件](/events/#ready)。 +| destroy 函數 | 可選的函數，當這個插件註冊的reveal.js實例被卸載時調用。 {.key-value} -Here's an example plugin which shuffles all slides in a presentation when the T key is pressed. Note that we export a function that returns a new plugin object. This is done because there may be [multiple presentation instances on the same page](/initialization/#multiple-presentations), and each should have their own instance of our plugin. +這裡是一個示例插件，當按下T鍵時，它會在簡報中洗牌所有幻燈片。注意，我們導出一個返回新插件對象的函數。這樣做是因為同一頁面上可能有[多個簡報實例](/initialization/#multiple-presentations)，而每個實例都應該擁有我們插件的自己的實例。 ```js @@ -35,9 +36,9 @@ export default () => ({ }) ``` -## Registering a Plugin +## 註冊插件 -Plugins are registered by including them in the `plugins` array of the [config options](/config/). You can also register a plugin at runtime using `Reveal.registerPlugin( Plugin )`. +插件通過將它們包含在[配置選項](/config/)的 `plugins` 數組中來註冊。你也可以在運行時使用 `Reveal.registerPlugin( Plugin )` 註冊插件。 ```js import Reveal from 'dist/reveal.esm.js'; @@ -48,8 +49,8 @@ Reveal.initialize({ }); ``` -### Async Plugins -If your plugin needs to run asynchronous code before reveal.js finishes initializing it can return a Promise. Here's an example plugin that will delay initialization for three seconds. +### 異步插件 +如果你的插件需要在reveal.js完成初始化之前運行異步代碼，它可以返回一個Promise。這裡是一個會延遲初始化三秒的示例插件。 ```js let WaitForIt = { @@ -62,4 +63,4 @@ let WaitForIt = { Reveal.initialize({ plugins: [ WaitForIt ] }).then( () => { console.log( "Three seconds later..." ); } ) -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/events.md b/src/zh-Hant/events.md index 9dc48b27..005c4174 100644 --- a/src/zh-Hant/events.md +++ b/src/zh-Hant/events.md @@ -1,20 +1,21 @@ --- + id: events -title: Events +title: 事件 layout: default --- -# Events +# 事件 -We dispatch a number of events to make it easy for you to react to changes in the presentation. `Reveal.on()` is used to add event listeners, and `Reveal.off()` is used to remove them. +我們發送許多事件，以便您可以輕鬆地響應簡報中的變化。使用 `Reveal.on()` 添加事件監聽器，使用 `Reveal.off()` 移除它們。 ```js Reveal.on( 'eventname', callbackFunction ); ``` -## Ready +## 就緒 -The `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to accept API calls. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`. +當 reveal.js 加載了所有非異步依賴並準備好接受 API 調用時，會觸發 `ready` 事件。要檢查 reveal.js 是否已經「就緒」，你可以調用 `Reveal.isReady()`。 ```javascript Reveal.on( 'ready', event => { @@ -22,22 +23,21 @@ Reveal.on( 'ready', event => { } ); ``` -We also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS. +我們還會在 `.reveal` 元素上添加一個 `.ready` 類，以便您可以用 CSS 掛鉤進這個狀態。 -The `Reveal.initialize` method also returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which resolves when the presentation is ready. The following is synonymous to adding a listener for the `ready` event: +`Reveal.initialize` 方法還返回一個 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)，當簡報準備好時解析。以下與添加 `ready` 事件的監聽器同義： ```javascript Reveal.initialize().then( () => { - // reveal.js is ready +// reveal.js 已準備好 } ) ``` +## 幻燈片變更 -## Slide Changed - -The `slidechanged` event is fired each time the slide changes. The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML elements. +每次幻燈片變更時，都會觸發 `slidechanged` 事件。事件對象包含當前幻燈片的索引值以及對前一幻燈片和當前幻燈片 HTML 元素的引用。 -Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. +一些庫，如 MathJax（參見 [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)），可能會對幻燈片的變形和顯示狀態感到困惑。通常，這可以通過從此回調調用它們的更新或渲染函數來修復。 ```javascript Reveal.on( 'slidechanged', event => { @@ -45,9 +45,9 @@ Reveal.on( 'slidechanged', event => { } ); ``` -## Slide Transition End +## 幻燈片轉換結束 -The `slidechanged` event fires instantly as soon as the slide changes. If you'd rather invoke your event listener when the slide has finished transitioning and is fully visible, you can use the `slidetransitionend` event. The `slidetransitionend` event includes the same event data as `slidechanged`. +`slidechanged` 事件在幻燈片變更時立即觸發。如果您寧願在幻燈片轉換完成並完全可見時調用事件監聽器，您可以使用 `slidetransitionend` 事件。`slidetransitionend` 事件包含與 `slidechanged` 相同的事件數據。 ```javascript Reveal.on( 'slidetransitionend', event => { @@ -55,10 +55,9 @@ Reveal.on( 'slidetransitionend', event => { }); ``` +## 調整大小 -## Resize - -The `resize` event is fired when reveal.js changes the scale of the presentation. +當 reveal.js 更改簡報的縮放比例時，會觸發 `resize` 事件。 ```javascript Reveal.on( 'resize', event => { @@ -66,7 +65,7 @@ Reveal.on( 'resize', event => { } ); ``` -## Feature-specific Events -- [Overview mode events](/overview/#events) -- [Fragment events](/fragments/#events) -- [Auto-Slide events](/auto-slide/#events) +## 特定功能的事件 +- [概覽模式事件](/overview/#events) +- [片段事件](/fragments/#events) +- [自動播放事件](/auto-slide/#events) \ No newline at end of file diff --git a/src/zh-Hant/fragments.md b/src/zh-Hant/fragments.md index 9e57a448..0ec73d23 100644 --- a/src/zh-Hant/fragments.md +++ b/src/zh-Hant/fragments.md @@ -1,61 +1,62 @@ --- + id: fragments -title: Fragments +title: 片段 layout: default --- -# Fragments +# 片段 -Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class `fragment` will be stepped through before moving on to the next slide. +片段用於突出顯示或逐步顯示幻燈片上的單個元素。所有帶有 `fragment` 類的元素將在轉到下一張幻燈片之前逐步顯示。 -The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment. +默認的片段樣式是從不可見開始，然後淡入。通過添加不同的類到片段，可以更改這種樣式。 ```html -

Fade in

-

Fade out

-

Highlight red

-

Fade in, then out

-

Slide up while fading in

+

淡入

+

淡出

+

突出顯示紅色

+

先淡入，然後淡出

+

向上滑動同時淡入

```
-

Fade in

-

Fade out

-

Highlight red

-

Fade in, then out

-

Slide up while fading in

+

淡入

+

淡出

+

突出顯示紅色

+

先淡入，然後淡出

+

向上滑動同時淡入

-| Name | Effect | +| 名稱 | 效果 | | :- |:- | -| fade-out | Start visible, fade out | -| fade-up | Slide up while fading in | -| fade-down | Slide down while fading in | -| fade-left | Slide left while fading in | -| fade-right | Slide right while fading in | -| fade-in-then-out | Fades in, then out on the next step | -| current-visible | Fades in, then out on the next step | -| fade-in-then-semi-out | Fades in, then to 50% on the next step | -| grow | Scale up | -| semi-fade-out | Fade out to 50% | -| shrink | Scale down | -| strike | Strike through | -| highlight-red | Turn text red | -| highlight-green | Turn text green | -| highlight-blue | Turn text blue | -| highlight-current-red | Turn text red, then back to original on next step | -| highlight-current-green | Turn text green, then back to original on next step | -| highlight-current-blue | Turn text blue, then back to original on next step | +| fade-out | 開始可見，然後淡出 | +| fade-up | 向上滑動同時淡入 | +| fade-down | 向下滑動同時淡入 | +| fade-left | 向左滑動同時淡入 | +| fade-right | 向右滑動同時淡入 | +| fade-in-then-out | 先淡入，然後在下一步淡出 | +| current-visible | 在下一步先淡入，然後淡出 | +| fade-in-then-semi-out | 先淡入，然後在下一步淡到50% | +| grow | 放大 | +| semi-fade-out | 淡出到50% | +| shrink | 縮小 | +| strike | 中劃線 | +| highlight-red | 文本變紅 | +| highlight-green | 文本變綠 | +| highlight-blue | 文本變藍 | +| highlight-current-red | 文本變紅，然後在下一步恢復原樣 | +| highlight-current-green | 文本變綠，然後在下一步恢復原樣 | +| highlight-current-blue | 文本變藍，然後在下一步恢復原樣 | {.key-value} -## Custom Fragments 4.5.0 +## 自定義片段 4.5.0 -Custom effects can be implemented by defining CSS styles for `.fragment.effectname` and `.fragment.effectname.visible` respectively. The `visible` class is added to each fragment as they are stepped through in the presentation. +可以通過為 `.fragment.effectname` 和 `.fragment.effectname.visible` 分別定義 CSS 樣式來實現自定義效果。當片段在簡報中被逐步顯示時，`visible` 類將被添加到每個片段上。 -For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through. +例如，以下定義了一種片段樣式，其中元素最初被模糊，但在逐步顯示時變得清晰。 ```html
-

One

-

Two

-

Three

+

一

+

二

+

三

```
@@ -81,18 +82,20 @@ For example, the following defines a fragment style where elements are initially .fragment.blur.visible { filter: none; } - + -

One

-

Two

-

Three

+

一

+ + +

二

+

三

-Note that we are adding a `custom` class to each fragment. This tells reveal.js to avoid applying its default fade-in fragment styles. +請注意，我們為每個片段添加了一個 `custom` 類。這告訴 reveal.js 避免應用其默認的淡入片段樣式。 -If you want all elements to remain blurred except the current fragment, you can substitute `visible` for `current-fragment`. +如果您希望所有元素保持模糊，除了當前片段外，您可以用 `current-fragment` 替換 `visible`。 ```css .fragment.blur.current-fragment { @@ -101,15 +104,15 @@ If you want all elements to remain blurred except the current fragment, you can ``` -## Nested Fragments +## 嵌套片段 -Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step, turn it red on the second and fade out on the third. +可以通過包裝同一元素來順序應用多個片段，這將在第一步淡入文本，在第二步將其變紅，在第三步淡出。 ```html - Fade in > Turn red > Fade out + 淡入 > 變紅 > 淡出 @@ -120,7 +123,7 @@ Multiple fragments can be applied to the same element sequentially by wrapping i - Fade in > Turn red > Fade out + 淡入 > 變紅 > 淡出 @@ -128,34 +131,34 @@ Multiple fragments can be applied to the same element sequentially by wrapping i -## Fragment Order +## 片段順序 -By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using the `data-fragment-index` attribute. Note that multiple elements can appear at the same index. +默認情況下，片段將按照它們在 DOM 中出現的順序進行步進。這個顯示順序可以使用 `data-fragment-index` 屬性更改。請注意，多個元素可以在同一索引處出現。 ```html -

Appears last

-

Appears first

-

Appears second

+

最後出現

+

第一個出現

+

第二個出現

```
-

Appears last

-

Appears first

-

Appears second

+

最後出現

+

第一個出現

+

第二個出現

-## Events +## 事件 -When a fragment is either shown or hidden reveal.js will dispatch an event. +當片段被顯示或隱藏時，reveal.js 將發送事件。 ```javascript Reveal.on( 'fragmentshown', event => { - // event.fragment = the fragment DOM element + // event.fragment = 片段 DOM 元素 } ); Reveal.on( 'fragmenthidden', event => { - // event.fragment = the fragment DOM element + // event.fragment = 片段 DOM 元素 } ); -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/fullscreen.md b/src/zh-Hant/fullscreen.md index ff93ac99..875d6808 100644 --- a/src/zh-Hant/fullscreen.md +++ b/src/zh-Hant/fullscreen.md @@ -1,18 +1,21 @@ --- + id: fullscreen -title: Fullscreen +title: 全螢幕 layout: default --- -### Fullscreen mode +### 全螢幕模式 -There's built-in support for fullscreen mode. Press »F« on your keyboard to view your presentation in fullscreen mode. Once in fullscreen mode, press the »ESC« key to exit. +reveal.js 支援全螢幕模式。在鍵盤上按「F」鍵即可進入全螢幕模式觀看您的簡報。一旦進入全螢幕模式，按「ESC」鍵退出。 -Try it out below. Note that this example uses an [embedded](/presentation-size/#embedded) presentation, you will need to click to give it focus before pressing F. +請在下方試用。請注意，這個例子使用了一個[嵌入式](/presentation-size/#embedded)簡報，您需要點擊以給它焦點然後按 F 鍵。
-
Click here to focus, then the F key.
-
Slide 2
+
點擊此處以獲取焦點，然後按 F 鍵。
+
幻燈片 2
-
\ No newline at end of file + + +這個功能允許使用者更加沉浸地觀看簡報，尤其是在大螢幕上展示時，全螢幕模式可以更好地吸引觀眾的注意力。簡報者可以利用全螢幕模式來顯示詳細圖表或圖像，讓觀眾更容易看清楚細節。 \ No newline at end of file diff --git a/src/zh-Hant/initialization.md b/src/zh-Hant/initialization.md index 7adf9e33..8eeec3d9 100644 --- a/src/zh-Hant/initialization.md +++ b/src/zh-Hant/initialization.md @@ -1,14 +1,15 @@ --- + id: initialization -title: Initialization +title: 初始化 layout: default --- -# Initialization +# 初始化 -The most common reveal.js use case is to have a single presentation which covers the full viewport. As of 4.0 we also support running [multiple presentations](#multiple-presentations) in parallel on the same page as well as including the library as an [ES module](#es-module). +最常見的 reveal.js 使用情景是有一個覆蓋整個視口的單一簡報。從 4.0 版本開始，我們也支持在同一頁面上同時運行[多個簡報](#multiple-presentations)，以及將庫作為一個[ES 模塊](#es-module)引入。 -If you only have a single presentation on the page we recommend initializing reveal.js using the global `Reveal` object. The `Reveal.initialize` method accepts one argument; a reveal.js [config object](/config/). +如果你的頁面上只有一個簡報，我們建議使用全局的 `Reveal` 對象來初始化 reveal.js。`Reveal.initialize` 方法接受一個參數；一個 reveal.js 的[配置對象](/config/)。 ```html ``` -The `initialize` method returns a promise which will resolve as soon as the presentation is ready and can be interacted with via the API. +`initialize` 方法返回一個 promise，當簡報準備好並可以通過 API 進行交互時，此 promise 將解析。 ```js Reveal.initialize().then( () => { - // reveal.js is ready + // reveal.js 已準備好 } ) ``` -## Multiple Presentations 4.0.0 {id="multiple-presentations"} +## 多個簡報 4.0.0 {id="multiple-presentations"} -To run multiple presentations side-by-side on the same page you can create instances of the `Reveal` class. The `Reveal` constructor accepts two arguments; the `.reveal` HTML element root of the presentation and an optional [config object](/config/). +要在同一頁面上並排運行多個簡報，你可以創建 `Reveal` 類的實例。`Reveal` 構造函數接受兩個參數；簡報的 `.reveal` HTML 元素根以及一個可選的[配置對象](/config/)。 -Note that you will also need to set the [embedded](/presentation-size/#embedded) config option to true. This flag makes the presentations size themselves according to their `.reveal` root element size, rather than the browser viewport. You will also need to manually define the `width` and `height` CSS properties for each `.reveal .deck*` element in order to see them appear. +請注意，你還需要將[嵌入式](/presentation-size/#embedded)配置選項設置為真。這個標誌使得簡報按照它們的 `.reveal` 根元素的大小進行自我調整，而不是按照瀏覽器視口。你還需要手動為每個 `.reveal .deck*` 元素定義 `width` 和 `height` 的 CSS 屬性，才能看到它們顯示出來。 -By default reveal.js will capture all keyboard events in the document. For embedded presentations we recommend initializing with `keyboardCondition: 'focused'` so that keyboard events are only captured when the presentation has been focused by the viewer. +默認情況下，reveal.js 會捕獲文檔中的所有鍵盤事件。對於嵌入式簡報，我們建議使用 `keyboardCondition: 'focused'` 初始化，這樣鍵盤事件只有在觀眾聚焦簡報時才會被捕獲。 ```html
...
@@ -39,7 +40,7 @@ By default reveal.js will capture all keyboard events in the document. For embed ``` -## ES Module 4.0.0 {id="es-module"} +## ES 模塊 4.0.0 {id="es-module"} + +我們提供兩個 JavaScript 包，取決於你的使用情況。我們的默認簡報模板使用 `dist/reveal.js`，它支持廣泛的跨瀏覽器（ES5）並將 Reveal 暴露到全局窗口（UMD）。 -We provide two JavaScript bundles depending your use case. Our default presentation boilerplate uses `dist/reveal.js` which has broad cross browser support (ES5) and exposes Reveal to the global window (UMD). +第二個包是 `dist/reveal.esm.js`，它允許將 reveal.js 作為 ES 模塊導入。這個版本可以直接在瀏覽器中使用 ` ``` -If you're [installing reveal.js from npm](/installation/#installing-from-npm) and bundling it you should be able to use: +如果你是[從 npm 安裝 reveal.js](/installation/#installing-from-npm)並且捆綁它，你應該能夠使用： ```js import Reveal from 'reveal.js'; Reveal.initialize(); ``` -## Uninitializing reveal.js 4.3.0 {id="destroy"} +## 取消初始化 reveal.js 4.3.0 {id="destroy"} -If you want to uninitialize reveal.js you can use the `destroy` API method. This will undo all changes that the framework has made to the DOM, remove all event listeners and unregister/destroy all plugins. +如果你想取消初始化 reveal.js，你可以使用 `destroy` API 方法。這將撤銷框架對 DOM 做出的所有更改，移除所有事件監聽器並註銷/銷毀所有插件。 ```js Reveal.destroy(); -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/installation.md b/src/zh-Hant/installation.md index 1cd91450..f8c317df 100644 --- a/src/zh-Hant/installation.md +++ b/src/zh-Hant/installation.md @@ -1,71 +1,71 @@ --- + id: installation -title: Installation +title: 安裝 layout: default --- -# Installation +# 安裝 -We provide three different ways to install reveal.js depending on your use case and technical experience. -1. The [basic setup](#basic-setup) is the easiest way to get started. No need to set up any build tools. -1. The [full setup](#full-setup) gives you access to the build tools needed to make changes to the reveal.js source code. It includes a web server which is required if you want to load external Markdown files (the basic setup paired with your own choice of local web server works too). -1. If you want to use reveal.js as a dependency in your project, you can [install from npm](#installing-from-npm). +我們提供三種不同的安裝 reveal.js 的方式，取決於您的使用情況和技術經驗。 +1. [基本設置](#basic-setup) 是開始使用的最簡單方法。無需設置任何構建工具。 +1. [完整設置](#full-setup) 可讓您訪問更改 reveal.js 源代碼所需的構建工具。它包括一個網絡服務器，如果您想要加載外部 Markdown 文件則需要此服務器（基本設置配合您自選的本地網絡服務器也可以）。 +1. 如果您想在項目中使用 reveal.js 作為依賴項，您可以[從 npm 安裝](#installing-from-npm)。 -#### Next Steps +#### 下一步 -Once reveal.js is installed, we recommend checking out the [Markup](/markup/) and [Config Option](/config/) guides. +安裝完 reveal.js 後，我們推薦查看 [Markup](/markup/) 和 [配置選項](/config/) 指南。 -## Basic Setup +## 基本設置 -We make a point of distributing reveal.js in a way that it can be used by as many people as possible. The basic setup is our most broadly accessible way to get started and only requires that you have a web browser. There's no need to go through a build process or install any dependencies. +我們力求以盡可能多的人都能使用的方式分發 reveal.js。基本設置是我們開始使用的最廣泛訪問方式，只需要您擁有一個網絡瀏覽器。無需經過構建過程或安裝任何依賴。 -1. Download the latest reveal.js version -1. Unzip and replace the example contents in index.html with your own -1. Open index.html in a browser to view it +1. 下載最新版本的 reveal.js +1. 解壓並替換 index.html 中的示例內容為您自己的 +1. 在瀏覽器中打開 index.html 查看 -That's it 🚀 +就是這樣 🚀 -## Full Setup - Recommended{id="full-setup"} +## 完整設置 - 推薦{id="full-setup"} -Some reveal.js features, like external Markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code. +某些 reveal.js 功能，如外部 Markdown，要求簡報從本地網絡服務器運行。以下指令將設置這樣的服務器以及完成對 reveal.js 源代碼所需的所有開發任務。 -1. Install [Node.js](https://nodejs.org/) (10.0.0 or later) +1. 安裝 [Node.js](https://nodejs.org/) (10.0.0 或更高版本) -1. Clone the reveal.js repository +1. 克隆 reveal.js 倉庫 ```shell $ git clone https://github.com/hakimel/reveal.js.git ``` -1. Move to the reveal.js folder and install dependencies +1. 移動到 reveal.js 文件夾並安裝依賴 ```shell $ cd reveal.js && npm install ``` -1. Serve the presentation and monitor source files for changes +1. 提供簡報並監控源文件的更改 ```shell $ npm start ``` -1. Open to view your presentation - +1. 打開 查看您的簡報 -### Development Server Port -The development server defaults to port 8000. You can use the `port` argument to switch to a different one: +### 開發服務器端口 +開發服務器默認使用 8000 端口。您可以使用 `port` 參數切換到不同的端口： ```shell npm start -- --port=8001 ``` -## Installing From npm +## 從 npm 安裝 -The framework is published to, and can be installed from, [npm](https://www.npmjs.com/package/reveal.js). Note that reveal.js is targeted at the browser and includes CSS, fonts and other assets so the npm dependency use case may be limited. +框架發布到並可從 [npm](https://www.npmjs.com/package/reveal.js) 安裝。請注意，reveal.js 面向瀏覽器並包含 CSS、字體及其他資源，因此 npm 依賴使用案例可能受限。 ```shell npm install reveal.js -# or +# 或者 yarn add reveal.js ``` -Once installed, you can include reveal.js as an ES module: +安裝後，您可以將 reveal.js 作為 ES 模塊導入： ```js import Reveal from 'reveal.js'; import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'; @@ -76,8 +76,10 @@ let deck = new Reveal({ deck.initialize(); ``` -You'll also need to include the reveal.js styles and a [presentation theme](/themes/). +您 + +還需要包括 reveal.js 的樣式和一個[簡報主題](/themes/)。 ```html -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/jump-to-slide.md b/src/zh-Hant/jump-to-slide.md index 318def9b..4cceec93 100644 --- a/src/zh-Hant/jump-to-slide.md +++ b/src/zh-Hant/jump-to-slide.md @@ -1,33 +1,34 @@ --- + id: jump-to-slide -title: Jump to Slide +title: 跳轉到幻燈片 layout: default --- -# Jump to Slide 4.5.0 +# 跳轉到幻燈片 4.5.0 -You can skip ahead to a specific slide using reveal.js' jump-to-slide shortcut. Here's how it works: +您可以使用 reveal.js 的跳轉到幻燈片快捷方式直接跳到特定的幻燈片。以下是操作方法： -1. Press G to activate -2. Type a slide number or id -3. Press Enter to confirm +1. 按 G 啟動 +2. 輸入幻燈片編號或 id +3. 按 Enter 確認 -## Navigating to Slide Number +## 導航到幻燈片編號 -When jumping to a slide you can either enter numeric value or a string. If you provide a number reveal.js will navigate to the desired slide number. If you type a string, reveal.js will try to locate a slide with a matching `id` and navigate to it. +當跳轉到一個幻燈片時，您可以輸入數字值或字符串。如果您提供一個數字，reveal.js 將導航到所需的幻燈片編號。如果您輸入一個字符串，reveal.js 將嘗試定位一個具有匹配 `id` 的幻燈片並導航到它。 -Here are a couple of examples of different input and their resulting navigation. +這裡有一些不同輸入及其導航結果的範例。 -| Input | Result +| 輸入 | 結果 | :- | :- -| 5 | Navigate to slide number 5 -| 6/2 | Navigate to horizontal slide 6, vertical slide 2 -| the-end | Navigate to a slide with this id (`
`) +| 5 | 導航到幻燈片編號 5 +| 6/2 | 導航到水平幻燈片 6，垂直幻燈片 2 +| the-end | 導航到具有此 id 的幻燈片（`
`） {.key-value} -## Disable Jump to Slide +## 禁用跳轉到幻燈片 -Jump to Slide is enabled by default but if you want to turn it off you can set the `jumpToSlide` config value to `false`. +跳轉到幻燈片默認情況下是啟用的，但如果您想關閉它，您可以將 `jumpToSlide` 配置值設置為 `false`。 ```javascript Reveal.initialize({ diff --git a/src/zh-Hant/keyboard.md b/src/zh-Hant/keyboard.md index 4c48f95a..28ece96c 100644 --- a/src/zh-Hant/keyboard.md +++ b/src/zh-Hant/keyboard.md @@ -1,58 +1,59 @@ --- + id: keyboard -title: Keyboard +title: 鍵盤綁定 layout: default --- -# Keyboard Bindings +# 鍵盤綁定 -If you're unhappy with any of the default keyboard bindings you can override them using the `keyboard` config option. +如果您對任何默認的鍵盤綁定不滿意，可以使用 `keyboard` 配置選項來覆蓋它們。 ```javascript/1-5 Reveal.configure({ keyboard: { - 27: () => { console.log('esc') }, // do something custom when ESC is pressed - 13: 'next', // go to the next slide when the ENTER key is pressed - 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding) + 27: () => { console.log('esc') }, // 當按下 ESC 時執行自定義操作 + 13: 'next', // 當按下 ENTER 鍵時進入下一張幻燈片 + 32: null // 當按下 SPACE 時不執行任何操作（即禁用 reveal.js 的默認綁定） } }); ``` -The keyboard object is a map of key codes and their corresponding *action*. The action can be of three different types. +鍵盤對象是鍵碼及其對應*動作*的映射。動作可以有三種不同的類型。 -| Type | Action +| 類型 | 動作 | :- | :- -| Function | Triggers a callback function. -| String | Calls the given method name in the [reveal.js API](/api/). -| null | Disables the key (blocks the default reveal.js action) +| 函數 | 觸發一個回調函數。 +| 字符串 | 調用 [reveal.js API](/api/) 中的指定方法名。 +| null | 禁用該鍵（阻止默認的 reveal.js 動作） {.key-value} -## Adding Keyboard Bindings via JavaScript +## 通過 JavaScript 添加鍵盤綁定 -Custom key bindings can also be added and removed using Javascript. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the `keyboard` config option. +也可以使用 JavaScript 添加和移除自定義鍵盤綁定。自定義鍵盤綁定將覆蓋默認的鍵盤綁定，但會被 `keyboard` 配置選項中用戶定義的綁定覆蓋。 ```javascript Reveal.addKeyBinding( binding, callback ); Reveal.removeKeyBinding( keyCode ); ``` -For example +例如 ```javascript -// The binding parameter provides the following properties -// keyCode: the keycode for binding to the callback -// key: the key label to show in the help overlay -// description: the description of the action to show in the help overlay -Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, () => { - // start timer +// 綁定參數提供以下屬性 +// keyCode: 用於綁定到回調的鍵碼 +// key: 在幫助覆蓋中顯示的鍵標籤 +// description: 在幫助覆蓋中顯示的操作描述 +Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: '啟動計時器' }, () => { + // 啟動計時器 } ) -// The binding parameter can also be a direct keycode without providing the help description +// 綁定參數也可以是直接的鍵碼，無需提供幫助描述 Reveal.addKeyBinding( 82, () => { - // reset timer + // 重置計時器 } ) ``` -This allows plugins to add key bindings directly to Reveal so they can: -- Make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused) -- Be included in the help overlay (optional) \ No newline at end of file +這允許插件直接向 Reveal 添加鍵盤綁定，使它們可以： +- 利用 Reveal 的鍵處理預處理邏輯（例如，在暫停時忽略按鍵） +- 包括在幫助覆蓋中（可選） \ No newline at end of file diff --git a/src/zh-Hant/layout.md b/src/zh-Hant/layout.md index f3414beb..86e5bd4d 100644 --- a/src/zh-Hant/layout.md +++ b/src/zh-Hant/layout.md @@ -1,18 +1,19 @@ --- + id: layout -title: Layout +title: 布局 layout: default --- -# Layout +# 布局 -We provide a few different helper classes for controlling the layout and styling your content. We're aiming to add more of these in upcoming versions so keep an eye out for that. +我們提供了幾種不同的輔助類，用於控制布局並設計您的內容。我們目標是在即將到來的版本中添加更多這些類，因此請密切關注。 -If you're looking to change the sizing, scaling and centering of your presentation please see [Presentation Size](/presentation-size/). +如果您希望更改簡報的尺寸、縮放和居中，請參見[簡報大小](/presentation-size/)。 -## Stack +## 堆疊 -The `r-stack` layout helper lets you center and place multiple elements on top of each other. This is intended to be used together with [fragments](/fragments/) to incrementally reveal elements. +`r-stack` 布局輔助讓您可以居中並將多個元素疊加在一起。這意味著要與[片段](/fragments/)一起使用，以逐步揭示元素。 ```html
@@ -33,7 +34,7 @@ The `r-stack` layout helper lets you center and place multiple elements on top o
-If you want to show each of the stacked elements individually you can adjust the fragment settings: +如果您希望逐個顯示堆疊的元素，可以調整片段設置： ```html
@@ -54,62 +55,64 @@ If you want to show each of the stacked elements individually you can adjust the
-## Fit Text +## 適應文字 -The `r-fit-text` class makes text as large as possible without overflowing the slide. This is great when you want BIG text without having to manually find the right font size. Powered by [fitty](https://github.com/rikschennink/fitty) ❤️ +`r-fit-text` 類使文字盡可能大而不超出幻燈片。當您希望文字很大而不需要手動找到正確的字體大小時，這非常合適。由 [fitty](https://github.com/rikschennink/fitty) ❤️ 提供支持 ```html -

BIG

+

大

```
-

BIG

+

大

```html -

FIT TEXT

-

CAN BE USED FOR MULTIPLE HEADLINES

+

適應文字

+

可用於多個標題

```
-

FIT TEXT

-

CAN BE USED FOR MULTIPLE HEADLINES

+

適應文字

+

可用於多個標題

-
+ -## Stretch -The `r-stretch` layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. For example, in the below example our slide contains a **title**, an **image** and a **byline**. Because the **image** has the `.r-stretch` class, its height is set to the slide height minus the combined height of the **title** and **byline**. +## 拉伸 + +`r-stretch` 布局輔助讓您可以調整元素（如圖片或視頻）的大小，以覆蓋幻燈片中剩餘的垂直空間。例如，在下面的例子中，我們的幻燈片包含一個**標題**、一個**圖片**和一個**作者行**。因為**圖片**具有 `.r-stretch` 類，其高度設置為幻燈片高度減去**標題**和**作者行**的組合高度。 ```html -

Stretch Example

+

拉伸範例

-

Image byline

+

圖片說明

```
-

Stretch Example

+

拉伸範例

-

Image byline

+

圖片說明

-#### Stretch Limitations -- Only direct descendants of a slide section can be stretched -- Only one descendant per slide section can be stretched +#### 拉伸限制 +- 只有幻燈片部分的直接後代才可以拉伸 +- 每個幻燈片部分只能拉伸一個後代 -## Frame +## 框架 -Decorate any element with `r-frame` to make it stand out against the background. If the framed element is placed inside an anchor, we'll apply a hover effect to the border. +用 `r-frame` 裝飾任何元素，使其在背景中脫穎而出。如果被框架的元素放置在錨點內，我們將對邊框應用懸停效果。 ```html @@ -126,4 +129,4 @@ Decorate any element with `r-frame` to make it stand out against the background.
- + \ No newline at end of file diff --git a/src/zh-Hant/links.md b/src/zh-Hant/links.md index 7a1de716..1998d823 100644 --- a/src/zh-Hant/links.md +++ b/src/zh-Hant/links.md @@ -1,64 +1,67 @@ --- + id: links -title: Links +title: 內部鏈接 layout: default --- -# Internal links +# 內部鏈接 -You can create links from one slide to another. Start by giving your target slide a unique `id` attribute. Next, you can create an anchor with an href in the format `#/`. Here's a complete working example: +您可以創建從一張幻燈片到另一張的鏈接。首先給目標幻燈片一個唯一的 `id` 屬性。接著，您可以創建一個錨點，其 href 格式為 `#/`。這是一個完整的實用範例： ```html/1,8
- Go to the last slide + 前往最後一張幻燈片
-

Slide 2

+

幻燈片 2

-

The end

- Back to the first +

結尾

+ 回到第一張
```
- Go to the last slide + 前往最後一張幻燈片
-

Slide 2

+

幻燈片 2

-

The end

- Back to the first +

結尾

+ 回到第一張
-## Numbered Links +## 編號鏈接 -It's also possible to link to slides based on their slide index. The href format for an numbered link is `#/0` where 0 is the horizontal slide number. To link to a [vertical slide](/vertical-slides/) use `#/0/0` where the second number is the index of the vertical slide target. +也可以根據幻燈片索引創建鏈接。以編號鏈接的 href 格式為 `#/0`，其中 0 是水平幻燈片編號。要鏈接到[垂直幻燈片](/vertical-slides/)，使用 `#/0/0`，其中第二個數字是垂直幻燈片目標的索引。 ```html -Go to 2nd slide -Go to the 2nd vertical slide inside of the 3rd slide +前往第二張幻燈片 +前往第三張幻燈片中的第二個垂直幻燈片 ``` -## Navigation Links +## 導航鏈接 -You can add relative navigation links that work similarly to the built in directional control arrows. This is done by adding one of the following classes to any clickable HTML element inside of the `.reveal` container. +您可以添加相對導航鏈接，這與內置的方向控制箭頭的工作方式類似。這是通過在 `.reveal` 容器內的任何可點擊 HTML 元素上添加以下類之一來實現的。 ```html - - - - + + + + - - + + - - + + ``` -Each navigation element is automatically given an `enabled` class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only `navigate-right` will have the `enabled` class since it's not possible to navigate towards the left. \ No newline at end of file +每個導航元素都會自動根據當前幻燈片的導航路線有效性獲得 `enabled` 類。例如，如果您在第一張幻燈片上，只有 `navigate-right` 會獲得 `enabled` 類，因為向左導航是不可能的。這樣可以直观地告诉用户哪些导航选项是可用的，增强了用户界面的友好性和互动性。 + +這種方法的優點在於它讓簡報的互動性增強，使得觀眾可以更靈活地控制簡報的進程，同時還能保持簡報的整體流暢性。通过合理使用这些导航链接，可以使簡報更加动态和吸引人，進而提高信息传递的效率和效果。 \ No newline at end of file diff --git a/src/zh-Hant/markdown.md b/src/zh-Hant/markdown.md index 369b2a4f..9a465c3f 100644 --- a/src/zh-Hant/markdown.md +++ b/src/zh-Hant/markdown.md @@ -1,4 +1,5 @@ --- + id: markdown title: Markdown layout: default @@ -6,17 +7,17 @@ layout: default # Markdown -It's possible and often times more convenient to write presentation content using Markdown. To create a Markdown slide, add the `data-markdown` attribute to your `
` element and wrap the contents in a `
``` @@ -24,22 +25,22 @@ It's possible and often times more convenient to write presentation content usin
-Note that this is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). +注意，這對縮進（避免混合使用制表符和空格）和換行（避免連續換行）很敏感。 -## Markdown Plugin +## Markdown 插件 -This functionality is powered by the built-in Markdown plugin which in turn uses [marked](https://github.com/chjj/marked) for all parsing. The Markdown plugin is included in our default presentation examples. If you want to manually add it to a new presentation here's how: +這個功能由內置的 Markdown 插件提供支持，該插件反過來使用 [marked](https://github.com/chjj/marked) 進行所有解析。Markdown 插件包含在我們的默認簡報示例中。如果您想手動將其添加到新的簡報中，這是操作方式： ```html @@ -50,11 +51,11 @@ This functionality is powered by the built-in Markdown plugin which in turn uses ``` -## External Markdown +## 外部 Markdown -You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file. +您可以將內容寫入一個單獨的文件，並讓 reveal.js 在運行時加載它。注意分隔符參數，它決定了外部文件中的幻燈片如何分隔：`data-separator` 屬性定義水平幻燈片的正則表達式（默認為 `^\r?\n---\r?\n$`，即以換行符為界的水平線）和 `data-separator-vertical` 定義垂直幻燈片（默認禁用）。`data-separator-notes` 屬性是一個正則表達式，用於指定當前幻燈片講者筆記的開始（默認為 `notes?:`，因此它會匹配 "note:" 和 "notes:"）。`data-charset` 屬性是可選的，指定加載外部文件時使用哪種字符集。 -When used locally, this feature requires that reveal.js [runs from a local web server](/installation/#full-setup). The following example customizes all available options: +在本地使用時，此功能要求 reveal.js [從本地網絡服務器運行](/installation/#full-setup)。以下示例自定義了所有可用選項： ```html
``` -## Element Attributes +## 元素屬性 + +特殊語法（通過 HTML 註釋）可用於為 Markdown 元素添加屬性。這對於片段等很 -Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, among other things. +有用。 ```html
``` -## Slide Attributes +## 幻燈片屬性 -Special syntax (through HTML comments) is available for adding attributes to the slide `
` elements generated by your Markdown. +特殊語法（通過 HTML 註釋）可用於為由您的 Markdown 生成的幻燈片 `
` 元素添加屬性。 ```html
``` -## Syntax Highlighting +## 語法高亮 -Powerful syntax highlighting features are built into reveal.js. Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. [Learn more about line highlights](/code/#line-numbers-highlights). +reveal.js 內置了強大的語法高亮功能。使用下面顯示的括號語法，您可以突出顯示個別行，甚至逐步進行多個獨立的高亮。[了解更多關於行高亮的信息](/code/#line-numbers-highlights)。 ```html
@@ -126,9 +129,9 @@ Powerful syntax highlighting features are built into reveal.js. Using the bracke -### Line Number Offset +### 行號偏移 -You can add a [line number offset](/code/#line-number-offset-4.2.0) by adding a number and a colon at the beginning of your highlights. +您可以通過在高亮的開頭添加一個數字和冒號來添加[行號偏移](/code/#line-number-offset-4.2.0)。 ```html
@@ -157,16 +160,16 @@ You can add a [line number offset](/code/#line-number-offset-4.2.0) by adding a -## Configuring *marked* +## 配置 *marked* -We use [marked](https://github.com/chjj/marked) to parse Markdown. To customize marked's rendering, you can pass in options when [configuring Reveal](/config/): +我們使用 [marked](https://github.com/chjj/marked) 解析 Markdown。要自定義 marked 的渲染，您可以在[配置 Reveal](/config/)時傳入選項： ```javascript Reveal.initialize({ - // Options which are passed into marked - // See https://marked.js.org/using_advanced#options + // 傳入 marked 的選項 + // 見 https://marked.js.org/using_advanced#options markdown: { smartypants: true } }); -``` +``` \ No newline at end of file diff --git a/src/zh-Hant/markup.md b/src/zh-Hant/markup.md index 55d44afe..e629b3d7 100644 --- a/src/zh-Hant/markup.md +++ b/src/zh-Hant/markup.md @@ -1,12 +1,13 @@ --- + id: markup -title: Markup +title: 標記 layout: default --- -# Markup +# 標記 -Here's a barebones example of a fully working reveal.js presentation: +這是一個完全運作的 reveal.js 簡報的基本示例： ```html @@ -16,8 +17,8 @@ Here's a barebones example of a fully working reveal.js presentation:
-
Slide 1
-
Slide 2
+
幻燈片 1
+
幻燈片 2
@@ -28,41 +29,41 @@ Here's a barebones example of a fully working reveal.js presentation: ``` -The presentation markup hierarchy needs to be `.reveal > .slides > section` where the `section` element represents one slide and can be repeated indefinitely. +簡報的標記層次結構需要是 `.reveal > .slides > section`，其中 `section` 元素代表一個幻燈片，可以無限重復。 -If you place multiple `section` elements inside of another `section` they will be shown as [vertical slides](/vertical-slides/). The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example: +如果您在另一個 `section` 內放置多個 `section` 元素，它們將被顯示為[垂直幻燈片](/vertical-slides/)。垂直幻燈片的第一個是其他幻燈片的“根”（在頂部），並將包括在水平序列中。例如： ```html
-
Horizontal Slide
+
水平幻燈片
-
Vertical Slide 1
-
Vertical Slide 2
+
垂直幻燈片 1
+
垂直幻燈片 2
```
-
Horizontal Slide
+
水平幻燈片
-
Vertical Slide 1
-
Vertical Slide 2
+
垂直幻燈片 1
+
垂直幻燈片 2
-It's also possible to write presentations using [Markdown](/markdown/). +同樣可以使用 [Markdown](/markdown/) 編寫簡報。 -## Viewport -The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the `body` element. If you're including multiple presentations on the same page each presentations `.reveal` element will act as their viewport. +## 視口 +reveal.js 的視口是確定簡報在網頁上的大小的包裝器 DOM 元素。默認情況下，這將是 `body` 元素。如果您在同一頁面上包含多個簡報，每個簡報的 `.reveal` 元素將作為它們的視口。 -The viewport is always decorated with a `reveal-viewport` class reveal.js is initialized. +視口在 reveal.js 初始化時始終帶有 `reveal-viewport` 類。 -## Slide States +## 幻燈片狀態 -If you set `data-state="make-it-pop"` on a slide `
`, "make-it-pop" will be applied as a class on the [viewport element](#viewport) when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. +如果您在幻燈片 `
` 上設置了 `data-state="make-it-pop"`，當該幻燈片打開時，"make-it-pop" 將作為類應用於[視口元素](#viewport)。這允許您根據活動幻燈片對頁面應用廣泛的風格更改。 ```html
@@ -75,7 +76,7 @@ If you set `data-state="make-it-pop"` on a slide `
`, "make-it-pop" will } ``` -You can also listen to these changes in state via JavaScript: +您還可以通過 JavaScript 監聽這些狀態變化： ```javascript Reveal.on( 'make-it-pop', () => { diff --git a/src/zh-Hant/math.md b/src/zh-Hant/math.md index 99f2fc5d..606dface 100644 --- a/src/zh-Hant/math.md +++ b/src/zh-Hant/math.md @@ -1,12 +1,12 @@ --- id: math -title: Math +title: 數學 layout: default --- -# Math +# 數學 -The Math plugin lets you include beautifully typeset math formulas in your slides. To get started, make sure that reveal.js is initialized with the math plugin enabled. +數學插件允許你在幻燈片中包含美觀的排版數學公式。首先，確保reveal.js已經初始化並啟用了數學插件。 ```html @@ -15,14 +15,13 @@ The Math plugin lets you include beautifully typeset math formulas in your slide ``` -We're using the KaTeX typesetter in this example but you can also choose from [MathJax 2](#mathjax-2) or [3](#mathjax-3-4.2.0). - -Now that the plugin is registered we can start adding [LaTeX](https://en.wikipedia.org/wiki/LaTeX) formulas to our slides. +在此示例中，我們使用了KaTeX排版器，但你也可以選擇使用[MathJax 2](#mathjax-2)或[3](#mathjax-3-4.2.0)。 +現在插件已註冊，我們可以開始在幻燈片中添加[LaTeX](https://en.wikipedia.org/wiki/LaTeX)公式。 ```html
-

The Lorenz Equations

+

洛倫茲方程

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ @@ -33,7 +32,7 @@ Now that the plugin is registered we can start adding [LaTeX](https://en.wikiped
-

The Lorenz Equations

+

洛倫茲方程

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ @@ -44,7 +43,7 @@ Now that the plugin is registered we can start adding [LaTeX](https://en.wikiped
## Markdown -If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example: +如果你想在Markdown寫的簡報中包含數學公式，你需要用反引號將公式包起來。這樣可以避免LaTeX和Markdown語法之間的衝突。例如： ```html
@@ -52,8 +51,8 @@ If you want to include math inside of a presentation written in Markdown you nee
``` -## Typesetting Libraries -The math plugin offers three choices of math typesetting libraries that you can use to render your math. Each variant is its own plugin that can be accessed via `RevealMath.`. If you don't have a preference, we recommend going with KaTeX. +## 排版庫 +數學插件提供了三種數學排版庫供你選擇用於渲染你的數學公式。每個變體都是獨立的插件，可以通過 `RevealMath.` 訪問。如果你沒有特別偏好，我們建議使用KaTeX。 | Library | Plugin Name | Config Property | :- | :- | :- @@ -64,7 +63,7 @@ The math plugin offers three choices of math typesetting libraries that you can ### KaTeX 4.2.0 -Adjust options through the `katex` configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the `katex` config option at all. +通过 `katex` 配置對象調整選項。以下是默認的插件配置。如果你不打算更改這些值，則無需包括 `katex` 配置選項。 ```js Reveal.initialize({ @@ -82,9 +81,11 @@ Reveal.initialize({ }); ``` -Note that by default the latest KaTeX is loaded from a remote server (https://cdn.jsdelivr.net/npm/katex). To use a fixed version set `version` to, for example, `0.13.18`. +注意，默認情況下最新的KaTeX從遠程服務器 + +加載（https://cdn.jsdelivr.net/npm/katex）。要使用固定版本，將 `version` 設為例如 `0.13.18`。 -If you want to use KaTeX offline you'll need to download a copy of the library (e.g. with npm) and use the `local` configuration option (the `version` option will then be ignored), for example: +如果你想離線使用KaTeX，你需要下載庫的副本（例如通過npm）並使用 `local` 配置選項（則 `version` 選項將被忽略），例如： ```js Reveal.initialize({ @@ -97,7 +98,7 @@ Reveal.initialize({ ### MathJax 2 -Adjust options through the `mathjax2` configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the `mathjax2` config option at all. +通過 `mathjax2` 配置對象調整選項。以下是默認的插件配置。如果你不打算更改這些值，則無需包括 `mathjax2` 配置選項。 ```js Reveal.initialize({ @@ -114,13 +115,13 @@ Reveal.initialize({ }); ``` -Note that the latest MathJax 2 is loaded from a remote server. To use a fixed version set mathjax to, for example, https://cdn.jsdelivr.net/npm/mathjax@2.7.8/MathJax.js. +注意，最新的MathJax 2從遠程服務器加載。要使用固定版本，將mathjax設為例如https://cdn.jsdelivr.net/npm/mathjax@2.7.8/MathJax.js。 -If you want to use MathJax offline you'll need to download a copy of the library (e.g. with npm) and point `mathjax` to the local copy. +如果你想離線使用MathJax，你需要下載庫的副本（例如通過npm）並將 `mathjax` 指向本地副本。 ### MathJax 3 4.2.0 -Adjust options through the `mathjax3` configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the `mathjax3` config option at all. +通過 `mathjax3` 配置對象調整選項。以下是默認的插件配置。如果你不打算更改這些值，則無需包括 `mathjax3` 配置選項。 ```js Reveal.initialize({ @@ -137,6 +138,6 @@ Reveal.initialize({ }); ``` -Note that the latest MathJax 3 is loaded from a remote server. To use a fixed version set `mathjax` to, for example, . Additionally, the config is now part of of the url, by default `tex-mml-chtml` is loaded which recognizes mathematics in both TeX and MathML notation, and generates output using HTML with CSS (the CommonHTML output format). This is one of the most general configurations, but it is also one of the largest, so you might want to consider a smaller one that is more tailored to your needs, e.g. `tex-svg`. +注意，最新的MathJax 3從遠程服務器加載。要使用固定版本，將 `mathjax` 設為例如 。此外，配置現在是URL的一部分，默认加载 `tex-mml-chtml`，它能识别TeX和MathML表示的数学，并使用HTML和CSS生成输出（CommonHTML输出格式）。這是一個非常通用的配置，但它也是最大的之一，因此你可能需要考虑一个更小的，更符合你需求的配置，例如 `tex-svg`。 -If you want to use MathJax offline you'll need to download a copy of the library (e.g. with npm) and adjust `mathjax` accordingly. +如果你想離線使用MathJax，你需要下載庫的副本（例如通過npm）並相應地調整 `mathjax`。 \ No newline at end of file diff --git a/src/zh-Hant/media.md b/src/zh-Hant/media.md index 029eceae..333fbad2 100644 --- a/src/zh-Hant/media.md +++ b/src/zh-Hant/media.md @@ -1,22 +1,23 @@ --- + id: media -title: Media +title: 媒體 layout: default --- -# Media +# 媒體 -We provide convenient mechanics for autoplaying and lazy loading HTML media elements and iframes based on slide visibility and proximity. This works for [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) elements. +我們提供了便利的機制來自動播放和懶加載基於幻燈片可見性和鄰近性的HTML媒體元素和iframe。這適用於[\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)、[\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)和[\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)元素。 -## Autoplay +## 自動播放 -Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown: +如果你希望媒體元素在幻燈片顯示時自動開始播放，請添加`data-autoplay`： ```html ``` -If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this option to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you set it to `autoPlayMedia: false` NO media will autoplay. +如果你想要全局啟用或禁用所有嵌入媒體的自動播放，可以使用`autoPlayMedia`配置選項。如果將此選項設置為`true`，所有媒體將無視個別的`data-autoplay`屬性而自動播放。如果設置為`autoPlayMedia: false`，則沒有媒體將自動播放。 ```js Reveal.initialize({ @@ -24,13 +25,13 @@ Reveal.initialize({ }) ``` -Note that embedded HTML `
- -
-

Global State

-

- Set data-state="something" on a slide and "something" - will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the page background. -

-
- -
-

State Events

-

- Additionally custom events can be triggered on a per slide basis by binding to the data-state name. -

- 

+        ```
+      
+
+ +
+

Add the r-fit-text class to auto-size text

+

FIT TEXT

+
+ +
+
+

Fragments

+

Hit the next arrow...

+

... to step through ...

+

+ ... a + fragmented + slide. +

+ + +
+
+

Fragment Styles

+

There's different types of fragments, like:

+

grow

+

shrink

+

fade-out

+

+ fade-right, + + up, + + down, + + left +

+

fade-in-then-out

+

fade-in-then-semi-out

+

+ Highlight red + blue + green +

+
+
+ +
+

Transition Styles

+

+ You can select from different transitions, like:
+ None - + Fade - + Slide - + Convex - + Concave - + Zoom +

+
+ +
+
+

Slide Backgrounds

+

+ Set data-background="#dddddd" on a slide to change the + background color. All CSS color formats are supported. +

+ + Down arrow + +
+
+

Image Backgrounds

+ 
<section data-background="image.png">
+
+
+

Tiled Backgrounds

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+
+

Video Backgrounds

+ 
<section data-background-video="video.mp4,video.webm">
+
+
+
+

... and GIFs!

+
+
+ +
+

Background Transitions

+

+ Different background transitions are available via the + backgroundTransition option. This one's called "zoom". +

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
+
+ +
+

Background Transitions

+

You can override background transitions per-slide.

+ 
<section data-background-transition="zoom">
+
+ +
+
+

Iframe Backgrounds

+

+ Since reveal.js runs on the web, you can easily embed other web + content. Try interacting with the page in the background. +

+
+
+ +
+

Marvelous List

+
    +
  • No order here
    • +
  • Or here
    • +
  • Or here
    • +
  • Or here
    • +
+
+ +
+

Fantastic Ordered List

+
    +
  1. One is smaller than...
    2. +
  2. Two is smaller than...
    3. +
  3. Three!
    4. +
+
+ +
+

Tabular Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
+ +
+

Clever Quotes

+

+ These guys come in two forms, inline: + The nice thing about standards is that there are so many to choose + from + and block: +

+
+ “For years there has been a theory that millions of monkeys typing + at random on millions of typewriters would reproduce the entire works of + Shakespeare. The Internet has proven this theory to be untrue.” +
+
+ +
+

Intergalactic Interconnections

+

+ You can link between slides internally, + like this. +

+
+ +
+

Speaker View

+

+ There's a speaker view. + It includes a timer, preview of the upcoming slide as well as your + speaker notes. +

+

Press the S key to try it out.

+ + +
+ +
+

Export to PDF

+

+ Presentations can be + exported to PDF, here's + an example: +

+ +
+ +
+

Global State

+

+ Set data-state="something" on a slide and + "something" + will be added as a class to the document element when the slide is open. + This lets you apply broader style changes, like switching the page + background. +

+
+ +
+

State Events

+

+ Additionally custom events can be triggered on a per slide basis by + binding to the data-state name. +

+ 

 Reveal.on( 'customevent', function() {
   console.log( '"customevent" has fired' );
 } );
-
- -
-

Take a Moment

-

- Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. -

-
- -
-

Much more

- -
- -
-

THE END

-

- - Try the online editor
- - Source code & documentation -

-
- - - - \ No newline at end of file +
+ +
+

Take a Moment

+

+ Press B or . on your keyboard to pause the presentation. This is helpful + when you're on stage and want to take distracting slides off the screen. +

+
+ +
+

Much more

+ +
+ +
+

THE END

+

+ - Try the online editor
+ - + Source code & documentation +

+
+ + diff --git a/src/_includes/demo.zh-Hant.html b/src/_includes/demo.zh-Hant.html index bfe25d39..15ad651a 100644 --- a/src/_includes/demo.zh-Hant.html +++ b/src/_includes/demo.zh-Hant.html @@ -1,118 +1,110 @@
-
-
- -

HTML 簡報框架

-

- 由 Hakim El Hattab - 與 - 貢獻者們 開發 -

-
- 由 - - - - 贊助 -
-
- -
-

哈囉

-

- Reveal.js 讓您能夠使用 HTML - 建立精美的互動式簡報。本示範將向您展示其功能的範例。 -

-
- -
-
-

垂直幻燈片

-

幻燈片可以相互嵌套。

-

使用 空白 鍵來瀏覽不同頁面

-
- - Down arrow - -
-
-

地下一樓

-

- 嵌套幻燈片非常適合在大量資訊的水平幻燈片下添加額外的細節。 -

-
-
-

地下二樓

-

就醬，該上去了

-
- - Up arrow - -
-
- -
-

簡報

-

- 不是程式設計師？不用擔心！有一個功能完整的視覺編輯器可以用來創建這些幻燈片，試試看 - https://slides.com。 -

-
- -
-

漂亮的程式

- 

+  

+    

+      
+      
HTML 簡報框架

+      

+        由 Hakim El Hattab
+          與
+          貢獻者們
+          開發
+      

+      

+        由
+        
+          
+        
+        贊助
+      

+    

+
+    

+      
哈囉

+      

+        Reveal.js 讓您能夠使用 HTML
+        建立精美的互動式簡報。本示範將向您展示其功能的範例。
+      

+    

+
+    

+      

+        
垂直幻燈片

+        
幻燈片可以相互嵌套。

+        
使用 空白 鍵來瀏覽不同頁面

+        

+        
+          Down arrow
+        
+      

+      

+        
地下一樓

+        
嵌套幻燈片非常適合在大量資訊的水平幻燈片下添加額外的細節。

+      

+      

+        
地下二樓

+        
就醬，該上去了

+        

+        
+          Up arrow
+        
+      

+    

+
+    

+      
簡報

+      

+        不是程式設計師？不用擔心！有一個功能完整的視覺編輯器可以用來創建這些幻燈片，試試看
+        https://slides.com。
+      

+    

+
+    

+      
漂亮的程式

+      

                 import React, { useState } from 'react';
 
                 function Example() {
@@ -123,17 +115,17 @@ 
漂亮的程式

                   );
                 }
             

-            

-                代碼高亮使用
-                highlight.js。
-            

-        

-
-        

-            
更精美的動畫

-            

+      

+        代碼高亮使用
+        highlight.js。
+      

+    

+
+    

+      
更精美的動畫

+      

                 import React, { useState } from 'react';
 
                 function Example() {
@@ -162,498 +154,480 @@ 
更精美的動畫

                   );
                 }
             

-        

-
-        

-            
視窗

-            
按 ESC 來檢視整體簡報框架。

-            

-                按住 alt 鍵（在 Linux 中是
-                ctrl 鍵）並點擊任何元素，使用
-                zoom.js
-                進行放大。再次點擊以縮小回去。
-            

-            
（注意：在 Linux 中使用 ctrl + 點擊。）

-        

-
-        

-            
自動動畫

-            

-                使用
-                自動動畫
-                在幻燈片之間自動動畫匹配的元素。
-            

-            

-                

-                

-                

-            

-        

-        

-            

-                

-                

-                

-            

-            
自動動畫

-        

-        

-            

-                

-                

-                

-            

-            
自動動畫

-        

-
-        

-            
觸控支援

-            

-                簡報在觸控設備上看起來非常棒，如手機和平板電腦。只需用手指滑動即可切換幻燈片。
-            

-        

-
+
+ +
+

視窗

+

按 ESC 來檢視整體簡報框架。

+

+ 按住 alt 鍵（在 Linux 中是 + ctrl 鍵）並點擊任何元素，使用 + zoom.js + 進行放大。再次點擊以縮小回去。 +

+

（注意：在 Linux 中使用 ctrl + 點擊。）

+
+ +
+

自動動畫

+

+ 使用 + 自動動畫 + 在幻燈片之間自動動畫匹配的元素。 +

+
+
+
+
+
+
+
+
+
+
+
+
+

自動動畫

+
+
+
+
+
+
+
+

自動動畫

+
+ +
+

觸控支援

+

+ 簡報在觸控設備上看起來非常棒，如手機和平板電腦。只需用手指滑動即可切換幻燈片。 +

+
+ +
+ -
- -
-

添加 class r-fit-text 來自動調整字體大小

-

FIT TEXT

-
- -
-
-

片段

-

點擊下一個箭頭...

-

...來逐步展示...

-

- ...一個 - 分段的 - 幻燈片。 -

- - -
-
-

片段風格

-

有不同類型的片段，比如：

-

放大

-

縮小

-

淡出

-

- 向右淡出， - 向上， - 向下， - 向左 -

-

先淡入再淡出

-

先淡入再半透明淡出

-

- 突顯 紅色 - 藍色 - 綠色 -

-
-
+ ## Markdown 支持 -
-

轉場動畫

-

- 你可以選擇不同的轉場動畫
- 無 - - 淡入 - - 滑入 - - 凸出 - - 凹陷 - - 放大 -

+ 使用行內或外部 Markdown 編寫內容。 + 更多說明和資訊請參見[說明文件](https://revealjs.com/markdown/)。
- -
-
-

背景

-

- 加入 - data-background="#dddddd" - 在投影片上變更背景顏色。支援所有 CSS 顏色格式。 -

- - Down arrow - -
-
-

圖片背景

- 
<section data-background="image.png">
-
-
-

平鋪背景

- 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
-
-
-
-

影片背景

- 
<section data-background-video="video.mp4,video.webm">
-
-
-
-

... 還有 GIFs!

-
-
- -
-

背景轉場

-

- 透過 backgroundTransition - 參數可以實現不同的背景轉換。這就是所謂的「縮放」。 -

- 
Reveal.configure({ backgroundTransition: 'zoom' })
-
- -
+
+ +
+

添加 class r-fit-text 來自動調整字體大小

+

FIT TEXT

+
+ +
+
+

片段

+

點擊下一個箭頭...

+

...來逐步展示...

+

+ ...一個 + 分段的 + 幻燈片。 +

+ + +
+
+

片段風格

+

有不同類型的片段，比如：

+

放大

+

縮小

+

淡出

+

+ 向右淡出， + 向上， + 向下， + 向左 +

+

先淡入再淡出

+

先淡入再半透明淡出

+

+ 突顯 紅色 + 藍色 + 綠色 +

+
+
+ +
+

轉場動畫

+

+ 你可以選擇不同的轉場動畫
+ 無 - + 淡入 - + 滑入 - + 凸出 - + 凹陷 - + 放大 +

+
+ +
+
+

背景

+

+ 加入 + data-background="#dddddd" + 在投影片上變更背景顏色。支援所有 CSS 顏色格式。 +

+ + Down arrow + +
+
+

圖片背景

+ 
<section data-background="image.png">
+
+
+

平鋪背景

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+
-

背景轉場

-

您可以覆蓋每張投影片的背景轉換。

- 
<section data-background-transition="zoom">
-
- -
影片背景 + 
<section data-background-video="video.mp4,video.webm">
+
+
+
+

... 還有 GIFs!

+
+
+ +
+

背景轉場

+

+ 透過 backgroundTransition + 參數可以實現不同的背景轉換。這就是所謂的「縮放」。 +

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
+
+ +
+

背景轉場

+

您可以覆蓋每張投影片的背景轉換。

+ 
<section data-background-transition="zoom">
+
+ +
+
+

Iframe 背景

+

+ 由於 Reveal.js + 在網站上運行，因此您可以輕鬆嵌入其他網路內容。嘗試與後台頁面互動。 +

+
+
+ +
+

精彩列表

+
    +
  • 這裡沒有順序
    • +
  • 這裡也沒有
    • +
  • 這裡也是
    • +
  • 這裡同樣沒有
    • +
+
+ +
+

神奇的有序列表

+
    +
  1. 一小
    2. +
  2. 二小
    3. +
  3. 三最大！
    4. +
+
+ +
+

表格

+ + + + + + + + + + + + + + + + + + + + + + + + + +
項目價格數量
蜂蜜$2301
檸檬$2018
感冒藥$1202
+
+ +
+

有道理的引言

+

+ 引言有兩種呈現方式，分別是行內： + 咖啡因來自咖啡果，所以咖啡果是因，咖啡因是果 -

-

Iframe 背景

-

- 由於 Reveal.js - 在網站上運行，因此您可以輕鬆嵌入其他網路內容。嘗試與後台頁面互動。 -

-
-
- -
-

精彩列表

-
    -
  • 這裡沒有順序
    • -
  • 這裡也沒有
    • -
  • 這裡也是
    • -
  • 這裡同樣沒有
    • -
-
- -
-

神奇的有序列表

-
    -
  1. 一小
    2. -
  2. 二小
    3. -
  3. 三最大！
    4. -
-
- -
-

表格

- - - - - - - - - - - - - - - - - - - - - - - - - -
項目價格數量
蜂蜜$2301
檸檬$2018
感冒藥$1202
-
- -
-

有道理的引言

-

- 引言有兩種呈現方式，分別是行內： - 咖啡因來自咖啡果，所以咖啡果是因，咖啡因是果 - ，以及區塊： -

-
- “飲水機其實不是飲水機，它是出水機。你才是飲水機，各位飲水機們好。” -
-
- -
-

超連結

-

- 你可以在簡報中加入超連結來導覽至不同頁面，像是 - 這個。 -

-
- -
-

簡報者檢視畫面

-

- 我們有一個 簡報者檢視畫面。 - 它包括一個計時器，下一張幻燈片的預覽以及你的演講筆記。 -

-

按下 S 鍵來試用。

- - -
- -
-

輸出 PDF

-

- 簡報可以被 - 輸出成 PDF， - 這是一個範例: -

- -
- -
-

全局狀態

-

- 在幻燈片上設置 data-state="something"，當幻燈片開啟時， - "something" 將被添加為文檔元素的類別。這讓你可以應用更廣泛的樣式更改，如切換頁面背景。 -

-
- -
-

狀態事件

-

- 此外，可以通過綁定到 data-state 名稱，在每個幻燈片的基礎上觸發自定義事件。 -

- 

+        ，以及區塊：
+      

+      

+        “飲水機其實不是飲水機，它是出水機。你才是飲水機，各位飲水機們好。”
+      

+
+ +
+

超連結

+

+ 你可以在簡報中加入超連結來導覽至不同頁面，像是 + 這個。 +

+
+ +
+

簡報者檢視畫面

+

+ 我們有一個 + 簡報者檢視畫面。 + 它包括一個計時器，下一張幻燈片的預覽以及你的演講筆記。 +

+

按下 S 鍵來試用。

+ + +
+ +
+

輸出 PDF

+

+ 簡報可以被 + 輸出成 PDF， + 這是一個範例: +

+ +
+ +
+

全局狀態

+

+ 在幻燈片上設置 data-state="something"，當幻燈片開啟時， + "something" + 將被添加為文檔元素的類別。這讓你可以應用更廣泛的樣式更改，如切換頁面背景。 +

+
+ +
+

狀態事件

+

+ 此外，可以通過綁定到 + data-state 名稱，在每個幻燈片的基礎上觸發自定義事件。 +

+ 

 Reveal.on( 'customevent', function() {
   console.log( '"customevent" has fired' );
 } );
-
- -
-

欸等等

-

- 在鍵盤上按 B 或 . 鍵來暫停簡報。當你在台上希望聚焦觀眾的注意力時很有用。 -

-
- -
-

更多功能

- -
- -
-

THE END

-

- - 試試線上編輯器
- - - 原始碼倉庫 -

-
- +
+ +
+

欸等等

+

+ 在鍵盤上按 B 或 . 鍵來暫停簡報。當你在台上希望聚焦觀眾的注意力時很有用。 +

+
+ +
+

更多功能

+ +
+ +
+

THE END

+

+ - 試試線上編輯器
+ - + 原始碼倉庫 +

+
+ diff --git a/src/api.md b/src/api.md index a71c5f2b..6e429d9c 100644 --- a/src/api.md +++ b/src/api.md @@ -9,9 +9,10 @@ layout: default We provide an extensive JavaScript API for controlling navigation and checking the current state of a presentation. If you're working with a single presentation instance the API can be accessed via the global `Reveal` object. ### Navigation + ```javascript // Navigate to a specific slide -Reveal.slide( indexh, indexv, indexf ); +Reveal.slide(indexh, indexv, indexf); // Relative navigation Reveal.left(); @@ -22,7 +23,7 @@ Reveal.prev(); Reveal.next(); // Fragment navigation -Reveal.navigateFragment( indexf ); // (-1 means all fragments are invisible) +Reveal.navigateFragment(indexf); // (-1 means all fragments are invisible) Reveal.prevFragment(); Reveal.nextFragment(); @@ -36,13 +37,14 @@ Reveal.availableFragments(); ``` ### Misc + ```javascript // Call this if you add or remove slides to update controls, progress, etc Reveal.sync(); // Call this to sync just one slide -Reveal.syncSlide(slide=currentSlide); +Reveal.syncSlide((slide = currentSlide)); // Call this to sync just one slide's fragments -Reveal.syncFragments(slide=currentSlide); +Reveal.syncFragments((slide = currentSlide)); // Call this to update the presentation scale based on available viewport Reveal.layout(); @@ -59,29 +61,30 @@ Reveal.getScale(); // Returns an object with the scaled presentationWidth & presentationHeight Reveal.getComputedSlideSize(); -Reveal.getIndices(slide=currentSlide); // Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 }) -Reveal.getProgress(); // (0 == first slide, 1 == last slide) +Reveal.getIndices((slide = currentSlide)); // Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 }) +Reveal.getProgress(); // (0 == first slide, 1 == last slide) // Array of key:value maps of the attributes of each slide in the deck Reveal.getSlidesAttributes(); // Returns the slide background element at the specified index -Reveal.getSlideBackground( indexh, indexv ) +Reveal.getSlideBackground(indexh, indexv); // Returns the speaker notes for the slide -Reveal.getSlideNotes(slide=currentSlide); +Reveal.getSlideNotes((slide = currentSlide)); // Retrieves query string as a key:value map Reveal.getQueryHash(); // Returns the path to the slide as represented in the URL -Reveal.getSlidePath(slide=currentSlide); +Reveal.getSlidePath((slide = currentSlide)); ``` ### Slides + ```javascript // Returns the slide element matching the specified index -Reveal.getSlide( indexh, indexv ) +Reveal.getSlide(indexh, indexv); // Retrieves the previous and current slide elements Reveal.getPreviousSlide(); @@ -100,6 +103,7 @@ Reveal.getSlides(); ``` ### Slide State + ```javascript // Checks if the presentation contains two or more // horizontal/vertical slides @@ -117,6 +121,7 @@ Reveal.isLastVerticalSlide(); ``` ### Modes + ```javascript // Shows a help overlay with keyboard shortcuts, optionally pass true/false // to force on/off @@ -133,6 +138,7 @@ Reveal.isPaused(); ``` ### DOM Elements + ```javascript // Retrieve key DOM elements Reveal.getRevealElement(); //
@@ -142,4 +148,5 @@ Reveal.getBackgroundsElement(); //
``` ## More Reading + - [Plugin API](/plugins/#api) diff --git a/src/auto-animate.md b/src/auto-animate.md index 7a3a96be..c72efa67 100644 --- a/src/auto-animate.md +++ b/src/auto-animate.md @@ -9,6 +9,7 @@ layout: default reveal.js can automatically animate elements across slides. All you need to do is add `data-auto-animate` to two adjacent slide `
` elements and Auto-Animate will animate all matching elements between the two. Here's a simple example to give you a better idea of how it can be used. + ```html

Auto-Animate

@@ -17,6 +18,7 @@ Here's a simple example to give you a better idea of how it can be used.

Auto-Animate

``` +
@@ -43,6 +45,7 @@ Animations are not limited to changes in style. Auto-Animate can also be used to

Animation

``` +
@@ -56,9 +59,10 @@ Animations are not limited to changes in style. Auto-Animate can also be used to
## How Elements are Matched + When you navigate between two auto-animated slides we'll do our best to automatically find matching elements in the two slides. For text, we consider it a match if both the text contents and node type are identical. For images, videos and iframes we compare the `src` attribute. We also take into account the order in which the element appears in the DOM. -In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching `data-id` attribute. We prioritize matching `data-id` values above our automatic matching. +In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching `data-id` attribute. We prioritize matching `data-id` values above our automatic matching. Here's an example where we've given both blocks a matching ID since automatic matching has no content to go on. @@ -70,6 +74,7 @@ Here's an example where we've given both blocks a matching ID since automatic ma
``` +
@@ -82,27 +87,30 @@ Here's an example where we've given both blocks a matching ID since automatic ma
## Animation Settings + You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element: -| Attribute                                             | Default | Description -| :------------------------------- | ---------: | :---------- -| data-auto-animate-easing | ease | A CSS [easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). -| data-auto-animate-unmatched | true | Determines whether elements with no matching auto-animate target should fade in. Set to false to make them appear instantly. -| data-auto-animate-duration | 1.0 | Animation duration in seconds. -| data-auto-animate-delay | 0 | Animation delay in seconds (can only be set for specific elements, not at the slide level). -| data-auto-animate-id | _absent_ | An [id](#auto-animate-id-%26-restart) tying auto-animate slides together. -| data-auto-animate-restart | _absent_ | [Breaks apart](#auto-animate-id-%26-restart) two adjacent auto-animate slides (even with the same id). +| Attribute                                             | Default | Description | +| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------: | :--------------------------------------------------------------------------------------------------------------------------- | +| data-auto-animate-easing | ease | A CSS [easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). | +| data-auto-animate-unmatched | true | Determines whether elements with no matching auto-animate target should fade in. Set to false to make them appear instantly. | +| data-auto-animate-duration | 1.0 | Animation duration in seconds. | +| data-auto-animate-delay | 0 | Animation delay in seconds (can only be set for specific elements, not at the slide level). | +| data-auto-animate-id | _absent_ | An [id](#auto-animate-id-%26-restart) tying auto-animate slides together. | +| data-auto-animate-restart | _absent_ | [Breaks apart](#auto-animate-id-%26-restart) two adjacent auto-animate slides (even with the same id). | If you'd like to change the defaults for the whole deck, use the following config options: + ```javascript Reveal.initialize({ autoAnimateEasing: 'ease-out', autoAnimateDuration: 0.8, - autoAnimateUnmatched: false -}) + autoAnimateUnmatched: false, +}); ``` ## Auto-Animate Id & Restart + When you want separate groups of auto-animated slides right next to each other you can use the `data-auto-animate-id` and `data-auto-animate-restart` attributes. With `data-auto-animate-id` you can specify arbitrary ids for your slides. Two adjacent slides will only auto-animate if they have the same id or if both don't have one. @@ -111,24 +119,25 @@ Another way to control auto-animate is the `data-auto-animate-restart` attribute ```html
-

Group A

+

Group A

-

Group A

+

Group A

-

Group B

+

Group B

-

Group B

+

Group B

-

Group C

+

Group C

-

Group C

+

Group C

``` +
@@ -157,13 +166,15 @@ Another way to control auto-animate is the `data-auto-animate-restart` attribute The `autoanimate` event is dispatched each time you step between two auto-animated slides. ```javascript -Reveal.on( 'autoanimate', event => { +Reveal.on('autoanimate', (event) => { // event.fromSlide, event.toSlide -} ); +}); ``` ## Example: Animating Between Code Blocks + We support animations between code blocks. Make sure that the code block has `data-line-numbers` enabled and that all blocks have a matching `data-id` value. + ```html 

@@ -197,6 +208,7 @@ We support animations between code blocks. Make sure that the code block has `da
``` +
@@ -234,7 +246,9 @@ We support animations between code blocks. Make sure that the code block has `da
## Example: Animating Between Lists + We match list items individually to let you animate new items being added or removed. + ```html/2-4,10,12
    @@ -253,6 +267,7 @@ We match list items individually to let you animate new items being added or rem
``` +
@@ -275,6 +290,7 @@ We match list items individually to let you animate new items being added or rem
## Advanced: State Attributes + We add state attributes to the different elements involved in an auto-animation. These attributes can be tied into if you want to, for example, fine-tune the animation behavior with custom CSS. Right before an auto-animation starts we add `data-auto-animate="pending"` to the slide `
` coming into view. At this point the upcoming slide is visible and all of the animated elements have been moved to their starting positions. Next we switch to `data-auto-animate="running"` to indicate when the elements start animating towards their final properties. diff --git a/src/auto-slide.md b/src/auto-slide.md index 1e1ba364..2cb1a44b 100644 --- a/src/auto-slide.md +++ b/src/auto-slide.md @@ -12,9 +12,10 @@ Presentations can be configured to step through slides automatically, without an // Slide every five seconds Reveal.initialize({ autoSlide: 5000, - loop: true + loop: true, }); ``` +
Slide 1
@@ -34,8 +35,12 @@ It's also possible to override the slide duration for individual slides and frag ```html

After 2 seconds the first fragment will be shown.

-

After 10 seconds the next fragment will be shown.

-

Now, the fragment is displayed for 2 seconds before the next slide is shown.

+

+ After 10 seconds the next fragment will be shown. +

+

+ Now, the fragment is displayed for 2 seconds before the next slide is shown. +

``` @@ -47,14 +52,19 @@ We step through all slides, both horizontal and [vertical](/vertical-slides/), b ```js Reveal.configure({ - autoSlideMethod: () => Reveal.right() + autoSlideMethod: () => Reveal.right(), }); -```` +``` ## Events + We fire events whenever auto-sliding is paused or resumed. ```javascript -Reveal.on( 'autoslideresumed', event => { /* ... */ } ); -Reveal.on( 'autoslidepaused', event => { /* ... */ } ); -``` \ No newline at end of file +Reveal.on('autoslideresumed', (event) => { + /* ... */ +}); +Reveal.on('autoslidepaused', (event) => { + /* ... */ +}); +``` diff --git a/src/backgrounds.md b/src/backgrounds.md index 9cff1c52..16ac5873 100644 --- a/src/backgrounds.md +++ b/src/backgrounds.md @@ -20,6 +20,7 @@ All CSS color formats are supported, including hex values, keywords, `rgba()` or

🍰

``` +
@@ -43,6 +44,7 @@ All CSS gradient formats are supported, including `linear-gradient`, `radial-gra

🐳

``` +
@@ -58,20 +60,21 @@ All CSS gradient formats are supported, including `linear-gradient`, `radial-gra By default, background images are resized to cover the full page. Available options: -| Attribute | Default
| Description | -| :------------------------------- | :--------- | :---------- | -| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | -| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | -| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | -| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | -| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +| Attribute | Default
| Description | +| :----------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------ | +| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | +| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | +| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | +| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | +| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | + {.nowrap-1st} ```html/0,3-4

Image

-

This background image will be sized to 100px and repeated

@@ -81,21 +84,23 @@ By default, background images are resized to cover the full page. Available opti Automatically plays a full size video behind the slide. -| Attribute | Default | Description | -| :--------------------------- | :------ | :---------- | -| data-background-video | | A single video source, or a comma separated list of video sources. | -| data-background-video-loop | false | Flags if the video should play repeatedly. | -| data-background-video-muted | false | Flags if the audio should be muted. | -| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | -| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | +| Attribute | Default | Description | +| :-------------------------- | :------ | :-------------------------------------------------------------------------------------- | +| data-background-video | | A single video source, or a comma separated list of video sources. | +| data-background-video-loop | false | Flags if the video should play repeatedly. | +| data-background-video-muted | false | Flags if the audio should be muted. | +| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | +| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | + {.nowrap-1st} ```html/0-1 -

Video

``` +
``` +
@@ -38,14 +39,15 @@ HTML will be escaped by default. To avoid this, add `data-noescape` to the ` ## Theming + Make sure that a syntax highlight theme is included in your document. We include Monokai by default, which is distributed with the reveal.js repo at [plugin/highlight/monokai.css](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css). A full list of available themes can be found at . ```html - + ``` @@ -70,6 +72,7 @@ You can enable line numbers by adding `data-line-numbers` to your `` tags. ``` +
@@ -92,6 +95,7 @@ You can enable line numbers by adding `data-line-numbers` to your `` tags.
#### Line Number Offset 4.2.0 + You can offset the line number if you want to showcase a excerpt of a longer set of code. In the example below, we set `data-ln-start-from="7"` to make the line numbers start from 7. ```html @@ -103,6 +107,7 @@ You can offset the line number if you want to showcase a excerpt of a longer set ``` +
@@ -117,7 +122,6 @@ You can offset the line number if you want to showcase a excerpt of a longer set
- ## Step-by-step Highlights You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the `|` character. For example `data-line-numbers="1|2-3|4,6-10"` will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10. @@ -143,6 +147,7 @@ You can step through multiple code highlights on the same code block. Delimit ea ``` +
@@ -170,6 +175,7 @@ You can step through multiple code highlights on the same code block. Delimit ea
## HTML Entities 4.1.0 + Content added inside of a `` block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;). To avoid having to escape these characters manually, you can wrap your code in ` ``` @@ -63,12 +65,13 @@ Here's how to import and initialize the ES module version of reveal.js as well a import Reveal from 'dist/reveal.esm.js'; import Markdown from 'plugin/markdown/markdown.esm.js'; Reveal.initialize({ - plugins: [ Markdown ] + plugins: [Markdown], }); ``` If you're [installing reveal.js from npm](/installation/#installing-from-npm) and bundling it you should be able to use: + ```js import Reveal from 'reveal.js'; Reveal.initialize(); diff --git a/src/installation.md b/src/installation.md index 1cd91450..50346cfb 100644 --- a/src/installation.md +++ b/src/installation.md @@ -7,6 +7,7 @@ layout: default # Installation We provide three different ways to install reveal.js depending on your use case and technical experience. + 1. The [basic setup](#basic-setup) is the easiest way to get started. No need to set up any build tools. 1. The [full setup](#full-setup) gives you access to the build tools needed to make changes to the reveal.js source code. It includes a web server which is required if you want to load external Markdown files (the basic setup paired with your own choice of local web server works too). 1. If you want to use reveal.js as a dependency in your project, you can [install from npm](#installing-from-npm). @@ -32,25 +33,29 @@ Some reveal.js features, like external Markdown, require that presentations run 1. Install [Node.js](https://nodejs.org/) (10.0.0 or later) 1. Clone the reveal.js repository + ```shell $ git clone https://github.com/hakimel/reveal.js.git ``` 1. Move to the reveal.js folder and install dependencies + ```shell $ cd reveal.js && npm install ``` 1. Serve the presentation and monitor source files for changes + ```shell $ npm start ``` 1. Open to view your presentation - ### Development Server Port + The development server defaults to port 8000. You can use the `port` argument to switch to a different one: + ```shell npm start -- --port=8001 ``` @@ -66,18 +71,20 @@ yarn add reveal.js ``` Once installed, you can include reveal.js as an ES module: + ```js import Reveal from 'reveal.js'; import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'; let deck = new Reveal({ - plugins: [ Markdown ] -}) + plugins: [Markdown], +}); deck.initialize(); ``` You'll also need to include the reveal.js styles and a [presentation theme](/themes/). + ```html - - + + ``` diff --git a/src/jump-to-slide.md b/src/jump-to-slide.md index 318def9b..a9a04494 100644 --- a/src/jump-to-slide.md +++ b/src/jump-to-slide.md @@ -18,11 +18,12 @@ When jumping to a slide you can either enter numeric value or a string. If you p Here are a couple of examples of different input and their resulting navigation. -| Input | Result -| :- | :- -| 5 | Navigate to slide number 5 -| 6/2 | Navigate to horizontal slide 6, vertical slide 2 -| the-end | Navigate to a slide with this id (`
`) +| Input | Result | +| :------ | :---------------------------------------------------------- | +| 5 | Navigate to slide number 5 | +| 6/2 | Navigate to horizontal slide 6, vertical slide 2 | +| the-end | Navigate to a slide with this id (`
`) | + {.key-value} ## Disable Jump to Slide @@ -31,6 +32,6 @@ Jump to Slide is enabled by default but if you want to turn it off you can set t ```javascript Reveal.initialize({ - jumpToSlide: false -}) -``` \ No newline at end of file + jumpToSlide: false, +}); +``` diff --git a/src/keyboard.md b/src/keyboard.md index 4c48f95a..d6b476bf 100644 --- a/src/keyboard.md +++ b/src/keyboard.md @@ -18,13 +18,14 @@ Reveal.configure({ }); ``` -The keyboard object is a map of key codes and their corresponding *action*. The action can be of three different types. +The keyboard object is a map of key codes and their corresponding _action_. The action can be of three different types. + +| Type | Action | +| :------- | :--------------------------------------------------------- | +| Function | Triggers a callback function. | +| String | Calls the given method name in the [reveal.js API](/api/). | +| null | Disables the key (blocks the default reveal.js action) | -| Type | Action -| :- | :- -| Function | Triggers a callback function. -| String | Calls the given method name in the [reveal.js API](/api/). -| null | Disables the key (blocks the default reveal.js action) {.key-value} ## Adding Keyboard Bindings via JavaScript @@ -32,8 +33,8 @@ The keyboard object is a map of key codes and their corresponding *action*. The Custom key bindings can also be added and removed using Javascript. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the `keyboard` config option. ```javascript -Reveal.addKeyBinding( binding, callback ); -Reveal.removeKeyBinding( keyCode ); +Reveal.addKeyBinding(binding, callback); +Reveal.removeKeyBinding(keyCode); ``` For example @@ -43,16 +44,20 @@ For example // keyCode: the keycode for binding to the callback // key: the key label to show in the help overlay // description: the description of the action to show in the help overlay -Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, () => { - // start timer -} ) +Reveal.addKeyBinding( + { keyCode: 84, key: 'T', description: 'Start timer' }, + () => { + // start timer + } +); // The binding parameter can also be a direct keycode without providing the help description -Reveal.addKeyBinding( 82, () => { +Reveal.addKeyBinding(82, () => { // reset timer -} ) +}); ``` This allows plugins to add key bindings directly to Reveal so they can: + - Make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused) -- Be included in the help overlay (optional) \ No newline at end of file +- Be included in the help overlay (optional) diff --git a/src/layout.md b/src/layout.md index f3414beb..399528ef 100644 --- a/src/layout.md +++ b/src/layout.md @@ -16,11 +16,27 @@ The `r-stack` layout helper lets you center and place multiple elements on top o ```html
- - - + + +
``` +
@@ -37,11 +53,29 @@ If you want to show each of the stacked elements individually you can adjust the ```html
- - - + + +
``` +
@@ -61,6 +95,7 @@ The `r-fit-text` class makes text as large as possible without overflowing the s ```html

BIG

``` +
@@ -73,6 +108,7 @@ The `r-fit-text` class makes text as large as possible without overflowing the s

FIT TEXT

CAN BE USED FOR MULTIPLE HEADLINES

``` +
@@ -82,16 +118,16 @@ The `r-fit-text` class makes text as large as possible without overflowing the s
- ## Stretch The `r-stretch` layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. For example, in the below example our slide contains a **title**, an **image** and a **byline**. Because the **image** has the `.r-stretch` class, its height is set to the slide height minus the combined height of the **title** and **byline**. ```html

Stretch Example

- +

Image byline

``` +
@@ -103,20 +139,21 @@ The `r-stretch` layout helper lets you resize an element, like an image or video
#### Stretch Limitations + - Only direct descendants of a slide section can be stretched - Only one descendant per slide section can be stretched - ## Frame Decorate any element with `r-frame` to make it stand out against the background. If the framed element is placed inside an anchor, we'll apply a hover effect to the border. ```html - + - + ``` +
diff --git a/src/links.md b/src/links.md index 7a1de716..02b5b3e2 100644 --- a/src/links.md +++ b/src/links.md @@ -20,6 +20,7 @@ You can create links from one slide to another. Start by giving your target slid Back to the first
``` +
@@ -57,8 +58,8 @@ You can add relative navigation links that work similarly to the built in direct - + ``` -Each navigation element is automatically given an `enabled` class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only `navigate-right` will have the `enabled` class since it's not possible to navigate towards the left. \ No newline at end of file +Each navigation element is automatically given an `enabled` class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only `navigate-right` will have the `enabled` class since it's not possible to navigate towards the left. diff --git a/src/markdown.md b/src/markdown.md index 369b2a4f..5353a4c7 100644 --- a/src/markdown.md +++ b/src/markdown.md @@ -20,6 +20,7 @@ It's possible and often times more convenient to write presentation content usin
``` +
@@ -45,24 +46,26 @@ This functionality is powered by the built-in Markdown plugin which in turn uses ``` ## External Markdown -You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file. +You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file. -When used locally, this feature requires that reveal.js [runs from a local web server](/installation/#full-setup). The following example customizes all available options: +When used locally, this feature requires that reveal.js [runs from a local web server](/installation/#full-setup). The following example customizes all available options: ```html -
- @@ -89,8 +92,8 @@ Special syntax (through HTML comments) is available for adding attributes to the ```html
``` @@ -99,7 +102,7 @@ Special syntax (through HTML comments) is available for adding attributes to the Powerful syntax highlighting features are built into reveal.js. Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. [Learn more about line highlights](/code/#line-numbers-highlights). -```html +````html
-``` +```` +
@@ -130,7 +134,7 @@ Powerful syntax highlighting features are built into reveal.js. Using the bracke You can add a [line number offset](/code/#line-number-offset-4.2.0) by adding a number and a colon at the beginning of your highlights. -```html +````html
-``` +```` +
@@ -157,7 +162,7 @@ You can add a [line number offset](/code/#line-number-offset-4.2.0) by adding a
-## Configuring *marked* +## Configuring _marked_ We use [marked](https://github.com/chjj/marked) to parse Markdown. To customize marked's rendering, you can pass in options when [configuring Reveal](/config/): @@ -166,7 +171,7 @@ Reveal.initialize({ // Options which are passed into marked // See https://marked.js.org/using_advanced#options markdown: { - smartypants: true - } + smartypants: true, + }, }); ``` diff --git a/src/markup.md b/src/markup.md index 55d44afe..77398114 100644 --- a/src/markup.md +++ b/src/markup.md @@ -7,11 +7,12 @@ layout: default # Markup Here's a barebones example of a fully working reveal.js presentation: + ```html - - + +
@@ -43,6 +44,7 @@ If you place multiple `section` elements inside of another `section` they will b
``` +
Horizontal Slide
@@ -56,6 +58,7 @@ If you place multiple `section` elements inside of another `section` they will b It's also possible to write presentations using [Markdown](/markdown/). ## Viewport + The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the `body` element. If you're including multiple presentations on the same page each presentations `.reveal` element will act as their viewport. The viewport is always decorated with a `reveal-viewport` class reveal.js is initialized. @@ -78,7 +81,7 @@ If you set `data-state="make-it-pop"` on a slide `
`, "make-it-pop" will You can also listen to these changes in state via JavaScript: ```javascript -Reveal.on( 'make-it-pop', () => { +Reveal.on('make-it-pop', () => { console.log('✨'); -} ); -``` \ No newline at end of file +}); +``` diff --git a/src/math.md b/src/math.md index 99f2fc5d..efb19b88 100644 --- a/src/math.md +++ b/src/math.md @@ -11,7 +11,7 @@ The Math plugin lets you include beautifully typeset math formulas in your slide ```html ``` @@ -19,17 +19,14 @@ We're using the KaTeX typesetter in this example but you can also choose from [M Now that the plugin is registered we can start adding [LaTeX](https://en.wikipedia.org/wiki/LaTeX) formulas to our slides. - ```html

The Lorenz Equations

- \[\begin{aligned} - \dot{x} & = \sigma(y-x) \\ - \dot{y} & = \rho x - y - xz \\ - \dot{z} & = -\beta z + xy - \end{aligned} \] + \[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - + xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]
``` +
@@ -44,22 +41,23 @@ Now that the plugin is registered we can start adding [LaTeX](https://en.wikiped
## Markdown + If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example: ```html -
- `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$` -
+
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
``` ## Typesetting Libraries + The math plugin offers three choices of math typesetting libraries that you can use to render your math. Each variant is its own plugin that can be accessed via `RevealMath.`. If you don't have a preference, we recommend going with KaTeX. -| Library | Plugin Name | Config Property -| :- | :- | :- -| [KaTeX](https://katex.org/) | RevealMath.KaTeX | [katex](#katex-4.2.0) -| [MathJax 2](https://docs.mathjax.org/en/v2.7-latest/) | RevealMath.MathJax2 | [mathjax2](#mathjax-2) -| [MathJax 3](https://www.mathjax.org/) | RevealMath.MathJax3 | [mathjax3](#mathjax-3-4.2.0) +| Library | Plugin Name | Config Property | +| :---------------------------------------------------- | :------------------ | :--------------------------- | +| [KaTeX](https://katex.org/) | RevealMath.KaTeX | [katex](#katex-4.2.0) | +| [MathJax 2](https://docs.mathjax.org/en/v2.7-latest/) | RevealMath.MathJax2 | [mathjax2](#mathjax-2) | +| [MathJax 3](https://www.mathjax.org/) | RevealMath.MathJax3 | [mathjax3](#mathjax-3-4.2.0) | + {.full-width} ### KaTeX 4.2.0 @@ -71,14 +69,14 @@ Reveal.initialize({ katex: { version: 'latest', delimiters: [ - {left: '$$', right: '$$', display: true}, - {left: '$', right: '$', display: false}, - {left: '\\(', right: '\\)', display: false}, - {left: '\\[', right: '\\]', display: true} - ], - ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'] - }, - plugins: [ RevealMath.KaTeX ] + { left: '$$', right: '$$', display: true }, + { left: '$', right: '$', display: false }, + { left: '\\(', right: '\\)', display: false }, + { left: '\\[', right: '\\]', display: true }, + ], + ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'], + }, + plugins: [RevealMath.KaTeX], }); ``` @@ -91,7 +89,7 @@ Reveal.initialize({ katex: { local: 'node_modules/katex', }, - plugins: [ RevealMath.KaTeX ] + plugins: [RevealMath.KaTeX], }); ``` @@ -106,11 +104,14 @@ Reveal.initialize({ config: 'TeX-AMS_HTML-full', // pass other options into `MathJax.Hub.Config()` tex2jax: { - inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ], - skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ] - } + inlineMath: [ + ['$', '$'], + ['\\(', '\\)'], + ], + skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'], + }, }, - plugins: [ RevealMath.MathJax2 ] + plugins: [RevealMath.MathJax2], }); ``` @@ -127,13 +128,16 @@ Reveal.initialize({ mathjax3: { mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js', tex: { - inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ] + inlineMath: [ + ['$', '$'], + ['\\(', '\\)'], + ], }, options: { - skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ] + skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'], }, }, - plugins: [ RevealMath.MathJax3 ] + plugins: [RevealMath.MathJax3], }); ``` diff --git a/src/media.md b/src/media.md index 029eceae..4d05f503 100644 --- a/src/media.md +++ b/src/media.md @@ -13,15 +13,18 @@ We provide convenient mechanics for autoplaying and lazy loading HTML media elem Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown: ```html - + ``` If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this option to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you set it to `autoPlayMedia: false` NO media will autoplay. ```js Reveal.initialize({ - autoPlayMedia: true -}) + autoPlayMedia: true, +}); ``` Note that embedded HTML `
@@ -55,6 +58,7 @@ Reveal.initialize({
## URL Activation + Want to enable scrolling for a deck without changing its config? Edit the URL and append `view=scroll` to the query string. For example, here's the main reveal.js demo in scroll view: @@ -63,9 +67,10 @@ Want to enable scrolling for a deck without changing its config? Edit the URL an The scroll view is great when browsing presentations on a mobile device. For that reason, we automatically enable the scroll view when the viewport reaches mobile widths. This is controlled through the `scrollActivationWidth` config value. If you want to disable the automatic scroll view initialize your presentation with that value set to `null` or `0`: + ```js Reveal.initialize({ - scrollActivationWidth: null + scrollActivationWidth: null, }); ``` @@ -81,7 +86,7 @@ By default, the scrollbar is automatically hidden when you stop scrolling. This // - auto: Show the scrollbar while scrolling, hide while idle // - true: Always show the scrollbar // - false: Never show the scrollbar -scrollProgress: 'auto' +scrollProgress: 'auto'; ``` ## Scroll Snapping @@ -90,15 +95,13 @@ When scrolling reveal.js will automatically snap to the closest slide. This was If you prefer, you can change it to only snap when you're close to the top of a slide using `proximity`. You can also disable snapping altogether by setting `scrollSnap` to `false`. - ```js // - false: No snapping, scrolling is continuous // - proximity: Snap when close to a slide // - mandatory: Always snap to the closest slide -scrollSnap: 'mandatory' +scrollSnap: 'mandatory'; ``` - ## Scroll Layout (experimental) By default each slide will be sized to be as tall as the viewport. This looks great in most circumstances but can mean a bit of empty space above and below your slides (depending on the viewport and slide deck aspect ratio). @@ -113,6 +116,7 @@ Reveal.initialize({ scrollLayout: 'compact' }); ``` +
@@ -138,6 +142,7 @@ Reveal.initialize({ scrollLayout: 'full' // this is the default value }); ``` +
@@ -157,4 +162,4 @@ Reveal.initialize({ ## Examples -If you're looking for examples of scrollable reveal.js decks here's a great one: https://slides.com/news/scroll-mode/scroll \ No newline at end of file +If you're looking for examples of scrollable reveal.js decks here's a great one: https://slides.com/news/scroll-mode/scroll diff --git a/src/slide-numbers.md b/src/slide-numbers.md index 520a2386..4df73543 100644 --- a/src/slide-numbers.md +++ b/src/slide-numbers.md @@ -11,6 +11,7 @@ You can display the page number of the current slide by setting the `slideNumber ```js Reveal.initialize({ slideNumber: true }); ``` +
Slide 1
@@ -22,17 +23,19 @@ Reveal.initialize({ slideNumber: true }); The slide number format can be customized by setting `slideNumber` to one of the following values. -| Value | Description -| :- | :- -| h.v | Horizontal . Vertical slide number (default) -| h/v | Horizontal / Vertical slide number -| c | Flattened slide number, including both horizontal and vertical slides -| c/t | Flattened slide number / total slides +| Value | Description | +| :---- | :-------------------------------------------------------------------- | +| h.v | Horizontal . Vertical slide number (default) | +| h/v | Horizontal / Vertical slide number | +| c | Flattened slide number, including both horizontal and vertical slides | +| c/t | Flattened slide number / total slides | + {.key-value} ```js Reveal.initialize({ slideNumber: 'c/t' }); -```` +``` +
Slide 1
@@ -43,23 +46,26 @@ Reveal.initialize({ slideNumber: 'c/t' }); If none of the existing formats are to your liking, you can provide a custom slide number generator. ```js -Reveal.initialize({ slideNumber: slide => { +Reveal.initialize({ + slideNumber: (slide) => { // Ignore numbering of vertical slides - return [ Reveal.getIndices( slide ).h ]; -}}); + return [Reveal.getIndices(slide).h]; + }, +}); ``` ## Context -When slide numbers are enabled, they will be included in all contexts by default. If you only want to show slide numbers in a specific context you can set ``showSlideNumber`` to one of the following: +When slide numbers are enabled, they will be included in all contexts by default. If you only want to show slide numbers in a specific context you can set `showSlideNumber` to one of the following: + +| Value | Description | +| :------ | :------------------------------------------- | +| all | Show slide numbers in all contexts (default) | +| print | Only show slide numbers when printing to PDF | +| speaker | Only show slide numbers in the speaker view | -| Value | Description -| :- | :- -| all | Show slide numbers in all contexts (default) -| print | Only show slide numbers when printing to PDF -| speaker | Only show slide numbers in the speaker view {.key-value} ```js Reveal.initialize({ showSlideNumber: 'print' }); -``` \ No newline at end of file +``` diff --git a/src/slide-visibility.md b/src/slide-visibility.md index c9bed650..4a0b9668 100644 --- a/src/slide-visibility.md +++ b/src/slide-visibility.md @@ -5,6 +5,7 @@ layout: default --- # Slide Visibility + The `data-visibility` attribute can be used to hide slides. It can also be used to mark slides as "uncounted" in reveal.js' internal numbering system, which affects the visible slide number and progress bar. ## Hidden Slides 4.1.0 @@ -16,6 +17,7 @@ To hide a slide from view, add `data-visibility="hidden"`. Hidden slides are rem
Slide 2
Slide 3
``` +
Slide 1
@@ -37,6 +39,7 @@ To "hide" those slides from reveal.js' numbering system you can use `data-visibi
Slide 2
Slide 3
``` +
Slide 1
@@ -44,4 +47,3 @@ To "hide" those slides from reveal.js' numbering system you can use `data-visibi
Slide 3
- diff --git a/src/speaker-view.md b/src/speaker-view.md index 6a38d388..d02cd5e0 100644 --- a/src/speaker-view.md +++ b/src/speaker-view.md @@ -48,9 +48,9 @@ The plugin is already bundled with reveal.js. To enable the speaker notes plugin ```html ``` @@ -64,12 +64,11 @@ When `showNotes` is enabled notes are also included when you [export to PDF](/pd The speaker notes window will also show: -- Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear. +- Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear. - Current wall-clock time - (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue). -The pacing timer can be enabled by configuring the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Alternatively, you can enable the timer by setting `totalTime`, which sets the total length of your presentation (also in seconds). If both values are specified, `totalTime` wins and `defaultTiming` is ignored. Regardless of the baseline timing method, timings can also be given per slide `
` by setting the `data-timing` attribute (again, in seconds). - +The pacing timer can be enabled by configuring the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Alternatively, you can enable the timer by setting `totalTime`, which sets the total length of your presentation (also in seconds). If both values are specified, `totalTime` wins and `defaultTiming` is ignored. Regardless of the baseline timing method, timings can also be given per slide `
` by setting the `data-timing` attribute (again, in seconds). ## Server Side Speaker Notes diff --git a/src/themes.md b/src/themes.md index 84cdf9e5..2562d4bd 100644 --- a/src/themes.md +++ b/src/themes.md @@ -8,32 +8,35 @@ layout: default The framework comes with a few different themes included. -| Name | Preview -| :- | :- -| black (default) | Black background, white text, blue links -| white | White background, black text, blue links -| league | Gray background, white text, blue links -| beige | Beige background, dark text, brown links -| night | Black background, thick white text, orange links -| serif | Cappuccino background, gray text, brown links -| simple | White background, black text, blue links -| solarized | Cream-colored background, dark green text, blue links -| moon | Dark blue background, thick grey text, blue links -| dracula | -| sky | Blue background, thin dark text, blue links -| blood | Dark background, thick white text, red links +| Name | Preview | +| :-------------- | :--------------------------------------------------------------------------------------------------------------------------------- | +| black (default) | Black background, white text, blue links | +| white | White background, black text, blue links | +| league | Gray background, white text, blue links | +| beige | Beige background, dark text, brown links | +| night | Black background, thick white text, orange links | +| serif | Cappuccino background, gray text, brown links | +| simple | White background, black text, blue links | +| solarized | Cream-colored background, dark green text, blue links | +| moon | Dark blue background, thick grey text, blue links | +| dracula | | +| sky | Blue background, thin dark text, blue links | +| blood | Dark background, thick white text, red links | + {.key-value} Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html: ```html - + ``` ## Custom Properties + All theme variables are exposed as CSS custom properties in the pseudo-class `:root`. See [the list of exposed variables](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss). ## Creating a Theme + If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md). -Alternatively, if you want a clean start, you can opt to start from a blank CSS document and customize everything from the ground up. \ No newline at end of file +Alternatively, if you want a clean start, you can opt to start from a blank CSS document and customize everything from the ground up. diff --git a/src/touch-navigation.md b/src/touch-navigation.md index ae60a2fe..97da2afb 100644 --- a/src/touch-navigation.md +++ b/src/touch-navigation.md @@ -12,16 +12,14 @@ If you wish to disable this you can set the `touch` config option to false when ```javascript Reveal.initialize({ - touch: false -}) + touch: false, +}); ``` If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled. ```html
-

- Can't change slides by swiping across this element. -

+

Can't change slides by swiping across this element.

-``` \ No newline at end of file +``` diff --git a/src/transitions.md b/src/transitions.md index 87e3b7b6..3bcc4ab0 100644 --- a/src/transitions.md +++ b/src/transitions.md @@ -22,14 +22,15 @@ When navigating a presentation, we transition between slides by animating them f This is a complete list of all available transition styles. They work for both slides and slide backgrounds. -| Name | Effect -| :- | :- -| none | Switch backgrounds instantly -| fade | Cross fade — *default for background transitions* -| slide | Slide between backgrounds — *default for slide transitions* -| convex | Slide at a convex angle -| concave | Slide at a concave angle -| zoom | Scale the incoming slide up so it grows in from the center of the screen +| Name | Effect | +| :------ | :----------------------------------------------------------------------- | +| none | Switch backgrounds instantly | +| fade | Cross fade — _default for background transitions_ | +| slide | Slide between backgrounds — _default for slide transitions_ | +| convex | Slide at a convex angle | +| concave | Slide at a concave angle | +| zoom | Scale the incoming slide up so it grows in from the center of the screen | + {.key-value} ## Separate In-Out Transitions @@ -37,22 +38,15 @@ This is a complete list of all available transition styles. They work for both s You can also use different in and out transitions for the same slide by appending `-in` or `-out` to the transition name. ```html -
- The train goes on … -
-
- and on … -
-
- and stops. -
+
The train goes on …
+
and on …
+
and stops.
- (Passengers entering and leaving) -
-
- And it starts again. + (Passengers entering and leaving)
+
And it starts again.
``` +
@@ -76,10 +70,11 @@ You can also use different in and out transitions for the same slide by appendin ## Background Transitions We transition between slide backgrounds using a cross fade by default. This can be changed on a global level or overridden for specific slides. To change background transitions for all slides, use the `backgroundTransition` config option. + ```js Reveal.initialize({ - backgroundTransition: 'slide' + backgroundTransition: 'slide', }); ``` -Alternatively you can use the `data-background-transition` attribute on any `
` to override that specific transition. \ No newline at end of file +Alternatively you can use the `data-background-transition` attribute on any `
` to override that specific transition. diff --git a/src/upgrading.md b/src/upgrading.md index 3a2ccaa2..316fb98b 100644 --- a/src/upgrading.md +++ b/src/upgrading.md @@ -5,37 +5,43 @@ layout: default --- # Upgrading From Version 3 to 4.0 + We make a strong effort to avoid breaking changes but there are a couple in version 4.0. If you want to migrate an existing presentation follow these instructions. ### Update Asset Locations + Our JS and CSS assets have moved. In your presentation HTML, update the following ` ``` ### Plugin Registration -If you keep a copy of the v3 /plugin directory there are *no breaking changes*. If you want to switch to the latest plugin versions, you'll need to update your `Reveal.initialize()` call to use the [new plugin registration syntax](/plugins/). Plugins are also available as ES modules. + +If you keep a copy of the v3 /plugin directory there are _no breaking changes_. If you want to switch to the latest plugin versions, you'll need to update your `Reveal.initialize()` call to use the [new plugin registration syntax](/plugins/). Plugins are also available as ES modules. ```html @@ -43,17 +49,19 @@ If you keep a copy of the v3 /plugin directory there are *no breaking changes*. ``` - ### Removed Multiplex and Notes Server + The Multiplex and Notes Server plugins have moved out of reveal.js core to their own repositories. See their corresponding README's for usage instructions. + - https://github.com/reveal/multiplex - https://github.com/reveal/notes-server ### Other + - Removed `Reveal.navigateTo`, use `Reveal.slide` instead. - We've switched build systems to gulp & rollup. Make sure to `npm install` to get the latest dependencies. The server is still started with `npm start`, just like before. diff --git a/src/vertical-slides.md b/src/vertical-slides.md index 5c739c6a..4542a6da 100644 --- a/src/vertical-slides.md +++ b/src/vertical-slides.md @@ -6,7 +6,7 @@ layout: default # Vertical Slides -Your slides are stepped between using a horizontal sliding transition by default. These horizontal slides are considered the main, or *top-level*, slides in your deck. +Your slides are stepped between using a horizontal sliding transition by default. These horizontal slides are considered the main, or _top-level_, slides in your deck. It's also possible to nest multiple slides within a single top-level slide to create a vertical stack. This is a great way to logically group content in your presentation and makes it convenient to include optional slides. @@ -27,6 +27,7 @@ Here's what the markup looks like for a simple vertical stack.
Vertical Slide 2
``` +
Horizontal Slide
@@ -38,10 +39,11 @@ Here's what the markup looks like for a simple vertical stack.
## Navigation Mode + You can fine tune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presentations that use a mix of horizontal and vertical slides. The following navigation modes are available: -| Value | Description | -| :--------------------------- | :---------- | -| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). | -| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). | -| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.

Consider a deck with six slides ordered in two vertical stacks:
`1.1`    `2.1`
`1.2`    `2.2`
`1.3`    `2.3`

If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. | \ No newline at end of file +| Value | Description | +| :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). | +| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). | +| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.

Consider a deck with six slides ordered in two vertical stacks:
`1.1`    `2.1`
`1.2`    `2.2`
`1.3`    `2.3`

If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. | diff --git a/src/zh-Hant/api.md b/src/zh-Hant/api.md index 110a9f27..0d2cc659 100644 --- a/src/zh-Hant/api.md +++ b/src/zh-Hant/api.md @@ -9,9 +9,10 @@ layout: default 我們提供了一個廣泛的 JavaScript API 來控制導航和檢查簡報的當前狀態。如果你正在編輯單份簡報，可以通過全域對象 `Reveal` 來訪問 API。 ### 導航 + ```javascript // 導航到指定幻燈片 -Reveal.slide( indexh, indexv, indexf ); +Reveal.slide(indexh, indexv, indexf); // 相對導航 Reveal.left(); @@ -22,7 +23,7 @@ Reveal.prev(); Reveal.next(); // 片段導航 -Reveal.navigateFragment( indexf ); // (-1 表示隱藏所有片段) +Reveal.navigateFragment(indexf); // (-1 表示隱藏所有片段) Reveal.prevFragment(); Reveal.nextFragment(); @@ -36,13 +37,14 @@ Reveal.availableFragments(); ``` ### 其他 + ```javascript // 如果你添加或移除幻燈片，調用此函數以更新控制、進度等 Reveal.sync(); // 調用此函數以同步僅一個幻燈片 -Reveal.syncSlide(slide=currentSlide); +Reveal.syncSlide((slide = currentSlide)); // 調用此函數以同步僅一個幻燈片的片段 -Reveal.syncFragments(slide=currentSlide); +Reveal.syncFragments((slide = currentSlide)); // 調用此函數根據視窗大小更新簡報比例 Reveal.layout(); @@ -59,29 +61,30 @@ Reveal.getScale(); // 返回一個對象，其中包含縮放後的簡報寬度和高度 Reveal.getComputedSlideSize(); -Reveal.getIndices(slide=currentSlide); // 幻燈片的坐標（例如 { h: 0, v: 0, f: 0 }） -Reveal.getProgress(); // （0 表示第一張幻燈片，1 表示最後一張） +Reveal.getIndices((slide = currentSlide)); // 幻燈片的坐標（例如 { h: 0, v: 0, f: 0 }） +Reveal.getProgress(); // （0 表示第一張幻燈片，1 表示最後一張） // 幻燈片屬性的鍵值對數組 Reveal.getSlidesAttributes(); // 返回指定索引的幻燈片背景元素 -Reveal.getSlideBackground( indexh, indexv ) +Reveal.getSlideBackground(indexh, indexv); // 返回幻燈片的演講筆記 -Reveal.getSlideNotes(slide=currentSlide); +Reveal.getSlideNotes((slide = currentSlide)); // 檢索查詢字符串為鍵值對映射 Reveal.getQueryHash(); // 返回幻燈片的 URL 路徑 -Reveal.getSlidePath(slide=currentSlide); +Reveal.getSlidePath((slide = currentSlide)); ``` ### 幻燈片 + ```javascript // 返回匹配指定索引的幻燈片元素 -Reveal.getSlide( indexh, indexv ) +Reveal.getSlide(indexh, indexv); // 檢索前一個和當前的幻燈片元素 Reveal.getPreviousSlide(); @@ -100,6 +103,7 @@ Reveal.getSlides(); ``` ### 幻燈片狀態 + ```javascript // 檢查簡報是否包含兩個或更多 // 水平/垂直幻燈片 @@ -107,7 +111,7 @@ Reveal.hasHorizontalSlides(); Reveal.hasVerticalSlides(); // 檢查套件是否至少在任一軸上導航過一次 -Reveal.hasNavig +Reveal.hasNavig; atedHorizontally(); Reveal.hasNavigatedVertically(); @@ -119,6 +123,7 @@ Reveal.isLastVerticalSlide(); ``` ### 模式 + ```javascript // 顯示一個幫助介面，包含鍵盤快捷方式，可以傳遞 true/false 來強制開啟/關閉 Reveal.toggleHelp(); @@ -134,6 +139,7 @@ Reveal.isPaused(); ``` ### DOM 元素 + ```javascript // 檢索關鍵 DOM 元素 Reveal.getRevealElement(); //
@@ -143,4 +149,5 @@ Reveal.getBackgroundsElement(); //
``` ## 閱讀更多 -- [插件 API](/zh-TW/plugins/#api) \ No newline at end of file + +- [插件 API](/zh-TW/plugins/#api) diff --git a/src/zh-Hant/auto-animate.md b/src/zh-Hant/auto-animate.md index 82e4f741..215b7523 100644 --- a/src/zh-Hant/auto-animate.md +++ b/src/zh-Hant/auto-animate.md @@ -9,6 +9,7 @@ layout: default reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰的幻燈片 `
` 元素上添加 `data-auto-animate`，自動動畫將會對兩者間的所有匹配元素進行動畫處理。 這裡有一個簡單的例子，讓你更好地理解如何使用它。 + ```html

自動動畫

@@ -17,6 +18,7 @@ reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰

自動動畫

``` +
@@ -43,6 +45,7 @@ reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰

動畫

``` +
@@ -56,6 +59,7 @@ reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰
## 元素如何匹配 + 當你在兩個自動動畫幻燈片之間導航時，我們將盡力自動找到兩個幻燈片中的匹配元素。對於文本，如果文本內容和節點類型都相同，我們將其視為匹配。對於圖片、視頻和 iframes，我們比較 `src` 屬性。除此以外我們還會考慮元素在 DOM 中出現的順序。 在無法自動匹配的情況下，你可以給你想要動畫之間的對象添加匹配的 `data-id` 屬性。我們優先匹配 `data-id` 值而不是自動匹配。 @@ -70,8 +74,8 @@ reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰
``` -
+
@@ -84,27 +88,30 @@ reveal.js 可以自動在幻燈片之間添加動畫。你只需在兩個相鄰
## 動畫設定 + 你可以覆蓋特定的動畫設定，例如動畫曲線和持續時間，無論是對整個簡報、每張幻燈片還是每個動畫元素。以下配置屬性可以用來改變特定幻燈片或元素的設置： -| 屬性 | 默認值 | 描述 -| :--------------------------------- | ---------: | :---------- -| data-auto-animate-easing | ease | 一個 CSS [easing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/easing-function)。 -| data-auto-animate-unmatched | true | 決定沒有匹配的自動動畫目標元素是否應該淡入。設置為 false 使它們立即出現。 -| data-auto-animate-duration | 1.0 | 動畫持續時間，以秒為單位。 -| data-auto-animate-delay | 0 | 動畫延遲，以秒為單位（只能為特定元素設置，不能在幻燈片層面設置）。 -| data-auto-animate-id | _absent_ | 將自動動畫幻燈片綁定在一起的 [id](#auto-animate-id-%26-restart)。 -| data-auto-animate-restart | _absent_ | [分隔](#auto-animate-id-%26-restart) 兩個相鄰的自動動畫幻燈片（即使它們有相同的 id）。 +| 屬性 | 默認值 | 描述 | +| :-------------------------- | -------: | :--------------------------------------------------------------------------------------------- | +| data-auto-animate-easing | ease | 一個 CSS [easing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/easing-function)。 | +| data-auto-animate-unmatched | true | 決定沒有匹配的自動動畫目標元素是否應該淡入。設置為 false 使它們立即出現。 | +| data-auto-animate-duration | 1.0 | 動畫持續時間，以秒為單位。 | +| data-auto-animate-delay | 0 | 動畫延遲，以秒為單位（只能為特定元素設置，不能在幻燈片層面設置）。 | +| data-auto-animate-id | _absent_ | 將自動動畫幻燈片綁定在一起的 [id](#auto-animate-id-%26-restart)。 | +| data-auto-animate-restart | _absent_ | [分隔](#auto-animate-id-%26-restart) 兩個相鄰的自動動畫幻燈片（即使它們有相同的 id）。 | 如果你想改變整個套件的默認設置，可以使用以下配置選項： + ```javascript Reveal.initialize({ autoAnimateEasing: 'ease-out', autoAnimateDuration: 0.8, - autoAnimateUnmatched: false -}) + autoAnimateUnmatched: false, +}); ``` ## Auto-Animate Id & Restart + 當你希望分離一組組幻燈片相鄰的自動動畫，可以使用 `data-auto-animate-id` 和 `data-auto-animate-restart` 屬性。 使用 `data-auto-animate-id`，你可以為幻燈片指定任意 id。只有當兩個相鄰幻燈片具有相同的 id 或兩者都沒有 id 時，自動動畫才會被啟動。 @@ -113,22 +120,22 @@ Reveal.initialize({ ```html
-

組 A

+

組 A

-

組 A

+

組 A

-

組 B

+

組 B

-

組 B

+

組 B

-

組 C

+

組 C

-

組 C

+

組 C

``` @@ -160,13 +167,15 @@ Reveal.initialize({ 每次你在兩個自動動畫幻燈片之間切換，都會發送 `autoanimate` 事件。 ```javascript -Reveal.on( 'autoanimate', event => { +Reveal.on('autoanimate', (event) => { // event.fromSlide, event.toSlide -} ); +}); ``` ## 範例：在程式碼區塊之間進行動畫 + 我們支持在程式碼區塊之間進行動畫。確保程式碼區塊啟用了 `data-line-numbers`，並且全部都具有匹配的 `data-id` 值。 + ```html 

@@ -200,6 +209,7 @@ Reveal.on( 'autoanimate', event => {
``` +
@@ -233,11 +243,14 @@ Reveal.on( 'autoanimate', event => { let c = planets.reduce( circumferenceReducer, 0 )
+
## 示例：在列表之間進行動畫 + 我們單獨處裡每一個列表項目，讓你可以在不同項目之間進行動畫。 + ```html/2-4,10,12
    @@ -249,7 +262,7 @@ Reveal.on( 'autoanimate', event => {
    • 水星
      • - +
    • 地球
    • 木星
      • @@ -258,6 +271,7 @@ Reveal.on( 'autoanimate', event => {
    ``` +
    @@ -280,8 +294,9 @@ Reveal.on( 'autoanimate', event => {
    ## 進階：狀態屬性 + 我們在有自動動畫的不同元素上添加了狀態屬性。如果你想進一步調整動畫行為，比如通過自定義 CSS，這些屬性可以被連接使用。 在自動動畫開始之前，我們會在即將顯示的幻燈片 `
    ` 上添加 `data-auto-animate="pending"`。此時即將出現的幻燈片是可見的，所有動畫元素都已移至其起始位置。接下來我們切換到 `data-auto-animate="running"`，以表示元素開始朝其最終屬性進行動畫。 -每個個別元素都裝飾有 `data-auto-animate-target` 屬性。該屬性的值是這個特定動畫的唯一 ID 或者 "unmatched" 如果元素不匹配。 \ No newline at end of file +每個個別元素都裝飾有 `data-auto-animate-target` 屬性。該屬性的值是這個特定動畫的唯一 ID 或者 "unmatched" 如果元素不匹配。 diff --git a/src/zh-Hant/auto-slide.md b/src/zh-Hant/auto-slide.md index 94d45508..1d452cba 100644 --- a/src/zh-Hant/auto-slide.md +++ b/src/zh-Hant/auto-slide.md @@ -12,9 +12,10 @@ layout: default // 每五秒自動切換一張幻燈片 Reveal.initialize({ autoSlide: 5000, - loop: true + loop: true, }); ``` +
    幻燈片 1
    @@ -47,14 +48,19 @@ Reveal.initialize({ ```js Reveal.configure({ - autoSlideMethod: () => Reveal.right() + autoSlideMethod: () => Reveal.right(), }); ``` ## 事件 + 每當自動播放被暫停或恢復時，都會觸發事件。 ```javascript -Reveal.on( 'autoslideresumed', event => { /* ... */ } ); -Reveal.on( 'autoslidepaused', event => { /* ... */ } ); -``` \ No newline at end of file +Reveal.on('autoslideresumed', (event) => { + /* ... */ +}); +Reveal.on('autoslidepaused', (event) => { + /* ... */ +}); +``` diff --git a/src/zh-Hant/backgrounds.md b/src/zh-Hant/backgrounds.md index 36e0cdfd..d7f3e282 100644 --- a/src/zh-Hant/backgrounds.md +++ b/src/zh-Hant/backgrounds.md @@ -20,6 +20,7 @@ layout: default

    🍰

    ``` +
    @@ -43,6 +44,7 @@ layout: default

    🐳

    ``` +
    @@ -58,20 +60,21 @@ layout: default 預設情況下，背景圖片被調整大小以覆蓋整個頁面。可用選項包括： -| 屬性 | 預設值 | 描述 | -| :------------------------------- | :--------- | :---------- | -| data-background-image | | 顯示的圖片的 URL。幻燈片開啟時，GIF 將重新開始。 | -| data-background-size | cover | 參見 MDN 上的 [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size)。 | -| data-background-position | center | 參見 MDN 上的 [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)。 | -| data-background-repeat | no-repeat | 參見 MDN 上的 [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat)。 | -| data-background-opacity | 1 | 背景圖片的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | +| 屬性 | 預設值 | 描述 | +| :----------------------- | :-------- | :---------------------------------------------------------------------------------------------------- | +| data-background-image | | 顯示的圖片的 URL。幻燈片開啟時，GIF 將重新開始。 | +| data-background-size | cover | 參見 MDN 上的 [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size)。 | +| data-background-position | center | 參見 MDN 上的 [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)。 | +| data-background-repeat | no-repeat | 參見 MDN 上的 [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat)。 | +| data-background-opacity | 1 | 背景圖片的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | + {.nowrap-1st} ```html/0,3-4

    Image

    -

    這張背景圖將被設置為100px並重複

    @@ -83,21 +86,23 @@ layout: default 為幻燈片背景。 -| 屬性 | 預設值 | 描述 | -| :--------------------------- | :------ | :---------- | -| data-background-video | | 一個視頻源或逗號分隔的多個視頻源。 | -| data-background-video-loop | false | 標記視頻是否應重複播放。 | -| data-background-video-muted | false | 標記音頻是否應靜音。 | -| data-background-size | cover | 使用 `cover` 全屏和部分裁剪，或 `contain` 以信箱格式顯示。 | -| data-background-opacity | 1 | 背景視頻的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | +| 屬性 | 預設值 | 描述 | +| :-------------------------- | :----- | :--------------------------------------------------------- | +| data-background-video | | 一個視頻源或逗號分隔的多個視頻源。 | +| data-background-video-loop | false | 標記視頻是否應重複播放。 | +| data-background-video-muted | false | 標記音頻是否應靜音。 | +| data-background-size | cover | 使用 `cover` 全屏和部分裁剪，或 `contain` 以信箱格式顯示。 | +| data-background-opacity | 1 | 背景視頻的透明度，0-1 範圍。0 是透明的，1 是完全不透明的。 | + {.nowrap-1st} ```html/0-1 -

    Video

    ``` +
    ``` +
    @@ -38,14 +39,15 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig
    ## 主題 + 確保在你的文檔中包含了一個語法高亮主題。我們預設包含了 Monokai，它隨 reveal.js 儲存在 [plugin/highlight/monokai.css](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight/monokai.css) 中。可用的主題完整列表可以在 上找到。 ```html - + ``` @@ -70,6 +72,7 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig ``` +
    @@ -92,11 +95,10 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig
    #### 行號偏移 4.2.0 + 如果你想展示一長串代碼的片段，你可以偏移行號。在下面的示例中，我們設置 `data-ln-start-from="7"` 使行號從7開始。 ```html - - 
    
 
   Oranges
@@ -105,6 +107,7 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig
    ``` +
    @@ -119,7 +122,6 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig
    - ## 分步高亮 你可以在同一代碼塊上分步進行多次代碼高亮。用 `|` 字符分隔每個高亮步驟。例如 `data-line-numbers="1|2-3|4,6-10"` 會產生三個步驟。開始時高亮第1行，下一步是第2-3行，最後是第4行和第6到10行。 @@ -145,6 +147,7 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig ``` +
    @@ -169,4 +172,4 @@ reveal.js 有一個強大的功能，就是為程式碼添加顏色 — 由 [hig
    -
    \ No newline at end of file +
    diff --git a/src/zh-Hant/config.md b/src/zh-Hant/config.md index 0fd150b2..de55133c 100644 --- a/src/zh-Hant/config.md +++ b/src/zh-Hant/config.md @@ -266,4 +266,4 @@ Reveal.configure({ autoSlide: 0 }); // 每5秒開始自動播放 Reveal.configure({ autoSlide: 5000 }); -``` \ No newline at end of file +``` diff --git a/src/zh-Hant/course.md b/src/zh-Hant/course.md index 3b900677..c12800e7 100644 --- a/src/zh-Hant/course.md +++ b/src/zh-Hant/course.md @@ -16,11 +16,13 @@ hide_ads: true 我們將從安裝 reveal.js、創建幻燈片和配置你的簡報的基礎開始。然後，我們將進一步探討更有趣的話題，如展示語法高亮代碼、使用自動動畫讓幻燈片內容動起來，以及使用演講者視圖。在高級視頻中，我們將探索 reveal.js JavaScript API、插件創建和如何自定義鍵盤綁定。（見[完整視頻列表](#table-of-contents)。） ### 這是為誰設計的？ + 這個課程面向剛接觸 reveal.js 的人，以及那些已經理解基礎但準備探索完整功能集的你。 你需要對 HTML、CSS 和 JavaScript 有基本的了解。HTML 是 reveal.js 的骨幹，在整個課程中廣泛使用。CSS 和 JavaScript 主要用於高級視頻，涵蓋如創建自定義主題、使用 reveal.js API 和編輯源代碼等主題。 ### 誰來講解？ + 👋 我是 Hakim——一名瑞典前端開發人員和 reveal.js 的創建者。我共同創辦並目前在 [Slides.com](https://slides.com) 工作——一個基於 reveal.js 構建的簡報平台和圖形編輯器。除此之外，我喜歡在 [hakim.se](https://hakim.se) 上進行視覺演示和實驗。 我在10年前 (!) 發布了 reveal.js 的第一個版本，當時沒有想到它最終會被成千上萬的人使用。我希望你能加入進來，親身體驗為什麼這麼多人選擇使用 reveal.js 創建他們的簡報！ @@ -45,42 +47,44 @@ hide_ads: true
  • 免費更新
+
-
課程通過 [Gumroad](https://gumroad.com/) 銷售。購買時將添加增值稅（如果適用）。如果課程不適合你——無需問題退款保證100%。 ## 目錄 + 課程分為相對較短的視頻，以便你可以輕鬆跳過與你無關或你已熟悉的主題。總時長為5.5小時。 -| 起步 | | -| :- | -: | -| **起步** | 時長 | -|   安裝 reveal.js 和設置開發服務器。 | 5:40 -|   創建幻燈片，互相鏈接並保存草稿。 | 10:04 -|   配置你的簡報。 | 8:23 -|   使用垂直幻燈片。 | 9:05 -|   使用 Markdown 創建幻燈片。 | 16:34 -| **內容創建** | -|   向幻燈片添加文本、圖片、視頻和 iframe。 | 10:47 -|   使用棧和自動大小文本佈局幻燈片內容。 | 13:58 -|   全屏背景圖片、視頻、顏色和 iframe。 | 16:26 -|   展示語法高亮代碼。 | 21:51 -|   使用 Fragments 逐步構建幻燈片。 | 13:14 -|   使用 Auto-Animate 動畫幻燈片內容。 | 17:01 -| **配置與功能** | -|   簡報大小和比例。 | 14:34 -|   幻燈片過渡。 | 12:36 -|   主題化你的內容並創建你自己的主題。 | 16:12 -|   演講者筆記和使用演講者視圖。 | 11:27 -|   幻燈片編號與 URL。 | 19:55 -|   將你的簡報轉換為 PDF。 | 10:23 -| **高級 (JS)** | -|   初始化和運行多個簡報。 | 19:06 -|   插件；在哪裡找到以及如何創建它們。 | 14:52 -|   使用 reveal.js API 控制你的簡報。 | 40:32 -|   自定義鍵盤快捷鍵。 | 15:04 -|   與源代碼一起工作。 | 21:09 -{.toc .hide-header} \ No newline at end of file +| 起步 | | +| :--------------------------------------------- | -------: | +| **起步** | 時長 | +|   安裝 reveal.js 和設置開發服務器。 | 5:40 | +|   創建幻燈片，互相鏈接並保存草稿。 | 10:04 | +|   配置你的簡報。 | 8:23 | +|   使用垂直幻燈片。 | 9:05 | +|   使用 Markdown 創建幻燈片。 | 16:34 | +| **內容創建** | +|   向幻燈片添加文本、圖片、視頻和 iframe。 | 10:47 | +|   使用棧和自動大小文本佈局幻燈片內容。 | 13:58 | +|   全屏背景圖片、視頻、顏色和 iframe。 | 16:26 | +|   展示語法高亮代碼。 | 21:51 | +|   使用 Fragments 逐步構建幻燈片。 | 13:14 | +|   使用 Auto-Animate 動畫幻燈片內容。 | 17:01 | +| **配置與功能** | +|   簡報大小和比例。 | 14:34 | +|   幻燈片過渡。 | 12:36 | +|   主題化你的內容並創建你自己的主題。 | 16:12 | +|   演講者筆記和使用演講者視圖。 | 11:27 | +|   幻燈片編號與 URL。 | 19:55 | +|   將你的簡報轉換為 PDF。 | 10:23 | +| **高級 (JS)** | +|   初始化和運行多個簡報。 | 19:06 | +|   插件；在哪裡找到以及如何創建它們。 | 14:52 | +|   使用 reveal.js API 控制你的簡報。 | 40:32 | +|   自定義鍵盤快捷鍵。 | 15:04 | +|   與源代碼一起工作。 | 21:09 | + +{.toc .hide-header} diff --git a/src/zh-Hant/creating-plugins.md b/src/zh-Hant/creating-plugins.md index 27cc6f63..e5fcf2eb 100644 --- a/src/zh-Hant/creating-plugins.md +++ b/src/zh-Hant/creating-plugins.md @@ -12,27 +12,27 @@ layout: default 插件是包含以下屬性的對象。 -| 屬性 | 值 -| :- | :- -| id 字符串 | 插件的唯一ID。這可以用來通過 `Reveal.getPlugin()` 檢索插件實例。 -| init 函數 | 可選的函數，當插件應該運行時被調用。它被調用時有一個參數；插件註冊的[簡報實例](/api/)的引用。

init 函數可以選擇性地返回一個 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果返回了Promise，reveal.js將等待它解析完成，然後簡報初始化完成並觸發[準備好的事件](/events/#ready)。 -| destroy 函數 | 可選的函數，當這個插件註冊的reveal.js實例被卸載時調用。 +| 屬性 | 值 | +| :------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| id 字符串 | 插件的唯一ID。這可以用來通過 `Reveal.getPlugin()` 檢索插件實例。 | +| init 函數 | 可選的函數，當插件應該運行時被調用。它被調用時有一個參數；插件註冊的[簡報實例](/api/)的引用。

init 函數可以選擇性地返回一個 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果返回了Promise，reveal.js將等待它解析完成，然後簡報初始化完成並觸發[準備好的事件](/events/#ready)。 | +| destroy 函數 | 可選的函數，當這個插件註冊的reveal.js實例被卸載時調用。 | + {.key-value} 這裡是一個示例插件，當按下T鍵時，它會在簡報中洗牌所有幻燈片。注意，我們導出一個返回新插件對象的函數。這樣做是因為同一頁面上可能有[多個簡報實例](/initialization/#multiple-presentations)，而每個實例都應該擁有我們插件的自己的實例。 - ```js // toaster.js export default () => ({ id: 'toaster', - init: ( deck ) => { - deck.addKeyBinding( { keyCode: 84, key: 'T' }, () => { + init: (deck) => { + deck.addKeyBinding({ keyCode: 84, key: 'T' }, () => { deck.shuffle(); console.log('🍻'); - } ); - } -}) + }); + }, +}); ``` ## 註冊插件 @@ -44,22 +44,23 @@ import Reveal from 'dist/reveal.esm.js'; import Toaster from 'toaster.js'; Reveal.initialize({ - plugins: [ Toaster ] + plugins: [Toaster], }); ``` ### 異步插件 + 如果你的插件需要在reveal.js完成初始化之前運行異步代碼，它可以返回一個Promise。這裡是一個會延遲初始化三秒的示例插件。 ```js let WaitForIt = { - id: "wait-for-it", - init: deck => { - return new Promise( resolve => setTimeout( resolve, 3000 ) ) - } -} - -Reveal.initialize({ plugins: [ WaitForIt ] }).then( () => { - console.log( "Three seconds later..." ); -} ) -``` \ No newline at end of file + id: 'wait-for-it', + init: (deck) => { + return new Promise((resolve) => setTimeout(resolve, 3000)); + }, +}; + +Reveal.initialize({ plugins: [WaitForIt] }).then(() => { + console.log('Three seconds later...'); +}); +``` diff --git a/src/zh-Hant/events.md b/src/zh-Hant/events.md index 3e333c5a..79253718 100644 --- a/src/zh-Hant/events.md +++ b/src/zh-Hant/events.md @@ -9,7 +9,7 @@ layout: default 我們發送許多事件，以便您可以輕鬆地響應簡報中的變化。使用 `Reveal.on()` 添加事件監聽器，使用 `Reveal.off()` 移除它們。 ```js -Reveal.on( 'eventname', callbackFunction ); +Reveal.on('eventname', callbackFunction); ``` ## 就緒 @@ -17,9 +17,9 @@ Reveal.on( 'eventname', callbackFunction ); 當 reveal.js 加載了所有非異步依賴並準備好接受 API 調用時，會觸發 `ready` 事件。要檢查 reveal.js 是否已經「就緒」，你可以調用 `Reveal.isReady()`。 ```javascript -Reveal.on( 'ready', event => { +Reveal.on('ready', (event) => { // event.currentSlide, event.indexh, event.indexv -} ); +}); ``` 我們還會在 `.reveal` 元素上添加一個 `.ready` 類，以便您可以用 CSS 掛鉤進這個狀態。 @@ -27,9 +27,9 @@ Reveal.on( 'ready', event => { `Reveal.initialize` 方法還返回一個 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)，當簡報準備好時解析。以下與添加 `ready` 事件的監聽器同義： ```javascript -Reveal.initialize().then( () => { -// reveal.js 已準備好 -} ) +Reveal.initialize().then(() => { + // reveal.js 已準備好 +}); ``` ## 幻燈片變更 @@ -39,9 +39,9 @@ Reveal.initialize().then( () => { 一些庫，如 MathJax（參見 [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)），可能會對幻燈片的變形和顯示狀態感到困惑。通常，這可以通過從此回調調用它們的更新或渲染函數來修復。 ```javascript -Reveal.on( 'slidechanged', event => { +Reveal.on('slidechanged', (event) => { // event.previousSlide, event.currentSlide, event.indexh, event.indexv -} ); +}); ``` ## 幻燈片轉換結束 @@ -49,8 +49,8 @@ Reveal.on( 'slidechanged', event => { `slidechanged` 事件在幻燈片變更時立即觸發。如果您寧願在幻燈片轉換完成並完全可見時調用事件監聽器，您可以使用 `slidetransitionend` 事件。`slidetransitionend` 事件包含與 `slidechanged` 相同的事件數據。 ```javascript -Reveal.on( 'slidetransitionend', event => { - console.log( event.currentSlide ); +Reveal.on('slidetransitionend', (event) => { + console.log(event.currentSlide); }); ``` @@ -59,12 +59,13 @@ Reveal.on( 'slidetransitionend', event => { 當 reveal.js 更改簡報的縮放比例時，會觸發 `resize` 事件。 ```javascript -Reveal.on( 'resize', event => { +Reveal.on('resize', (event) => { // event.scale, event.oldScale, event.size -} ); +}); ``` ## 特定功能的事件 + - [概覽模式事件](/overview/#events) - [片段事件](/fragments/#events) -- [自動播放事件](/auto-slide/#events) \ No newline at end of file +- [自動播放事件](/auto-slide/#events) diff --git a/src/zh-Hant/fragments.md b/src/zh-Hant/fragments.md index bd3145e7..11f0fd0a 100644 --- a/src/zh-Hant/fragments.md +++ b/src/zh-Hant/fragments.md @@ -17,6 +17,7 @@ layout: default

先淡入，然後淡出

向上滑動同時淡入

``` +
@@ -29,26 +30,27 @@ layout: default
-| 名稱 | 效果 | -| :- |:- | -| fade-out | 開始可見，然後淡出 | -| fade-up | 向上滑動同時淡入 | -| fade-down | 向下滑動同時淡入 | -| fade-left | 向左滑動同時淡入 | -| fade-right | 向右滑動同時淡入 | -| fade-in-then-out | 先淡入，然後在下一步淡出 | -| current-visible | 在下一步先淡入，然後淡出 | -| fade-in-then-semi-out | 先淡入，然後在下一步淡到50% | -| grow | 放大 | -| semi-fade-out | 淡出到50% | -| shrink | 縮小 | -| strike | 中劃線 | -| highlight-red | 文本變紅 | -| highlight-green | 文本變綠 | -| highlight-blue | 文本變藍 | +| 名稱 | 效果 | +| :---------------------- | :----------------------------- | +| fade-out | 開始可見，然後淡出 | +| fade-up | 向上滑動同時淡入 | +| fade-down | 向下滑動同時淡入 | +| fade-left | 向左滑動同時淡入 | +| fade-right | 向右滑動同時淡入 | +| fade-in-then-out | 先淡入，然後在下一步淡出 | +| current-visible | 在下一步先淡入，然後淡出 | +| fade-in-then-semi-out | 先淡入，然後在下一步淡到50% | +| grow | 放大 | +| semi-fade-out | 淡出到50% | +| shrink | 縮小 | +| strike | 中劃線 | +| highlight-red | 文本變紅 | +| highlight-green | 文本變綠 | +| highlight-blue | 文本變藍 | | highlight-current-red | 文本變紅，然後在下一步恢復原樣 | | highlight-current-green | 文本變綠，然後在下一步恢復原樣 | | highlight-current-blue | 文本變藍，然後在下一步恢復原樣 | + {.key-value} ## 自定義片段 4.5.0 @@ -72,6 +74,7 @@ layout: default

三

``` +