Easily modify ECMs templates--navigation bars and loop sub columns

Maybe, you are a beginner, or you are an experienced ECMS users, but as long as you use ECMs to make the site, you will inevitably change the template repeatedly, once a small shortage, modify all the template will be modified, it is really a very tiring thing, there is no more convenient way. The answer is yes, yes, please see the text below.

use common template variables to define a common part
You can generally build [!--temp.header--], a common part of [!--temp.footer--],[!--temp.sitename--],[!--temp.search--]. Then insert directly where the page needs to be inserted. The advantage is that you need to modify this variable only, not every template page to change.

Note: Dynamic pages, such as search, comments, and so on do not support public template variables

Second, the website general navigation (All Level column)
Before the 3.7 version, only manually set, 3.7 New with the template of the navigation tag can be implemented

Page template content:
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

List content Template
(List.var)

<a href= "[!--classurl--]" title= "[!--classname--]" >[!--classname--]</a> |

Tag call [showclasstemp]0, label template ID,0[/SHOWCLASSTEMP]

Note: If the column page shows the current column navigation, you can add a single quote ' 0 '--that's what I do. If the ID number is filled with the ID of a column, the navigation for a particular column

Upload the following image:




second, or navigation, in large columns show small columns. It's about the same as above, but it's a little different, plus a lot more links .

Tag Call
[SHOWCLASSTEMP] Parent column ID, label template ID, whether to display the number of column information [/showclasstemp]

Page template content:

<div> folk Tradition </div><div> [!--empirenews.listtemp--]<!--list.var1-->[!-- empirenews.listtemp--] <a href= "[!--bclassurl--]" > More &gt;&gt;</a></div>

List content Template
(List.var)

<a href= "[!--classurl--]" title= "[!--classname--]" >[!--classname--]</a> |

Upload the following image:




third, the navigation technique is really many, then tells you one uses in the column page and the list page navigation effect

Page calls

<ul class= "column" >[showclasstemp] ' selfinfo ', label template id,0[/showclasstemp]</ul>

Page template content:

[!--empirenews.listtemp--]<!--list.var1-->[!--Empirenews.listtemp--]code]

List content Template
(List.var)
<li><a href= "[!--classurl--]" >[!--classname--]</a></li>

Why do you use Li? It is mainly convenient to modify the style, you want to let it show how to display, including the border, background and so on
Define it in your style list.
UL {
padding:0;
margin:0;
}
. column Li {
width:49%;
padding:0px;
margin:0px;
Float:left;
List-style:none;
Background:url (icon_li4.gif) No-repeat left center;/* with the background map to define the small front icon * *
}

So it shows a row of two columns, and if you want it to display one row, this definition
. column Li {
padding:0px;
margin:0px;
List-style:none;
Background:url (icon_li4.gif) No-repeat left center;/* with the background map to define the small front icon * *
}
If you want it to be displayed horizontally, you can
. column Li {
PADDING:2PX 4px;
margin:0px;
Display:inline;
List-style:none;
}

Upload the following image:



four, use ' selfinfo ' more
In the section page and the list page, use ' selfinfo ' instead of the specific ID number (except as you need to specify specifically)
[Phomenews], [Ecmsinfo], [phomeautopic] and so on can use this.


use of circular sub-column data labels
This is worthy of recommendation. Like the following effect diagram, in the past is a need to define their own, but with this tag, we only need a tag call can be done, and later add, delete sub columns do not need to manually change

Tag call: [Listsonclass] ' selfinfo ', display number of items, title intercept number, whether display column name, operation type, template ID, only show a title picture [/listsonclass]
Page template content:

<div class= "C1" >
<div class= "Pad-all" >
<div class= "Title2" > "[!--the.classname--]
"</div>
</div>
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
<div class= "More" ><a href= "[!--the.classurl--]" > More &gt;&gt;</a></div>
</div>

List content Template
(List.var)

<li><a href= "[!--titleurl--]" title= "[!--oldtitle--]" >[!--title--]</a> <span class= "Date" > ([!--newstime--]) </span></li>

Upload the following image:




"Automation" is actually the ' selfinfo ' and the cyclic label, as well as the template with the navigation tag of the three ... Good use, you can make the various effects you want, such as the current site map is not pro, you can combine the navigation tag to do .... Open up your imagination. Empire, everything is possible.

Here are some common questions and web optimization tips (personal point of view, for reference only)

Six, the picture on the left, the title and introduction on the right side of a similar mixed-row effect
People often ask the empire how to achieve a similar effect, WC each time only answer with Universal label ... Get the good guys out of here.

Tag call: [Ecmsinfo] column Id/topic ID, display number, title intercept number, whether display column name, operation type, template Id,1[/ecmsinfo]

Page template Content
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

List content Template
(List.var)

<table cellspacing= "0" cellpadding= "0" width= "290" border= "0" >
<tbody>
<tr>
&LT;TD width= "140" rowspan= "2" align= "center" heiht= "" ><div><a href= "[!--titleurl--]" ></a></div></td> "
&LT;TD width= "210" ><a href= "[!--titleurl--]" >[!--title--]</a></td>
</tr>
<tr>
<td><a href= "[!--titleurl--]" >[!--smalltext--]</a></td>
</tr>
</tbody>
</table>

Upload the following image:




Now Div+css is more popular, say the use of Li to do a list of text titles. You don't have to use div to construct the page, because not everyone is familiar with it, but you shouldn't give up the list with Li ... The code will save a lot and it's easy to control

Tag call: <ul>[ecmsinfo] column Id/topic ID, display number, title intercept number, whether display column name, operation type, template id,0[/ecmsinfo]</ul>
Style
UL {
padding:0;
margin:0;
}
Li {
padding:0px;
margin:0px;
List-style:none;
Background:url (icon_li4.gif) No-repeat left center;/* with the background map to define the small front icon * *
}
UL is not placed in the field template, mainly in order to facilitate the control of different display effects, a certain part of the different, just need to specify an ID or class on it. Here is an example of an unordered list with time

Page template Content
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

List content Template
(List.var)

<li><a href= "[!--titleurl--]" title= "[!--oldtitle--]" >[!--title--]</a> <span class= "Date" > ([!--newstime--]) </span></li>

If it takes time to align on the right, change to

<span class= "Date" > ([!--newstime--]) </span><li><a href= "[!--titleurl--]" title= "[!-- oldtitle--] ">[!--title--]</a></li>

Define a style
. Date {
Float:right;
}



simple implementation of seven or one rows and two columns (CSS control)

The template label is the same as what is said above
Here is the code that is invoked
<table width= "100%" border= "0" cellspacing= "4" cellpadding= "0" >
<tr>
&LT;TD width= "27%" align= "center" ><div class= "mar-t_s" > <a href= "http://hongxiu.msn.com.cn/a/a/01293" /1292849.shtml "></a>"
<div><a href= "http://hongxiu.msn.com.cn/a/a/01293/1292849.shtml" > Flower Life Circle </a& gt;</div>
</div></td>
<td><ul class= "Li_float" >[ecmsinfo] column Id/topic ID, display number, title intercept number, whether display column name, operation type, template id,0[/ecmsinfo]</ul> </td>
</tr>
</table>


UL {
padding:0;
margin:0;
}
. li_float Li {
width:49%;
padding:0px;
margin:0px;
Float:left;
List-style:none;
Background:url (icon_li4.gif) No-repeat left center;/* with the background map to define the small front icon * *
}


The last effect of the above, as shown in the picture

Upload the following image: