初学者指南与OpenCms 8创建模板

1、Beginner's guide to template creation withOpenCms 8Version: 1.0Date: Monday, March 5, 2012Beginner's guide to template creation with OpenCms 8 ®Alkacon®Version: 1.0 Date: March 5, 2012目录Beginner's guide to template creation with1OpenCms 811 Abstract 摘要22 Design 设计23 Create a mo

2、dule 创建一个模块34 HTML Prototype HTML原型54.1 Identify static parts 识别静态部分64.2 Split image分割图像64.3 Create a simple HTML page 创建一个简单的HTML页面85 Template creation 模版创建95.1 Create a simple template 创建一个简单的模版95.2 Model page 模型页面105.3 Sitemap configuration 站点配置125.4 First test 第一次测试135.5 Add Header / Footer conf

3、iguration添加标题/页脚配置155.6 Styling样式185.7 Headincludes头包括215.8 Identify more template parts识别更多的模板部分225.9 The <cms:container> tag-<cms:container>标签265.9.1 Testing 测试275.10 Add content to the model page向模型添加内容页面295.10.1 Style样式315.10.2 Testing测试325.11 Navigation 导航335.11.1 Main navigation页面主

4、体导航355.11.2 Breadcrumb navigation 面包屑导航405.11.3 Side Navigation侧边导航461 Abstract 摘要摘要One of the most important aspects of website building is the creation of the required templates.Sites generated by OpenCms are built by using one or more templates that define a uniform layout of the presented conten

5、t.最重要的一个方面,网站建设是创建所需的模板。OpenCms网站生成都是由使用一个或多个模板,定义一个统一的布局呈现内容。This beginners guide describes some easy steps on how to create JSP based page templates from scratch. As this is a core functionality required in almost all projects, you should study this documentation carefully. Following the steps des

6、cribed here, you should be able to get your JSP template up and running in a short time.这个初学者指南描述了一些简单步骤如何创建基于JSP页面模板从头开始。因为这是一个核心功能需要在几乎所有的项目,你应该仔细研究这个文档。这里描述的步骤之后,您应该能够得到您的JSP模板设置和运行在一个短的时间。2 Design 设计设计First step in developing a template is the design. It is assumed that you have a page design pr

7、esent as an image file like *.jpg, *.tif or so. In larger projects this might have been outsourced and created by graphic design experts or you might have built it yourself using some image editing software.第一步是开发一个模板的设计。假设你有一个页面设计呈现为一个图像文件像*。jpg,*。tif左右。在较大的项目中这可能是外包和由图形设计专家或者你可能已经建立了它自己使用一些图像编辑软件。

8、3 Create a module 创建一个模块创建一个模块Create a module and give it a proper name (e.g. my.first.template)In the OpenCms workplace, switch to the Administration view and select “ModuleManagement”. In the Module Management, click on “New Module”. As package name enter“my.first.template” and as module name “My

9、First Template”.创建一个模块,并给它一个适当的名称(如:我的第一个模板)在OpenCms工作场所,切换到管理视图并选择“模块管理”。在模块管理,点击“新模块”。作为包名称输入“我的第一个。模板”和作为模块名称“我的第一个模板”。In the section Module folders check all the checkboxes (important: template JSPs must beplaced in the template folder)在部分模块文件夹检查所有复选框(重要:模板jsp必须beplaced在模板文件夹)Click OK to create

10、the module with these settings.点击OK以创建模块使用这些设置。Switch back to the Explorer view and go to the folder“/system/modules/my.first.template/templates/” and select “New” from the toolbar. In the opening dialog select “JSP”.切换回Explorer视图然后去文件夹“/system/modules/my.first.template/templates/”并从工具栏选择“New。在打开对话框

11、中选择“JSP”。 In the following window name the file “a” and if you want to edit the properties give it a proper title like “My First Template”.在接下来的窗口命名文件“myFirstTemplate.jsp”,如果你想编辑属性给它一个适当的标题就像“我的第一个模板”。4 HTML Prototype HTML原型HTML原型Next step in developing a working template is to build a HTML Prototyp

