-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·675 lines (584 loc) · 22.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Building a custom theme in Drupal 8</title>
<meta name="description" content="Building a custom theme in Drupal 8">
<meta name="author" content="Anne Tomasevich">
<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/savasian.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.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>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<!-- Put this in _base.scss:
.xdebug-var-dump,
.kint {
margin-top: 100px !important;
}
-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Building a custom theme in Drupal 8</h1>
<h3 class="fuschia">Based on the Classy base theme</h3><br>
<p class="centered">Presentation by Anne Tomasevich</p>
</section>
<section>
<h2>Introduction</h2>
<p class="centered">This is the part where I talk about myself</p>
<div class="durham">
<img width="300" src="images/durham.jpg" alt="Durham skyline by Jessie Gladin Kramer">
<p><small>Photo by <a href="http://jgkphotography.com/index2.php#/home/">Jessie Gladdek</a></small></p>
</div>
<div class="savas">
<img class="no-border" width="150" height="283" src="images/owl.png" alt="Savas owl logo"><br>
<a href="http://savaslabs.com">savaslabs.com</a><br>
<a href="https://twitter.com/Savas_Labs">@Savas_Labs</a>
</div>
</section>
<section>
<h2>Agenda</h2>
<ul>
<li>What's changing?</li>
<li>Let's make a theme</li>
<li>Twig basics and debugging</li>
</ul>
</section>
<section>
<h2>Let's start from the very beginning</h2>
<h3 class="orange">What is theming?</h3>
<blockquote>Themes allow you to change the look and feel of your Drupal site.</blockquote>
<p class="centered"> - Someone who's good at being very general</p>
</section>
<section>
<h2>Why would you use Drupal 8 now?!</h2>
<a href="https://drupalreleasedate.com/">And when is it coming out?</a>
</section>
<!-- SECTION 1: WHAT'S CHANGING -->
<!-- 1A: What's new in Drupal 8 -->
<section>
<section>
<h2>What's changing?</h2>
<p class="centered"><small>...and how do I, a person who probably doesn't like change, cope with these changes...</small></p>
</section>
<section>
<h2>What's new in Drupal 8?</h2>
<ul>
<li>Twig, a template engine by SensioLabs</li>
<li>Classy, a new base theme</li>
<li><code>template.php</code> becomes <code>[theme-name].theme</code>. (Dear Drupal gods, can we please have <code>theme.php</code>?)</li>
</ul>
<aside class="notes">
Twig is replacing PHPTemplate is the template engine, meaning no more PHP inside template files.</br>
Classy<br>
Maybe we’ll finally get theme.php in Drupal 9?
</aside>
</section>
<section>
<h2>What's new in Drupal 8?</h2>
<ul>
<li>Responsive design elements are included by default</li>
<li>Breakpoints can be set and used across modules and themes</li>
</ul>
</section>
<section>
<h2>What's new in Drupal 8?</h2>
<h3>Look at all the pretty things<br> we get to use now!!</h3>
<ul class="compact-list">
<li>HTML5</li>
<li>CSS3</li>
<li>Modern jQuery libraries</li>
<li>SMACSS</li>
<li>BEM</li>
<li>Standardized breakpoints</li>
</ul>
<img class="its-happening" width="312" height="213" src="images/its-happening.gif" alt="Ron Paul gif">
</section>
<section>
<h2>What's new in Drupal 8?</h2>
<ul>
<li>Support for IE8 and below is dropped meaning the use of jQuery 2.0, HTML5, and CSS3 (including pseudo selectors) are now supported</li>
<li>CSS:
<ul>
<li>Far fewer IDs are used</li>
<li>CSS file structure now uses <a href="https://smacss.com/">SMACSS</a></li>
<li>Default class names follow the <a href="https://en.bem.info/">BEM</a> format</li>
</ul>
</li>
<li>CSS and JS files are attached to pages differently</li>
</ul>
</section>
<section>
<h2>What's new in Drupal 8?</h2>
<p>For a more comprehensive list, visit Drupal's <a href="https://www.drupal.org/list-changes/published/drupal?keywords_description=&to_branch=&version=&created_op=%3E%3D&created%5Bvalue%5D=&created%5Bmin%5D=&created%5Bmax%5D=&impacts%5B%5D=3">change log.</a></p>
</section>
</section>
<!-- End 1A -->
<!-- 1B: Pros of changes -->
<section>
<section>
<h2>Why all the changes?</h2>
<h3>Accessibility to non-Drupalers</h3>
<ul>
<li>Fewer Drupal-specific conventions and more popular, well-documented frameworks (such as Twig), meaning non-Drupalers can jump in much more quickly.</li>
<li>D8 themers don’t need to know PHP to whip up a theme.*</li>
</ul>
<p><small>* I mean kinda ¯\_(ツ)_/¯</small></p>
</section>
<section>
<h2>Why all the changes?</h2>
<h3>Security</h3>
<ul>
<li>Text is automatically escaped in Twig, meaning a lower chance of XSS attacks.</li>
<li>Template files are more secure since they no longer contain PHP code.</li>
</ul>
<pre><code><?php db_query('DROP TABLE {users}'); ?></code></pre>
<p class="centered"><small>Scary example courtesy of sqndr at <a href="http://d8.sqndr.com/">d8.sqndr.com.</a></small></p>
</section>
<section>
<h2>Why all the changes?</h2>
<h3>Current frameworks and tools</h3>
<ul>
<li>Separation of logic from appearance = more modular (reusable) code</li>
<li>More semantic CSS class names = leaner CSS and a more readable DOM</li>
<li>A general trend towards more extendable, modular, well-organized, better-performing code</li>
</ul>
</section>
</section>
<!-- End 1B -->
<!-- 1C: Cons of changes -->
<section>
<section>
<h2>Any disadvantages?</h2>
<ol>
<li>Many contributed themes and modules don't having their 8.x branches ready.</li>
</ol>
<p>A fun note on the 8.x branch of a popular contrib theme:</p>
<blockquote>This is a development branch. Please note that this branch is probably severely broken. It is strongly recommended to wait before using this branch or even creating issues regarding it.</blockquote>
</section>
<section>
<h2>Any disadvantages?</h2>
<ol start=2>
<li>Serious lack of documentation online</li>
</ol><br><br>
<p>Of the documentation that DOES exist, much of it is:</p>
<ul>
<li>Outdated, and marked as such.</li>
<li>Outdated, and NOT marked as such.</li>
</ul>
</section>
</section>
<!-- End 1C -->
<!-- END SECTION 1 -->
<!-- SECTION 2: BUILDING A CUSTOM THEME -->
<section>
<h2>Let's build this thing</h2>
</section>
<section>
<h2>What am I totally glossing over?</h2>
<ul>
<li><strike>template.php</strike> *.theme</li>
<li>Grid framework and CSS architecture</li>
<li>Probably a lot of other things</li>
</ul>
</section>
<section>
<h2>Create a theme folder</h2>
<img width="800" src="images/theme-folder-location.png" alt="Screenshot of theme folder location">
<ul>
<li>Drupal core now resides in its own folder. Contributed and custom modules and themes are in the <code>modules</code> and <code>themes</code> folders, respectively.</li>
<li>Don't forget to create a <code>custom</code> folder for your custom theme!</li>
</ul>
</section>
<section>
<h2>Create a .info.yml file</h2>
<pre><code data-trim>
# mappy.info.yml
name: Mappy
type: theme
description: 'D8 Theme for a basic leaflet site.'
core: 8.x
base theme: classy
libraries:
- mappy/global-styling
- mappy/leaflet
regions:
navbar: 'Top Navigation Bar'
content: Content # required!
sidebar: 'Sidebar'
footer: 'Footer'
</code></pre>
<p class="centered"><code>[theme-name].info</code> becomes <code>[theme-name].info.yml</code></p>
</section>
<section>
<h2>Dot info dot what?</h2>
<ul>
<li>YAML is a data serialization language.</li>
<li>Key-value pairs.</li>
<li>Check out <a href="http://symfony.com/doc/current/components/yaml/yaml_format.html">Symfony's excellent writeup</a>
on YAML syntax before getting started.</li>
<li>And mind your whitespace!</li>
</ul>
</section>
<section>
<h2>Create a .info.yml file</h2>
<pre><code data-trim>
# mappy.info.yml
name: Mappy
type: theme
description: 'D8 Theme for a basic leaflet site.'
core: 8.x
regions:
navbar: 'Top Navigation Bar'
content: Content # required!
sidebar: 'Sidebar'
footer: 'Footer'
</code></pre>
<p class="centered">This looks familiar, right?</p>
</section>
<section>
<h2>Classy, a new base theme</h2>
<pre><code data-trim>
# mappy.info.yml
base theme: classy
</code></pre>
<ul>
<li>In D8, default classes are stripped from Drupal core and moved into the base theme Classy.</li>
<li>To avoid these default classes, simply don't base your theme on Classy.</li>
<li>But we want them because BEM is awesome! Check out <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/">this awesome introduction.</a></li>
</ul>
</section>
<section>
<h2>Libraries</h2>
<pre><code data-trim>
# mappy.info.yml
libraries:
- mappy/global-styling
- mappy/leaflet
</code></pre>
<ul>
<li>In D8, assets can be added in a few different ways: globally, per-template, per-page, and more.</li>
<li>All libraries must be defined in your <code>*.libraries.yml</code> file.</li>
</ul>
</section>
<section>
<h2>Create a .libraries.yml file</h2>
<pre><code data-trim>
# mappy.libraries.yml
global-styling:
css:
theme:
css/styles.css: {}
leaflet:
css:
theme:
css/leaflet.css: {}
js:
js/leaflet.js: {}
js/map.js: {}
dependencies:
- core/jquery
</code></pre>
<p>Note that jQuery is listed as a dependency of the Leaflet library. Since jQuery is no longer loaded automatically on every page, it must be explicitly required.</p>
</section>
<section>
<h2>Adding assets to your site</h2>
<pre><code data-trim>
# mappy.info.yml
libraries:
- mappy/global-styling
- mappy/leaflet
</code></pre>
<ul>
<li>Since this is a small site and we need our libraries on every page, we're adding them globally.</li>
<li>Visit <a href="https://www.drupal.org/developing/api/8/assets">drupal.org</a> for more information on methods for adding assets.</li>
</ul>
</section>
<section>
<h2>Create a .breakpoints.yml file</h2>
<pre><code data-trim>
# mappy.breakpoints.yml
mappy.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
weight: 2
multipliers:
- 1x
mappy.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
- 1x
mappy.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 0
multipliers:
- 1x
</code></pre>
<p>Ours is <strike>stolen</strike> adapted from the Bartik theme.</p>
</section>
<section>
<h2>Breakpoints</h2>
<ul>
<li>Once you add a <code>.breakpoints.yml</code> file (and uninstall and reinstall your theme), the breakpoints you've set will be exposed in the admin UI.</li>
<li>These breakpoints can be used across various modules.</li>
</ul>
</section>
<section>
<h2>With these files set up, we now have a working custom theme!</h2>
<img width="391" height="247" src="images/stew.jpg" alt="Baby, you got a stew goin'!">
</section>
<!-- END SECTION 2 -->
<!-- SECTION 3: TWIG AND TWIG DEBUGGING -->
<section>
<h2>Template files</h2>
<ul>
<li>In our theme's current state, we're using Classy's default template files.</li>
<li>If we want to override them, it's time to learn some Twig.</li>
<div class="centered"><img width="291" height="299" src="images/will-smith.png" alt="Young Will Smith"></div>
<p class="centered caption"><small>If one more person makes a "Gettin' Twiggy with it" joke...</small></p>
</ul>
</section>
<section>
<h2>Intro to Twig</h2>
<ul>
<li><a href="http://twig.sensiolabs.org/doc/templates.html">Twig</a> is a template engine with syntax similar to Django, Jinja, and Liquid.</li>
<li>It simplifies template creation with clean syntax and useful built-in filters, functions, and tags.</li>
<li>In a Drupal template file (now with the extention .html.twig), anything between curly braces is Twig.</li>
</ul>
</section>
<section>
<h2>Twig delimiters</h2>
<p><code>{{ These }}</code> are for printing content, either explicitly or via functions</p>
<p><code>{% These %}</code> are for executing statements</p>
<p><code>{# These #}</code> are for comments</p>
</ul>
</section>
<section>
<h2>Printing variables and regions</h2>
<p>In D7 we render content like so:</p>
<pre><code data-trim><?php print render($page['sidebar']); ?></code></pre>
<p>Printing variables in D8 is as easy as including them inside double curly braces:</p>
<pre><code class="jinja" data-trim>
{# In page--front.html.twig #}
{# Print the sidebar region. #}
{{ page.sidebar }}
</code></pre>
</section>
<section>
<h2>Printing variables with special characters</h2>
<p>If a variable name contains special characters, use Twig's subscript syntax (which will look familiar to seasoned Drupalers).</p>
<pre><code class="jinja" data-trim>
{# In page--front.html.twig #}
{# Print the page type. #}
{{ page['#type'] }}
</code></pre>
<p>This will come in handy more during debugging.</p>
</section>
<section>
<h2>Filters</h2>
<p>Twig comes with many <a href="http://twig.sensiolabs.org/doc/filters/index.html">built-in filters</a> that variables are passed to via the pipe character.</p>
<p>Here's the date filter:</p>
<pre><code class="jinja" data-trim>
{# Format the post date. #}
{{ post.published|date("Y-m-d") }}
</code></pre>
</section>
<section>
<h2>Drupal-specific filters</h2>
<p>Check them out <a href="https://www.drupal.org/node/2357633">here.</a></p>
<p>Remember our old friend t()?</p>
<pre><code class="jinja" data-trim>
{# Run an ARIA label through t() #}
<nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
</code></pre>
</section>
<section>
<h2>Functions</h2>
<p>Twig also comes with various <a href="http://twig.sensiolabs.org/doc/functions/index.html">functions</a> that can be used in double curly braces.</p>
<p>Here's the cycle function doing some very important work:</p>
<pre><code class="jinja" data-trim>
{% set fruits = ['apple', 'orange', 'banana'] %}
{% for i in 0..10 %}
{{ cycle(fruits, i) }}
{% endfor %}
</code></pre>
</section>
<section>
<h2>Tags</h2>
<p>Used for control flow and <a href="http://twig.sensiolabs.org/doc/tags/set.html">other fun things.</a></p>
<pre><code class="jinja" data-trim>
{# From Bartik's page.html.twig #}
{# If there are tabs, output them. #}
{% if tabs %}
<nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
{{ tabs }}
</nav>
{% endif %}
</code></pre>
<p>In template files, we’ll use the <code>if</code> statement quite often.</p>
</section>
<section>
<h2>Get psyched</h2>
<p class="centered">Make sure you check out the <a href="https://www.drupal.org/node/1823416">Twig coding standards!</a></p>
<div class="centered"><img width="251" height="373" src="images/dries.png" alt="Dries doge meme"></div>
</section>
<section>
<h2>Twig debugging</h2>
<p>To enable debug mode and turn off caching, we need to do 3 things:</p>
<ol>
<li>Turn on Twig’s debug mode</li>
<li>Turn on Twig auto reload, meaning that Twig templates are automatically recompiled when the source code is changed</li>
<li>Disable Drupal’s render cache</li>
</ol>
<p>You do NOT need turn off Twig caching - turning on auto reload is enough.</p>
</section>
<section>
<h2>Use settings.local.php</h2>
<ol>
<li>Copy <code>sites/example.settings.local.php</code> to <code>sites/default</code> and rename to <code>settings.local.php</code>. Fill out your local database settings.</li>
<li>Uncomment the following at the bottom of <code>sites/default/settings.php</code>:</li>
</ul>
<pre><code class="php" data-trim>
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}
</code></pre>
</section>
<section>
<h2>Turn on debug mode and auto reload</h2>
<p>Check out <code>settings.local.php</code></p>
<pre><code class="php" data-trim>
// In settings.local.php
/**
* Enable local development services.
*/
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';
</code></pre>
<p>This tells us to head over to <code>development.services.yml</code>.</p>
<pre><code class="yml" data-trim>
// In sites/development.services.yml
parameters:
twig.config:
debug: true
auto-reload: true
</code></pre>
</section>
<section>
<h2>Turn off Drupal's render cache</h2>
<p>Just kidding, you already did.</p>
<pre><code class="php" data-trim>
// In settings.local.php
/**
* Disable the render cache (this includes the page cache).
*
* This setting disables the render cache by using the Null cache back-end
* defined by the development.services.yml file above.
*
* Do not use this setting until after the site is installed.
*/
$settings['cache']['bins']['render'] = 'cache.backend.null';
</code></pre>
</section>
<section>
<h2>Debug away</h2>
<p>Now you can:</p>
<ul>
<li>View HTML comments in your browser’s code inspector with lots of helpful info:
<ul>
<li>Which theme hook is being implemented</li>
<li>Theme hook suggestions (i.e. how to override the current theme hook)</li>
<li>Which template file is being output.</li>
</ul>
<li>Make changes to your source code and simply refresh the page to see your changes rather than constantly rebuilding the cache.</li>
</ul>
</section>
<section>
<h2>dump( )</h2>
<p>With Twig debugging turned on, we can use the Twig function <code>dump()</code>.</p>
<pre><code class="jinja" data-trim>
{# In a template file #}
{# Print out all variables on the page. #}
{{ dump() }}
{# Print the page's base path. #}
{{ dump(base_path) }}
</code></pre>
</section>
<section>
<h2>Even better: kint( )</h2>
<p>Install the Devel and Devel Kint modules to use <code>kint()</code> in the same way, but with a pretty, expandable array instead.</p>
<pre><code class="jinja" data-trim>
{# In a template file #}
{# Print out all variables on the page. #}
{{ kint() }}
</code></pre>
</section>
<section>
<h2>Resources and further reading</h2>
<ul class="compact-list">
<li><a href="http://savaslabs.com/2015/06/10/d8-theming-basics.html">A brilliant blog post about D8 theming (Savas)</a></li>
<li><a href="http://d8.sqndr.com/">D8 theming guide (Sander)</a></li>
<li><a href="http://symfony.com/doc/current/components/yaml/yaml_format.html">YAML formatting (Symfony)</a></li>
<li><a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/">Intro to BEM (CSS Wizardry)</a></li>
<li><a href="https://www.drupal.org/developing/api/8/assets">Adding assets to pages (drupal.org)</a></li>
<li><a href="http://twig.sensiolabs.org/doc/templates.html">Twig documentation (Sensiolabs)</a></li>
<li><a href="https://www.drupal.org/node/2357633">Drupal-specific Twig filters (drupal.org)</a></li>
<li><a href="https://www.drupal.org/node/1823416">Twig coding standards (drupal.org)</a></li>
<li><a href="https://drupalize.me/blog/201405/lets-debug-twig-drupal-8">Twig debugging and devel (drupalize.me)</a></li>
</ul>
</section>
<section>
<h2>Questions?</h2>
<a href="http://savaslabs.com/"><img class="no-border" src="images/owl.png"></a>
<br /><a href="https://twitter.com/Savas_Labs">@Savas_Labs</a>
<br /><a href="http://savaslabs.com/">savaslabs.com</a>
<br />
</section>
<!-- END SECTION 3 -->
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
autoSlide: 0,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
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, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });
</script>
</body>
</html>