logo资料库

Liferay 主题开发官方文档中文翻译.docx

发布时间：2022-06-15 发布人：admin 分类：说明书 资料大小：3.62M 资料格式：docx 举报 版权申诉
第1页 / 共42页
第2页 / 共42页
第3页 / 共42页
第4页 / 共42页
第5页 / 共42页
第6页 / 共42页
第7页 / 共42页
第8页 / 共42页
资料共42页，剩余部分请下载后查看
    Developing a Liferay Theme
    设置主题
    一、简介
    二、创建一个主题项目
    三、设置主题目录结构
    四、文件portal_normal.ftl的Html结构
    五、修改主题模板
    为主题导入资源
    一、简介
    二、设置资源到如的目录
    三、创建sitemap.json
    四、配置liferay-plugin-package.properties
    通过CSS设计主题风格
    一、简介
    二、设置自定义CSS
    三、设计页面wrapper
    四、设计页面banner
    五、设计页面content-div
    六、设计页面footer
    七、设计自定义portlets
    八、使用Bootstrap Styles
    在主题中使用bootstrap和font-awesome-icons
    一、简介
    二、在主题创建一个社交媒体链接(友情链接)
    制作可配置的主题
    一、简介
    二、配置liferay显示和感觉
    三、配置init_custom.ftl
    四、配置单独页面主题设置
    五、为主题设置配置多语言支持
    制作响应式主题（响应式布局）
    一、简介
    二、使用预览功能预览主题
    三、修改主题使其可以相应平板电脑和手机视图
    总结
    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 Studio。 1. 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，然后点击 Next 4. 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 文件名然后点击 Finish 3. 重复步骤 1 和 2 创建 images 和 templates 目录 4. 将 custom.css 文 件 从 docroot/css/ 目 录 复 制 到 _diffs/css. 所 有 的 修 改 都 将 放 到 _diffs 目录的中 custom.css 镜像文件中。 5. 复制_aui_variables.scss 到 diffs/css 目录中 navigation.ftl, 6. 将 文 件 init_custom.ftl, docroot/templates 复制到目录 diffs/templates and portal_normal.ftl 从 目 录 现在开发主题的起点已经完成，在进入下一个阶段前还有一些额外的工作需要做， 1. 打开文件_aui_variables.scss 输入一下内容 $bkColor: #FFF; $themeMainColor: #DF5946; 2. 从下载好的资源文件中将文件 lunar-resort-logo.png 从目录/images 复制到主题项目
    的_diffs/images 文件 portal_normal.ftl 的 Html 结构 3. 最后将下载好的资源文件的中为 guestbook-portlet.war 部署到 liferay 项目中 四、 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
    包含网站面包屑和页面中 Portlets。  Footer 包含'powered-by Liferay' 和 social media links(社交媒体链接)。 这三个部分都都在 id 为 “wrapper”的
    中，这个用来调整整个站点的宽度 修改主题模板 五、 在这部分，我们将添加一些内容到文件 portal_normal.ftl 和 navigation.ftl 中，以匹配我 们最后完成的 Lunar Resort 主题效果 1. 打开文件 portal_normal.ftl，然后找到，修改为如
    下代码： 2. 在文件 portal_normal.ftl 中找到如下代码并删除 <#if !is_signed_in> ${sign_in_text} 默认的 Sign In 链接会被去掉，但是会在下个步骤中替换他 3. 找到代码<@liferay.dockbar />并删除<#if is_signed_in> 和标签保留他 们之间包裹的内容， 变更会不管是登录还是未登录都可以看到 Dockbar ，如果未登录，Dockbar 将简单 显示登录的链接，这个将方便以后学习过程 4. 将后面的代码插入到 id 为 content 的
    标签的结束标签
    之前 <#if the_title != "Reservation"> 本次添加的链接在保留在主题 Lunar Resort 的每一个页面，除了保留页面。现在 你只有一个默认的 Welcome 页面，不用担心，一会将使用资源导入（Resources Importer） 添加剩下的页面， 如果现在点击该链接 将放回一个错误信息。 5. 保存文件 接下来我们将修改导航 6. 打开文件 navigation.ftl 将内容替换为如下内容
    "aria-haspopup='true'" /> <#assign nav_item_caret = " " /> <#assign nav_item_css_class = "${nav_item_css_class} dropdown" /> <#assign nav_item_link_css_class = "dropdown-toggle" />
    这些修改的代码在原代码的基础了做了一些补充，最主要的变化在于修改的子菜单的 classes：子菜单现在已经可以使用，另外一个名称为 .active 的 class 将在当前页面高亮 显示. 7. 保存文件 现在已经有了一个封装好的模板，然后我们将部署主题 1. 启动服务，在资源管理器中选择主题，然后拖拽到 服务上 部署主题 2. 主题部署完成后，登录门户，进入到 管理员->站点管理->页面 3. 确定公共页面选中，然后滚动滚动条到可用主题标题 4. 选中 Lunar Resort theme 前面的单选按钮，然后保存 现在主题已经应用，然而在查看之前需要在做一些其他工作 5. 选择右边菜单中的 logo，取消显示站点名称 6. 点击选择文件，选择主题目录中的_diffs/images 目录下的 lunar-resort-logo.png 文件 7. 点击保存 8. 当看到页面提示操作成功时，即可返回欢迎页面查看。 The theme appears broken at the moment, but this is to be expected. In the sections that follow, you'll fix this. This shows you the starting point the base theme provides. You've successfully installed and applied your new theme! In the next section you'll learn how to import resources for your theme. 为主题导入资源 简介 一、 我们已经为 Lunar Resort 创建了主题，但是目前看起来比较空洞。我们需要一些默认的 内容使其在第一次安装的时候就看起来比较漂亮。这里有两种方法为主题导入资源，创建一 个 archive.lar 文件或者在目录结构中创建一个包括布局和内容的 sitemap.json 文件 两种方法都是不错的选择，但是使用 LAR 方法有几个缺点。LARs 是依赖于版本的，所 以当我们将 Liferay 升级到新版后将意味着重新创建 LAR。而且针对内容的任何修改都必须重
    分享到：
    赞 收藏

    相关推荐

    资料库

    后端

    共收录2142份资料，累计10个分类，关注成员有19位，主要包括：Perl,Docker,Delphi,VB,PHP,Java,C,C#,Python,C++

    热门标签

    Perl Docker Delphi VB PHP Java C C# Python C++

    最新资料