[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">