Magnolia-cms（二）：建立hello Mognolia

阿新 • • 發佈：2019-01-20

本文將介紹如何建立一個基礎的專案。按照國際慣例，先從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中檢視你的網頁了

以上就是簡單建立一個頁面模板的操作步驟了。

Magnolia-cms（二）：建立hello Mognolia

建立專案

從一個靜態頁面開始

建立一個頁面模板指令碼

建立一個頁面模板定義

建立一個頁面元件定義

使用該模板建立一個頁面

Magnolia-cms（二）：建立hello Mognolia

scrapy爬蟲框架（二）：建立一個scrapy爬蟲

React Native在window下的環境搭建（二）：建立新專案

2 Lucene筆記（二）：建立LuceneUtils工具

Composer筆記（二）：建立自己的PHP類庫

webpack4系列教程（二）：建立專案，打包第一個JS檔案

Hyperledger Fabric開發（二）：建立網路

activiti自定義流程之Spring整合activiti-modeler5.16例項（二）：建立流程模型

Power BI學習筆記（二）：建立第一個報表

手把手做一個JSP入門程式（二）：建立一個專案（JSP）

ASP.NET Core系列（二）：建立第一個.Net Core 專案

RabbitMQ消息隊列（二）：”Hello, World“

Django學習筆記（二）：使用Template讓HTML、CSS參與網頁建立

Java設計模式（二）之建立型模式：抽象工廠模式

RabbitMq的學習（二）：Java建立簡單的生產者，消費者

RabbitMQ訊息佇列（二）：”Hello, World“

Docker（二）：Docker常用命令之映象的建立：Dockerfile 與 commit

大資料：Spark Standalone 叢集排程（二）如何建立、分配Executors的資源

從零開始建立uCosIII專案（二）：配置uCosIII

建造者模式-Builder Pattern 複雜物件的組裝與建立——建造者模式（二）：遊戲角色設計的建造者模式解決方案

Magnolia-cms（二）：建立hello Mognolia

建立專案

從一個靜態頁面開始

建立一個頁面模板指令碼

建立一個頁面模板定義

建立一個頁面元件定義

使用該模板建立一個頁面

相關推薦