Obsidian 常用的插件

# reveal.js-menu A slideout menu plugin for [Reveal.js](https://github.com/hakimel/reveal.js) to quickly jump to any slide by title. Also optionally change the theme and set the default transition. [Check out the live demo](https://denehyg.github.io/reveal.js-menu) ## Installation ### Bower Download and install the package in your project: `bower install reveal.js-menu` Add the plugin to your presentation, as below. ```javascript <script src="bower_components/reveal.js-menu/menu.js"></script> <script> Reveal.initialize({ plugins: [ RevealMenu ] }); </script> ``` ### npm Download and install the package in your project: `npm install --save reveal.js-menu` Add the plugin to your presentation, as below. ```javascript <script src="node_modules/reveal.js-menu/menu.js"></script> <script> Reveal.initialize({ plugins: [ RevealMenu ] }); </script> ``` ### Manual Copy this repository into the plugins folder of your reveal.js presentation, ie `plugins/menu`. Add the plugin to the dependencies in your presentation, as below. ```javascript <script src="plugin/menu/menu.js"></script> <script> Reveal.initialize({ plugins: [ RevealMenu ] }); </script> ``` ## Configuration You can configure the menu for your presentation by providing a `menu` option in the reveal.js initialization options. Note that all config values are optional and will default as specified below. ```javascript Reveal.initialize({ // ... menu: { // Specifies which side of the presentation the menu will // be shown. Use 'left' or 'right'. side: 'left', // Specifies the width of the menu. // Can be one of the following: // 'normal', 'wide', 'third', 'half', 'full', or // any valid css length value width: 'normal', // Add slide numbers to the titles in the slide list. // Use 'true' or format string (same as reveal.js slide numbers) numbers: false, // Specifies which slide elements will be used for generating // the slide titles in the menu. The default selects the first // heading element found in the slide, but you can specify any // valid css selector and the text from the first matching // element will be used. // Note: that a section data-menu-title attribute or an element // with a menu-title class will take precedence over this option titleSelector: 'h1, h2, h3, h4, h5, h6', // If slides do not have a matching title, attempt to use the // start of the text content as the title instead useTextContentForMissingTitles: false, // Hide slides from the menu that do not have a title. // Set to 'true' to only list slides with titles. hideMissingTitles: false, // Adds markers to the slide titles to indicate the // progress through the presentation. Set to 'false' // to hide the markers. markers: true, // Specify custom panels to be included in the menu, by // providing an array of objects with 'title', 'icon' // properties, and either a 'src' or 'content' property. custom: false, // Specifies the themes that will be available in the themes // menu panel. Set to 'true' to show the themes menu panel // with the default themes list. Alternatively, provide an // array to specify the themes to make available in the // themes menu panel, for example... // // [ // { name: 'Black', theme: 'dist/theme/black.css' }, // { name: 'White', theme: 'dist/theme/white.css' }, // { name: 'League', theme: 'dist/theme/league.css' }, // { // name: 'Dark', // theme: 'lib/reveal.js/dist/theme/black.css', // highlightTheme: 'lib/reveal.js/plugin/highlight/monokai.css' // }, // { // name: 'Code: Zenburn', // highlightTheme: 'lib/reveal.js/plugin/highlight/zenburn.css' // } // ] // // Note: specifying highlightTheme without a theme will // change the code highlight theme while leaving the // presentation theme unchanged. themes: false, // Specifies the path to the default theme files. If your // presentation uses a different path to the standard reveal // layout then you need to provide this option, but only // when 'themes' is set to 'true'. If you provide your own // list of themes or 'themes' is set to 'false' the // 'themesPath' option is ignored. themesPath: 'dist/theme/', // Specifies if the transitions menu panel will be shown. // Set to 'true' to show the transitions menu panel with // the default transitions list. Alternatively, provide an // array to specify the transitions to make available in // the transitions panel, for example... // ['None', 'Fade', 'Slide'] transitions: false, // Adds a menu button to the slides to open the menu panel. // Set to 'false' to hide the button. openButton: true, // If 'true' allows the slide number in the presentation to // open the menu panel. The reveal.js slideNumber option must // be displayed for this to take effect openSlideNumber: false, // If true allows the user to open and navigate the menu using // the keyboard. Standard keyboard interaction with reveal // will be disabled while the menu is open. keyboard: true, // Normally the menu will close on user actions such as // selecting a menu item, or clicking the presentation area. // If 'true', the sticky option will leave the menu open // until it is explicitly closed, that is, using the close // button or pressing the ESC or m key (when the keyboard // interaction option is enabled). sticky: false, // If 'true' standard menu items will be automatically opened // when navigating using the keyboard. Note: this only takes // effect when both the 'keyboard' and 'sticky' options are enabled. autoOpen: true, // If 'true' the menu will not be created until it is explicitly // requested by calling RevealMenu.init(). Note this will delay // the creation of all menu panels, including custom panels, and // the menu button. delayInit: false, // If 'true' the menu will be shown when the menu is initialised. openOnInit: false, // By default the menu will load it's own font-awesome library // icons. If your presentation needs to load a different // font-awesome library the 'loadIcons' option can be set to false // and the menu will not attempt to load the font-awesome library. loadIcons: true } }); ``` ### Themes Stylesheet If you are using the themes panel you need to ensure the theme stylesheet in the presentation uses the `id="theme"` attribute. For example... ```html <link rel="stylesheet" href="css/theme/black.css" id="theme" /> ``` If your themes configuration includes code highlight themes you need to ensure the highlights theme stylesheet in the presentation uses the `id="highlight-theme"` attribute. For example... ```html <link rel="stylesheet" href="plugin/highlight/zenburn.css" id="highlight-theme" /> ``` ## Slide Titles The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation, using the following rules... ###### 1. The section's `data-menu-title` attribute. If the slide's section element contains a `data-menu-title` attribute this will be used for the slide title in the menu. For example... ```html <section data-menu-title="Custom Menu Title"> <h1>Title</h1> <p>...</p> </section> ``` ###### 2. Any element with the class `menu-title`. If the slide's section contains an element with the class `menu-title` then the element's text will be used for the title. The first such element found will be used if there are more than one. Note the element need not be displayed to be used. For example... ```html <section> <h1>Title</h1> <span class="menu-title" style="display: none">Custom Menu Title</span> <p>...</p> </section> ``