编辑“CMS Made Simple/模板使用”

{{CMS Made Simple top}}
你已经看到网站编辑如何选择模板来定义每个页面如何显示。而模板是否可用和看起来是什么样则是设计师的工作。
 
在我是网站设计师一节中已经提到，模板只是给出网站的结构，那仅仅是页面中包含什么。通过样式表你可以获得你想要的观感。 

好了， 在CMS Made Simple中你将如何创建模板呢? 很简单，你只需要使用简单的HTML和为内容和菜单等预留的占位符。当用户浏览你的网站页面的时候，页面会自动从模板生成，并使用内容填充占位符。在本节中，你将学会缺省模板是如何构建的。 

这意味着你可以从任何你喜欢的页面获取布局并且很容易地为你的CMSMS页面生成模板。

==在 CMS Made Simple 模板中使用的通用标签==
下面是在模板中用作占位符最常使用的标签：
 
*{sitename} - 将会使用你在全局设置中设置的站点名称替代。 
*{title} - 将会使用内容的标题替代(当你创建内容的时候你可以指定标题)。 
*{stylesheet} - 该标签必须在 <head></head> 标签之间，它将链接所有你已经附加到模板的样式表，如果忘记了这一点，在页面中将没有样式表。如果想使用外部样式表，可以在头部添加一个<link/> 标签。 
*{metadata} - 将会添加你在全局设置中设置的meta data。 
*{content} - 将会被你所选择的页面的实际内容替代（你可以使用 {content block='another_content_area'} 添加另一个可编辑的区域到模板中）。要了解其它的信息，请阅读如何添加多个内容块 和 How to modify template to show multiple content blocks only if they have text。 
*{content_image} - 将会被在页面编辑窗口中选择的图片所替代。(使用 {content_image block='MyImage' dir='images'} 看看效果)。 
*{$content_obj->GetPropertyValue('image')} - 将会被你所编辑的页面所选择的图片的文件名所替代。(使用 <img src="uploads/images/*{$content_obj->GetPropertyValue('image')}" /> 看看效果)。 
*{breadcrumbs} - 将被你所选择的内容的路径所替代，例如："首页>>产品展示>>最新产品"。 
*{menu} - 这是最常见的菜单之一。在你纺织了占位符({menu})的页面，整个菜单将自动生成。该标签也可以使用参数，这取决于你想如何显示菜单。例如{menu collapse='1'}将在菜单中折叠（隐藏）菜单中的子项目，菜单子项目只在“当前”菜单中显示。 


==你如何知道在一个模板中你可以使用哪些占位符？== 
在管理控制台的扩展 -> 标签菜单下你将找到一个很长的标签列表，例如{title}, {stylesheet} 和 {breadcrumbs}等，点击它们的帮助链接查看它们怎么使用。 

你可以生成你自己的用户自定义标签，到“扩展/用户自定义标签”下点击“添加用户自定义标签”，填入名称和代码并点击提交，然后再“内容”中插入像这样的代码即可：{userdefinedtag}。 

模块 是这样插入使用的：{cms_module module='modulename'}。 

参看它们的帮助文件查看它们是如何使用的。(在扩展 -> 模块菜单下)。 

对于很多标签和模块，你可以使用参数，例如： {tagname parameter='value'}。 


== How do you get the contents of tags into variables? ==

