CMS Made Simple/模板使用

来自站长百科
跳转至: 导航、​ 搜索

CMS Made Simple | 安装 | 内容管理 | 布局 | 用户&用户组 | 站点管理 | 我的设置 | 扩展 | FAQ

你已经看到网站编辑如何选择模板来定义每个页面如何显示。而模板是否可用和看起来是什么样则是设计师的工作。

在我是网站设计师一节中已经提到,模板只是给出网站的结构,那仅仅是页面中包含什么。通过样式表你可以获得你想要的观感。

好了, 在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默认模板不使用表格,在页面中作为(

)替代的
标记用来定义每个内容块,每个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="»" 的意思就是使用“»”符号作为两个层级之间的分隔符。

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}

参考来源[ ]

CMS Made Simple使用手册导航

针对所有用户:

安装:

环境需求 | 通过Shell安装 | 通过FTP安装 | 通过cPanel安装 | 在本地Windows系统下安装 | 升级 | 复制到一个新服务器上 | 可选设置 | 技巧与窍门 | 故障排除

内容管理:

页面创建 | 新闻创建 | 图片管理 | 文件管理 | 全局内容块与内容块

布局:

模板 | 样式表 | 菜单管理器 | 主题管理模块

用户&用户组:

用户 | 用户组 | 添加用户至用户组 | 用户组权限

站点管理:

全局设置 | 页面默认值 | 系统信息 | 系统检测 | 管理日志

我的设置:

我的账户 | 用户设置 | 快捷方式管理

扩展:

模块 | 标签 | 事件管理器 | 用户定义的标签

FAQ

针对网站设计者
模板使用 | 样式表使用
针对网站开发者:
开发者FAQ | 模块API | Smarty技巧 | 模块制作教程 | 模块制作技巧 | 用户定义的标签 | 内容区块剖析 | 运行SVN版本 | 添加菜单项的副文本 | 开发笔记 | 模块分类