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.0">
  14
  15
  16
  17         <title>Templates - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.33e2939f.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     <li class="md-nav__item">
 310       <a href="../../php/api/caches/" class="md-nav__link">
 311         Caches
 312       </a>
 313     </li>
 314
 315
 316
 317
 318
 319
 320
 321     <li class="md-nav__item">
 322       <a href="../../php/api/comments/" class="md-nav__link">
 323         Comments
 324       </a>
 325     </li>
 326
 327
 328
 329
 330
 331
 332
 333     <li class="md-nav__item">
 334       <a href="../../php/api/cronjobs/" class="md-nav__link">
 335         Cronjobs
 336       </a>
 337     </li>
 338
 339
 340
 341
 342
 343
 344
 345     <li class="md-nav__item">
 346       <a href="../../php/api/events/" class="md-nav__link">
 347         Events
 348       </a>
 349     </li>
 350
 351
 352
 353
 354
 355
 356
 357
 358     <li class="md-nav__item md-nav__item--nested">
 359
 360
 361         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 362
 363       <label class="md-nav__link" for="__nav_2_5_5">
 364         Form Builder
 365         <span class="md-nav__icon md-icon"></span>
 366       </label>
 367       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 368         <label class="md-nav__title" for="__nav_2_5_5">
 369           <span class="md-nav__icon md-icon"></span>
 370           Form Builder
 371         </label>
 372         <ul class="md-nav__list" data-md-scrollfix>
 373
 374
 375
 376
 377
 378     <li class="md-nav__item">
 379       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 380         Overview
 381       </a>
 382     </li>
 383
 384
 385
 386
 387
 388
 389
 390     <li class="md-nav__item">
 391       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 392         Structure
 393       </a>
 394     </li>
 395
 396
 397
 398
 399
 400
 401
 402     <li class="md-nav__item">
 403       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 404         Fields
 405       </a>
 406     </li>
 407
 408
 409
 410
 411
 412
 413
 414     <li class="md-nav__item">
 415       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 416         Validation and Data
 417       </a>
 418     </li>
 419
 420
 421
 422
 423
 424
 425
 426     <li class="md-nav__item">
 427       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 428         Dependencies
 429       </a>
 430     </li>
 431
 432
 433
 434         </ul>
 435       </nav>
 436     </li>
 437
 438
 439
 440
 441
 442
 443
 444     <li class="md-nav__item">
 445       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 446         Package Installation Plugins
 447       </a>
 448     </li>
 449
 450
 451
 452
 453
 454
 455
 456     <li class="md-nav__item">
 457       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 458         User Activity Points
 459       </a>
 460     </li>
 461
 462
 463
 464
 465
 466
 467
 468     <li class="md-nav__item">
 469       <a href="../../php/api/user_notifications/" class="md-nav__link">
 470         User Notifications
 471       </a>
 472     </li>
 473
 474
 475
 476
 477
 478
 479
 480     <li class="md-nav__item">
 481       <a href="../../php/api/sitemaps/" class="md-nav__link">
 482         Sitemaps
 483       </a>
 484     </li>
 485
 486
 487
 488         </ul>
 489       </nav>
 490     </li>
 491
 492
 493
 494
 495
 496
 497
 498     <li class="md-nav__item">
 499       <a href="../../php/code-style/" class="md-nav__link">
 500         Code Style
 501       </a>
 502     </li>
 503
 504
 505
 506
 507
 508
 509
 510     <li class="md-nav__item">
 511       <a href="../../php/apps/" class="md-nav__link">
 512         Apps
 513       </a>
 514     </li>
 515
 516
 517
 518
 519
 520
 521
 522     <li class="md-nav__item">
 523       <a href="../../php/gdpr/" class="md-nav__link">
 524         GDPR
 525       </a>
 526     </li>
 527
 528
 529
 530         </ul>
 531       </nav>
 532     </li>
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 547
 548
 549         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
 550
 551       <label class="md-nav__link" for="__nav_3">
 552         Languages, Templates & CSS
 553         <span class="md-nav__icon md-icon"></span>
 554       </label>
 555       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 556         <label class="md-nav__title" for="__nav_3">
 557           <span class="md-nav__icon md-icon"></span>
 558           Languages, Templates & CSS
 559         </label>
 560         <ul class="md-nav__list" data-md-scrollfix>
 561
 562
 563
 564
 565
 566     <li class="md-nav__item">
 567       <a href="../languages/" class="md-nav__link">
 568         Languages
 569       </a>
 570     </li>
 571
 572
 573
 574
 575
 576
 577
 578
 579
 580     <li class="md-nav__item md-nav__item--active">
 581
 582       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 583
 584
 585
 586
 587         <label class="md-nav__link md-nav__link--active" for="__toc">
 588           Templates
 589           <span class="md-nav__icon md-icon"></span>
 590         </label>
 591
 592       <a href="./" class="md-nav__link md-nav__link--active">
 593         Templates
 594       </a>
 595
 596
 597 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 598
 599
 600
 601
 602
 603     <label class="md-nav__title" for="__toc">
 604       <span class="md-nav__icon md-icon"></span>
 605       Table of contents
 606     </label>
 607     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 608
 609         <li class="md-nav__item">
 610   <a href="#template-types-and-conventions" class="md-nav__link">
 611     Template Types and Conventions
 612   </a>
 613
 614 </li>
 615
 616         <li class="md-nav__item">
 617   <a href="#installing-templates" class="md-nav__link">
 618     Installing Templates
 619   </a>
 620
 621 </li>
 622
 623         <li class="md-nav__item">
 624   <a href="#base-templates" class="md-nav__link">
 625     Base Templates
 626   </a>
 627
 628     <nav class="md-nav" aria-label="Base Templates">
 629       <ul class="md-nav__list">
 630
 631           <li class="md-nav__item">
 632   <a href="#frontend" class="md-nav__link">
 633     Frontend
 634   </a>
 635
 636 </li>
 637
 638           <li class="md-nav__item">
 639   <a href="#backend" class="md-nav__link">
 640     Backend
 641   </a>
 642
 643 </li>
 644
 645       </ul>
 646     </nav>
 647
 648 </li>
 649
 650         <li class="md-nav__item">
 651   <a href="#common-template-components" class="md-nav__link">
 652     Common Template Components
 653   </a>
 654
 655     <nav class="md-nav" aria-label="Common Template Components">
 656       <ul class="md-nav__list">
 657
 658           <li class="md-nav__item">
 659   <a href="#forms" class="md-nav__link">
 660     Forms
 661   </a>
 662
 663 </li>
 664
 665           <li class="md-nav__item">
 666   <a href="#tab-menus" class="md-nav__link">
 667     Tab Menus
 668   </a>
 669
 670 </li>
 671
 672       </ul>
 673     </nav>
 674
 675 </li>
 676
 677         <li class="md-nav__item">
 678   <a href="#template-scripting" class="md-nav__link">
 679     Template Scripting
 680   </a>
 681
 682     <nav class="md-nav" aria-label="Template Scripting">
 683       <ul class="md-nav__list">
 684
 685           <li class="md-nav__item">
 686   <a href="#template-variables" class="md-nav__link">
 687     Template Variables
 688   </a>
 689
 690     <nav class="md-nav" aria-label="Template Variables">
 691       <ul class="md-nav__list">
 692
 693           <li class="md-nav__item">
 694   <a href="#modifiers" class="md-nav__link">
 695     Modifiers
 696   </a>
 697
 698 </li>
 699
 700           <li class="md-nav__item">
 701   <a href="#system-template-variable" class="md-nav__link">
 702     System Template Variable
 703   </a>
 704
 705 </li>
 706
 707       </ul>
 708     </nav>
 709
 710 </li>
 711
 712           <li class="md-nav__item">
 713   <a href="#comments" class="md-nav__link">
 714     Comments
 715   </a>
 716
 717 </li>
 718
 719           <li class="md-nav__item">
 720   <a href="#conditions" class="md-nav__link">
 721     Conditions
 722   </a>
 723
 724 </li>
 725
 726           <li class="md-nav__item">
 727   <a href="#foreach-loops" class="md-nav__link">
 728     Foreach Loops
 729   </a>
 730
 731 </li>
 732
 733           <li class="md-nav__item">
 734   <a href="#including-other-templates" class="md-nav__link">
 735     Including Other Templates
 736   </a>
 737
 738 </li>
 739
 740           <li class="md-nav__item">
 741   <a href="#template-plugins" class="md-nav__link">
 742     Template Plugins
 743   </a>
 744
 745 </li>
 746
 747       </ul>
 748     </nav>
 749
 750 </li>
 751
 752     </ul>
 753
 754 </nav>
 755
 756     </li>
 757
 758
 759
 760
 761
 762
 763
 764     <li class="md-nav__item">
 765       <a href="../css/" class="md-nav__link">
 766         CSS
 767       </a>
 768     </li>
 769
 770
 771
 772         </ul>
 773       </nav>
 774     </li>
 775
 776
 777
 778
 779
 780
 781
 782
 783
 784
 785
 786     <li class="md-nav__item md-nav__item--nested">
 787
 788
 789         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 790
 791       <label class="md-nav__link" for="__nav_4">
 792         JavaScript API
 793         <span class="md-nav__icon md-icon"></span>
 794       </label>
 795       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 796         <label class="md-nav__title" for="__nav_4">
 797           <span class="md-nav__icon md-icon"></span>
 798           JavaScript API
 799         </label>
 800         <ul class="md-nav__list" data-md-scrollfix>
 801
 802
 803
 804
 805
 806     <li class="md-nav__item">
 807       <a href="../../javascript/general-usage/" class="md-nav__link">
 808         General Usage
 809       </a>
 810     </li>
 811
 812
 813
 814
 815
 816
 817
 818
 819     <li class="md-nav__item md-nav__item--nested">
 820
 821
 822         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
 823
 824       <label class="md-nav__link" for="__nav_4_2">
 825         New API
 826         <span class="md-nav__icon md-icon"></span>
 827       </label>
 828       <nav class="md-nav" aria-label="New API" data-md-level="2">
 829         <label class="md-nav__title" for="__nav_4_2">
 830           <span class="md-nav__icon md-icon"></span>
 831           New API
 832         </label>
 833         <ul class="md-nav__list" data-md-scrollfix>
 834
 835
 836
 837
 838
 839     <li class="md-nav__item">
 840       <a href="../../javascript/new-api_writing-a-module/" class="md-nav__link">
 841         Writing a module
 842       </a>
 843     </li>
 844
 845
 846
 847
 848
 849
 850
 851     <li class="md-nav__item">
 852       <a href="../../javascript/new-api_data-structures/" class="md-nav__link">
 853         Data Structures
 854       </a>
 855     </li>
 856
 857
 858
 859
 860
 861
 862
 863     <li class="md-nav__item">
 864       <a href="../../javascript/new-api_core/" class="md-nav__link">
 865         Core Functions
 866       </a>
 867     </li>
 868
 869
 870
 871
 872
 873
 874
 875     <li class="md-nav__item">
 876       <a href="../../javascript/new-api_dom/" class="md-nav__link">
 877         DOM
 878       </a>
 879     </li>
 880
 881
 882
 883
 884
 885
 886
 887     <li class="md-nav__item">
 888       <a href="../../javascript/new-api_events/" class="md-nav__link">
 889         Event Handling
 890       </a>
 891     </li>
 892
 893
 894
 895
 896
 897
 898
 899     <li class="md-nav__item">
 900       <a href="../../javascript/new-api_ajax/" class="md-nav__link">
 901         Ajax
 902       </a>
 903     </li>
 904
 905
 906
 907
 908
 909
 910
 911     <li class="md-nav__item">
 912       <a href="../../javascript/new-api_dialogs/" class="md-nav__link">
 913         Dialogs
 914       </a>
 915     </li>
 916
 917
 918
 919
 920
 921
 922
 923     <li class="md-nav__item">
 924       <a href="../../javascript/new-api_browser/" class="md-nav__link">
 925         Browser and Screen Sizes
 926       </a>
 927     </li>
 928
 929
 930
 931
 932
 933
 934
 935     <li class="md-nav__item">
 936       <a href="../../javascript/new-api_ui/" class="md-nav__link">
 937         User Interface
 938       </a>
 939     </li>
 940
 941
 942
 943         </ul>
 944       </nav>
 945     </li>
 946
 947
 948
 949
 950
 951
 952
 953     <li class="md-nav__item">
 954       <a href="../../javascript/legacy-api/" class="md-nav__link">
 955         Legacy API
 956       </a>
 957     </li>
 958
 959
 960
 961
 962
 963
 964
 965     <li class="md-nav__item">
 966       <a href="../../javascript/helper-functions/" class="md-nav__link">
 967         Helper Functions
 968       </a>
 969     </li>
 970
 971
 972
 973
 974
 975
 976
 977     <li class="md-nav__item">
 978       <a href="../../javascript/code-snippets/" class="md-nav__link">
 979         Code Snippets
 980       </a>
 981     </li>
 982
 983
 984
 985         </ul>
 986       </nav>
 987     </li>
 988
 989
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999     <li class="md-nav__item md-nav__item--nested">
1000
1001
1002         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1003
1004       <label class="md-nav__link" for="__nav_5">
1005         Package Components
1006         <span class="md-nav__icon md-icon"></span>
1007       </label>
1008       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1009         <label class="md-nav__title" for="__nav_5">
1010           <span class="md-nav__icon md-icon"></span>
1011           Package Components
1012         </label>
1013         <ul class="md-nav__list" data-md-scrollfix>
1014
1015
1016
1017
1018
1019     <li class="md-nav__item">
1020       <a href="../../package/package-xml/" class="md-nav__link">
1021         package.xml
1022       </a>
1023     </li>
1024
1025
1026
1027
1028
1029
1030
1031
1032     <li class="md-nav__item md-nav__item--nested">
1033
1034
1035         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1036
1037       <label class="md-nav__link" for="__nav_5_2">
1038         PIPs
1039         <span class="md-nav__icon md-icon"></span>
1040       </label>
1041       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1042         <label class="md-nav__title" for="__nav_5_2">
1043           <span class="md-nav__icon md-icon"></span>
1044           PIPs
1045         </label>
1046         <ul class="md-nav__list" data-md-scrollfix>
1047
1048
1049
1050
1051
1052     <li class="md-nav__item">
1053       <a href="../../package/pip/" class="md-nav__link">
1054         Overview
1055       </a>
1056     </li>
1057
1058
1059
1060
1061
1062
1063
1064     <li class="md-nav__item">
1065       <a href="../../package/pip/acl-option/" class="md-nav__link">
1066         aclOption
1067       </a>
1068     </li>
1069
1070
1071
1072
1073
1074
1075
1076     <li class="md-nav__item">
1077       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1078         acpMenu
1079       </a>
1080     </li>
1081
1082
1083
1084
1085
1086
1087
1088     <li class="md-nav__item">
1089       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1090         acpSearchProvider
1091       </a>
1092     </li>
1093
1094
1095
1096
1097
1098
1099
1100     <li class="md-nav__item">
1101       <a href="../../package/pip/acp-template/" class="md-nav__link">
1102         acpTemplate
1103       </a>
1104     </li>
1105
1106
1107
1108
1109
1110
1111
1112     <li class="md-nav__item">
1113       <a href="../../package/pip/bbcode/" class="md-nav__link">
1114         bbcode
1115       </a>
1116     </li>
1117
1118
1119
1120
1121
1122
1123
1124     <li class="md-nav__item">
1125       <a href="../../package/pip/box/" class="md-nav__link">
1126         box
1127       </a>
1128     </li>
1129
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1138         clipboardAction
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148     <li class="md-nav__item">
1149       <a href="../../package/pip/core-object/" class="md-nav__link">
1150         coreObject
1151       </a>
1152     </li>
1153
1154
1155
1156
1157
1158
1159
1160     <li class="md-nav__item">
1161       <a href="../../package/pip/cronjob/" class="md-nav__link">
1162         cronjob
1163       </a>
1164     </li>
1165
1166
1167
1168
1169
1170
1171
1172     <li class="md-nav__item">
1173       <a href="../../package/pip/event-listener/" class="md-nav__link">
1174         eventListener
1175       </a>
1176     </li>
1177
1178
1179
1180
1181
1182
1183
1184     <li class="md-nav__item">
1185       <a href="../../package/pip/file/" class="md-nav__link">
1186         file
1187       </a>
1188     </li>
1189
1190
1191
1192
1193
1194
1195
1196     <li class="md-nav__item">
1197       <a href="../../package/pip/language/" class="md-nav__link">
1198         language
1199       </a>
1200     </li>
1201
1202
1203
1204
1205
1206
1207
1208     <li class="md-nav__item">
1209       <a href="../../package/pip/media-provider/" class="md-nav__link">
1210         mediaProvider
1211       </a>
1212     </li>
1213
1214
1215
1216
1217
1218
1219
1220     <li class="md-nav__item">
1221       <a href="../../package/pip/menu/" class="md-nav__link">
1222         menu
1223       </a>
1224     </li>
1225
1226
1227
1228
1229
1230
1231
1232     <li class="md-nav__item">
1233       <a href="../../package/pip/menu-item/" class="md-nav__link">
1234         menuItem
1235       </a>
1236     </li>
1237
1238
1239
1240
1241
1242
1243
1244     <li class="md-nav__item">
1245       <a href="../../package/pip/object-type/" class="md-nav__link">
1246         objectType
1247       </a>
1248     </li>
1249
1250
1251
1252
1253
1254
1255
1256     <li class="md-nav__item">
1257       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1258         objectTypeDefinition
1259       </a>
1260     </li>
1261
1262
1263
1264
1265
1266
1267
1268     <li class="md-nav__item">
1269       <a href="../../package/pip/option/" class="md-nav__link">
1270         option
1271       </a>
1272     </li>
1273
1274
1275
1276
1277
1278
1279
1280     <li class="md-nav__item">
1281       <a href="../../package/pip/page/" class="md-nav__link">
1282         page
1283       </a>
1284     </li>
1285
1286
1287
1288
1289
1290
1291
1292     <li class="md-nav__item">
1293       <a href="../../package/pip/pip/" class="md-nav__link">
1294         pip
1295       </a>
1296     </li>
1297
1298
1299
1300
1301
1302
1303
1304     <li class="md-nav__item">
1305       <a href="../../package/pip/script/" class="md-nav__link">
1306         script
1307       </a>
1308     </li>
1309
1310
1311
1312
1313
1314
1315
1316     <li class="md-nav__item">
1317       <a href="../../package/pip/smiley/" class="md-nav__link">
1318         smiley
1319       </a>
1320     </li>
1321
1322
1323
1324
1325
1326
1327
1328     <li class="md-nav__item">
1329       <a href="../../package/pip/sql/" class="md-nav__link">
1330         sql
1331       </a>
1332     </li>
1333
1334
1335
1336
1337
1338
1339
1340     <li class="md-nav__item">
1341       <a href="../../package/pip/style/" class="md-nav__link">
1342         style
1343       </a>
1344     </li>
1345
1346
1347
1348
1349
1350
1351
1352     <li class="md-nav__item">
1353       <a href="../../package/pip/template/" class="md-nav__link">
1354         template
1355       </a>
1356     </li>
1357
1358
1359
1360
1361
1362
1363
1364     <li class="md-nav__item">
1365       <a href="../../package/pip/template-listener/" class="md-nav__link">
1366         templateListener
1367       </a>
1368     </li>
1369
1370
1371
1372
1373
1374
1375
1376     <li class="md-nav__item">
1377       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1378         userGroupOption
1379       </a>
1380     </li>
1381
1382
1383
1384
1385
1386
1387
1388     <li class="md-nav__item">
1389       <a href="../../package/pip/user-menu/" class="md-nav__link">
1390         userMenu
1391       </a>
1392     </li>
1393
1394
1395
1396
1397
1398
1399
1400     <li class="md-nav__item">
1401       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1402         userNotificationEvent
1403       </a>
1404     </li>
1405
1406
1407
1408
1409
1410
1411
1412     <li class="md-nav__item">
1413       <a href="../../package/pip/user-option/" class="md-nav__link">
1414         userOption
1415       </a>
1416     </li>
1417
1418
1419
1420
1421
1422
1423
1424     <li class="md-nav__item">
1425       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1426         userProfileMenu
1427       </a>
1428     </li>
1429
1430
1431
1432         </ul>
1433       </nav>
1434     </li>
1435
1436
1437
1438
1439
1440
1441
1442     <li class="md-nav__item">
1443       <a href="../../package/database-php-api/" class="md-nav__link">
1444         Database PHP API
1445       </a>
1446     </li>
1447
1448
1449
1450         </ul>
1451       </nav>
1452     </li>
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464     <li class="md-nav__item md-nav__item--nested">
1465
1466
1467         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1468
1469       <label class="md-nav__link" for="__nav_6">
1470         Migration
1471         <span class="md-nav__icon md-icon"></span>
1472       </label>
1473       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1474         <label class="md-nav__title" for="__nav_6">
1475           <span class="md-nav__icon md-icon"></span>
1476           Migration
1477         </label>
1478         <ul class="md-nav__list" data-md-scrollfix>
1479
1480
1481
1482
1483
1484
1485     <li class="md-nav__item md-nav__item--nested">
1486
1487
1488         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1489
1490       <label class="md-nav__link" for="__nav_6_1">
1491         Migrating from WSC 5.3
1492         <span class="md-nav__icon md-icon"></span>
1493       </label>
1494       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1495         <label class="md-nav__title" for="__nav_6_1">
1496           <span class="md-nav__icon md-icon"></span>
1497           Migrating from WSC 5.3
1498         </label>
1499         <ul class="md-nav__list" data-md-scrollfix>
1500
1501
1502
1503
1504
1505     <li class="md-nav__item">
1506       <a href="../../migration/wsc53/php/" class="md-nav__link">
1507         PHP API
1508       </a>
1509     </li>
1510
1511
1512
1513
1514
1515
1516
1517     <li class="md-nav__item">
1518       <a href="../../migration/wsc53/session/" class="md-nav__link">
1519         Session Handling and Authentication
1520       </a>
1521     </li>
1522
1523
1524
1525
1526
1527
1528
1529     <li class="md-nav__item">
1530       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1531         JavaScript
1532       </a>
1533     </li>
1534
1535
1536
1537
1538
1539
1540
1541     <li class="md-nav__item">
1542       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1543         Templates
1544       </a>
1545     </li>
1546
1547
1548
1549
1550
1551
1552
1553     <li class="md-nav__item">
1554       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1555         Third Party Libraries
1556       </a>
1557     </li>
1558
1559
1560
1561         </ul>
1562       </nav>
1563     </li>
1564
1565
1566
1567
1568
1569
1570
1571
1572     <li class="md-nav__item md-nav__item--nested">
1573
1574
1575         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1576
1577       <label class="md-nav__link" for="__nav_6_2">
1578         Migrating from WSC 5.2
1579         <span class="md-nav__icon md-icon"></span>
1580       </label>
1581       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1582         <label class="md-nav__title" for="__nav_6_2">
1583           <span class="md-nav__icon md-icon"></span>
1584           Migrating from WSC 5.2
1585         </label>
1586         <ul class="md-nav__list" data-md-scrollfix>
1587
1588
1589
1590
1591
1592     <li class="md-nav__item">
1593       <a href="../../migration/wsc52/php/" class="md-nav__link">
1594         PHP API
1595       </a>
1596     </li>
1597
1598
1599
1600
1601
1602
1603
1604     <li class="md-nav__item">
1605       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1606         Templates and Languages
1607       </a>
1608     </li>
1609
1610
1611
1612
1613
1614
1615
1616     <li class="md-nav__item">
1617       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1618         Third Party Libraries
1619       </a>
1620     </li>
1621
1622
1623
1624         </ul>
1625       </nav>
1626     </li>
1627
1628
1629
1630
1631
1632
1633
1634
1635     <li class="md-nav__item md-nav__item--nested">
1636
1637
1638         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1639
1640       <label class="md-nav__link" for="__nav_6_3">
1641         Migrating from WSC 3.1
1642         <span class="md-nav__icon md-icon"></span>
1643       </label>
1644       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1645         <label class="md-nav__title" for="__nav_6_3">
1646           <span class="md-nav__icon md-icon"></span>
1647           Migrating from WSC 3.1
1648         </label>
1649         <ul class="md-nav__list" data-md-scrollfix>
1650
1651
1652
1653
1654
1655     <li class="md-nav__item">
1656       <a href="../../migration/wsc31/php/" class="md-nav__link">
1657         PHP API
1658       </a>
1659     </li>
1660
1661
1662
1663         </ul>
1664       </nav>
1665     </li>
1666
1667
1668
1669
1670
1671
1672
1673
1674     <li class="md-nav__item md-nav__item--nested">
1675
1676
1677         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1678
1679       <label class="md-nav__link" for="__nav_6_4">
1680         Migrating from WSC 3.0
1681         <span class="md-nav__icon md-icon"></span>
1682       </label>
1683       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1684         <label class="md-nav__title" for="__nav_6_4">
1685           <span class="md-nav__icon md-icon"></span>
1686           Migrating from WSC 3.0
1687         </label>
1688         <ul class="md-nav__list" data-md-scrollfix>
1689
1690
1691
1692
1693
1694     <li class="md-nav__item">
1695       <a href="../../migration/wsc30/php/" class="md-nav__link">
1696         PHP API
1697       </a>
1698     </li>
1699
1700
1701
1702
1703
1704
1705
1706     <li class="md-nav__item">
1707       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1708         JavaScript API
1709       </a>
1710     </li>
1711
1712
1713
1714
1715
1716
1717
1718     <li class="md-nav__item">
1719       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1720         Templates
1721       </a>
1722     </li>
1723
1724
1725
1726
1727
1728
1729
1730     <li class="md-nav__item">
1731       <a href="../../migration/wsc30/css/" class="md-nav__link">
1732         CSS
1733       </a>
1734     </li>
1735
1736
1737
1738
1739
1740
1741
1742     <li class="md-nav__item">
1743       <a href="../../migration/wsc30/package/" class="md-nav__link">
1744         Package Components
1745       </a>
1746     </li>
1747
1748
1749
1750         </ul>
1751       </nav>
1752     </li>
1753
1754
1755
1756
1757
1758
1759
1760
1761     <li class="md-nav__item md-nav__item--nested">
1762
1763
1764         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1765
1766       <label class="md-nav__link" for="__nav_6_5">
1767         Migrating from WCF 2.1
1768         <span class="md-nav__icon md-icon"></span>
1769       </label>
1770       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1771         <label class="md-nav__title" for="__nav_6_5">
1772           <span class="md-nav__icon md-icon"></span>
1773           Migrating from WCF 2.1
1774         </label>
1775         <ul class="md-nav__list" data-md-scrollfix>
1776
1777
1778
1779
1780
1781     <li class="md-nav__item">
1782       <a href="../../migration/wcf21/php/" class="md-nav__link">
1783         PHP API
1784       </a>
1785     </li>
1786
1787
1788
1789
1790
1791
1792
1793     <li class="md-nav__item">
1794       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1795         Templates
1796       </a>
1797     </li>
1798
1799
1800
1801
1802
1803
1804
1805     <li class="md-nav__item">
1806       <a href="../../migration/wcf21/css/" class="md-nav__link">
1807         CSS
1808       </a>
1809     </li>
1810
1811
1812
1813
1814
1815
1816
1817     <li class="md-nav__item">
1818       <a href="../../migration/wcf21/package/" class="md-nav__link">
1819         Package Components
1820       </a>
1821     </li>
1822
1823
1824
1825         </ul>
1826       </nav>
1827     </li>
1828
1829
1830
1831         </ul>
1832       </nav>
1833     </li>
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845     <li class="md-nav__item md-nav__item--nested">
1846
1847
1848         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1849
1850       <label class="md-nav__link" for="__nav_7">
1851         Tutorials
1852         <span class="md-nav__icon md-icon"></span>
1853       </label>
1854       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1855         <label class="md-nav__title" for="__nav_7">
1856           <span class="md-nav__icon md-icon"></span>
1857           Tutorials
1858         </label>
1859         <ul class="md-nav__list" data-md-scrollfix>
1860
1861
1862
1863
1864
1865
1866     <li class="md-nav__item md-nav__item--nested">
1867
1868
1869         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1870
1871       <label class="md-nav__link" for="__nav_7_1">
1872         Tutorial Series
1873         <span class="md-nav__icon md-icon"></span>
1874       </label>
1875       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1876         <label class="md-nav__title" for="__nav_7_1">
1877           <span class="md-nav__icon md-icon"></span>
1878           Tutorial Series
1879         </label>
1880         <ul class="md-nav__list" data-md-scrollfix>
1881
1882
1883
1884
1885
1886     <li class="md-nav__item">
1887       <a href="../../tutorial/series/overview/" class="md-nav__link">
1888         Overview
1889       </a>
1890     </li>
1891
1892
1893
1894
1895
1896
1897
1898     <li class="md-nav__item">
1899       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1900         Part 1
1901       </a>
1902     </li>
1903
1904
1905
1906
1907
1908
1909
1910     <li class="md-nav__item">
1911       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1912         Part 2
1913       </a>
1914     </li>
1915
1916
1917
1918
1919
1920
1921
1922     <li class="md-nav__item">
1923       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1924         Part 3
1925       </a>
1926     </li>
1927
1928
1929
1930         </ul>
1931       </nav>
1932     </li>
1933
1934
1935
1936         </ul>
1937       </nav>
1938     </li>
1939
1940
1941
1942   </ul>
1943 </nav>
1944                   </div>
1945                 </div>
1946               </div>
1947
1948
1949
1950               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1951                 <div class="md-sidebar__scrollwrap">
1952                   <div class="md-sidebar__inner">
1953
1954 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1955
1956
1957
1958
1959
1960     <label class="md-nav__title" for="__toc">
1961       <span class="md-nav__icon md-icon"></span>
1962       Table of contents
1963     </label>
1964     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1965
1966         <li class="md-nav__item">
1967   <a href="#template-types-and-conventions" class="md-nav__link">
1968     Template Types and Conventions
1969   </a>
1970
1971 </li>
1972
1973         <li class="md-nav__item">
1974   <a href="#installing-templates" class="md-nav__link">
1975     Installing Templates
1976   </a>
1977
1978 </li>
1979
1980         <li class="md-nav__item">
1981   <a href="#base-templates" class="md-nav__link">
1982     Base Templates
1983   </a>
1984
1985     <nav class="md-nav" aria-label="Base Templates">
1986       <ul class="md-nav__list">
1987
1988           <li class="md-nav__item">
1989   <a href="#frontend" class="md-nav__link">
1990     Frontend
1991   </a>
1992
1993 </li>
1994
1995           <li class="md-nav__item">
1996   <a href="#backend" class="md-nav__link">
1997     Backend
1998   </a>
1999
2000 </li>
2001
2002       </ul>
2003     </nav>
2004
2005 </li>
2006
2007         <li class="md-nav__item">
2008   <a href="#common-template-components" class="md-nav__link">
2009     Common Template Components
2010   </a>
2011
2012     <nav class="md-nav" aria-label="Common Template Components">
2013       <ul class="md-nav__list">
2014
2015           <li class="md-nav__item">
2016   <a href="#forms" class="md-nav__link">
2017     Forms
2018   </a>
2019
2020 </li>
2021
2022           <li class="md-nav__item">
2023   <a href="#tab-menus" class="md-nav__link">
2024     Tab Menus
2025   </a>
2026
2027 </li>
2028
2029       </ul>
2030     </nav>
2031
2032 </li>
2033
2034         <li class="md-nav__item">
2035   <a href="#template-scripting" class="md-nav__link">
2036     Template Scripting
2037   </a>
2038
2039     <nav class="md-nav" aria-label="Template Scripting">
2040       <ul class="md-nav__list">
2041
2042           <li class="md-nav__item">
2043   <a href="#template-variables" class="md-nav__link">
2044     Template Variables
2045   </a>
2046
2047     <nav class="md-nav" aria-label="Template Variables">
2048       <ul class="md-nav__list">
2049
2050           <li class="md-nav__item">
2051   <a href="#modifiers" class="md-nav__link">
2052     Modifiers
2053   </a>
2054
2055 </li>
2056
2057           <li class="md-nav__item">
2058   <a href="#system-template-variable" class="md-nav__link">
2059     System Template Variable
2060   </a>
2061
2062 </li>
2063
2064       </ul>
2065     </nav>
2066
2067 </li>
2068
2069           <li class="md-nav__item">
2070   <a href="#comments" class="md-nav__link">
2071     Comments
2072   </a>
2073
2074 </li>
2075
2076           <li class="md-nav__item">
2077   <a href="#conditions" class="md-nav__link">
2078     Conditions
2079   </a>
2080
2081 </li>
2082
2083           <li class="md-nav__item">
2084   <a href="#foreach-loops" class="md-nav__link">
2085     Foreach Loops
2086   </a>
2087
2088 </li>
2089
2090           <li class="md-nav__item">
2091   <a href="#including-other-templates" class="md-nav__link">
2092     Including Other Templates
2093   </a>
2094
2095 </li>
2096
2097           <li class="md-nav__item">
2098   <a href="#template-plugins" class="md-nav__link">
2099     Template Plugins
2100   </a>
2101
2102 </li>
2103
2104       </ul>
2105     </nav>
2106
2107 </li>
2108
2109     </ul>
2110
2111 </nav>
2112                   </div>
2113                 </div>
2114               </div>
2115
2116
2117           <div class="md-content" data-md-component="content">
2118             <article class="md-content__inner md-typeset">
2119
2120
2121                   <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">
2122                     <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>
2123                   </a>
2124
2125
2126                 <h1 id="templates">Templates<a class="headerlink" href="#templates" title="Permanent link">#</a></h1>
2127 <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).
2128 Templates are text files with <code>.tpl</code> as the file extension.
2129 WoltLab Suite Core compiles the template files once into a PHP file that is executed when a user requests the page.
2130 In subsequent request, as the PHP file containing the compiled template already exists, compiling the template is not necessary anymore.</p>
2131 <h2 id="template-types-and-conventions">Template Types and Conventions<a class="headerlink" href="#template-types-and-conventions" title="Permanent link">#</a></h2>
2132 <p>WoltLab Suite Core supports two types of templates:
2133 frontend templates (or simply <em>templates</em>) and backend templates (<em>ACP templates</em>).
2134 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>
2135 <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>
2136 <ul>
2137 <li><code>RegisterForm.class.php</code> → <code>register.tpl</code></li>
2138 <li><code>UserPage.class.php</code> → <code>user.tpl</code></li>
2139 </ul>
2140 <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>
2141 <div class="admonition info">
2142 <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>
2143 </div>
2144 <h2 id="installing-templates">Installing Templates<a class="headerlink" href="#installing-templates" title="Permanent link">#</a></h2>
2145 <p>Templates and ACP templates are installed by two different package installation plugins:
2146 the <a href="../../package/pip/template/">template PIP</a> and the <a href="../../package/pip/acp-template/">ACP template PIP</a>.
2147 More information about installing templates can be found on those pages. </p>
2148 <h2 id="base-templates">Base Templates<a class="headerlink" href="#base-templates" title="Permanent link">#</a></h2>
2149 <h3 id="frontend">Frontend<a class="headerlink" href="#frontend" title="Permanent link">#</a></h3>
2150 <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>
2151
2152 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2153
2154 <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>
2155 </code></pre></div>
2156 <h3 id="backend">Backend<a class="headerlink" href="#backend" title="Permanent link">#</a></h3>
2157 <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>
2158
2159 <span class="x">&lt;header class=&quot;contentHeader&quot;&gt;</span>
2160 <span class="x">    &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2161 <span class="x">        &lt;h1 class=&quot;contentTitle&quot;&gt;Title&lt;/h1&gt;</span>
2162 <span class="x">    &lt;/div&gt;</span>
2163
2164 <span class="x">    &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2165 <span class="x">        &lt;ul&gt;</span>
2166 <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>
2167
2168 <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>
2169 <span class="x">        &lt;/ul&gt;</span>
2170 <span class="x">    &lt;/nav&gt;</span>
2171 <span class="x">&lt;/header&gt;</span>
2172
2173 <span class="cp">{</span><span class="c">* content *</span><span class="cp">}</span><span class="x"></span>
2174
2175 <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>
2176 </code></pre></div>
2177 <p><code>foo.bar.baz</code> is the language item that contains the title of the page.</p>
2178 <h2 id="common-template-components">Common Template Components<a class="headerlink" href="#common-template-components" title="Permanent link">#</a></h2>
2179 <h3 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h3>
2180 <div class="admonition info">
2181 <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>
2182 </div>
2183 <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>
2184 <span class="x">    &lt;div class=&quot;section&quot;&gt;</span>
2185 <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>
2186 <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>
2187 <span class="x">            &lt;dd&gt;</span>
2188 <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>
2189 <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>
2190 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span>
2191 <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>
2192 <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>
2193 <span class="x">                        </span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2194 <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>
2195 <span class="x">                        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2196 <span class="x">                    &lt;/small&gt;</span>
2197 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2198 <span class="x">            &lt;/dd&gt;</span>
2199 <span class="x">        &lt;/dl&gt;</span>
2200
2201 <span class="x">        &lt;dl&gt;</span>
2202 <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>
2203 <span class="x">            &lt;dd&gt;</span>
2204 <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>
2205 <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>
2206 <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>
2207 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2208 <span class="x">            &lt;/dd&gt;</span>
2209 <span class="x">        &lt;/dl&gt;</span>
2210
2211 <span class="x">        </span><span class="cp">{</span><span class="c">* other fields *</span><span class="cp">}</span><span class="x"></span>
2212
2213 <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>
2214 <span class="x">    &lt;/div&gt;</span>
2215
2216 <span class="x">    </span><span class="cp">{</span><span class="c">* other sections *</span><span class="cp">}</span><span class="x"></span>
2217
2218 <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>
2219
2220 <span class="x">    &lt;div class=&quot;formSubmit&quot;&gt;</span>
2221 <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>
2222 <span class="x">        </span><span class="cp">{</span><span class="nf">csrfToken</span><span class="cp">}</span><span class="x"></span>
2223 <span class="x">    &lt;/div&gt;</span>
2224 <span class="x">&lt;/form&gt;</span>
2225 </code></pre></div>
2226 <h3 id="tab-menus">Tab Menus<a class="headerlink" href="#tab-menus" title="Permanent link">#</a></h3>
2227 <div class="highlight"><pre><span></span><code><span class="x">&lt;div class=&quot;section tabMenuContainer&quot;&gt;</span>
2228 <span class="x">    &lt;nav class=&quot;tabMenu&quot;&gt;</span>
2229 <span class="x">        &lt;ul&gt;</span>
2230 <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>
2231 <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>
2232
2233 <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>
2234 <span class="x">        &lt;/ul&gt;</span>
2235 <span class="x">    &lt;/nav&gt;</span>
2236
2237 <span class="x">    &lt;div id=&quot;tab1&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2238 <span class="x">        &lt;div class=&quot;section&quot;&gt;</span>
2239 <span class="x">            </span><span class="cp">{</span><span class="c">* contents of first tab *</span><span class="cp">}</span><span class="x"></span>
2240 <span class="x">        &lt;/div&gt;</span>
2241 <span class="x">    &lt;/div&gt;</span>
2242
2243 <span class="x">    &lt;div id=&quot;tab2&quot; class=&quot;tabMenuContainer tabMenuContent&quot;&gt;</span>
2244 <span class="x">        &lt;nav class=&quot;menu&quot;&gt;</span>
2245 <span class="x">            &lt;ul&gt;</span>
2246 <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>
2247 <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>
2248
2249 <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>
2250 <span class="x">            &lt;/ul&gt;</span>
2251 <span class="x">        &lt;/nav&gt;</span>
2252
2253 <span class="x">        &lt;div id=&quot;tab2A&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2254 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2255 <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>
2256 <span class="x">            &lt;/div&gt;</span>
2257 <span class="x">        &lt;/div&gt;</span>
2258
2259 <span class="x">        &lt;div id=&quot;tab2B&quot; class=&quot;tabMenuContent&quot;&gt;</span>
2260 <span class="x">            &lt;div class=&quot;section&quot;&gt;</span>
2261 <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>
2262 <span class="x">            &lt;/div&gt;</span>
2263 <span class="x">        &lt;/div&gt;</span>
2264
2265 <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>
2266 <span class="x">    &lt;/div&gt;</span>
2267
2268 <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>
2269 <span class="x">&lt;/div&gt;</span>
2270 </code></pre></div>
2271 <h2 id="template-scripting">Template Scripting<a class="headerlink" href="#template-scripting" title="Permanent link">#</a></h2>
2272 <h3 id="template-variables">Template Variables<a class="headerlink" href="#template-variables" title="Permanent link">#</a></h3>
2273 <p>Template variables can be assigned via <code>WCF::getTPL()-&gt;assign('foo', 'bar')</code> and accessed in templates via <code>$foo</code>:</p>
2274 <ul>
2275 <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>
2276 <li><code>{#$foo}</code> will result in the contents of <code>$foo</code> to be passed to <code>StringUtil::formatNumeric()</code> before being printed.
2277   Thus, this method is relevant when printing numbers and having them formatted correctly according the the user’s language.</li>
2278 <li><code>{@$foo}</code> will result in the contents of <code>$foo</code> to be printed directly.
2279   In general, this method should not be used for user-generated input.</li>
2280 </ul>
2281 <p>Multiple template variables can be assigned by passing an array:</p>
2282 <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>
2283     <span class="s1">&#39;foo&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span>
2284     <span class="s1">&#39;baz&#39;</span> <span class="o">=&gt;</span> <span class="k">false</span>
2285 <span class="p">]);</span>
2286 </code></pre></div>
2287 <h4 id="modifiers">Modifiers<a class="headerlink" href="#modifiers" title="Permanent link">#</a></h4>
2288 <p>If you want to call a function on a variable, you can use the modifier syntax:
2289 <code>{@$foo|trim}</code>, for example, results in the trimmed contents of <code>$foo</code> to be printed.</p>
2290 <h4 id="system-template-variable">System Template Variable<a class="headerlink" href="#system-template-variable" title="Permanent link">#</a></h4>
2291 <p>The template variable <code>$tpl</code> is automatically assigned and is an array containing different data:</p>
2292 <ul>
2293 <li><code>$tpl[get]</code> contains <code>$_GET</code>.</li>
2294 <li><code>$tpl[post]</code> contains <code>$_POST</code>.</li>
2295 <li><code>$tpl[cookie]</code> contains <code>$_COOKIE</code>.</li>
2296 <li><code>$tpl[server]</code> contains <code>$_SERVER</code>.</li>
2297 <li><code>$tpl[env]</code> contains <code>$_ENV</code>.</li>
2298 <li><code>$tpl[now]</code> contains <code>TIME_NOW</code> (current timestamp).</li>
2299 </ul>
2300 <p>Furthermore, the following template variables are also automatically assigned:</p>
2301 <ul>
2302 <li><code>$__wcf</code> contains the <code>WCF</code> object (or <code>WCFACP</code> object in the backend).</li>
2303 </ul>
2304 <h3 id="comments">Comments<a class="headerlink" href="#comments" title="Permanent link">#</a></h3>
2305 <p>Comments are wrapped in <code>{*</code> and <code>*}</code> and can span multiple lines:</p>
2306 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* some</span>
2307 <span class="c">   comment *</span><span class="cp">}</span><span class="x"></span>
2308 </code></pre></div>
2309 <div class="admonition info">
2310 <p class="admonition-title">The template compiler discards the comments, so that they not included in the compiled template.</p>
2311 </div>
2312 <h3 id="conditions">Conditions<a class="headerlink" href="#conditions" title="Permanent link">#</a></h3>
2313 <p>Conditions follow a similar syntax to PHP code:</p>
2314 <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>
2315 <span class="x">    foo is bar</span>
2316 <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>
2317 <span class="x">    foo is baz</span>
2318 <span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2319 <span class="x">    foo is neither bar nor baz</span>
2320 <span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2321 </code></pre></div>
2322 <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>
2323 <p>More examples:</p>
2324 <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>
2325
2326 <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>
2327 </code></pre></div>
2328 <h3 id="foreach-loops">Foreach Loops<a class="headerlink" href="#foreach-loops" title="Permanent link">#</a></h3>
2329 <p>Foreach loops allow to iterate over arrays or iterable objects:</p>
2330 <div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2331 <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>
2332 <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>
2333 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2334 <span class="x">&lt;/ul&gt;</span>
2335 </code></pre></div>
2336 <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.
2337 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>
2338 <div class="highlight"><pre><span></span><code><span class="x">&lt;ul&gt;</span>
2339 <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>
2340 <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>
2341 <span class="x">            something special for the first iteration</span>
2342 <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>
2343 <span class="x">            something special for the last iteration</span>
2344 <span class="x">        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2345
2346 <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>
2347 <span class="x">    </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2348 <span class="x">&lt;/ul&gt;</span>
2349 </code></pre></div>
2350 <p>In contrast to PHP’s foreach loop, templates also support <code>foreachelse</code>:</p>
2351 <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>
2352 <span class="x">    …</span>
2353 <span class="cp">{</span><span class="nf">foreachelse</span><span class="cp">}</span><span class="x"></span>
2354 <span class="x">    there is nothing to iterate over</span>
2355 <span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2356 </code></pre></div>
2357 <h3 id="including-other-templates">Including Other Templates<a class="headerlink" href="#including-other-templates" title="Permanent link">#</a></h3>
2358 <p>To include template named <code>foo</code> from the same domain (frontend/backend), you can use</p>
2359 <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>
2360 </code></pre></div>
2361 <p>If the template belongs to an application, you have to specify that application using the <code>application</code> attribute:</p>
2362 <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>
2363 </code></pre></div>
2364 <p>Additional template variables can be passed to the included template as additional attributes:</p>
2365 <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>
2366 </code></pre></div>
2367 <h3 id="template-plugins">Template Plugins<a class="headerlink" href="#template-plugins" title="Permanent link">#</a></h3>
2368 <p>An overview of all available template plugins can be found <a href="../template-plugins/">here</a>.</p>
2369
2370
2371
2372
2373 <hr>
2374 <div class="md-source-date">
2375   <small>
2376
2377       Last update: 2021-01-15
2378
2379   </small>
2380 </div>
2381
2382
2383
2384
2385
2386
2387
2388
2389             </article>
2390           </div>
2391         </div>
2392
2393       </main>
2394
2395
2396 <footer class="md-footer">
2397
2398     <nav class="md-footer__inner md-grid" aria-label="Footer">
2399
2400         <a href="../languages/" class="md-footer__link md-footer__link--prev" rel="prev">
2401           <div class="md-footer__button md-icon">
2402             <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>
2403           </div>
2404           <div class="md-footer__title">
2405             <div class="md-ellipsis">
2406               <span class="md-footer__direction">
2407                 Previous
2408               </span>
2409               Languages
2410             </div>
2411           </div>
2412         </a>
2413
2414
2415         <a href="../css/" class="md-footer__link md-footer__link--next" rel="next">
2416           <div class="md-footer__title">
2417             <div class="md-ellipsis">
2418               <span class="md-footer__direction">
2419                 Next
2420               </span>
2421               CSS
2422             </div>
2423           </div>
2424           <div class="md-footer__button md-icon">
2425             <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>
2426           </div>
2427         </a>
2428
2429     </nav>
2430
2431   <div class="md-footer-meta md-typeset">
2432     <div class="md-footer-meta__inner md-grid">
2433       <div class="md-footer-copyright">
2434
2435           <div class="md-footer-copyright__highlight">
2436             Copyright © 2020 WoltLab GmbH
2437           </div>
2438
2439         Made with
2440         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2441           Material for MkDocs
2442         </a>
2443
2444       </div>
2445       <div class="md-footer-copyright">
2446         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2447         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2448 </div>
2449     </div>
2450   </div>
2451 </footer>
2452
2453     </div>
2454     <div class="md-dialog" data-md-component="dialog">
2455       <div class="md-dialog__inner md-typeset"></div>
2456     </div>
2457     <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>
2458
2459
2460       <script src="../../assets/javascripts/bundle.d892486b.min.js"></script>
2461
2462
2463   </body>
2464 </html>