12、e. Again, in larger projects this might have been outsourced and be done by some web design guys. This would be a fully functional static HTML version of a model page that needs to be turned into a JSP template. Here is just a short introduction since most of the HTML basic output is included in cha

13、pter 5: Template creation.下一步在发展中一个工作模板来构建一个HTML原型。再次,在较大的项目这可能外包是由一些web设计的家伙。这将是一个功能齐全的静态HTML页面版本的模型需要变成一个JSP模板。这只是一个简短的介绍,因为大多数的HTML输出中包含基本第5章:创建模板。4.1 Identify static parts 识别静态部分识别静态部分Lets disassemble the template design step by step and find out what parts and layout concepts will be reused on

14、every single page.让我们分解这个模板设计一步一步地找出哪些部分和布局的概念将会重用每个页面。You could of course make a more detailed analysis of static parts and Identify more template parts.当然,也可以用一个更详细的分析,并识别出更多模板的静态部分部件。4.2 Split image分割图像分割图像Chopping the image into 3 pieces would be a first approach. You can do this using a standar

15、d image editing software. The parts would be named header, body and footer. You can try this and upload them to your OpenCms installation. Go to the “resources” folder of your newly created module “my.first.template” and click the “New” icon from the toolbar. Create a new folder by select the option

16、 “Folder” and then click “Continue”.切成3段的图像将会是第一种方法。您可以使用一个标准的图像编辑软件。这个部分将被命名为头、身体和页脚。你可以试试这并上传到你的OpenCms安装。去“资源”文件夹,您新创建的模块“my.first.template”,然后点击“New”图标的工具栏。创建一个新的文件夹,选择选项“文件夹”,然后单击“继续”。In the following dialog enter the folder name “images” and click “Finish”.在接下来的对话框中输入文件夹名“图片”,单击“完成”。After you

17、created the “images” folder click on the “Upload” icon from the toolbar and in the opening multiple file upload dialog select the header, body and footer parts from your local system. Click OK.在您创建的“images”文件夹后单击工具栏上的“上传”图标，从打开多个文件上传对话框中，选择标题，正文和页脚从本地系统。单击“确定”。4.3 Create a simple HTML page 创建一个简单的HT

18、ML页面创建一个简单的HTML页面A very simple HTML version would be something like:一个非常简单的HTML版本是这样的：<html> <head> <title>Wonderful World of Flowers </title> </head> <body> <div> <img src=<path-to>/header.jpg> </div> <div> <img src=<path-to>

19、;/body.jpg> </div> <div> <img src=<path-to>/footer.jpg> </div> </body> </html>You can copy this to your template and try it out.你可以复制这个模板并尝试一下。Switch to the folder were you created the template JSP and right click the file. From the context menu select “E

20、dit source code”. Copy the given HTML example into your JSP and replace the placeholders <path-to> by the path to your image parts, which would in fact be something like“/opencms/opencms/system/modules/my.first.template/images”.切换到你创建模板JSP的文件夹，右键单击该文件。从上下文菜单中选择“编辑源代码”。复制到您的JSP和HTML例如更换的占位符<

21、path-to>的路径图像部分，这实际上是类似 “/opencms/opencms/system/modules/my.first.template/images”.Save and close the edited file and open it in your browser and should look like the given design. 保存并关闭编辑过的文件并打开它在浏览器中看起来应该像这样给定的设计。5 Template creation 模版创建模板创建5.1 Create a simple template 创建一个简单的模版创建一个简单的模板To make

22、 this static HTML file a simple template there is only a few steps:为了使这个静态的HTML文件有一个简单的模板 只有几步：Open your template file and copy the following打开你的模板文件,复制以下<%page taglibs=”c,cms,fn” %>to your first line and add the tag你的第一行添加标记<cms:enable-ade>to the head part of your JSP.您的JSP头部的一部分。Replac

23、e the title and read the title property of the current page that gets rendered by the template.替换标题和读标题属性的当前页面被呈现的模板。<title><cms:info property="opencms.title" /></title>Make the header and footer part of your template work with OpenCms 8 ADE and add ids called“header” and

