首页 > 代码库 > [MODx] 3. Working with chunks, TV, Category

[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="http://www.mamicode.com/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="http://www.mamicode.com/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

技术分享

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