5.4/view/templates/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  14
  15
  16
  17         <title>Templates - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#templates" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Templates
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 598
 599
 600         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
 601
 602       <label class="md-nav__link" for="__nav_3">
 603         Languages, Templates & CSS
 604         <span class="md-nav__icon md-icon"></span>
 605       </label>
 606       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 607         <label class="md-nav__title" for="__nav_3">
 608           <span class="md-nav__icon md-icon"></span>
 609           Languages, Templates & CSS
 610         </label>
 611         <ul class="md-nav__list" data-md-scrollfix>
 612
 613
 614
 615
 616
 617     <li class="md-nav__item">
 618       <a href="../languages/" class="md-nav__link">
 619         Languages
 620       </a>
 621     </li>
 622
 623
 624
 625
 626
 627
 628
 629
 630
 631     <li class="md-nav__item md-nav__item--active">
 632
 633       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 634
 635
 636
 637
 638
 639         <label class="md-nav__link md-nav__link--active" for="__toc">
 640           Templates
 641           <span class="md-nav__icon md-icon"></span>
 642         </label>
 643
 644       <a href="./" class="md-nav__link md-nav__link--active">
 645         Templates
 646       </a>
 647
 648
 649 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 650
 651
 652
 653
 654
 655
 656     <label class="md-nav__title" for="__toc">
 657       <span class="md-nav__icon md-icon"></span>
 658       Table of contents
 659     </label>
 660     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 661
 662         <li class="md-nav__item">
 663   <a href="#template-types-and-conventions" class="md-nav__link">
 664     Template Types and Conventions
 665   </a>
 666
 667 </li>
 668
 669         <li class="md-nav__item">
 670   <a href="#installing-templates" class="md-nav__link">
 671     Installing Templates
 672   </a>
 673
 674 </li>
 675
 676         <li class="md-nav__item">
 677   <a href="#base-templates" class="md-nav__link">
 678     Base Templates
 679   </a>
 680
 681     <nav class="md-nav" aria-label="Base Templates">
 682       <ul class="md-nav__list">
 683
 684           <li class="md-nav__item">
 685   <a href="#frontend" class="md-nav__link">
 686     Frontend
 687   </a>
 688
 689 </li>
 690
 691           <li class="md-nav__item">
 692   <a href="#backend" class="md-nav__link">
 693     Backend
 694   </a>
 695
 696 </li>
 697
 698       </ul>
 699     </nav>
 700
 701 </li>
 702
 703         <li class="md-nav__item">
 704   <a href="#common-template-components" class="md-nav__link">
 705     Common Template Components
 706   </a>
 707
 708     <nav class="md-nav" aria-label="Common Template Components">
 709       <ul class="md-nav__list">
 710
 711           <li class="md-nav__item">
 712   <a href="#forms" class="md-nav__link">
 713     Forms
 714   </a>
 715
 716 </li>
 717
 718           <li class="md-nav__item">
 719   <a href="#tab-menus" class="md-nav__link">
 720     Tab Menus
 721   </a>
 722
 723 </li>
 724
 725       </ul>
 726     </nav>
 727
 728 </li>
 729
 730         <li class="md-nav__item">
 731   <a href="#template-scripting" class="md-nav__link">
 732     Template Scripting
 733   </a>
 734
 735     <nav class="md-nav" aria-label="Template Scripting">
 736       <ul class="md-nav__list">
 737
 738           <li class="md-nav__item">
 739   <a href="#template-variables" class="md-nav__link">
 740     Template Variables
 741   </a>
 742
 743     <nav class="md-nav" aria-label="Template Variables">
 744       <ul class="md-nav__list">
 745
 746           <li class="md-nav__item">
 747   <a href="#modifiers" class="md-nav__link">
 748     Modifiers
 749   </a>
 750
 751 </li>
 752
 753           <li class="md-nav__item">
 754   <a href="#system-template-variable" class="md-nav__link">
 755     System Template Variable
 756   </a>
 757
 758 </li>
 759
 760       </ul>
 761     </nav>
 762
 763 </li>
 764
 765           <li class="md-nav__item">
 766   <a href="#comments" class="md-nav__link">
 767     Comments
 768   </a>
 769
 770 </li>
 771
 772           <li class="md-nav__item">
 773   <a href="#conditions" class="md-nav__link">
 774     Conditions
 775   </a>
 776
 777 </li>
 778
 779           <li class="md-nav__item">
 780   <a href="#foreach-loops" class="md-nav__link">
 781     Foreach Loops
 782   </a>
 783
 784 </li>
 785
 786           <li class="md-nav__item">
 787   <a href="#including-other-templates" class="md-nav__link">
 788     Including Other Templates
 789   </a>
 790
 791 </li>
 792
 793           <li class="md-nav__item">
 794   <a href="#template-plugins" class="md-nav__link">
 795     Template Plugins
 796   </a>
 797
 798 </li>
 799
 800       </ul>
 801     </nav>
 802
 803 </li>
 804
 805     </ul>
 806
 807 </nav>
 808
 809     </li>
 810
 811
 812
 813
 814
 815
 816
 817     <li class="md-nav__item">
 818       <a href="../template-plugins/" class="md-nav__link">
 819         Template Plugins
 820       </a>
 821     </li>
 822
 823
 824
 825
 826
 827
 828
 829     <li class="md-nav__item">
 830       <a href="../css/" class="md-nav__link">
 831         CSS
 832       </a>
 833     </li>
 834
 835
 836
 837         </ul>
 838       </nav>
 839     </li>
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851     <li class="md-nav__item md-nav__item--nested">
 852
 853
 854         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 855
 856       <label class="md-nav__link" for="__nav_4">
 857         TypeScript and JavaScript API
 858         <span class="md-nav__icon md-icon"></span>
 859       </label>
 860       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 861         <label class="md-nav__title" for="__nav_4">
 862           <span class="md-nav__icon md-icon"></span>
 863           TypeScript and JavaScript API
 864         </label>
 865         <ul class="md-nav__list" data-md-scrollfix>
 866
 867
 868
 869
 870
 871     <li class="md-nav__item">
 872       <a href="../../javascript/general-usage/" class="md-nav__link">
 873         General Usage
 874       </a>
 875     </li>
 876
 877
 878
 879
 880
 881
 882
 883     <li class="md-nav__item">
 884       <a href="../../javascript/typescript/" class="md-nav__link">
 885         TypeScript
 886       </a>
 887     </li>
 888
 889
 890
 891
 892
 893
 894
 895
 896     <li class="md-nav__item md-nav__item--nested">
 897
 898
 899         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 900
 901       <label class="md-nav__link" for="__nav_4_3">
 902         New API
 903         <span class="md-nav__icon md-icon"></span>
 904       </label>
 905       <nav class="md-nav" aria-label="New API" data-md-level="2">
 906         <label class="md-nav__title" for="__nav_4_3">
 907           <span class="md-nav__icon md-icon"></span>
 908           New API
 909         </label>
 910         <ul class="md-nav__list" data-md-scrollfix>
 911
 912
 913
 914
 915
 916     <li class="md-nav__item">
 917       <a href="../../javascript/new-api_writing-a-module/" class="md-nav__link">
 918         Writing a module
 919       </a>
 920     </li>
 921
 922
 923
 924
 925
 926
 927
 928     <li class="md-nav__item">
 929       <a href="../../javascript/new-api_data-structures/" class="md-nav__link">
 930         Data Structures
 931       </a>
 932     </li>
 933
 934
 935
 936
 937
 938
 939
 940     <li class="md-nav__item">
 941       <a href="../../javascript/new-api_core/" class="md-nav__link">
 942         Core Functions
 943       </a>
 944     </li>
 945
 946
 947
 948
 949
 950
 951
 952     <li class="md-nav__item">
 953       <a href="../../javascript/new-api_dom/" class="md-nav__link">
 954         DOM
 955       </a>
 956     </li>
 957
 958
 959
 960
 961
 962
 963
 964     <li class="md-nav__item">
 965       <a href="../../javascript/new-api_events/" class="md-nav__link">
 966         Event Handling
 967       </a>
 968     </li>
 969
 970
 971
 972
 973
 974
 975
 976     <li class="md-nav__item">
 977       <a href="../../javascript/new-api_ajax/" class="md-nav__link">
 978         Ajax
 979       </a>
 980     </li>
 981
 982
 983
 984
 985
 986
 987
 988     <li class="md-nav__item">
 989       <a href="../../javascript/new-api_dialogs/" class="md-nav__link">
 990         Dialogs
 991       </a>
 992     </li>
 993
 994
 995
 996
 997
 998
 999
