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

Navigation 包含一个菜单,新站点只有一个Home标签.TripelFirst, TripleSecond 和 TripleThird显示在页面底部.
每个页面都有一个中心区(在本例中就是下图中, "Welcome to Orchard" 到 "Thank you for using Orchard"部分) ,在本指南中我们称为Body.

虽然Theme Machine 已经定义许多区域,但是只有widgets被添加到那个区域的时候主页才会显示(Navigation, TripelFirst, TripelSecond 还有 TripelThird 这几个区域的内容之所以显示在主页上就是因为他们包含widgets)
修改默认布局
1) 从仪表盘中选择Widgets
Widgets管理页面默认打开的是’Default’ 布局,该布局中启用的区域会显示在所有页面上.图中Navigation 是启用的,图中 Main Menu widget 被标注为绿色表示已经添加到Defaut布局,因此我们在所有的页面上都能看到Main Menu Widget.

2) 选择HomePage 布局来看看那些区域在首页中被启用.
所有被添加到区域的Widgets 都会标记为绿色 (FirstLeaderAside, SecondLeaderAside 和 ThirdLeaderAside). 已经被添加到其他布局区域的Widgets 会标记为灰色 (Main Menu).

3) 移除Third Leader Aside widget.

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

4) 在TripelThird 添加一个 widget

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

6) 设置widget 标题和内容

7) 保存新的 widget.
8) 刷新你的站点看到如下效果

新建一个布局
你可以新增一个布局来设定某些页面使用,比如你建了一个Downloads 页面.然后你可以摆放一些 widgets然他们只显示在Downloads页面.
1) 进入仪表盘,选择 Widgets. 然后点击 add a new layer 进行新页面的添加. 
2) 为新的布局填写名字(Name),描述(Description), 还有规则(Rule) ,注意规则中 url"~/download" 代表download页面(创建页面的时候可以设置页面地址Permalink), 这是指示Orchard,如果访问download这个页面,那么该页面就显示我们新建的这个布局.

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

4) 选择 Html Widget.

5) 编写标题和内容

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

原文:http://docs.orchardproject.net/Documentation/Getting-Started
(只翻译了修改首页布局部分)
[翻译]Orchard-修改首页布局的更多相关文章
- SharePoint Online 创建门户网站系列之首页布局
前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...
- 树莓派 Learning 002 装机后的必要操作 --- 00 修改键盘布局
树莓派 装机后的必要操作 - 修改键盘布局 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 上网查,发现树莓派的键盘布局不对,树莓派(ras ...
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
- [翻译]Orchard如何工作
Orchard一直是博主心中神一般的存在,由于水平比较菜,Orchard代码又比较复杂看了几次都不了了之了.这次下定决心要搞懂其工作原理,争取可以在自己的项目中有所应用.为了入门先到官网去学习一下相关 ...
- 关于修改test9ui布局的一些小笔记
今早,上IT修真园里,看到师兄大娃很负责任的将我任务里的项目的排版,3,6,7的列了出来. 谢谢师兄,那么负责任的照看师弟. 言归正传,我一开始,直接按照师兄的指示,选择性的优先修改底部.效果也达到了 ...
- easyui源码翻译1.32--Layout(布局)
前言 使用$.fn.layout.defaults重写默认值对象.下载该插件翻译源码 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖 ...
- 关于jeecms修改首页进行测试
由于要学习,jeecms的标签使用,那么必须要有一个测试页.关于首页如何使之用之当测试页. 修改的步骤,找到web.xml文件修改 <welcome-file-list> <welc ...
- Django学习系列9:接着修改首页
现在的功能测试还是失败的,继续修改代码,让其通过.因为HTML现在保存在模板中,可以尽情修改,无需编写额外的单元测试.我们需要一个<h1>元素 修改:lists/templates/hom ...
随机推荐
- codevs 1028 花店橱窗布置 KM算法
题目链接 n个花, m个花瓶, 每个花放到一个花瓶里会产生一个值w[i][j], 一个花只能放到一个花瓶里, 一个花瓶只能放一个花, 求产生的最大值. 带权二分图模板. #include <io ...
- web编程速度大比拼(nodejs go python)(非专业对比)
C10K问题的解决,涌现出一大批新框架,或者新语言,那么问题来了:到底谁最快呢?非专业程序猿来个非专业对比. 比较程序:输出Hello World! 测试程序:siege –c 100 –r 100 ...
- JavaScript 的 Promise
先看这个 http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-api [JavaScript Promise 浏览器支持的Promise ...
- 阿里云ECS每天一件事D4:安装mysql5.5.40
Linux平台上MySQL也没什么好说的了,首先准备一下软件环境: yum install gcc gcc-c++ gcc-g77 autoconf automake make cmake bison ...
- html5 note
HTML5的特点 绘图支持 canvas 多媒体支持 video audio 离线应用 和 离线存储 新的语义化元素 article footer header nav section 表单增强 ca ...
- Installing perl and writing your first perl program in Ubuntu
Installing perl and writing your first perl program in Ubuntu Installing perl and writing your f ...
- WebKit的历史项管理
标准定义 关于历史的管理,和HTML页面载入一样,都有其相应的标准.地址例如以下: WhatWG: https://html.spec.whatwg.org/multipage/browsers.ht ...
- Asp.net 提供程序模型
需要说明一下几点 1.什么是提供程序? 2.ASP.NET 4.5 中的提供程序 3.配置提供程序 有一下几种存储状态的方式 1.应用程序状态 2.会话状态 3.高速缓存状态 4.cookie 5.查 ...
- HTML5API___Web Storage
Web Storage 是html5的本地存储规范 支持:移动平台基本支持 (opera mini除外) ie8+ff chrome 等 支持 它包含2个: sessionStorage 会话存储 ...
- 两个textarea 同时变化高度
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...