[翻译]Orchard-修改首页布局

时间:2021-01-26 04:39:40

前言

Orchard在你的站点应用的默认主题叫做”Theme Machine”.该主题包括CSS样式和一个布局框架. Orchard 允许你选择或排除显示在你站点每个页面的布局. 默认情况下下图中蓝色高亮区域显示在主页中.

[翻译]Orchard-修改首页布局

Navigation 包含一个菜单,新站点只有一个Home标签.TripelFirst, TripleSecondTripleThird显示在页面底部.

每个页面都有一个中心区(在本例中就是下图中,  "Welcome to Orchard" 到 "Thank you for using Orchard"部分) ,在本指南中我们称为Body.

[翻译]Orchard-修改首页布局

虽然Theme Machine 已经定义许多区域,但是只有widgets被添加到那个区域的时候主页才会显示(Navigation, TripelFirst, TripelSecond 还有 TripelThird 这几个区域的内容之所以显示在主页上就是因为他们包含widgets)

修改默认布局

1) 从仪表盘中选择Widgets

Widgets管理页面默认打开的是’Default’ 布局,该布局中启用的区域会显示在所有页面上.图中Navigation 是启用的,图中 Main Menu widget 被标注为绿色表示已经添加到Defaut布局,因此我们在所有的页面上都能看到Main Menu Widget.

[翻译]Orchard-修改首页布局

2) 选择HomePage 布局来看看那些区域在首页中被启用.

所有被添加到区域的Widgets 都会标记为绿色 (FirstLeaderAside, SecondLeaderAside 和 ThirdLeaderAside). 已经被添加到其他布局区域的Widgets 会标记为灰色 (Main Menu).

[翻译]Orchard-修改首页布局

3) 移除Third Leader Aside widget.

[翻译]Orchard-修改首页布局

移除后TripelThird 就不会显示在首页了

[翻译]Orchard-修改首页布局

4)  在TripelThird 添加一个 widget

[翻译]Orchard-修改首页布局

5) 选择 HTML Widget 作为widget 的类别

[翻译]Orchard-修改首页布局

6) 设置widget  标题和内容

[翻译]Orchard-修改首页布局

7) 保存新的 widget.

8) 刷新你的站点看到如下效果

[翻译]Orchard-修改首页布局

新建一个布局

你可以新增一个布局来设定某些页面使用,比如你建了一个Downloads 页面.然后你可以摆放一些 widgets然他们只显示在Downloads页面.

1) 进入仪表盘,选择 Widgets. 然后点击 add a new layer 进行新页面的添加. [翻译]Orchard-修改首页布局

2) 为新的布局填写名字(Name),描述(Description), 还有规则(Rule) ,注意规则中 url"~/download" 代表download页面(创建页面的时候可以设置页面地址Permalink),  这是指示Orchard,如果访问download这个页面,那么该页面就显示我们新建的这个布局.

[翻译]Orchard-修改首页布局

3) 添加一个 widget 到你的新布局中 ,我们选择 AsideFirst.

[翻译]Orchard-修改首页布局

4) 选择 Html Widget.

[翻译]Orchard-修改首页布局

5) 编写标题和内容

[翻译]Orchard-修改首页布局

6) 保存以后刷新页面,选择Downloads页面查看效果.

[翻译]Orchard-修改首页布局

原文:http://docs.orchardproject.net/Documentation/Getting-Started

(只翻译了修改首页布局部分)