使用org.doctales.reveal将Reveal.js属性分配给DITA元素

问题描述 投票：0回答：1

我正在使用org.doctales.reveal DITA Open Toolkit插件。我理解如何在DITA主题中的元素上使用outputclass属性将该元素转换为生成的reveal.js html文件中的片段。

但是其他reveal.js属性呢，比如data-autoslide呢？我想将该属性应用于DITA主题中的元素，以便我可以控制显示在reveal.js幻灯片上的片段的时间。有没有办法做到这一点？

要清楚，我不是在询问args.reveal.autoslide插件参数。我已将该设置应用于所有幻灯片和片段。相反，我想控制单个片段的时间。

到目前为止我做了什么：

我有以下DITA XML主题：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "task.dtd">
<task id="t_Portal-Dashboard" xtrf="t_Portal-Dashboard">
    <title>Viewing The Client Portal Dashboard</title>
    <shortdesc>The dashboard provides a summary of activities.</shortdesc>

    <taskbody>
        <context id="context_fnf_xhv_5cb">The dashboard provides a summary of activities.</context>
        <steps>
            <step outputclass="fragment fade-in">
                <cmd>If the dashboard is not displayed, click <uicontrol>Dashboard</uicontrol>.</cmd>
                <stepresult>
                    <image placement="break" href="i_Portal-Dashboard-Tab-183.png" id="image_c52_1gf5_jwx" width="664px" height="190px"  outputclass="fragment fade-in"/>
                </stepresult>
            </step>
            <step outputclass="fragment fade-in">
                <cmd>View the summary of information.</cmd>
                <stepresult>
                    <image placement="break" href="i_Portal-Dashboard-Data-183.png" id="image_c52_1gs5_jwx" width="800px" height="520px"  outputclass="fragment fade-in"/>
                </stepresult>
            </step>
        </steps>
    </taskbody>
</task>