24、 “footer” to the surrounding divs. And addInstead of using the extracted images as header and footer substitute them with the<cms:container> tag of type “header” and “footer”.OpenCms 8的 ADE和外接IDS称为“头部”和“尾部” 周围的div的页眉和页脚的一部分，您的模板的工作。并添加而不是使用所提取的图像的页眉和页脚的替代它们与<cms:container>标签类型的“头部”和“尾部”。

25、Now your template should look like:现在你的模板应该看起来像:<%page taglibs=”c,cms,fn” %><html> <head> <title><cms:info property="opencms.title" /></title> <cms:enable-ade /> </head> <body> <div id=”header”> <cms:container name=”headerconta

26、iner” type=”header” /> </div> <div> <img src=<path-to>/body.jpg> </div> <div id=”footer”> <cms:container name=”footercontainer” type=”footer” /> </div> </body></html>It is a must to close the <cms:container> and <cms:enable-ade&

27、gt; tag properly with a “/”.Save and exit.这是一个必须关闭<cms:container>和<cms:enable-ade>标记正确地以一个“/”。保存并退出。5.2 Model page 模型页面模型页面To test the template, switch to /sites/default/ and create a new model page. To do so, go to the folder /.content/.new/ and create a new “container page” by clicking

28、 the “New” icon in the toolbar and select “Container page” in the “New” dialog.为了测试模板,切换到/sites/default/并创建一个新模式页面。这样做,去文件夹/.content/.new/并创建一个新的“容器页面通过点击“New”图标的工具栏,选择“容器页面”的“New”对话框。Click “Continue” and name the container page “myModelPage” and click “Continue”. In the following Properties dialog

29、enter “My First Model Page” as title and then click the “Advanced” button and scroll down to the property “template”. Here enter the path to your template/system/modules/my.first.template/templates/myFirstTemplate.jsp and click finish.单击“继续”和名称容器页面”myModelPage”并单击“继续”。在以下属性对话框中输入“我的第一个模型页面”为标题,然后单击“

30、高级”按钮,向下滚动到属性“模板”。在这里输入你的模板的路径/系统/模块/我的第一个模板template/system/modules/my.first.template/templates/myFirstTemplate.jsp并单击finish。5.3 Sitemap configuration 站点配置站点配置Now edit the sitemap configuration by opening the file /.content/.config and go to the tab “Page models”. Here add a new page model and choos

31、e your new model page from the widget opening when the folder icon is clicked.现在编辑网站地图配置通过打开文件/.content/.config和去选项卡”页面模型”。这里添加一个新页面模型和选择你的新模型从网页小部件打开文件夹图标被单击时。Click Save and Exit.点击保存并退出。5.4 First test 第一次测试第一次测试Now open the Sitemap Editor and click the “Create page” icon. The opening dialog offers

32、 all model pages for creating a new page.现在打开地图编辑器,然后点击“创建页面”图标。打开对话框的页面提供了所有模型创建一个新页面。Select your newly created “My First Model Page” and move it to your sitemap structure by drag & drop.选择新创建的“我的第一个模型页面”,并将其移动到你的站点结构由拖曳&下降。Now rename your new page in the sitemap editor and open it afterwar

33、ds from the context menu on the right side of the element bar choosing “Show page”.现在重命名你的新页面的站点地图编辑器,它打开之后从上下文菜单右边的元素栏选择“显示页面”。5.5 Add Header / Footer configuration添加标题/页脚配置添加标题/页脚配置The page appears in your browser and at first sight it contains just the image of the body part. But now select the “

34、Add” option from the ADE toolbar and add a “Header / Footer configuration” to your page by drag & drop.该页面出现在你的浏览器,乍一看,它仅仅包含图像的身体部位。但现在选择“添加”选项从正面的工具栏和添加一个“头/页脚配置”到你的页面被拖&下降。While dragging the new Header / Footer configuration to the page the target areas will be outlined in red.在拖动新的头/页脚配置页