<elijahlofgren> Is there an easy way to access the title of the page using a smarty variable? I want to call: {Products category={title}} but is there a way to store the contents of {title} into a $page_title variable so that I can do {Products category=$page_title} ? 
<calguy1000> elijahlofgren: {capture assign='mytitle'}{title}{/capture} 
<bigcalm> elijahlofgren: look at {capture}{title}{/capture

==附加样式表== 
要样式化模板中的元素或定位div元素的位置，需要附加一个或多个样式表到模板。在"布局/模板"的模板列表中，在对应模板的右边点击CSS图标，从下拉列表中选择一个有效的样式表，然后点击“添加样式表”。 

== 自定义默认模板==

所有CMS Made Simple自带的默认模板或多或少都有相同的HTML代码，不同的地方是使用何种菜单以及由1个还是多个内容块，其余的部分都通过CSS来样式化。
 
因为CMS Made Simple默认模板不使用表格，在页面中作为（<table>）替代的<div>标记用来定义每个内容块，每个div块的位置和样式则通过CSS来定义。
 
在本小节中，我们将过一遍模板，逐块地说明一下它们是什么以及你想改变什么。 

风格和外观之后再修改。修改风格和外观请阅读 附加到每个模板的样式表。 

== 声明DOCTYPE 和 指定language== 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

DOCTYPE(document type declaration)告诉浏览器你使用的是哪个版本的(X)HTML，以便浏览器能够正确地解释他们。要使验证工具能够正确地检查你的代码，使用DOCTYPE也是必要的。
 
前两行可以一直保留，你只需要在<HTML>标记中修改语言声明，将“en”修改为你设定的语言的两个字母的代码。（例如你的网页是简体中文，则修改为"zh"。） 

了解更多关于DOCTYPE的内容，请阅读DOCTYPE at W3C. 

在这里查找对应的语种代码：Codes for the Representation of Names of Languages
== Head标签==
 <head>
 <title>{sitename} - {title}</title>
 {stylesheet}
 {metadata}
 </head>

<title>标签中的内容将显示在你的浏览器的标题栏，{sitename}是在"站点管理/全局设置"中指定的。如果你想让每页的名称显示在浏览器的标题栏中，你可以在模板中添加{title}，{title}是当你添加/编辑页面时指定的标题名称的占位符。 

{stylesheet}是标记是你附加到模板的所有样式表的链接，意思就是你必须且只需添加该标记一次，然后所有附加的样式表都将被链接。
 
{metadata}将包含你在"站点管理/全局设置"中指定的所有metadata，还包含你在"内容/页面"中的选项窗口中为每页指定的额外metadata。 




==页面封装==

 <body>
 <nowiki><div id="pagewrapper"></nowiki>
这是封装整个页面的div块的开始部分，在样式表中，你可以设置页面的宽度、是否居中等等属性。 
如何定制: 

在以Layout开始的样式表中查找div#pagewrapper，然后根据你的需要定制。 

==网页的开头部分== 

 <nowiki> <div id="header">
  <h1>{cms_selflink dir="start" text="$sitename"}</h1>
  <hr class="accessibility" /></nowiki>
在网页的开头部分你会发现CMS Made Simple徽标，正如你所看到的，在模板中没有徽标的信息，但是所有头部的内容都是由CSS设置的，这使得HTML代码十分清晰。不管怎样，只要你喜欢，也可以直接将网页头部的信息放在模板中。 

如何定制: 

在以Layout开始的样式表中查找div#header和div#header h1 a (for the link)。在那里你可以设置背景颜色、徽标、高度等。
==网站的面包屑式（breadcrumb）导航==
 <nowiki><!-- Start Breadcrumbs -->
 <div class="breadcrumbs">
  {breadcrumbs starttext='您的当前位置' root='Home' delimiter='»'}
 <hr class="accessibility" />
 </div>
 <!-- End Breadcrumbs --></nowiki>
Breadcrumbs是显示浏览者当前所在页面以及该页面在网站中的城池结构。它开起来类似这样：
 
首页 >> 所在板块 >> 具体网页

在CMS Made Simple中，{breadcrumbs}标签自动添加到所有页面中（CMSMS自带的模板）。delimiter="&raquo;" 的意思就是使用“»”符号作为两个层级之间的分隔符。 

initial='1'的意思就是breadcrumbs使用一个分隔符开始，如果忽略或设置为'0'，在第一个层级的前面没有分隔符。 

如何定制(breadcrumbs): 

在名称以Layout开始的样式表中查找div.breadcrumbs，在这里你可以定制背景、字体等。
 
要了解更多如何使用{breadcrumbs}标签的内容，在管理控制台的"扩展/标签"中点击Breadcrumbs的帮助。 

默认模板的其余部分普遍已经更新到最新版本。 

==隐藏空的内容块==
如果你想隐藏一个内容块，例如：假设一个内容编辑者没有放置任何内容在内容页中，你可以使用简单的Smarty代码来隐藏它。在我们的案例中，我们想隐藏名称为SpecialOffer1的内容块，则代码如下： 

 <nowiki>{content block="SpecialOffer1" assign="offer1"}
 {if !empty($offer1)}
    <div id="SpecialOffer1">
        {content block="SpecialOffer1"}
    </div>
 {/if}</nowiki>

==参考来源==
*[http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Templates/zh 参考来源]

{{CMS Made Simple}}

[[category:CMS Made Simple|B]]