码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-01 20:58:52      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:des   http   使用   strong   os   art   

前言

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

bubuko.com,布布扣

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

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

bubuko.com,布布扣

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

修改默认布局

1) 从仪表盘中选择Widgets

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

bubuko.com,布布扣

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

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

bubuko.com,布布扣

3) 移除Third Leader Aside widget.

bubuko.com,布布扣

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

bubuko.com,布布扣

4)  在TripelThird 添加一个 widget

bubuko.com,布布扣

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

bubuko.com,布布扣

6) 设置widget  标题和内容

bubuko.com,布布扣

7) 保存新的 widget.

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

bubuko.com,布布扣

新建一个布局

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

1) 进入仪表盘,选择 Widgets. 然后点击 add a new layer 进行新页面的添加. bubuko.com,布布扣

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

bubuko.com,布布扣

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

bubuko.com,布布扣

4) 选择 Html Widget.

bubuko.com,布布扣

5) 编写标题和内容

bubuko.com,布布扣

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

bubuko.com,布布扣

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

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

[翻译]Orchard-修改首页布局,布布扣,bubuko.com

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

标签:des   http   使用   strong   os   art   

原文地址:http://www.cnblogs.com/haseo/p/3816763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!