15.7. 自定义站点外观

默认的Maven模板可能远不能满足你的期望。如果你想要自定义项目站点,并且不只局限于添加内容,导航元素,和定制logo。Maven提供了很多种方案让你定制web站点,并相继的提供对于内容渲染和站点结构的深入访问。对于小型的,单个项目的站点微调,提供一个定制的site.css通常就足够了。然而,如果你想要自己的自定义信息可以在多个项目中被重用,或者该自定义还涉及了更改Maven生成的XHTML内容,你就应该考虑创建你自己的Maven web站点皮肤。

15.7.1. 自定义站点CSS

最简单的影响项目web站点外观和感觉的方法是使用项目的site.css。就像你为站点提供的任何图片或XHTML内容一样,site.css也被包含于src/site/resources目录中。Maven认为该文件位于src/site/resources/css子目录。使用CSS就可以更改文字风格属性,布局属性,或者甚至添加背景图片和自定义bullet图。例如,如果我们决定让菜单头更显眼一点,就可以在src/site/resources/css/site.css中尝试如下风格。

#navcolumn h5 {
  font-size: smaller;
  border: 1px solid #aaaaaa;
  background-color: #bbb;
  margin-top: 7px;
  margin-bottom: 2px;
  padding-top: 2px;
  padding-left: 2px;
  color: #000;
}

在你重新生成该站点之后,菜单头应该会有一个灰色背景框,并通过一些额外的边距空间和菜单的其它部分分开。使用该文件,Maven站点的任何结构都可以使用自定义的CSS装饰。如果你在一个特定项目中更改site.css,其变化就至对该项目起作用。如果你想做一些更改并应用到很多个Maven项目中,你可以为Maven Site插件创建一个自定义的皮肤。

Tip

对于默认Maven Site模板的结构,没有很好的参考材料。如果你尝试自定义你Maven项目的风格,你应该使用一个Firefox插件如Firebug作为一个工具,来浏览项目页面的DOM