35、面目标区域将用红色标出。When creating a new Header / Footer you should drag the element to the footer container. Since the new Header / Footer configuration is still empty, it will appear as a thin transparent element on your page with an edit button to the right which might be masked by the ADE toolbar on top.

36、当创建一个新的头/页脚你应该将元素移动到页脚容器。自从新页头和页脚配置仍然是空的,它会显示一个薄透明元素在页面上带有edit按钮来正确的可能掩盖的正面的工具栏上。Click the edit button of the new element and choose the edit option to create the header and footer parts of your template in the WYSIWYG editor.单击edit按钮的新元素,并选择edit选项来创建你的页眉和页脚部分模板所见即所得的编辑器。When adding images (logos, b

37、ackground) to the Header / Footer parts, please make sure that the files reside within your template module, e.g./system/modules/my.first.template/resources/images/. Of course you can also edit the HTML source code directly.Click save and exit. On saving the model page the footer should appear the w

38、ay you designed it in the editor. From the “Add content” option of the ADE toolbar now double click the type “Header / Footer configuration” and drag another instance of your configuration (e.g. “my first header / footer configuration”) to the header area of the model page. It should appear the way

39、it was designed in the editor.To ensure that you could only add a single header and footer to a page you should add the maxElements attribute to the <cms:container> tag as follows:当添加图像(标识,背景)的头/页脚部分,请确保文件驻留在您的模板模块,例如/system/modules/my.first.template/resources/images/。当然,你也可以直接编辑HTML源代码。点击保存并退

40、出。在保存模型页面页脚应该出现你的设计在编辑器中。从“添加内容”选项工具栏的外壳现在双击式”页头和页脚配置”并拖动另一个实例的配置(例如,“我的第一页头和页脚配置”)到页面的头部区域模型。它应该出现的方式被设计在编辑器中。确保你只能添加一个单页眉和页脚到一个页面你应该添加maxElements属性的<cms:container>标记如下:<cms:container name=”headercontainer” type=”header” maxElements =”1” />.<cms:container name=”footercontainer” type=

41、”footer” maxElements =”1” />.The background images used for header and footer should be extracted from the reference design using your preferred image editor. In our example a gradient image is used. A tiny portion of a width of a few pixels is enough to repeat the background image by using style

42、 sheets.Save the background images to your template modules /resources/images/ folder.背景的图像用于页眉和页脚应该提取参考设计使用你喜欢的图片编辑器。在我们的示例使用一个梯度图像。一个微小的一部分几个像素宽度足以重复背景图像通过使用样式表。保存背景图片到你的模板模块的/resources/images/ folder。5.6 Styling样式Since there is no styling defined yet, text and links in the header and footer part

43、might appear using browser default font and size settings.由于没有样式定义但是,文本和链接在页眉和页脚部分可能出现使用浏览器的默认字体大小设置。 You can insert style sheets need for the template in the header part of your template.你可以插入样式表需要模板的标题你部分的模板。In our example all template specific CSS files reside in a dedicated folder at/system/modu

44、les/my.first.template/resources/css/You can upload or create a new style sheet in the OpenCms workplace.As an example we create a simple style sheet.在我们的例子中所有模板特定CSS文件驻留在一个专门的文件夹在/system/modules/my.first.template/resources/css/你可以上传或创建一个新的样式表在OpenCms工作场所。作为一个示例中,我们创建一个简单的样式表Go to the OpenCms workpla

45、ce and in your template modules resources folder select “new”from the toolbar and select the type “Folder” and click continue. In the following dialog enter“css” as name, skip the properties and click “Finish”.去OpenCms场所和你的模板模块的资源文件夹选择“new”从工具栏并选择类型“文件夹”并单击继续。在接下来的对话框中输入“css”作为名称,跳过属性,然后单击“Finish”。I

46、nside the just created “css” folder click “New” again and select “Text file”. In the following dialog name it “style.css”.在刚刚创建的“css”文件夹中点击“新”又并选择“文本文件”。在接下来的对话框中命名为” style.css”。It is assumed that you know about CSS, otherwise please find more details on CSS at /Style/CSS/假定你知道关于CSS,

