dotCMS开发网站指南之二

 

一、概要：

       本指南的目标是一步一步的引导读者在dotCMS平台中创建自己想要的模版。换句话说，就是创建自己心怡的站点。这个指南在官方网站是有的，所以我更多的认为我仅仅是一个翻译者而已。但是，这里面也会加入我对dotCMS的各个概念的认识和理解，所以我觉得此文档还是可以帮到大家的。

二、前提条件：

       为了更好的理解本指南所有的知识点，你必须对HTML语言有良好的理解；同时你必须熟悉在dotCMS中创建页面，并能够将“内容”添加到“容器”中。如果你想学习上述的知识点，请查阅相关的用户指南。不过大家不用担心，我会在后面有较详细的解释和说明。

三、概念定义(解释)：

       模版（Template）： 

       模版就是对于网页设计人员（或者网站开发者）在创建新的HTML页面、XHTML页面或者XML页面时可用的（有用的）一些布局。组成dotCMS模版的代码开起来非常类似于标准的HTML页面的代码（或者标准的XML页面代码）。也就是说我们开发一个dotCMS的模版就像写一个标准HTML或XML文件是基本一样的，至少看起来是这样的。模版文件和标准HTML文件的唯一不同之处是：模版文件中包含了dotCMS中的叫“容器”的东西。“容器”的概念我会在后面马上做出详细的解释，所以请大家不必着急。其实，“容器”就是扮演了“服务器端”的包含，它是一块动态的内容。

       容器（Container）： 

       容器在dotCMS平台下扮演了两个重要的功能。第一，它们扮演的是“服务器端”的包含文件并且它们被作为“可重用的HTML元素”放置到“模版”和“页面”中。一种良好的使用“容器”该功能的方式是例如：全局的“页头”和“页尾”，"主要航条/导航“和 ”站点广泛类型的内容“等等。第二，容器可从”内容仓库“中选择相应 的”内容“放置到模版中，并且可以决定如何格式化内容、内容是否可以被编辑等操作；当然，执行这些动作都可以通过后台的编辑模式来实现。

       内容仓库（Content Repository）： 

       它基于的一种重复使用的思想。我们把”内容“从页面中完全的分离出来，就是想使它可以在一个站点的各个地方被重复使用，甚至可以在多个站点之间被重复的使用。这些内容就组成了内容仓库的概念。

       结构体（Structures）： 

       也叫实体，结构体用于容纳和组织在dotCMS中被创建出来的字段信息。dotCMS的管理员们可以利用这些结构体指定在容器中显示的内容类型。这些内容结构体把信息分散到各个字段变量中（例如：标题、子标题、描述、主体等等字段）。这样可以灵活的在你站点的页面中显示全部或部分的字段信息。

       内容（Content）： 

       它是由所给定的结构体的字段组成的一段内容。想象一下其实很简单的，结构体就像所得税表单，而内容就是你填写的详细的信息。

       索引（Inode）：  

       也叫信息节点，它是唯一标识模版、容器、内容或一段信息的数字。也就是我们在dotCMS中建立的这些东西，系统都会为其建立一个唯一的索引值，这样做的目的额可以方便后面引用模版，容器，内容等实体。

       窗口小部件（Widget）： 

       它其实也是一段内容块，只是在它里面显示的内容可以动态展示。

       内容类型 (Content Types)： 

       它是一种特殊的结构体。例如，”传记内容类型“。

四、剧情概要（模拟场景）：

       要求：

       a. 假定我们已经邀请美工设计好网站的主页面。如下图所示：       

       b. 实现新闻列表： 我们必须能够手动的添加、删除和重新排序新闻列表。即实现上图中蓝色框中的部分，用于展现新闻列表。当然我们的主页也不必须是上图中所示，只要大家随便设计个主页即可，没有必要是这个样子。只是官方给的示例使用了这样的一个例子，所以我也采用了它的例子。

       c. 实现新闻详细页面： 必须能够在链接中通过索引值(inode)动态展现新闻故事的详细内容；如果输入了错误的索引值，那么最新的新闻条目将被显示。

