Table of Contents

模板

Contents


你已经看到网站编辑如何选择模板来定义每个页面如何显示。而模板是否可用和看起来是什么样则是设计师的工作。
在我是网站设计师一节中已经提到，模板只是给出网站的结构，那仅仅是页面中包含什么。通过样式表你可以获得你想要的观感。
好了， 在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}等，点击它们的帮助链接查看它们怎么使用。
  • Adduserdefinedtag.png
    你可以生成你自己的用户自定义标签，到“扩展/用户自定义标签”下点击“添加用户自定义标签”，填入名称和代码并点击提交，然后再“内容”中插入像这样的代码即可：{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}

附加样式表

Layouttemplate.png
要样式化模板中的元素或定位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>
<div id="pagewrapper">
这是封装整个页面的div块的开始部分，在样式表中，你可以设置页面的宽度、是否居中等等属性。

如何定制:

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

网页的开头部分 

<div id="header">
  <h1>{cms_selflink dir="start" text="$sitename"}</h1>
  <hr class="accessibility" />
在网页的开头部分你会发现CMS Made Simple徽标，正如你所看到的，在模板中没有徽标的信息，但是所有头部的内容都是由CSS设置的，这使得HTML代码十分清晰。不管怎样，只要你喜欢，也可以直接将网页头部的信息放在模板中。
如何定制:
  • 在以Layout开始的样式表中查找div#header和div#header h1 a (for the link)。在那里你可以设置背景颜色、徽标、高度等。

网站的面包屑式（breadcrumb）导航

<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
  {breadcrumbs starttext='您的当前位置' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
Breadcrumbs是显示浏览者当前所在页面以及该页面在网站中的城池结构。它开起来类似这样： 
首页 >> 所在板块 >> 具体网页
在CMS Made Simple中，{breadcrumbs}标签自动添加到所有页面中（CMSMS自带的模板）。delimiter="&raquo;" 的意思就是使用“»”符号作为两个层级之间的分隔符。
initial='1'的意思就是breadcrumbs使用一个分隔符开始，如果忽略或设置为'0'，在第一个层级的前面没有分隔符。
如何定制(breadcrumbs):
  • 在名称以Layout开始的样式表中查找div.breadcrumbs，在这里你可以定制背景、字体等。
  • 要了解更多如何使用{breadcrumbs}标签的内容，在管理控制台的"扩展/标签"中点击Breadcrumbs的帮助。
默认模板的其余部分普遍已经更新到最新版本。

隐藏空的内容块

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

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


This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Templates/zh"

User Handbook/Getting Started/Designer/Templates/zh

From CMSMS

A2 Hosting