Magnolia-cms（二）：创建hello Mognolia

最新推荐文章于 2024-03-25 11:37:44 发布

飞天猪崽

最新推荐文章于 2024-03-25 11:37:44 发布

阅读量1.9k

点赞数

分类专栏： cms

本文链接：https://blog.csdn.net/qq_33575129/article/details/79124611

版权

cms 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文将介绍如何创建一个基础的项目。按照国际惯例，先从hello Mognolia开始。下面是效果图：

在上一讲中，已经安装并配置好了Mognolia-bundle，目录结构为tomcat+light-modules。

创建项目

进入light-modules，在该位置打开cmd，输入

mgnl create-light-module your-project-name

创建完的项目可以被cms自动注册，在管理页面的web DEV中的resource file中查看。

创建完成后的目录结构如下图所示：

注：特殊字符无法作为项目名称，如é, à, ç, ä, ö, ü与/ \等。

创建模板

在本节中，您将在模块中创建一个简单的页面模板，页面模板将很简单，因为它不会允许您将可编辑组件添加到页面。

从一个静态页面开始

在/your-project/templates/pages/hello.html中，插入以下代码：

<!DOCTYPE html>
<html xml:lang="en" lang="en">
  <head>
    <title>Starter Page</title>
    <link rel="stylesheet" type="text/css" href="../../webresources/css/hello-style.css" media="all" />
  </head>
  <body>
 
    <div class="container">
      <h1>hello works!</h1>
    </div>
 
  </body>
</html>

复制下面的CSS并保存为/hello-magnolia/webresources/css/hello-style.css。我们在HTML页面中引用这个样式表，之后在FreeMarker模板脚本中引用。

@import url(//fonts.googleapis.com/css?family=Raleway);
body {
   padding: 20px;
   font-family: Raleway, Helvetica, Arial, Tahoma, Verdana, sans-serif;
   background-color: #1e5799;
   background-attachment: fixed;
}
.container {
   width: 100%;
   max-width: 960px;
   margin: 0px auto;
   padding: 20px;
   box-sizing: border-box;
   background-color: white;
}
main {
   padding: 20px;
   margin-bottom: 40px;
}
h1 {
   font-size: 4em;
   font-family: Raleway, Helvetica, Arial, Tahoma, Verdana, sans-serif;
   font-weight: normal;
   background-color: #f6f6f6;
   padding: 30px 0 30px 15px;
   margin: 0;
}
blockquote {
   margin-bottom:40px;
   margin-top: 65px;
}
blockquote cite {
   padding-left:20px;
   font-size: 1.3em;
   color: #333;
}
blockquote p {
   border: 5px solid #0066aa;
   border-radius: 12px;
   padding: 25px 15px;
   position: relative;
   background-color: #fff;
   margin-bottom: 30px;
}
/** Add the bottom triangle for the quote bubble using CSS **/
blockquote p:before, blockquote p:after {
   position: absolute;
   display: block;
   border-style: solid;
   content: "";
   height: 0;
   width :0;
   box-sizing: border-box;
}
blockquote p:before {
   left: 20px;
   bottom: -30px;
   border-color: transparent #0066aa transparent transparent;
   border-width: 0 30px 30px 0;
}
blockquote p:after {
   left: 29px;
   bottom: -15px;
   border-color: transparent #fff transparent transparent;
   border-width: 0 15px 15px 0;
}

你可以通过 http://localhost:8080/magnoliaAuthor/.resources/hello-magnolia/templates/pages/hello.html 来预览网页效果。

创建一个页面模板脚本

将该静态HTML文档重命名hello.html为 hello.ftl。该扩展 .ftl 将文件转换为处理的FreeMarker脚本。
编辑脚本，使最终结果如下所示（更改列表如下所示）：

<!DOCTYPE html>
<html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
  <head>
    [@cms.page /]
    <title>${content.windowTitle!content.title!}</title>
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/.resources/hello-magnolia/webresources/css/hello-style.css" media="all" />
  </head>
  <body>
 
    <div class="container">
      <h1>${content.windowTitle!content.title!} works!</h1>
    </div>
 
  </body>
</html>

变化：
第2行：en用${cmsfn.language()}函数替换以设置lang属性的值。如果您决定将网页本地化为更多的语言，这将确保页面的主要语言将被正确呈现。
第4行：[@cms.page /]作为新行插入。该指令添加工具栏并使页面属性对话框可用。您将在创建页面模板定义后立即为该对话框创建定义。
第5行：用${content.windowTitle!content.title!}指令替换静态词语“Starter页面” 。<title>元素的内容然后将从JCR存储库中检索。
第6行：更改了要使用的CSS引用 ${ctx.contextPath}。在渲染过程中创建页面时，我们需要知道资源的绝对路径。该指令确保作者和公共实例上的资源路径完整且正确。

第11行：<h1/>用${content.windowTitle!content.title!}指令替换元素中的单词“hello”，使用页面属性的内容动态地呈现页面标题的第一部分。

创建一个页面模板定义

在该目录下创建/hello-magnolia/templates/pages/hello.yaml 文件，并写入以下：

 
 title:  
 hello 

 
 templateScript:  
 /hello-magnolia/templates/pages/hello.ftl 

 
 renderType:  
 freemarker 

 
 dialog:  
 hello-magnolia 
 : 
 pages/hello 

 
 visible:  
 true 

创建一个页面组件定义

在/hello-magnolia/dialogs/pages/目录下创建hello.yaml文件，并写入以下代码：

form:
label: Page properties
tabs:
- name: tabMain
label: hello
fields:
- name: title
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
i18n: true
label: title
- name: windowTitle
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
i18n: true
label: window title

actions:
commit:
class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
cancel:
class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition

使用该模板创建一个页面 
  准备工作已经基本完成，可以在Author实例中创建一个页面发布到公共实例中了。 
 
  1.打开Magnolia控制台，点击Pages 
 
  2.选择add a pages，创建一个新的页面 
 
  3.选择hello模板作为页面模板，然后点击下一步 
 
   4.在页面属性框中输入Hello Magnolia到田间标题和窗口标题 
 
   5.点击保存 
 
   6.接着你可以预览你的网页了，或者点击publish，就可以在http://localhost:8080/magnoliaPublic/hello.html中查看你的网页了 
 
   以上就是简单创建一个页面模板的操作步骤了。

飞天猪崽

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Magnolia-cms（二）：创建hello Mognolia

本文将介绍如何创建一个基础的项目。按照国际惯例，先从hello Mognolia开始。下面是效果图：在上一讲中，已经安装并配置好了Mognolia-bundle，目录结构为tomcat+light-modules。创建项目进入light-modules，在该位置打开cmd，输入mgnl create-light-module your-project-name 创
复制链接

扫一扫