Mini Templates

- 129 Posts
Paul Reply #1, 9 years, 1 month ago
With MODx, I like to set up a single template for all the main types of page, that contains the head, header, menu, footer and anything else that is common to all pages.

Then instead of having
```
[[*content]]
```
in it, I have
```
[[$[[*pageTemplate]]]]
```
pageTemplate is like a mini template that contains the devations for different page types - like Home, Blog, Our team etc. It is a dropdown TV that just leads straight to a chunk with the same name. It is this chunk that contains the
```
[[*content]]
```
and whatever layout is needed for this page type.

That way, if the head alters, or any other part of the common parts, it is a single change. I used to have several templates with each part abstracted out, so you'd have
```
[[$head]][[$header]][[*content]][[$footer]]
```
and then variations of this for different page types - but still, there were occasions where I would end up having to touch each template to make an overall structure change.

The downside of this approach is that TVs are assigned to all page types - because there is only one template. I find that this is fine usually, that resources that need specific TVs are generally not displayed as pages, but pulled in with getResources or similar. So they can have their own blank template just for storing variables.

I'd be interestest to hear how others approach this, what you have found optimal. [ed. note: paulkoan last edited this post 9 years, 1 month ago.]

5,888 Posts

Bruno17 Reply #2, 9 years, 1 month ago

you can have different templates, which look like this:

[[$templates_basis?
&pagetitle=`[[*pagetitle]]`
&headtitle=`[[*headtitle]]`
&description=`[[*description]]`
&keywords=[[*keywords]] 
&pagetitle_1=`<div class="block-header">[[*pagetitle]]</div>`
&pagetitle_2=`[[$pagetitle_h1]]`
&content_chunk=`$archiv_content`
]]

[[$templates_basis?
&pagetitle=`[[*pagetitle]]`
&headtitle=`[[*headtitle]]`
&description=`[[*description]]`
&keywords=[[*keywords]]  
&pagetitle_1=`[[$pagetitle_h1]]`
&pagetitle_2=``
&content_chunk=`$content_boersenanalyse_uebersicht`
]]

[[!migxLoopCollection? 
&packageName=`boersenlexikon` 
&classname=`blQALink`
&joins=`[{"alias":"QA","selectfields":"pagetitle,content"}]`
&where=`{"theme_id":"[[!+lexikon_theme.id]]"}`
&sortConfig=`[{"sortby":"pos"}]`
&limit=`1`
&tpl=`@CODE:[[+QA_pagetitle]]`
&toPlaceholder=`h1_title`
]]

[[$templates_basis?
&pagetitle=`[[!+h1_title]]`
&description=`[[!+lexikon_theme.description]]`
&keywords=`[[!+lexikon_theme.keywords]]` 
&pagetitle_1=`<h2><span class="pagetitle">A-Z</span>Böhms Börsenlexikon</h2>`
&pagetitle_2=``
&content_chunk=`!$LexikonThemeContent`
]]

this way, I need only one chunk with the template-code and some placeholders

[[+pagetitle]]
[[+description]]
[[+keywords]]
[[+pagetitle_1]]
[[+pagetitle_2]]
[[[[+content_chunk]]]]

which can look like

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <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="keywords" content="[[+keywords]]">
    <title>[[+headtitle:default=`[[+pagetitle]]`]] [[++site_name]]</title>
    <base href="[[++site_url]]" />

    <link rel="stylesheet" href="/style/styles.css">
</head>
<body class="full">

<div class="container">
[[+formit_successmessage]]
<div id="header" class="row">

</div>
<div id="nav-level1">
[[pdoMenu? 
&startId=`0` 
&level=`1` 
&tpl=`nav_level1_rowTpl` 
&outerClass=`nav nav-tabsx nav-level1`
]]
</div>

[[pdoMenu? 
&startId=`[[pdoField? &field=`id` &id=`[[*id]]` 
&topLevel=`1`]]` 
&level=`1`
&outerClass=`nav nav-tabsx nav-level2`
]]
<div class="row" id="breadcrumb-container">
[[pdoCrumbs? 
&tplWrapper=`@INLINE 
<div class="breadcrumbs col-xs-12">Sie sind hier: [[+output]][[$breadcrumb_anzeige]]</div>`
&tplCurrent=`@INLINE <span>[[+pagetitle]]</span>`
&outputSeparator=` > `
]]

</div>

<div id="content" class="row">
<div class="col-sm-8 contentcontainer">
[[$[[*header_chunk]]]]

[[[[*show_slider:is=`1`:then=`$top_slider`:else=``]]]]
[[[[*show_article_image:is=`1`:then=`$article_image`:else=``]]]]
<div class="contentblock [[*hr-color]]">
[[+pagetitle_1]]

[[+pagetitle_2]]

[[[[+content_chunk]]]]

[[*crosslinks]]

</div>
</div>
<div id="sidebar" class="col-sm-4">
[[getImageList?
&tvname=`sidebar`
&inheritFrom=`parents,33`
&tpl=`@CODE:[[$[[+sideblock]]]]`
]]
</div>

</div>

<div class="row">
<div class="col-xs-12" id="footer">


</div>
</div>
</div>

</body>
</html>

This way, you can have many templates with different TVs assigned to it, but only one chunk with the whole template-code.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

- 129 Posts
Paul Reply #3, 9 years, 1 month ago

Quote from: Bruno17 at Mar 16, 2015, 07:01 AM
you can have different templates, which look like this:

[[!snip]]

This way, you can have many templates with different TVs assigned to it, but only one chunk with the whole template-code.

Funny, I rested my chin on my palm to read your post and saw your avatar looking back at me exactly the same

Yeah, I like your approach.