前言

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

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

每个页面都有一个中心区(在本例中就是下图中,  "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-修改首页布局的更多相关文章

  1. SharePoint Online 创建门户网站系列之首页布局

    前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...

  2. 树莓派 Learning 002 装机后的必要操作 --- 00 修改键盘布局

    树莓派 装机后的必要操作 - 修改键盘布局 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 上网查,发现树莓派的键盘布局不对,树莓派(ras ...

  3. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  4. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  5. [翻译]Orchard如何工作

    Orchard一直是博主心中神一般的存在,由于水平比较菜,Orchard代码又比较复杂看了几次都不了了之了.这次下定决心要搞懂其工作原理,争取可以在自己的项目中有所应用.为了入门先到官网去学习一下相关 ...

  6. 关于修改test9ui布局的一些小笔记

    今早,上IT修真园里,看到师兄大娃很负责任的将我任务里的项目的排版,3,6,7的列了出来. 谢谢师兄,那么负责任的照看师弟. 言归正传,我一开始,直接按照师兄的指示,选择性的优先修改底部.效果也达到了 ...

  7. easyui源码翻译1.32--Layout(布局)

    前言 使用$.fn.layout.defaults重写默认值对象.下载该插件翻译源码 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖 ...

  8. 关于jeecms修改首页进行测试

    由于要学习,jeecms的标签使用,那么必须要有一个测试页.关于首页如何使之用之当测试页. 修改的步骤,找到web.xml文件修改 <welcome-file-list> <welc ...

  9. Django学习系列9:接着修改首页

    现在的功能测试还是失败的,继续修改代码,让其通过.因为HTML现在保存在模板中,可以尽情修改,无需编写额外的单元测试.我们需要一个<h1>元素 修改:lists/templates/hom ...

随机推荐

  1. 安卓自定义view_GDI绘图 _2d绘图_canvas绘图

    2014年到2016年 发生了很多事情,如今已成定局,现在想忘掉这些烦恼的事情,找点以前想干没有干的事情来做,塞满大脑就不去想了. 之前,一直想做一款挂机类游戏,各种平台和开发语言都选择过了,从htm ...

  2. codeforces 650D. Zip-line 线段树

    题目链接 题目的意思很简单, 就是给你n个数, m个询问, 每次询问修改某一个位置的值, 然后问你修改完之后数列的lis是多少. 询问独立. 对于原数列, 我们将它离散化, 令dp1[i]为以i为结尾 ...

  3. 字符串-06. IP地址转换

    /* * Main.c * D6-字符串-06. IP地址转换 * Created on: 2014年8月19日 *******测试通过******** *转载:http://blog.csdn.ne ...

  4. HDU1069:Monkey and Banana(DP+贪心)

    Problem Description A group of researchers are designing an experiment to test the IQ of a monkey. T ...

  5. IOS学习之蓝牙4.0 BLE

    IOS学习也一段时间了,该上点干货了.前段时间研究了一下IOS蓝牙通讯相关的东西,把研究的一个成果给大家分享一下. 一 项目背景 简单介绍一下做的东西,设备是一个金融刷卡器,通过蓝牙与iphone手机 ...

  6. iPhone开发之全局变量的使用

    全局变量历来就是很好的东西,能够在开发中带来很多方便,下面来介绍一下iPhone中软件开发时全局变量的使用方法: 一.新建Constants.h文件(文件名根据需要自己取),用于存放全局变量: 二.在 ...

  7. servlet三种实现方式之二继承GenericServlet开发

    servlet有三种实现方式: 1.实现servlet接口 2.继承GenericServlet 3.通过继承HttpServlet开发servlet 第二种示例代码如下(已去掉包名): //这是第二 ...

  8. html 表头固定

    <div style="width: 100%; min-width: 300px; padding-right: 10px;"> <table style=&q ...

  9. @Transactional失效的问题

    spring事物配置一般没有问题, 优先检查mysql的引擎是否是innodb, 是的话检查包的扫描是否有问题. 我就是因为包的扫描导致@Transactional失效. 具体情况如下, 在sprin ...

  10. selenium 学习笔记 ---新手学习记录(9) 问题总结(java)

    1.百度搜索目标--实例 boolean flag; //点击次数 int shcs=3; int i=0; //窗口焦点控制 String detailWindowHandle = null; // ...