This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文
模板
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}等，点击它们的帮助链接查看它们怎么使用。
- 你可以生成你自己的用户自定义标签，到“扩展/用户自定义标签”下点击“添加用户自定义标签”，填入名称和代码并点击提交，然后再“内容”中插入像这样的代码即可：{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}
Attaching stylesheets
- To style the elements of your template and to position the div elements, you attach one or more stylesheets to your template. In the list of templates "Layout/Templates", click on the CSS icon to the right of a template. Select the stylesheets to attach to the template from the available stylesheets in the dropdown list and click "Add Stylesheet".
Customizing the default templates
- All the default templates that come with CMS Made Simple are more or less made of the same HTML code. The only thing differing is what kind of menu that is used and if there are one or more content blocks. The rest is styled purely through CSS.
- This is because the CMS Made Simple default templates do not use tables. Instead <div> tags are used to define each block of content in the page. The position and style for each of these div blocks can then be customized through CSS.
- On this page we will walk through the template, piece by piece, to explain what it is and what you may want to change.
- The style and appearance is then modified in the stylesheets that are attached to each template.
声明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也是必要的。
- The first two lines can be left unchanged. What you may need to change is the language declaration in the <HTML> tag. That's where the language of the content of your page is specified. Change "en" to the two-letter code for your language of preference.
- Read more about DOCTYPE at W3C.
Head tags
<head>
<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>
- What is between the <title> tags is what appears for example in your browser's title bar. {sitename} is defined in "Site Admin/Global Settings". If you also want the name of each page to be displayed, you can add the tag {title}. The {title} tag is a placeholder that is replaced by the name of the current page that you have entered as title for the page in "Content/Pages" when you Add/Edit a page.
- {stylesheet} is a tag that links to all stylesheets that you have attached to a template. It means that you only have to add this tag once and all attached stylesheets will be linked to.
- {metadata} will hold all metadata you set in "Site Admin/Global Settings" for global metadata, as well as additional metadata you can set per page in the Options tab in "Content/Pages" when you Add/Edit a page
The page wrapper
<body> <div id="pagewrapper">
- This is the beginning of the div block that the entire page is wrapped in. In the stylesheet you can set the width of the page, if it is to be centered and so on.
How to customize it:
- Look for div#pagewrapper in one of the stylesheets with a name beginning by Layout.
The header
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
- The header of the page is where you find the CMS Made Simple logo. As you can see there is no information in the template, but all the content of the header is set by CSS. This makes for very clean HTML code. However, if you like you can also add text or other information that you want to appear in the header, directly in the template.
- How to customize it:
- Look for div#header and div#header h1 a (for the link) in one of the stylesheets with a name beginning by Layout. That's where you set the background color, logo, height etc.
网站的面包屑式（breadcrumb）导航
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
{breadcrumbs starttext='您的当前位置' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
- Breadcrumbs是显示浏览者当前所在页面以及该页面在网站中的城池结构。它开起来类似这样：
首页 >> 所在板块 >> 具体网页
- 在CMS Made Simple中，{breadcrumbs}标签自动添加到所有页面中（CMSMS自带的模板）。delimiter="
»" 的意思就是使用“»”符号作为两个层级之间的分隔符。
- initial='1'的意思就是breadcrumbs使用一个分隔符开始，如果忽略或设置为'0'，在第一个层级的前面没有分隔符。
- 如何定制(breadcrumbs):
- Look for div.breadcrumbs in one of the stylesheets with a name beginning by Layout. There you can customize the font, background etc.
- To read about how to use the {breadcrumbs} tag, click the Help link for Breadcrumbs in "Extensions/Tags" in the Admin Console.
- The rest of the default template is currently being updated to the latest version.
隐藏空的内容块
如果你想隐藏一个内容块，例如：假设一个内容编辑者没有放置任何内容在内容页中，你可以使用简单的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 -
عربي -
日本語
简体中文
