Dieser Artikel stellt vor, wie man reveal.js in der JavaScript-Programmiersprache verwendet, einschließlich wie man Folien in HTML mit Beispielprogrammen erstellt.
Über reveal.js:
hakimel/reveal.js: The HTML Presentation Framework
Einfache reveal.js-Installation:
git clone https://github.com/hakimel/reveal.js.git ; cd reveal.js ; npm install ;
npm start -- --port=8001Damit gibt es eine index.html-Datei im reveal.js-Verzeichnis, das mit git geklont wurde, und Sie können bestätigen, dass es funktioniert, indem Sie es im Browser ansehen.
Dann platzieren Sie im selben Verzeichnis eine Datei wie english.html, fügen das folgende HTML ein, und Sie haben eine Original-Lernkarte erstellt!
Ich habe eine Demo vorbereitet.
Lernkarte.JS - reveal.js – The HTML Presentation Framework Framework
Sie können Lernkarten wie oben erstellen, indem Sie Wörter basierend auf dem folgenden Beispiel-HTML schreiben.
Beispiel-HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lernkarte.JS - reveal.js – The HTML Presentation Framework Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<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">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<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>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
# Lernkarte.js
### Reveal.js - The HTML Presentation
<p>
<small>Created by [Hakim El Hattab](http://hakim.se) and [contributors](https://github.com/hakimel/reveal.js/graphs/contributors)</small>
</p>
</section>
<section>
<section id="fragments">
## wrongly
<p class="fragment fade-down">[Adv] unrechtmäßig</p>
<input onclick="responsiveVoice.speak('wrongly');" type='button' value='🔊 Play' />
</section>
<section id="">
<ul>
<li> <a href='https://eow.alc.co.jp/search?q=wrongly'>Mit eow.alc.co.jp suchen</a> </li>
<li> <a href='https://dictionary.cambridge.org/dictionary/english/wrongly'>Mit dictionary.cambridge.org suchen</a> </li>
</ul>
</section>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ 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 },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>
Zusammenfassung
Dieser Artikel erklärte im Detail, wie man Folien mit reveal.js in der JavaScript-Programmiersprache erstellt. Hier ist ein Überblick über die wichtigsten Punkte und das Beispielprogramm:
-
Über reveal.js:
- reveal.js ist ein HTML-Präsentations-Framework, mit dem Sie schöne Präsentationen einfach mit HTML erstellen können.
- Quellcode und detaillierte Informationen sind auf GitHub verfügbar.
-
Einfache Installation:
- Einfache Installationsanweisungen für reveal.js werden bereitgestellt, Klonen mit git und Installation von Abhängigkeiten mit npm.
- Nach erfolgreicher Installation können Sie Präsentationen lokal anzeigen.
-
Folien erstellen:
- Um Folien zu erstellen, verwenden Sie HTML
<section>-Elemente. Jede<section>wird als Folie angezeigt. - Fügen Sie Titel und Inhalte zu jeder Folie hinzu. Audiowiedergabe wird auch über Schaltflächen unterstützt.
- Um Folien zu erstellen, verwenden Sie HTML
-
Bonus Stapelverarbeitung:
- Dieser Abschnitt zeigt ein Stapelverarbeitungsskript, das englische Wörter automatisch in Präsentations-HTML umwandelt.
- Das Skript liest eine Textdatei mit englischen Wörtern und ihren Bedeutungen und wandelt sie in Präsentationsfolien um.
- Mit diesem Skript können Sie automatisch große Mengen von Wörtern oder Inhalten zu Präsentationen hinzufügen.
Dies bietet eine detaillierte Erklärung, wie man einfach Präsentationsfolien mit reveal.js erstellt und Lernkarten online teilt. Stapelverarbeitungsskripte ermöglichen Inhaltsautomatisierung und effiziente Verarbeitung großer Datensätze.