1000     <li class="md-nav__item">
1001       <a href="../../javascript/new-api_browser/" class="md-nav__link">
1002         Browser and Screen Sizes
1003       </a>
1004     </li>
1005
1006
1007
1008
1009
1010
1011
1012     <li class="md-nav__item">
1013       <a href="../../javascript/new-api_ui/" class="md-nav__link">
1014         User Interface
1015       </a>
1016     </li>
1017
1018
1019
1020         </ul>
1021       </nav>
1022     </li>
1023
1024
1025
1026
1027
1028
1029
1030     <li class="md-nav__item">
1031       <a href="../../javascript/legacy-api/" class="md-nav__link">
1032         Legacy API
1033       </a>
1034     </li>
1035
1036
1037
1038
1039
1040
1041
1042     <li class="md-nav__item">
1043       <a href="../../javascript/helper-functions/" class="md-nav__link">
1044         Helper Functions
1045       </a>
1046     </li>
1047
1048
1049
1050
1051
1052
1053
1054     <li class="md-nav__item">
1055       <a href="../../javascript/code-snippets/" class="md-nav__link">
1056         Code Snippets
1057       </a>
1058     </li>
1059
1060
1061
1062         </ul>
1063       </nav>
1064     </li>
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076     <li class="md-nav__item md-nav__item--nested">
1077
1078
1079         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1080
1081       <label class="md-nav__link" for="__nav_5">
1082         Package Components
1083         <span class="md-nav__icon md-icon"></span>
1084       </label>
1085       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1086         <label class="md-nav__title" for="__nav_5">
1087           <span class="md-nav__icon md-icon"></span>
1088           Package Components
1089         </label>
1090         <ul class="md-nav__list" data-md-scrollfix>
1091
1092
1093
1094
1095
1096     <li class="md-nav__item">
1097       <a href="../../package/package-xml/" class="md-nav__link">
1098         package.xml
1099       </a>
1100     </li>
1101
1102
1103
1104
1105
1106
1107
1108
1109     <li class="md-nav__item md-nav__item--nested">
1110
1111
1112         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1113
1114       <label class="md-nav__link" for="__nav_5_2">
1115         PIPs
1116         <span class="md-nav__icon md-icon"></span>
1117       </label>
1118       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1119         <label class="md-nav__title" for="__nav_5_2">
1120           <span class="md-nav__icon md-icon"></span>
1121           PIPs
1122         </label>
1123         <ul class="md-nav__list" data-md-scrollfix>
1124
1125
1126
1127
1128
1129     <li class="md-nav__item">
1130       <a href="../../package/pip/" class="md-nav__link">
1131         Overview
1132       </a>
1133     </li>
1134
1135
1136
1137
1138
1139
1140
1141     <li class="md-nav__item">
1142       <a href="../../package/pip/acl-option/" class="md-nav__link">
1143         aclOption
1144       </a>
1145     </li>
1146
1147
1148
1149
1150
1151
1152
1153     <li class="md-nav__item">
1154       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1155         acpMenu
1156       </a>
1157     </li>
1158
1159
1160
1161
1162
1163
1164
1165     <li class="md-nav__item">
1166       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1167         acpSearchProvider
1168       </a>
1169     </li>
1170
1171
1172
1173
1174
1175
1176
1177     <li class="md-nav__item">
1178       <a href="../../package/pip/acp-template/" class="md-nav__link">
1179         acpTemplate
1180       </a>
1181     </li>
1182
1183
1184
1185
1186
1187
1188
1189     <li class="md-nav__item">
1190       <a href="../../package/pip/bbcode/" class="md-nav__link">
1191         bbcode
1192       </a>
1193     </li>
1194
1195
1196
1197
1198
1199
1200
1201     <li class="md-nav__item">
1202       <a href="../../package/pip/box/" class="md-nav__link">
1203         box
1204       </a>
1205     </li>
1206
1207
1208
1209
1210
1211
1212
1213     <li class="md-nav__item">
1214       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1215         clipboardAction
1216       </a>
1217     </li>
1218
1219
1220
1221
1222
1223
1224
1225     <li class="md-nav__item">
1226       <a href="../../package/pip/core-object/" class="md-nav__link">
1227         coreObject
1228       </a>
1229     </li>
1230
1231
1232
1233
1234
1235
1236
1237     <li class="md-nav__item">
1238       <a href="../../package/pip/cronjob/" class="md-nav__link">
1239         cronjob
1240       </a>
1241     </li>
1242
1243
1244
1245
1246
1247
1248
1249     <li class="md-nav__item">
1250       <a href="../../package/pip/database/" class="md-nav__link">
1251         database
1252       </a>
1253     </li>
1254
1255
1256
1257
1258
1259
1260
1261     <li class="md-nav__item">
1262       <a href="../../package/pip/event-listener/" class="md-nav__link">
1263         eventListener
1264       </a>
1265     </li>
1266
1267
1268
1269
1270
1271
1272
1273     <li class="md-nav__item">
1274       <a href="../../package/pip/file/" class="md-nav__link">
1275         file
1276       </a>
1277     </li>
1278
1279
1280
1281
1282
1283
1284
1285     <li class="md-nav__item">
1286       <a href="../../package/pip/language/" class="md-nav__link">
1287         language
1288       </a>
1289     </li>
1290
1291
1292
1293
1294
1295
1296
1297     <li class="md-nav__item">
1298       <a href="../../package/pip/media-provider/" class="md-nav__link">
1299         mediaProvider
1300       </a>
1301     </li>
1302
1303
1304
1305
1306
1307
1308
1309     <li class="md-nav__item">
1310       <a href="../../package/pip/menu/" class="md-nav__link">
1311         menu
1312       </a>
1313     </li>
1314
1315
1316
1317
1318
1319
1320
1321     <li class="md-nav__item">
1322       <a href="../../package/pip/menu-item/" class="md-nav__link">
1323         menuItem
1324       </a>
1325     </li>
1326
1327
1328
1329
1330
1331
1332
1333     <li class="md-nav__item">
1334       <a href="../../package/pip/object-type/" class="md-nav__link">
1335         objectType
1336       </a>
1337     </li>
1338
1339
1340
1341
1342
1343
1344
1345     <li class="md-nav__item">
1346       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1347         objectTypeDefinition
1348       </a>
1349     </li>
1350
1351
1352
1353
1354
1355
1356
1357     <li class="md-nav__item">
1358       <a href="../../package/pip/option/" class="md-nav__link">
1359         option
1360       </a>
1361     </li>
1362
1363
1364
1365
1366
1367
1368
1369     <li class="md-nav__item">
1370       <a href="../../package/pip/page/" class="md-nav__link">
1371         page
1372       </a>
1373     </li>
1374
1375
1376
1377
1378
1379
1380
1381     <li class="md-nav__item">
1382       <a href="../../package/pip/pip/" class="md-nav__link">
1383         pip
1384       </a>
1385     </li>
1386
1387
1388
1389
1390
1391
1392
1393     <li class="md-nav__item">
1394       <a href="../../package/pip/script/" class="md-nav__link">
1395         script
1396       </a>
1397     </li>
1398
1399
1400
1401
1402
1403
1404
1405     <li class="md-nav__item">
1406       <a href="../../package/pip/smiley/" class="md-nav__link">
1407         smiley
1408       </a>
1409     </li>
1410
1411
1412
1413
1414
1415
1416
1417     <li class="md-nav__item">
1418       <a href="../../package/pip/sql/" class="md-nav__link">
1419         sql
1420       </a>
1421     </li>
1422
1423
1424
1425
1426
1427
1428
1429     <li class="md-nav__item">
1430       <a href="../../package/pip/style/" class="md-nav__link">
1431         style
1432       </a>
1433     </li>
1434
1435
1436
1437
1438
1439
1440
1441     <li class="md-nav__item">
1442       <a href="../../package/pip/template/" class="md-nav__link">
1443         template
1444       </a>
1445     </li>
1446
1447
1448
1449
1450
1451
1452
1453     <li class="md-nav__item">
1454       <a href="../../package/pip/template-listener/" class="md-nav__link">
1455         templateListener
1456       </a>
1457     </li>
1458
1459
1460
1461
1462
1463
1464
1465     <li class="md-nav__item">
1466       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1467         userGroupOption
1468       </a>
1469     </li>
1470
1471
1472
1473
1474
1475
1476
1477     <li class="md-nav__item">
1478       <a href="../../package/pip/user-menu/" class="md-nav__link">
1479         userMenu
1480       </a>
1481     </li>
1482
1483
1484
1485
1486
1487
1488
1489     <li class="md-nav__item">
1490       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1491         userNotificationEvent
1492       </a>
1493     </li>
1494
1495
1496
1497
1498
1499
1500
1501     <li class="md-nav__item">
1502       <a href="../../package/pip/user-option/" class="md-nav__link">
1503         userOption
1504       </a>
1505     </li>
1506
1507
1508
1509
1510
1511
1512
1513     <li class="md-nav__item">
1514       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1515         userProfileMenu
1516       </a>
1517     </li>
1518
1519
1520
1521         </ul>
1522       </nav>
1523     </li>
1524
1525
1526
1527
1528
1529
1530
1531     <li class="md-nav__item">
1532       <a href="../../package/database-php-api/" class="md-nav__link">
1533         Database PHP API
1534       </a>
1535     </li>
1536
1537
1538
1539         </ul>
1540       </nav>
1541     </li>
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553     <li class="md-nav__item md-nav__item--nested">
1554
1555
1556         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1557
1558       <label class="md-nav__link" for="__nav_6">
1559         Migration
1560         <span class="md-nav__icon md-icon"></span>
1561       </label>
1562       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1563         <label class="md-nav__title" for="__nav_6">
1564           <span class="md-nav__icon md-icon"></span>
1565           Migration
1566         </label>
1567         <ul class="md-nav__list" data-md-scrollfix>
1568
1569
1570
1571
1572
1573
1574     <li class="md-nav__item md-nav__item--nested">
1575
1576
1577         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1578
1579       <label class="md-nav__link" for="__nav_6_1">
1580         Migrating from WSC 5.3
1581         <span class="md-nav__icon md-icon"></span>
1582       </label>
1583       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1584         <label class="md-nav__title" for="__nav_6_1">
1585           <span class="md-nav__icon md-icon"></span>
1586           Migrating from WSC 5.3
1587         </label>
1588         <ul class="md-nav__list" data-md-scrollfix>
1589
1590
1591
1592
1593
1594     <li class="md-nav__item">
1595       <a href="../../migration/wsc53/php/" class="md-nav__link">
1596         PHP API
1597       </a>
1598     </li>
1599
1600
1601
1602
1603
1604
1605
1606     <li class="md-nav__item">
1607       <a href="../../migration/wsc53/session/" class="md-nav__link">
1608         Session Handling and Authentication
1609       </a>
1610     </li>
1611
1612
1613
1614
1615
1616
1617
1618     <li class="md-nav__item">
1619       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1620         TypeScript and JavaScript
1621       </a>
1622     </li>
1623
1624
1625
1626
1627
1628
1629
1630     <li class="md-nav__item">
1631       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1632         Templates
1633       </a>
1634     </li>
1635
1636
1637
1638
1639
1640
1641
1642     <li class="md-nav__item">
1643       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1644         Third Party Libraries
1645       </a>
1646     </li>
1647
1648
1649
1650         </ul>
1651       </nav>
1652     </li>
1653
1654
1655
1656
1657
1658
1659
1660
1661     <li class="md-nav__item md-nav__item--nested">
1662
1663
1664         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1665
1666       <label class="md-nav__link" for="__nav_6_2">
1667         Migrating from WSC 5.2
1668         <span class="md-nav__icon md-icon"></span>
1669       </label>
1670       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1671         <label class="md-nav__title" for="__nav_6_2">
1672           <span class="md-nav__icon md-icon"></span>
1673           Migrating from WSC 5.2
1674         </label>
1675         <ul class="md-nav__list" data-md-scrollfix>
1676
1677
1678
1679
1680
1681     <li class="md-nav__item">
1682       <a href="../../migration/wsc52/php/" class="md-nav__link">
1683         PHP API
1684       </a>
1685     </li>
1686
1687
1688
1689
1690
1691
1692
1693     <li class="md-nav__item">
1694       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1695         Templates and Languages
1696       </a>
1697     </li>
1698
1699
1700
1701
1702
1703
1704
1705     <li class="md-nav__item">
1706       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1707         Third Party Libraries
1708       </a>
1709     </li>
1710
1711
1712
1713         </ul>
1714       </nav>
1715     </li>
1716
1717
1718
1719
1720
1721
1722
1723
1724     <li class="md-nav__item md-nav__item--nested">
1725
1726
1727         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1728
1729       <label class="md-nav__link" for="__nav_6_3">
1730         Migrating from WSC 3.1
1731         <span class="md-nav__icon md-icon"></span>
1732       </label>
1733       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1734         <label class="md-nav__title" for="__nav_6_3">
1735           <span class="md-nav__icon md-icon"></span>
1736           Migrating from WSC 3.1
1737         </label>
1738         <ul class="md-nav__list" data-md-scrollfix>
1739
1740
1741
1742
1743
1744     <li class="md-nav__item">
1745       <a href="../../migration/wsc31/php/" class="md-nav__link">
1746         PHP API
1747       </a>
1748     </li>
1749
1750
1751
1752         </ul>
1753       </nav>
1754     </li>
1755
1756
1757
1758
1759
1760
1761
1762
1763     <li class="md-nav__item md-nav__item--nested">
1764
1765
1766         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1767
1768       <label class="md-nav__link" for="__nav_6_4">
1769         Migrating from WSC 3.0
1770         <span class="md-nav__icon md-icon"></span>
1771       </label>
1772       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1773         <label class="md-nav__title" for="__nav_6_4">
1774           <span class="md-nav__icon md-icon"></span>
1775           Migrating from WSC 3.0
1776         </label>
1777         <ul class="md-nav__list" data-md-scrollfix>
1778
1779
1780
1781
1782
1783     <li class="md-nav__item">
1784       <a href="../../migration/wsc30/php/" class="md-nav__link">
1785         PHP API
1786       </a>
1787     </li>
1788
1789
1790
1791
1792
1793
1794
1795     <li class="md-nav__item">
1796       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1797         JavaScript API
1798       </a>
1799     </li>
1800
1801
1802
1803
1804
1805
1806
1807     <li class="md-nav__item">
1808       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1809         Templates
1810       </a>
1811     </li>
1812
1813
1814
1815
1816
1817
1818
1819     <li class="md-nav__item">
1820       <a href="../../migration/wsc30/css/" class="md-nav__link">
1821         CSS
1822       </a>
1823     </li>
1824
1825
1826
1827
1828
1829
1830
1831     <li class="md-nav__item">
1832       <a href="../../migration/wsc30/package/" class="md-nav__link">
1833         Package Components
1834       </a>
1835     </li>
1836
1837
1838
1839         </ul>
1840       </nav>
1841     </li>
1842
1843
1844
1845
1846
1847
1848
1849
1850     <li class="md-nav__item md-nav__item--nested">
1851
1852
1853         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1854
1855       <label class="md-nav__link" for="__nav_6_5">
1856         Migrating from WCF 2.1
1857         <span class="md-nav__icon md-icon"></span>
1858       </label>
1859       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1860         <label class="md-nav__title" for="__nav_6_5">
1861           <span class="md-nav__icon md-icon"></span>
1862           Migrating from WCF 2.1
1863         </label>
1864         <ul class="md-nav__list" data-md-scrollfix>
1865
1866
1867
1868
1869
1870     <li class="md-nav__item">
1871       <a href="../../migration/wcf21/php/" class="md-nav__link">
1872         PHP API
1873       </a>
1874     </li>
1875
1876
1877
1878
1879
1880
1881
1882     <li class="md-nav__item">
1883       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1884         Templates
1885       </a>
1886     </li>
1887
1888
1889
1890
1891
1892
1893
1894     <li class="md-nav__item">
1895       <a href="../../migration/wcf21/css/" class="md-nav__link">
1896         CSS
1897       </a>
1898     </li>
1899
1900
1901
1902
1903
1904
1905
1906     <li class="md-nav__item">
1907       <a href="../../migration/wcf21/package/" class="md-nav__link">
1908         Package Components
1909       </a>
1910     </li>
1911
1912
1913
1914         </ul>
1915       </nav>
1916     </li>
1917
1918
1919
1920         </ul>
1921       </nav>
1922     </li>
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934     <li class="md-nav__item md-nav__item--nested">
1935
1936
1937         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1938
1939       <label class="md-nav__link" for="__nav_7">
1940         Tutorials
1941         <span class="md-nav__icon md-icon"></span>
1942       </label>
1943       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1944         <label class="md-nav__title" for="__nav_7">
1945           <span class="md-nav__icon md-icon"></span>
1946           Tutorials
1947         </label>
1948         <ul class="md-nav__list" data-md-scrollfix>
1949
1950
1951
1952
1953
1954
1955     <li class="md-nav__item md-nav__item--nested">
1956
1957
1958         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1959
1960       <label class="md-nav__link" for="__nav_7_1">
1961         Tutorial Series
1962         <span class="md-nav__icon md-icon"></span>
1963       </label>
1964       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1965         <label class="md-nav__title" for="__nav_7_1">
1966           <span class="md-nav__icon md-icon"></span>
1967           Tutorial Series
1968         </label>
1969         <ul class="md-nav__list" data-md-scrollfix>
1970
1971
1972
1973
1974
1975     <li class="md-nav__item">
1976       <a href="../../tutorial/series/overview/" class="md-nav__link">
1977         Overview
1978       </a>
1979     </li>
1980
1981
1982
1983
1984
1985
1986
1987     <li class="md-nav__item">
1988       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1989         Part 1
1990       </a>
1991     </li>
1992
1993
1994
1995
1996
1997
1998
1999     <li class="md-nav__item">
2000       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2001         Part 2
2002       </a>
2003     </li>
2004
2005
2006
2007
2008
2009
2010
2011     <li class="md-nav__item">
2012       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2013         Part 3
2014       </a>
2015     </li>
2016
2017
2018
2019
2020
2021
2022
2023     <li class="md-nav__item">
2024       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2025         Part 4
2026       </a>
2027     </li>
2028
2029
2030
2031         </ul>
2032       </nav>
2033     </li>
2034
2035
2036
2037         </ul>
2038       </nav>
2039     </li>
2040
2041
2042
2043   </ul>
2044 </nav>
2045                   </div>
2046                 </div>
2047               </div>
2048
2049
2050
2051               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2052                 <div class="md-sidebar__scrollwrap">
2053                   <div class="md-sidebar__inner">
2054
2055 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2056
2057
2058
2059
2060
2061
2062     <label class="md-nav__title" for="__toc">
2063       <span class="md-nav__icon md-icon"></span>
2064       Table of contents
2065     </label>
2066     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2067
2068         <li class="md-nav__item">
2069   <a href="#template-types-and-conventions" class="md-nav__link">
2070     Template Types and Conventions
2071   </a>
2072
2073 </li>
2074
2075         <li class="md-nav__item">
2076   <a href="#installing-templates" class="md-nav__link">
2077     Installing Templates
2078   </a>
2079
2080 </li>
2081
2082         <li class="md-nav__item">
2083   <a href="#base-templates" class="md-nav__link">
2084     Base Templates
2085   </a>
2086
2087     <nav class="md-nav" aria-label="Base Templates">
2088       <ul class="md-nav__list">
2089
2090           <li class="md-nav__item">
2091   <a href="#frontend" class="md-nav__link">
2092     Frontend
2093   </a>
2094
2095 </li>
2096
2097           <li class="md-nav__item">
2098   <a href="#backend" class="md-nav__link">
2099     Backend
2100   </a>
2101
2102 </li>
2103
2104       </ul>
2105     </nav>
2106
2107 </li>
2108
2109         <li class="md-nav__item">
2110   <a href="#common-template-components" class="md-nav__link">
2111     Common Template Components
2112   </a>
2113
2114     <nav class="md-nav" aria-label="Common Template Components">
2115       <ul class="md-nav__list">
2116
2117           <li class="md-nav__item">
2118   <a href="#forms" class="md-nav__link">
2119     Forms
2120   </a>
2121
2122 </li>
2123
2124           <li class="md-nav__item">
2125   <a href="#tab-menus" class="md-nav__link">
2126     Tab Menus
2127   </a>
2128
2129 </li>
2130
2131       </ul>
2132     </nav>
2133
2134 </li>
2135
2136         <li class="md-nav__item">
2137   <a href="#template-scripting" class="md-nav__link">
2138     Template Scripting
2139   </a>
2140
2141     <nav class="md-nav" aria-label="Template Scripting">
2142       <ul class="md-nav__list">
2143
2144           <li class="md-nav__item">
2145   <a href="#template-variables" class="md-nav__link">
2146     Template Variables
2147   </a>
2148
2149     <nav class="md-nav" aria-label="Template Variables">
2150       <ul class="md-nav__list">
2151
2152           <li class="md-nav__item">
2153   <a href="#modifiers" class="md-nav__link">
2154     Modifiers
2155   </a>
2156
2157 </li>
2158
2159           <li class="md-nav__item">
2160   <a href="#system-template-variable" class="md-nav__link">
2161     System Template Variable
2162   </a>
2163
2164 </li>
2165
2166       </ul>
2167     </nav>
2168
2169 </li>
2170
2171           <li class="md-nav__item">
2172   <a href="#comments" class="md-nav__link">
2173     Comments
2174   </a>
2175
2176 </li>
2177
2178           <li class="md-nav__item">
2179   <a href="#conditions" class="md-nav__link">
2180     Conditions
2181   </a>
2182
2183 </li>
2184
2185           <li class="md-nav__item">
2186   <a href="#foreach-loops" class="md-nav__link">
2187     Foreach Loops
2188   </a>
2189
2190 </li>
2191
2192           <li class="md-nav__item">
2193   <a href="#including-other-templates" class="md-nav__link">
2194     Including Other Templates
2195   </a>
2196
2197 </li>
2198
2199           <li class="md-nav__item">
2200   <a href="#template-plugins" class="md-nav__link">
2201     Template Plugins
2202   </a>
2203
2204 </li>
2205
2206       </ul>
2207     </nav>
2208
2209 </li>
2210
2211     </ul>
2212
2213 </nav>
2214                   </div>
2215                 </div>
2216               </div>
2217
2218
2219           <div class="md-content" data-md-component="content">
2220             <article class="md-content__inner md-typeset">
2221
2222
2223                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/view/templates.md" title="Edit this page" class="md-content__button md-icon">
2224                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2225                   </a>
2226
2227
2228                 <h1 id="templates">Templates<a class="headerlink" href="#templates" title="Permanent link">#</a></h1>
2229 <p>Templates are responsible for the output a user sees when requesting a page (while the PHP code is responsible for providing the data that will be shown).
2230 Templates are text files with <code>.tpl</code> as the file extension.
2231 WoltLab Suite Core compiles the template files once into a PHP file that is executed when a user requests the page.
2232 In subsequent request, as the PHP file containing the compiled template already exists, compiling the template is not necessary anymore.</p>
2233 <h2 id="template-types-and-conventions">Template Types and Conventions<a class="headerlink" href="#template-types-and-conventions" title="Permanent link">#</a></h2>
2234 <p>WoltLab Suite Core supports two types of templates:
2235 frontend templates (or simply <em>templates</em>) and backend templates (<em>ACP templates</em>).
2236 Each type of template is only available in its respective domain, thus frontend templates cannot be included or used in the ACP and vice versa.</p>
2237 <p>For pages and forms, the name of the template matches the unqualified name of the PHP class except for the <code>Page</code> or <code>Form</code> suffix:</p>
2238 <ul>
2239 <li><code>RegisterForm.class.php</code> → <code>register.tpl</code></li>
2240 <li><code>UserPage.class.php</code> → <code>user.tpl</code></li>
2241 </ul>
2242 <p>If you follow this convention, WoltLab Suite Core will automatically determine the template name so that you do not have to explicitly set it.</p>
2243 <div class="admonition info">
2244 <p class="admonition-title">For forms that handle creating and editing objects, in general, there are two form classes: <code>FooAddForm</code> and <code>FooEditForm</code>. WoltLab Suite Core, however, generally only uses one template <code>fooAdd.tpl</code> and the template variable <code>$action</code> to distinguish between creating a new object (<code>$action = 'add'</code>) and editing an existing object (<code>$action = 'edit'</code>) as the differences between templates for adding and editing an object are minimal.</p>
2245 </div>
2246 <h2 id="installing-templates">Installing Templates<a class="headerlink" href="#installing-templates" title="Permanent link">#</a></h2>
2247 <p>Templates and ACP templates are installed by two different package installation plugins:
2248 the <a href="../../package/pip/template/">template PIP</a> and the <a href="../../package/pip/acp-template/">ACP template PIP</a>.
2249 More information about installing templates can be found on those pages. </p>
2250 <h2 id="base-templates">Base Templates<a class="headerlink" href="#base-templates" title="Permanent link">#</a></h2>
2251 <h3 id="frontend">Frontend<a class="headerlink" href="#frontend" title="Permanent link">#</a></h3>
2252 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>
2253
2254 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2255
2256 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2257 </code></pre></div>
2258 <h3 id="backend">Backend<a class="headerlink" href="#backend" title="Permanent link">#</a></h3>
2259 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span> <span class="na">pageTitle</span><span class="o">=</span><span class="s1">&#39;foo.bar.baz&#39;</span><span class="cp">}</span><span class="x"></span>
2260
2261 <span class="x">&lt;header class=&quot;contentHeader&quot;&gt;</span>
2262 <span class="x">    &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2263 <span class="x">        &lt;h1 class=&quot;contentTitle&quot;&gt;Title&lt;/h1&gt;</span>
2264 <span class="x">    &lt;/div&gt;</span>
2265
2266 <span class="x">    &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2267 <span class="x">        &lt;ul&gt;</span>
2268 <span class="x">            </span><span class="cp">{</span><span class="c">* your default content header navigation buttons *</span><span class="cp">}</span><span class="x"></span>
2269
2270 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2271 <span class="x">        &lt;/ul&gt;</span>
2272 <span class="x">    &lt;/nav&gt;</span>
2273 <span class="x">&lt;/header&gt;</span>
2274
2275 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2276
2277 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2278 </code></pre></div>
2279 <p><code>foo.bar.baz</code> is the language item that contains the title of the page.</p>
2280 <h2 id="common-template-components">Common Template Components<a class="headerlink" href="#common-template-components" title="Permanent link">#</a></h2>
2281 <h3 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h3>
2282 <div class="admonition info">
2283 <p class="admonition-title">For new forms, use the new <a href="../../php/api/form_builder/overview/">form builder API</a> introduced with WoltLab Suite 5.2.</p>
2284 </div>
2285 <div class="highlight"><pre><span></span><code><span class="x">&lt;form method=&quot;post&quot; action=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;FooBar&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
2286 <span class="x">    &lt;div class=&quot;section&quot;&gt;</span>
2287 <span class="x">        &lt;dl</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"> class=&quot;formError&quot;</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span>
2288 <span class="x">            &lt;dt&gt;&lt;label for=&quot;baz&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.baz</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2289 <span class="x">            &lt;dd&gt;</span>
2290 <span class="x">                &lt;input type=&quot;text&quot; id=&quot;baz&quot; name=&quot;baz&quot; value=&quot;</span><span class="cp">{</span><span class="nv">$baz</span><span class="cp">}</span><span class="x">&quot; class=&quot;long&quot; required autofocus&gt;</span>
2291 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"></span>
2292 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span>
2293 <span class="x">                        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorType</span> <span class="o">==</span> <span class="s1">&#39;empty&#39;</span><span class="cp">}</span><span class="x"></span>
2294 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.form.error.empty</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2295 <span class="x">                        </span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2296 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.baz.error.</span><span class="cp">{</span><span class="o">@</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2297 <span class="x">                        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2298 <span class="x">                    &lt;/small&gt;</span>
2299 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2300 <span class="x">            &lt;/dd&gt;</span>
2301 <span class="x">        &lt;/dl&gt;</span>
2302
2303 <span class="x">        &lt;dl&gt;</span>
2304 <span class="x">            &lt;dt&gt;&lt;label for=&quot;bar&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.bar</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2305 <span class="x">            &lt;dd&gt;</span>
2306 <span class="x">                &lt;textarea name=&quot;bar&quot; id=&quot;bar&quot; cols=&quot;40&quot; rows=&quot;10&quot;&gt;</span><span class="cp">{</span><span class="nv">$bar</span><span class="cp">}</span><span class="x">&lt;/textarea&gt;</span>
2307 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;bar&#39;</span><span class="cp">}</span><span class="x"></span>
2308 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">foo.bar.bar.error.</span><span class="cp">{</span><span class="o">@</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/small&gt;</span>
2309 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2310 <span class="x">            &lt;/dd&gt;</span>
2311 <span class="x">        &lt;/dl&gt;</span>
2312
2313 <span class="x">        </span><span class="cp">{</span><span class="c">* other fields *</span><span class="cp">}</span><span class="x"></span>
2314
2315 <span class="x">        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;dataFields&#39;</span><span class="cp">}</span><span class="x"></span>
2316 <span class="x">    &lt;/div&gt;</span>
2317
2318 <span class="x">    </span><span class="cp">{</span><span class="c">* other sections *</span><span class="cp">}</span><span class="x"></span>
2319
2320 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;sections&#39;</span><span class="cp">}</span><span class="x"></span>
2321
2322 <span class="x">    &lt;div class=&quot;formSubmit&quot;&gt;</span>
2323 <span class="x">        &lt;input type=&quot;submit&quot; value=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.submit</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; accesskey=&quot;s&quot;&gt;</span>
2324 <span class="x">        </span><span class="cp">{</span><span class="nf">csrfToken</span><span class="cp">}</span><span class="x"></span>
2325 <span class="x">    &lt;/div&gt;</span>
2326 <span class="x">&lt;/form&gt;</span>
2327 </code></pre></div>
2328 <h3 id="tab-menus">Tab Menus<a class="headerlink" href="#tab-menus" title="Permanent link">#</a></h3>
2329 <div class="highlight"><pre><span></span><code><span class="x">&lt;div class=&quot;section tabMenuContainer&quot;&gt;</span>
2330 <span class="x">    &lt;nav class=&quot;tabMenu&quot;&gt;</span>
2331 <span class="x">        &lt;ul&gt;</span>
2332 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab1&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 1&lt;/a&gt;&lt;/li&gt;</span>
2333 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2&lt;/a&gt;&lt;/li&gt;</span>
2334
2335 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTabs&#39;</span><span class="cp">}</span><span class="x"></span>
2336 <span class="x">        &lt;/ul&gt;</span>
2337 <span class="x">    &lt;/nav&gt;</span>
2338
2339 <span class="x">    &lt;div id=&quot;tab1&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2340 <span class="x">        &lt;div class=&quot;section&quot;&gt;</span>
2341 <span class="x">            </span><span class="cp">{</span><span class="c">* contents of first tab *</span><span class="cp">}</span><span class="x"></span>
2342 <span class="x">        &lt;/div&gt;</span>
2343 <span class="x">    &lt;/div&gt;</span>
2344
2345 <span class="x">    &lt;div id=&quot;tab2&quot; class=&quot;tabMenuContainer tabMenuContent&quot;&gt;</span>
2346 <span class="x">        &lt;nav class=&quot;menu&quot;&gt;</span>
2347 <span class="x">            &lt;ul&gt;</span>
2348 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2A&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2A&lt;/a&gt;&lt;/li&gt;</span>
2349 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$__wcf</span><span class="o">-&gt;</span><span class="na">getAnchor</span><span class="o">(</span><span class="s1">&#39;tab2B&#39;</span><span class="o">)</span><span class="cp">}</span><span class="x">&quot;&gt;Tab 2B&lt;/a&gt;&lt;/li&gt;</span>
2350
2351 <span class="x">                </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTab2Subtabs&#39;</span><span class="cp">}</span><span class="x"></span>
2352 <span class="x">            &lt;/ul&gt;</span>
2353 <span class="x">        &lt;/nav&gt;</span>
2354
2355 <span class="x">        &lt;div id=&quot;tab2A&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2356 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2357 <span class="x">                </span><span class="cp">{</span><span class="c">* contents of first subtab for second tab *</span><span class="cp">}</span><span class="x"></span>
2358 <span class="x">            &lt;/div&gt;</span>
2359 <span class="x">        &lt;/div&gt;</span>
2360
2361 <span class="x">        &lt;div id=&quot;tab2B&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2362 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2363 <span class="x">                </span><span class="cp">{</span><span class="c">* contents of second subtab for second tab *</span><span class="cp">}</span><span class="x"></span>
2364 <span class="x">            &lt;/div&gt;</span>
2365 <span class="x">        &lt;/div&gt;</span>
2366
2367 <span class="x">        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuTab2Contents&#39;</span><span class="cp">}</span><span class="x"></span>
2368 <span class="x">    &lt;/div&gt;</span>
2369
2370 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;tabMenuContents&#39;</span><span class="cp">}</span><span class="x"></span>
2371 <span class="x">&lt;/div&gt;</span>
2372 </code></pre></div>
2373 <h2 id="template-scripting">Template Scripting<a class="headerlink" href="#template-scripting" title="Permanent link">#</a></h2>
2374 <h3 id="template-variables">Template Variables<a class="headerlink" href="#template-variables" title="Permanent link">#</a></h3>
2375 <p>Template variables can be assigned via <code>WCF::getTPL()-&gt;assign('foo', 'bar')</code> and accessed in templates via <code>$foo</code>:</p>
2376 <ul>
2377 <li><code>{$foo}</code> will result in the contents of <code>$foo</code> to be passed to <code>StringUtil::encodeHTML()</code> before being printed.</li>
2378 <li><code>{#$foo}</code> will result in the contents of <code>$foo</code> to be passed to <code>StringUtil::formatNumeric()</code> before being printed.
2379   Thus, this method is relevant when printing numbers and having them formatted correctly according the the user’s language.</li>
2380 <li><code>{@$foo}</code> will result in the contents of <code>$foo</code> to be printed directly.
2381   In general, this method should not be used for user-generated input.</li>
2382 </ul>
2383 <p>Multiple template variables can be assigned by passing an array:</p>
2384 <div class="highlight"><pre><span></span><code><span class="nx">WCF</span><span class="o">::</span><span class="na">getTPL</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">assign</span><span class="p">([</span>
2385     <span class="s1">&#39;foo&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span>
2386     <span class="s1">&#39;baz&#39;</span> <span class="o">=&gt;</span> <span class="k">false</span>
2387 <span class="p">]);</span>
2388 </code></pre></div>
2389 <h4 id="modifiers">Modifiers<a class="headerlink" href="#modifiers" title="Permanent link">#</a></h4>
2390 <p>If you want to call a function on a variable, you can use the modifier syntax:
2391 <code>{@$foo|trim}</code>, for example, results in the trimmed contents of <code>$foo</code> to be printed.</p>
2392 <h4 id="system-template-variable">System Template Variable<a class="headerlink" href="#system-template-variable" title="Permanent link">#</a></h4>
2393 <p>The template variable <code>$tpl</code> is automatically assigned and is an array containing different data:</p>
2394 <ul>
2395 <li><code>$tpl[get]</code> contains <code>$_GET</code>.</li>
2396 <li><code>$tpl[post]</code> contains <code>$_POST</code>.</li>
2397 <li><code>$tpl[cookie]</code> contains <code>$_COOKIE</code>.</li>
2398 <li><code>$tpl[server]</code> contains <code>$_SERVER</code>.</li>
2399 <li><code>$tpl[env]</code> contains <code>$_ENV</code>.</li>
2400 <li><code>$tpl[now]</code> contains <code>TIME_NOW</code> (current timestamp).</li>
2401 </ul>
2402 <p>Furthermore, the following template variables are also automatically assigned:</p>
2403 <ul>
2404 <li><code>$__wcf</code> contains the <code>WCF</code> object (or <code>WCFACP</code> object in the backend).</li>
2405 </ul>
2406 <h3 id="comments">Comments<a class="headerlink" href="#comments" title="Permanent link">#</a></h3>
2407 <p>Comments are wrapped in <code>{*</code> and <code>*}</code> and can span multiple lines:</p>
2408 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* some</span>
2409 <span class="c">   comment *</span><span class="cp">}</span><span class="x"></span>
2410 </code></pre></div>
2411 <div class="admonition info">
2412 <p class="admonition-title">The template compiler discards the comments, so that they not included in the compiled template.</p>
2413 </div>
2414 <h3 id="conditions">Conditions<a class="headerlink" href="#conditions" title="Permanent link">#</a></h3>
2415 <p>Conditions follow a similar syntax to PHP code:</p>
2416 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">if</span> <span class="nv">$foo</span> <span class="o">===</span> <span class="s1">&#39;bar&#39;</span><span class="cp">}</span><span class="x"></span>
2417 <span class="x">    foo is bar</span>
2418 <span class="cp">{</span><span class="nf">elseif</span> <span class="nv">$foo</span> <span class="o">===</span> <span class="s1">&#39;baz&#39;</span><span class="cp">}</span><span class="x"></span>
2419 <span class="x">    foo is baz</span>
2420 <span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2421 <span class="x">    foo is neither bar nor baz</span>
2422 <span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2423 </code></pre></div>
2424 <p>The supported operators in conditions are <code>===</code>, <code>!==</code>, <code>==</code>, <code>!=</code>, <code>&lt;=</code>, <code>&lt;</code>, <code>&gt;=</code>, <code>&gt;</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>!</code>, and <code>=</code>.</p>
2425 <p>More examples:</p>
2426 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">if</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">isset</span><span class="cp">}</span><span class="x">…</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2427
2428 <span class="cp">{</span><span class="nf">if</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">count</span> <span class="o">&gt;</span> <span class="m">3</span> <span class="o">&amp;&amp;</span> <span class="nv">$bar</span><span class="o">|</span><span class="na">count</span> <span class="o">&lt;</span> <span class="m">100</span><span class="cp">}</span><span class="x">…</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2429 </code></pre></div>
2430 <h3 id="foreach-loops">Foreach Loops<a class="headerlink" href="#foreach-loops" title="Permanent link">#</a></h3>
2431 <p>Foreach loops allow to iterate over arrays or iterable objects:</p>
2432 <div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2433 <span class="x">    </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">key</span><span class="o">=</span><span class="na">key</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span><span class="cp">}</span><span class="x"></span>
2434 <span class="x">        &lt;li&gt;</span><span class="cp">{</span><span class="nv">$key</span><span class="cp">}</span><span class="x">: </span><span class="cp">{</span><span class="nv">$value</span><span class="cp">}</span><span class="x">&lt;/li&gt;</span>
2435 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2436 <span class="x">&lt;/ul&gt;</span>
2437 </code></pre></div>
2438 <p>While the <code>from</code> attribute containing the iterated structure and the <code>item</code> attribute containg the current value are mandatory, the <code>key</code> attribute is optional.
2439 If the foreach loop has a name assigned to it via the <code>name</code> attribute, the <code>$tpl</code> template variable provides additional data about the loop:</p>
2440 <div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2441 <span class="x">    </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">key</span><span class="o">=</span><span class="na">key</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span> <span class="na">name</span><span class="o">=</span><span class="na">foo</span><span class="cp">}</span><span class="x"></span>
2442 <span class="x">        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">first</span><span class="o">]</span><span class="cp">}</span><span class="x"></span>
2443 <span class="x">            something special for the first iteration</span>
2444 <span class="x">        </span><span class="cp">{</span><span class="nf">elseif</span> <span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">last</span><span class="o">]</span><span class="cp">}</span><span class="x"></span>
2445 <span class="x">            something special for the last iteration</span>
2446 <span class="x">        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2447
2448 <span class="x">        &lt;li&gt;iteration </span><span class="cp">{</span><span class="err">#</span><span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">iteration</span><span class="o">]+</span><span class="m">1</span><span class="cp">}</span><span class="x"> out of </span><span class="cp">{</span><span class="err">#</span><span class="nv">$tpl</span><span class="o">[</span><span class="na">foreach</span><span class="o">][</span><span class="na">foo</span><span class="o">][</span><span class="na">total</span><span class="o">]</span><span class="cp">}</span><span class="x"> </span><span class="cp">{</span><span class="nv">$key</span><span class="cp">}</span><span class="x">: </span><span class="cp">{</span><span class="nv">$value</span><span class="cp">}</span><span class="x">&lt;/li&gt;</span>
2449 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2450 <span class="x">&lt;/ul&gt;</span>
2451 </code></pre></div>
2452 <p>In contrast to PHP’s foreach loop, templates also support <code>foreachelse</code>:</p>
2453 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$array</span> <span class="na">item</span><span class="o">=</span><span class="na">value</span><span class="cp">}</span><span class="x"></span>
2454 <span class="x">    …</span>
2455 <span class="cp">{</span><span class="nf">foreachelse</span><span class="cp">}</span><span class="x"></span>
2456 <span class="x">    there is nothing to iterate over</span>
2457 <span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2458 </code></pre></div>
2459 <h3 id="including-other-templates">Including Other Templates<a class="headerlink" href="#including-other-templates" title="Permanent link">#</a></h3>
2460 <p>To include template named <code>foo</code> from the same domain (frontend/backend), you can use</p>
2461 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span><span class="cp">}</span><span class="x"></span>
2462 </code></pre></div>
2463 <p>If the template belongs to an application, you have to specify that application using the <code>application</code> attribute:</p>
2464 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span> <span class="na">application</span><span class="o">=</span><span class="s1">&#39;app&#39;</span><span class="cp">}</span><span class="x"></span>
2465 </code></pre></div>
2466 <p>Additional template variables can be passed to the included template as additional attributes:</p>
2467 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;foo&#39;</span> <span class="na">application</span><span class="o">=</span><span class="s1">&#39;app&#39;</span> <span class="na">var1</span><span class="o">=</span><span class="s1">&#39;foo1&#39;</span> <span class="na">var2</span><span class="o">=</span><span class="s1">&#39;foo2&#39;</span><span class="cp">}</span><span class="x"></span>
2468 </code></pre></div>
2469 <h3 id="template-plugins">Template Plugins<a class="headerlink" href="#template-plugins" title="Permanent link">#</a></h3>
2470 <p>An overview of all available template plugins can be found <a href="../template-plugins/">here</a>.</p>
2471
2472
2473
2474
2475 <hr>
2476 <div class="md-source-date">
2477   <small>
2478
2479       Last update: 2021-01-15
2480
2481   </small>
2482 </div>
2483
2484
2485
2486
2487
2488
2489
2490
2491             </article>
2492           </div>
2493         </div>
2494
2495       </main>
2496
2497
2498 <footer class="md-footer">
2499
2500     <nav class="md-footer__inner md-grid" aria-label="Footer">
2501
2502         <a href="../languages/" class="md-footer__link md-footer__link--prev" rel="prev">
2503           <div class="md-footer__button md-icon">
2504             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2505           </div>
2506           <div class="md-footer__title">
2507             <div class="md-ellipsis">
2508               <span class="md-footer__direction">
2509                 Previous
2510               </span>
2511               Languages
2512             </div>
2513           </div>
2514         </a>
2515
2516
2517         <a href="../template-plugins/" class="md-footer__link md-footer__link--next" rel="next">
2518           <div class="md-footer__title">
2519             <div class="md-ellipsis">
2520               <span class="md-footer__direction">
2521                 Next
2522               </span>
2523               Template Plugins
2524             </div>
2525           </div>
2526           <div class="md-footer__button md-icon">
2527             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2528           </div>
2529         </a>
2530
2531     </nav>
2532
2533   <div class="md-footer-meta md-typeset">
2534     <div class="md-footer-meta__inner md-grid">
2535       <div class="md-footer-copyright">
2536
2537           <div class="md-footer-copyright__highlight">
2538             Copyright © 2020 WoltLab GmbH
2539           </div>
2540
2541         Made with
2542         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2543           Material for MkDocs
2544         </a>
2545
2546       </div>
2547       <div class="md-footer-copyright">
2548         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2549         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2550 </div>
2551     </div>
2552   </div>
2553 </footer>
2554
2555     </div>
2556     <div class="md-dialog" data-md-component="dialog">
2557       <div class="md-dialog__inner md-typeset"></div>
2558     </div>
2559     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2560
2561
2562       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2563
2564
2565   </body>
2566 </html>