[MODx] 3. Working with chunks, TV, Category

1. Add chunk: 

 

For example, replace the header by using chunk. 

Usage: [[$chunk_name]]

  • Cut all the header code from the Learn template
<!DOCTYPE HTML>
<!--
    Escape Velocity by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>[[++site_name]] - [[*pagetitle]]</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-desktop.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
  • create a new chunk called 'learn_header' and parse the content in.
  • Inside the Learn Template, put [[$learn_header]] as a placeholder.

 

2. Create a 'Template Variable':

 

Usage: [[*tv_name]]

  • Click to new template variable called 'favorText'

  • Input type as 'RichText'

  • Template Access assign to 'Learn Template'

  • Then save it
  • Go to the Resource tab, 'Learn' Document, you will see there is a new tab call tempalte variable

  • You will see a rich text inside template variable, can write some text into it

  • We wil replace the text on the web page by this 'TV', so first add template variable into the 'learn template'
        <!-- Intro -->
            <div id="intro-wrapper" class="wrapper style1">
                <div class="title">The Introduction</div>
                <section id="intro" class="container">
                    <p class="style1">[[*favorText]]</p>
                    <p class="style2">
  • View the page to see the change

 

3. Down to the Category:

 

You can notice that, in the template variable, it show uncategorized:

You can decide the category which you want, here, we divid the page according to the different part of color.

 Therefore, 1. Black, 2. Saimon, 3. White:

  • Create those three categories

  • Edit 'favorText', select category as 'Saimon', index as '2'
  • Copy favorText as 'titletag', set index as '1', input type as 'Text'

  • Inside the 'Learn Template',  add 'titleTag' into it.
        <!-- Intro -->
            <div id="intro-wrapper" class="wrapper style1">
                <div class="title">[[*titleTag]]</div>
                <section id="intro" class="container">
                    <p class="style1">[[*favorText]]</p>
                    <p class="style2">
  • In the 'learn' document, template variable, add value to the titleTag

  • See the result

posted @ 2015-01-05 23:24  Zhentiw  阅读(344)  评论(0)  编辑  收藏  举报