47、否则请找到更多的细节在/Style/CSS/The CSS should at least contain some styling information for the page layout, background images, font size.CSS应该至少包含一些样式信息的页面布局,背景图像、字体大小。Example CSS:CSS例子 html * font-size: 12px textarea, pre, tt, code font-family:"Courier New", Courier, monospace; bo

48、dy padding: 10px 0; font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 75.00%; height: 1%; h1, h2, h3, h4, h5, h6 font-weight:bold; margin: 0 0 2px 0; h1 font-size: 24px h2 font-size: 20px; margin-top: 6px h3 font-size: 18px; margin-top: 5px h4 font-size: 16px; margin-top: 8px h5 font-size:

49、 14px; margin-top: 8px h6 font-size: 14px; font-style: italic; margin-top: 8px p line-height: 16px; margin-top: 3px; margin-bottom: 3px; ul, ol, dl line-height: 15px; margin: 10px 0 10px 10px; li margin-left: 15px; line-height: 15px; #window width: 960px; margin: 0 auto; text-align: left; #header ba

50、ckground-image: url(./images/bg_head_demo_png24.png); position: relative; padding-top: 0px; #main padding: 10px 0; #footer background-image: url(./images/bg_foot_demo_png24.png); padding: 10px; margin-top: 10px; To link this style sheet to the template, add the following line to the HTML head part o

51、f your template:链接这个样式表模板,将下列代码添加到HTML头模板的一部分:<link href="<cms:link>%(link.weak:/system/modules/my.first.template/resources/css/style.css)</cms:link>"rel="stylesheet" type="text/css"></link>To complete the basic layout add two surrounding div con

52、tainers to the HTML <body> part with ids “window” and “page”.完成基本布局周围添加两个div容器到HTML <身体>部分与ids“窗口”和“页面”。5.7 Headincludes头包括To enable includes of css from other modules without reediting the template you can use the <cms:headincludes> tag in the HTML head part of the template.启用包含cs

53、s从其他模块没有reediting模板可以使用< cms:headincludes >标记的HTML头部分的模板。Add the line添加行<cms:headincludes type=”css” />to include style sheets needed for other modules / resource types.<cms:headincludes type=”javascript” /> will include additional JavaScript for modules /resource types.<cms:hea

54、dincludes type=”css” />包括样式表需要其他模块/资源类型。<cms:headincludes type=”javascript” />将包括额外的JavaScript模块/资源类型。<cms:headincludes type=”css” />By now the source code of your template should look like:现在你的源代码模板应该看起来像:<%page buffer="none" session="false" taglibs="c,cms

55、,fn" %><html> <head> <title><cms:info property="opencms.title" /></title> <cms:enable-ade />href="<cms:link>%(link.weak:/system/modules/my.first.template/resources/css/style.css)<link</cms:link>" rel="stylesheet"

56、; type="text/css"></link> <cms:headincludes type="css" /> </head> <body> <div id="window"> <div id="page"> <div id="header"> <cms:container name="headercontainer" type="header" maxEl

57、ements="1" /> </div> <div> <img src='<path-to>/body.jpg'> </div> <div id="footer"> <cms:container name="footercontainer" type="footer" maxElements="1" /> </div> </div> </div> <

58、/body></html>5.8 Identify more template parts识别更多的模板部分Now that we finished the Header and Footer part of the template, lets check the HTML body section for more building blocks that can be reused or potentially generated automatically.现在,我们完成了页眉和页脚模板的一部分,让我们检查HTML的身体部分以获得更多的构建块,可以重用或潜在的自动生成

59、。Recurring elements in the page template will be the navigation elements as this will basically be needed on every page of the website but will differ slightly on every single page.重复元素在页面模板将导航元素,这将主要是需要在每个页面的网站,但将在每一个页面略有不同。Now that we identified more elements, lets cut the dummy image into pieces and replace them later on. The body.jpg pieces are called main-navigation, breadcrumb-navigation, left-navigation, left-container, center-container, ri