五、实现步骤：

       按照"结构体->容器->模版->页面->内容"的创建顺序是重要的。因为它们之间是由很强的联系的。后所要创建的东西要依赖于前面所创建的东西。当容器在被创建之后要使用结构体的变量，所以我们必须在容器创建之前创建所要使用的结构体。当创建模版时你需要查找你想包含的容器。当你创建页面后，你需要选择一个模版。当你拥有了页面后，你可以创建或重复使用内容。保持这样的顺序多次后，你会明显的感觉到越来越清楚明白。如果我们按照这样的顺序执行多次后，我们势必拥有了一定数量的结构体、容器、模版、内容等东西；并且我们可以重复使用这些东西，除非我们必须创建我们没有的东西。但是，无论如何请保持这样正确的顺序。

     第一步： 创建结构体（有时叫Content Structure，其实我觉得是多余的，这种东西必然是用来逻辑分离内容信息本身的，所以没有必须要这样去说。个人建议，其实很无聊的问题。）

     1. 点击  "Structures" 选项卡

     2. 点击“Create New Structure” 链接

     3. 填写“Add Name” and “Description” 两个属性

     4. 点击  "Save Structure" 保存结构体

     5. 点击   "Add New Field" 依次按照下图的顺序添加相应的属性即可

 

     第二步： 创建容器

     容器将会在可以被手工的添加、重排序和移除的主页上列出来。每条新闻条目的标题将链接到它所对应的详细页面上，并且是通过内容的索引(inode)来访问到详细页面的。

     1. 点击“Website” 选项卡，然后点击“Container” 选项卡.

     2. 点击 “Add Container” 按钮.

     3. 在代码（Code）文本域中我们将要展现New Item（结构体）的headline(新闻摘要变量），并且给它一个超链接链接到新闻条目的详细页面，同时此超链接要加入内容的索引参数以便访问到相对应的页面中，示例代码：(<li><a href="/news/index.dot?inode=$!ContentInode">$!{NewsHeadline}</a></li>)，详细的操作步骤如下图所示。

 

  

     第三步：创建模版（主页模版）

     1. 点击“Website” 选项卡.

     2. 点击 “Templates” 选项卡.

     3. 点击 “Add Template” 按钮.

     4. 把”容器“放置到”模版“中是通过光标闪动的地方放置容器的方式来完成的，同时点击”Add Container“按钮。这是会弹出一个Window窗口，在这个窗口中我们可以选择合适的”容器“，它会在后面的模版页面中放置我们需要的代码。这是很神奇的一件事情，模版中的这段刚刚插入的Code代表了一个容器。

     5. 我们可以重复第4步，直到你在模版中选择好了所有的容器，点击“save and publish“按钮，这样的话一个完整的模版就做好了。

     注意： 

     a.  在模版中把”容器“用一些”带宽度属性约束的元素“包围起来是为了帮助我们在预览的模式下真个页面的每个元素的位置。也就是控制显示的效果，不会出现显示错位的现象。

     b.  一个”容器“ 只能在一个”模版“中使用”一次“，切记。

 

     第四步：创建主页面（HomePage）

     创建主页面其实需要注意的东西还是满多的。例如，页面的名字（它叫页面的标题）最好叫成是index这样做的结果就是以后访问网站会很方便。而且貌似dotCMS中的页面必须放入到某个文件夹中（而且都有个虚拟的访问路径，这个倒是难不住本人，我是这方面的高手，呵呵），所以要在自己所建的站点下下新建所需的文件夹。比如：我建立了home、images、scripts、styles、media等文件夹用于放置我们站点所需的网页及相关文件。当然为了更好的区分网站的各个板块，我们在这个示例中还应建立news文件夹来放置和新闻板块相关的文件。(注意，用于放置放置主页的文件夹最好起名为"home"，这样做的目的主要是为了方便站点的访问。本人在测试的过程发现在dotCMS中先创建文件夹然后删除，dotCMS平台依然会认为这个文件夹还存在，所以大家在新建文件夹的时候要特别注意，否则建立错误后比较的麻烦。)           

     1. 查找叫“home”的文件夹, 如果没有找到就创建它，确保选择我们刚刚建立的”template“文件来创建主页面.

     2. 你一旦保存了该页面, 双击它就可以编辑该页面.

     3. 到目前为止你就能够把已有的”新闻条目“添加到”容器“中或者从主页面中创建新的”新闻条目”

     4. 不要忘记点击”save and publish“按钮以便于你能够马上检查到你对主页的改变。

 

     第五步：创建详细页面（新闻）

     1. 创建"news"文件夹，若果没有的话，并且创建一个"index"页面使用"generic body page"模版。

     (说明：该模版dotCMS是自带的典型布局“头，尾，左栏，中肚”)

     2. 添加widget内容块到body(中肚)里,代码如下：

     #set($inode = $request.getParameter('inode'))

     #if($inode )

     #getContentMapDetail($inode)

     #else

     #pullContent('+type:content +live:true +deleted:false

       +structureInode:5 +languageId:1' '1' 'date1 asc')

     #end

     <h2>$!{content.headline}</h2>

     <span>$date.format('MM/dd/yyyy',$content.publishDate)</span>

     <hr/>

     #if($UtilMethods.isSet($content.Image) && ($content.Image != '0'))

     <img src="/resize_image?inode=${content.Image.trim()}&w=100"

     alt="$content.NewsHeadline" style="float:left; margin:0px 10px 5px

     0px" />

     #end

     $!{content.body}

     3. 添加widget内容块到左栏中，列出最新的新闻列表,代码如下：

     #pullContent('+type:content +live:true +deleted:false

     +structureInode:5 +languageId:1' '5' 'modDate')

     <div class="news">

     <ul>

     #foreach($content in $list)

     <li><a

     href="/news/?inode=$!{content.inode}">$!{content.NewsHeadline}</a></li>

     #end

     </ul>

     </div>

     4. 发布最终的detail页面.

 

     dotCMS的开发指南到此全部翻译完成，祝你好运!

 

评论

1 楼 ankang529 2015-01-26  

您好，想请教您个问题。就是我如果新建一个站点，比如demo.xinhua.com,我应该做哪些配置可以让我直接访问demo.xinhua.com。

还有，而且貌似dotCMS中的页面必须放入到某个文件夹中（而且都有个虚拟的访问路径，这个倒是难不住本人，我是这方面的高手，呵呵。这句话中虚拟的访问路径是什么意思。谢谢了。QQ531444905