使用模板|进度site有限性

2019年12月19日

您已经成功地安装和配置了Sitefinity,并且可能已经观看了我们的入门视频。现在,你想过去的基础讨论在这第一个视频,并落到真正的行动-学习如何设计你的Sitefinity网站。

当开始一个网站项目时,设计一个模板是你必须处理的关键任务之一。幸运的是,有了Sitefinity,这是一个简单和直接的任务-在你的支配下,你有一组强大的工具,可以帮助你创建任何类型的设计,同时允许终端用户对修改布局和模板有控制和灵活性。

在本视频中,我们将进一步了解什么是模板不仅仅是页面模板,还有小部件模板。为了向您展示这些是如何协同工作并相互补充的,让我们登录我们的一个示例项目——一个名为Quantum的网站。

每当你创建一个全新的页面,Sitefinity会给你一些模板来选择最适合你的网站目标。您可以选择Sitefinity自带的现成模板之一,或者,也可以选择Quantum项目自带的自定义模板之一。实际上,这是一个非常常见的场景—您可能必须创建新的模板来满足您的需求。现在,选择Quantum模板,您将被重定向到页面Edit屏幕。

可以看到这个新页面已经设置了样式,并且有一些小部件,如导航、搜索框和语言选择器。此外,还有一些样式已经被应用了-例如,这里的背景。这里有设计和预填充的小部件,因为它们是在新页面所基于的底层模板上设置的。

您仍然可以与布局的可编辑部分进行交互和修改,例如这个内容部分,以更好地适应页面上下文,并在每个页面上创建新的内容和功能。同时,由于原始页面模板及其共享但预定义的设计、布局元素和小部件,整体设计保持一致。如果需要,还可以显式地使小部件在页面上可编辑。

因此,在内容小部件和布局元素的帮助下,页面是结构化的,它们的外观和感觉总是基于预先定义其样式的页面模板。页面模板是主要的工具,你要用来建立你的网站的设计和自定义外观和感觉,甚至在你的项目中创建不同的网站。

您可能想知道这些页面模板来自哪里。您将在Design部分中找到它们,在那里您还将看到关于基于每个模板的页面的统计信息。让我们转到量子模板。当您单击并编辑它时,您可以看到拖放编辑器看起来与您刚才在页面编辑屏幕中看到的几乎完全相同。然而,这一次,所有的布局元素都是可编辑的——没有一个是锁定的,而且您可以从我的工具箱中添加新的元素,并重新排列布局。除了页面编辑器之外,您还可以看到一些样式和结构来自其他地方。如果去掉在页面编辑器中添加的所有布局元素和内容小部件,仍然会剩下3个框或占位符。在遵循模板层次结构之后,您将注意到所谓的“基本模板”实际上是基于存储在文件系统上的另一个文件。这是实际的布局文件,它定义了页面的一般结构划分,将页面划分为节和链接到页面所需的不同CSS和JavaScript文件。

一个ASP。NET开发人员将在这里看到一些熟悉的东西。这是因为布局文件实际上是基于标准的.cshtml文件。在这样的文件中,您可以定义自己的标记、包装器div、控件和占位符,它们将成为Sitefinity模板和页面不可或缺的一部分。此外,您可以链接到不同的资源,例如全局使用的样式和脚本。因此,通过利用ASP。通过让您完全控制生成的标记,Sitefinity实现了简化和高效的应用程序开发。标记中使用的默认或内置模板和资源是在资源包中提供的。目前,开箱即用的Sitefinity附带Bootstrap 4包,该包基于最流行的前端框架Bootstrap之一,因此可以利用其漂亮的样式和丰富的功能。多亏了Bootstrap,所有Sitefinity内置的MVC小部件都是移动优先的、基于约定的、默认响应的。

现在我们已经明确了所有的页面模板,让我们检查这个页面上还有什么。如果您已经使用过页面编辑器并在页面画布上删除了一些小部件,那么您将注意到从工具箱中删除的小部件与页面模板设计预先配置的小部件具有不同的样式。原因是,除了用页面模板定义页面设计和布局外,还可以通过使用不同的小部件模板改变页面的外观。

小部件模板是定义小部件的结构和属性以及如何显示小部件“表示”的内容的文件。要查看每个小部件的可用小部件模板,只需单击编辑然后检查Template下拉菜单。对于内容小部件,如News和Blog Posts,您可以浏览列表而且单项设置选项卡。例如,如果您正在配置博客小部件的设置,列表模式是指当用户正在查看包含所有可用博客文章的列表时细节模式是在显示特定博客文章的内容时使用的。

为了试验它,让我们放置一个News小部件。在其列表设置,你可以看到4个选项。这些实际上是默认模板和3个定制模板,是专门为Quantum站点提前创建的。继续,选择不同的选项,以查看新闻项的显示方式如何立即发生变化。您可以对详细信息视图执行同样的操作—更改模板后,博客帖子详细信息视图的外观将根据新选择的小部件模板中定义的标记和样式发生更改。

如果你想学习如何创建自己的页面和小部件模板,请观看下一个视频并进一步学习——我们将在Visual Studio中从零开始创建自己的模板。

标签: Sitefinity CMS产品概述开始Sitefinity