Doctales DITA-OT插件转换为以下HTML：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="copyright" content="(C) Copyright 2019" />
        <meta name="DC.rights.owner" content="(C) Copyright 2019" />
        <meta name="DC.Type" content="concept" />
        <meta name="DC.Title" content="Client Portal" />
        <meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
        <meta name="description" content="Information and configuration for activities is available from a web application portal." />
         <meta name="DC.Format" content="XHTML" />
        <link rel="stylesheet" type="text/css" href="commonltr.css" />
        <link rel="stylesheet" type="text/css" href="doctales.css" />
        <title>Client Portal</title>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
        <link rel="stylesheet" href="css/reveal.css" />
        <link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
        <link href="lib/css/zenburn.css" rel="stylesheet" />
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>
                    <h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
                    <div class="body taskbody">
                        <div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>

                        <ol class="ol steps">
                            <li class="li step stepexpand fragment fade-in">
                                <span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
                                <div class="itemgroup stepresult">

                                    <br />
                                    <img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
                                    <br />
                                </div>
                            </li>
                            <li class="li step stepexpand fragment fade-in">
                                <span class="ph cmd">View the summary of information.</span>
                                <div class="itemgroup stepresult">

                                    <br />
                                    <img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
                                    <br />
                                </div>
                            </li>
                        </ol>
                    </div>
                </section>
            </div>
        </div>
        <script src="lib/js/head.min.js" type="text/javascript"></script>
        <script src="js/reveal.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">

                Reveal.initialize({

                    // parallaxBackgroundHorizontal: null,
                    // parallaxBackgroundImage: '',
                    // parallaxBackgroundSize: '',
                    // parallaxBackgroundVertical: null,
                    autoSlide: 3000,
                    autoSlideStoppable: false,
                    backgroundTransition: 'default',
                    center: true,
                    controls: false,
                    controlsLayout: 'edges',
                    embedded: false,
                    fragments: true,
                    height: 700,
                    hideAddressBar: true,
                    history: true,
                    keyboard: true,
                    loop: false,
                    margin: 0.1,
                    maxScale: 1.5,
                    minScale: 0.2,
                    mouseWheel: false,
                    overview: true,
                    previewLinks: false,
                    progress: true,
                    rtl: false,
                    slideNumber: false,
                    theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                    touch: true,
                    transition: 'fade',
                    transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
                    transitionSpeed: 'default',
                    viewDistance: 3,
                    width: 960,

                    // Optional libraries used to extend on reveal.js
                    dependencies: [
                        { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                        { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                        { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                        { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                        { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                    ]
                });

                Reveal.addEventListener( 'slidechanged', function( event ) {
                    zoomSection();
                } );

                $( document ).ready(function() {});
            </script>
    </body>
</html>

但我希望插件读取（data-autoslide）属性，我已添加到DITA主题中，因此转换为类似以下HTML的内容：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="copyright" content="(C) Copyright 2019" />
        <meta name="DC.rights.owner" content="(C) Copyright 2019" />
        <meta name="DC.Type" content="concept" />
        <meta name="DC.Title" content="Client Portal" />
        <meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
        <meta name="description" content="Information and configuration for activities is available from a web application portal." />        <meta name="DC.Format" content="XHTML" />
        <meta name="DC.Identifier" content="concept_Client-Report-Portal" />
        <link rel="stylesheet" type="text/css" href="commonltr.css" />
        <link rel="stylesheet" type="text/css" href="doctales.css" />
        <title>Client Portal</title>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
        <link rel="stylesheet" href="css/reveal.css" />
        <link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
        <link href="lib/css/zenburn.css" rel="stylesheet" />
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>
    </head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>

                <div class="body taskbody">
                    <div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
                    <ol class="ol steps">
                        <li class="li step stepexpand fragment fade-in">
                            <span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
                            <div class="itemgroup stepresult">

                                <br />
                                <img class="image fragment fade-in"  data-autoslide="8000" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
                                <br />
                            </div>
                        </li>
                        <li class="li step stepexpand fragment fade-in" data-autoslide="1000">
                            <span class="ph cmd">View the summary of information.</span>
                            <div class="itemgroup stepresult">

                                <br />
                                <img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
                                <br />
                            </div>
                        </li>
                    </ol>
                </div>
            </section> 
        </div>
    </div>
    <script src="lib/js/head.min.js" type="text/javascript"></script>
    <script src="js/reveal.js" type="text/javascript"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">

            Reveal.initialize({

                // parallaxBackgroundHorizontal: null,
                // parallaxBackgroundImage: '',
                // parallaxBackgroundSize: '',
                // parallaxBackgroundVertical: null,
                autoSlide: 3000,
                autoSlideStoppable: false,
                backgroundTransition: 'default',
                center: true,
                controls: false,
                controlsLayout: 'edges',
                embedded: false,
                fragments: true,
                height: 700,
                hideAddressBar: true,
                history: true,
                keyboard: true,
                loop: false,
                margin: 0.1,
                maxScale: 1.5,
                minScale: 0.2,
                mouseWheel: false,
                overview: true,
                previewLinks: false,
                progress: true,
                rtl: false,
                slideNumber: false,
                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                touch: true,
                transition: 'fade',
                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
                transitionSpeed: 'default',
                viewDistance: 3,
                width: 960,

                // Optional libraries used to extend on reveal.js
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });

            Reveal.addEventListener( 'slidechanged', function( event ) {
                zoomSection();
            } );

            $( document ).ready(function() {});
        </script>
    </body>
</html>
reveal.js dita
1个回答
1
投票

欢迎来到Stackoverflow。您可以在documentation中找到所有当前支持的参数的列表。如果您想要请求由reveal.js支持但不直接通过插件支持的新参数，请在Github上提出问题。如文档中所述，通过设置args.reveal.autoslide属性来支持autoslide功能。欢迎您加入我们的Slack小组讨论任何插件和其他事情。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.