Liferay主题开发官方文档翻译版讲义.docx

Developing a Liferay Theme 作为一个开发者，你需要你的站点准确有效的传达你的想法。你不希望你设计的网站限制用户从你的内容总收到影响。这就是主题发挥作用的地方。主题允许你创造性的控制和讲述通过你的站点想要讲述的故事。他们可以是你控制网站的外观和感觉。后续为详细介绍。 当你接近主题设计时，记住目标受众，你试图传达的信息，以及网站的目的。主题设计有助于回答这些问题。 次学习路线使用Freemarker模板语言为Liferays Lunar Resort开发一套主题。你将学会如何使用CSS设计你的主题，怎样响应移动设备，怎样使用Bootstraps and Font Awesomes?图标在主题中，和如何实现可配置的主题设置。 在开始之前，需要确保你已经安装Liferay开发环境。Liferay IDE 或 Liferay Developer Studio的安装可查看其他文档。也可以选择其他开发工具，但是Liferay提供的开发工具是他们专门为开发Liferay而设计的，开发过程中可很自然的使用它。因为在整个学习过程中会做大量更改部署，所以需要确认你的Portal已经开启开发模式。可以在 HYPERLINK /develop/tutorials/-/knowledge_base/6-2/using-developer-mode-with-themes 为主题开启开发模式查看如何开启开发模式。 下面我们将开始学校开发主题： 设置主题 简介 在此部分，将创建Lunar Resort主题的基础。我们将学校创建一个主题的流程和需要的目录结构。最后，我们将修改模板文件portal_normal.ftl和navigation.ftl使其符合Lunar Resort主题的样子。 我们将通过此指南模拟完成一个如下样式的主题： 开始之前，你 HYPERLINK /documents/10184/532726/themes-learning-path-6.2.zip 资源下载在此处下载在联系中需要的资源文件，解压到你的目录中 创建一个主题项目 在后续的学习过程中需要根据指令操作 HYPERLINK /liferay/liferay-docs/blob/6.2.x/develop/tutorials/-/knowledge_base/6-2/developing-apps-with-liferay-ide Liferay IDE?或? HYPERLINK /liferay/liferay-docs/blob/6.2.x/develop/tutorials/-/knowledge_base/6-2/developing-applications-with-liferay-developer-stu Liferay Developer Studio。 Select?File?→?New?→?Liferay Plugin Project. 在项目向导中，?Project name输入?lunar-resort-theme?，Display name输入Lunar Resort Theme，?build type选择Ant，选择适当的Plugins SDK和匹配的Liferay runtime。（此处开发过程中由于出现问题，所以开发是选择为Maven） Plugin type选择Theme，然后点击Next Theme parent?选择_styled，?Theme framework选择Freemarker?，然后点击Finish  +$$$ Note:?第一次创建项目时，请确保处于联网状态，在后台Liferays Plugins SDK?下载几个必须得JAR文件，这使初始插件SDK下载小，但它可能需要几分钟的时间来创建您的第一个项目。随后的项目几乎立刻就被创造出来了。 $$$ 我们将在左边的项目资源管理器中看见创建好的项目，我们创建的是基于Liferays?_styled?theme的一个空的Liferay主题 而不是从头开始建立一个主题，它是使用Liferay基地主题为出发点，确保完全兼容的最佳实践。我们对主题的修改将直接覆盖Liferays?_styled?theme的默认设置 设置主题目录结构 当项目创建完成时目录结构应该和以下一样：（此处为Ant构建工具时,Maven有所区别） 主题是基于他们的基础主题的不同，在我们创建项目的时候，我们选择了_styled主题，A copy of this themes code, therefore, exists in most of these folders. 这将确保你页面的所有元素的默认样式。在编写自定义主题是，只需要定义当前主题和基础主题不同的地方