Я использую плагин org.doctales.reveal DITA Open Toolkit.Я понимаю, как использовать атрибут outputclass для элемента в теме DITA, чтобы преобразовать этот элемент во фрагмент в результирующем HTML-файле reve.js.
Но как насчет других атрибутовкартюрн.js, таких как data-autoslide?Я хочу применить этот атрибут к элементу в теме DITA, чтобы я мог контролировать время отображения фрагментов на слайде reve.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>
The 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>