This question has been answered by multiple community members. See the first response.
[[$ChunkName]]
[[SnippetName]] [[!SnippetName]]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="[[++modx_charset]]"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="[[*description]]"> <meta name="author" content="[[*createdby:userinfo=`fullname`]]"> <base href="[[++site_url]]"> <title>[[++site_name]] - [[*longtitle]]</title> <link href="assets/theme/steampunk/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/theme/steampunk/css/agency.css" rel="stylesheet"> <link href="assets/theme/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="assets/theme/steampunk/css/steampunk.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top" class="index"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top">[[++site_name]]</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"><a href="#page-top"></a></li> <li><a class="page-scroll" href="#about">About</a></li> <li><a class="page-scroll" href="#recipes">Recipes</a></li> <li><a class="page-scroll" href="#appendix">Appendix</a></li> </ul> </div> </div> </nav> <header> <div class="container"> <div class="intro-text"> <div class="intro-heading">Tips, Tricks and How-Tos from the MODX Forums</div> </div> </div> </header> <section id="about"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">About the Cookbook</h2> <h3 class="section-subheading text-muted"></h3> </div> </div> <div class="row"> <div class="book"> [[*content]] </div> </div> </div> </section> <section id="recipes"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Recipes</h2> <h3 class="section-subheading text-muted"></h3> </div> </div> <div class="row"> [[pdoResources? &context=`web` &parents=`+0` &resources=`-1` &depth=`0` &showHidden=`0` &limit=`0` &includeTVs=`recipesCategoryImage` &tpl=`recipesContainersTpl` &sortby=`menuindex` &sortdir=`ASC` ]] </div> </div> </section> <section id="appendix"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Appendix</h2> <h3 class="section-subheading text-muted"></h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="text-center"> [[pdoResources? &parents=`17` &depth=`0` &tpl=`appendixTpl` &sortby=`menuindex` &sortdir=`ASC` ]] </ul> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> [[$footer]] </div> </div> </footer> <!-- Recipes Modals --> [[getResources? &context=`web` &parents=`+0` &resources=`-1` &depth=`0` &limit=`0` &sortby=`menuindex` &sortdir=`ASC` &showHidden=`0` &tpl=`recipesModalsTpl` &includeContent=`1` &includeTVs=`recipesCategoryImage` ]] <!-- End Recipes Modals --> <script src="assets/theme/steampunk/js/jquery.js"></script> <script src="assets/theme/steampunk/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="assets/theme/steampunk/js/classie.js"></script> <script src="assets/theme/steampunk/js/cbpAnimatedHeader.js"></script> <script src="assets/theme/steampunk/js/jqBootstrapValidation.js"></script> <script src="assets/theme/steampunk/js/contact_me.js"></script> <script src="assets/theme/steampunk/js/agency.js"></script> </body> </html>
I would not recommend modifying any of the existing templates. I would suggest creating a new template, and assigning a test resource to use it. Then once it's working the way you want, you can either copy/paste the new template code to the existing template, or else change the resources to use the new template. The "Batcher" extra will help with the second solution.