liferay主题开发教程官方文档翻译版解析.docx

Developing a Liferay Theme作为一个开发者，你需要你的站点准确有效的传达你的想法你不希望你设计的网站限制用户从你的内容总收到影响这就是主题发挥作用的地方主题允许你创造性的控制和讲述通过你的站点想要讲述的故事他们可以是你控制网站的外观和感觉后续为详细介绍当你接近主题设计时，记住目标受众，你试图传达的信息，以及网站的目的主题设计有助于回答这些问题次学习路线使用Freemarker模板语言为Liferay's Lunar Resort开发一套主题你将学会如何使用CSS设计你的主题，怎样响应移动设备，怎样使用Bootstrap's and Font Awesome's 图标在主题中，和如何实现可配置的主题设置在开始之前，需要确保你已经安装Liferay开发环境Liferay IDE 或 Liferay Developer Studio的安装可查看其他文档也可以选择其他开发工具，但是Liferay提供的开发工具是他们专门为开发Liferay而设计的，开发过程中可很自然的使用它因为在整个学习过程中会做大量更改部署，所以需要确认你的Portal已经开启开发模式可以在为主题开启开发模式查看如何开启开发模式。

下面我们将开始学校开发主题：设置主题一、 简介在此部分，将创建Lunar Resort主题的基础我们将学校创建一个主题的流程和需要的目录结构最后，我们将修改模板文件portal_normal.ftl和navigation.ftl使其符合Lunar Resort主题的样子我们将通过此指南模拟完成一个如下样式的主题：开始之前，你资源下载在此处下载在联系中需要的资源文件，解压到你的目录中二、 创建一个主题项目在后续的学习过程中需要根据指令操作Liferay IDE 或 Liferay Developer Studio1. Select File → New → Liferay Plugin Project.2. 在项目向导中， Project name输入 lunar-resort-theme ，Display name输入Lunar Resort Theme， build type选择Ant，选择适当的Plugins SDK和匹配的Liferay runtime此处开发过程中由于出现问题，所以开发是选择为Maven）3. Plugin type选择Theme，然后点击Next4. Theme parent 选择_styled， Theme framework选择Freemarker ，然后点击Finish+$$$Note: 第一次创建项目时，请确保处于联网状态，在后台Liferay's Plugins SDK 下载几个必须得JAR文件，这使初始插件SDK下载小，但它可能需要几分钟的时间来创建您的第一个项目。

随后的项目几乎立刻就被创造出来了我们将在左边的项目资源管理器中看见创建好的项目，我们创建的是基于Liferay's _styled theme的一个空的Liferay主题而不是从头开始建立一个主题，它是使用Liferay基地主题为出发点，确保完全兼容的最佳实践我们对主题的修改将直接覆盖Liferay's _styled theme的默认设置三、 设置主题目录结构当项目创建完成时目录结构应该和以下一样：（此处为Ant构建工具时,Maven有所区别） 主题是基于他们的基础主题的不同，在我们创建项目的时候，我们选择了_styled主题，A copy of this theme's code, therefore, exists in most of these folders. 这将确保你页面的所有元素的默认样式在编写自定义主题是，只需要定义当前主题和基础主题不同的地方即可 我们所有修改的文件都应该放到_diffs目录中，然后将其转移到父目录中的文件因此，在_diffs文件夹中的目录必须是父目录的镜像，如果目录不匹配，你所有的修改将无法被应用，为了保持基础目录不变，我们只需要将我们修改或增加的文件放到_diffs目录中。

在最佳实践中，所有的CSS styling 都应在_diffs/css/ 目录的custom.css文件中，因为他是最后加载的，所有放置在custom.css文件中的样式都将覆盖其父主题的样式，保持所有的样式在一个文件中，将更加有利于维护工作的开展 现在我们已经熟悉了主题的结构和开发流程，我们将开始开发自己的主题1. 选择_diffs文件夹然后右键，选择 New → Folder.2. 选择_diffs文件夹输入css文件名然后点击Finish3. 重复步骤1和2创建images和templates 目录4. 将custom.css文件从docroot/css/ 目录复制到_diffs/css.所有的修改都将放到_diffs 目录的中custom.css镜像文件中5. 复制_aui_variables.scss到diffs/css目录中6. 将文件init_custom.ftl, navigation.ftl, and portal_normal.ftl从目录docroot/templates 复制到目录diffs/templates现在开发主题的起点已经完成，在进入下一个阶段前还有一些额外的工作需要做，1. 打开文件_aui_variables.scss输入一下内容$bkColor: #FFF;$themeMainColor: #DF5946;2. 从下载好的资源文件中将文件 lunar-resort-logo.png从目录/images复制到主题项目的_diffs/images3. 最后将下载好的资源文件的中为guestbook-portlet.war部署到liferay项目中四、 文件portal_normal.ftl的Html结构Liferay门户中所有的portlets都是通过模板文件portal_normal.ftl渲染的。

下图反应了HTML结构完成的样子HTML结构分散在三个部分中：Banner(横幅)，Content，和FooterØ Banner包含the logo for the site(网站Logo), its name(网站名字), the page title(页面标题), and the main navigation(主导航)Ø Content