添加新用户界面¶

要完全理解本教程的这一部分，最好熟悉自定义地理网络用户界面先上教程。

在GeoNetwork中，可以在同一部署上安装多个样式。可以在“设置管理器”上选择要使用的样式。另外，您还可以使用参数“？view=$name“强制页面请求使用特定样式。

创建空样式¶

现在，我们将在之前创建的独立Maven项目上创建自定义样式。首先，我们定义了最小的用户界面定制，这样我们就可以测试我们的风格是生成和使用的。

我们需要一个关于custom/src/main/resources/catalog/views/custom/less/gn_search的空文件_自定义.less路径

然后我们需要定义将用于此样式的基本角度模块。在custom/src/main/resources/catalog/views/custom上创建文件/模块.js并添加以下内容：

(  function() {
     goog.provide('gn_search_custom');
     goog.require('gn_search');
     var module = angular.module('gn_search_custom', ['gn_search']);
})();

接下来，我们在custom/src/main/resources/catalog/views/custom/templates上创建一个新文件/index.html索引并添加以下内容：

<div>This is my custom GeoNetwork</div>

最后我们得告诉wro4j类库我们的文件在哪里。编辑文件web ui/src/main/resources/web-INF/classes/web ui wro-源.xml并添加我们的文件夹：

<require pathOnDisk="web-ui/src/main/resources" >
  <jsSource webappPath="/catalog/js/" />
  <jsSource webappPath="/catalog/views/default/" />
  <jsSource webappPath="/catalog/views/custom/" />
  <jsSource webappPath="/catalog/components/" />
  <cssSource webappPath="/catalog/views/default/" />
  <cssSource webappPath="/catalog/views/custom/" />
  <cssSource webappPath="/catalog/style/" />
  <cssSource webappPath="/catalog/lib/bootstrap-table/dist" />
</require>

现在，如果我们构建、部署并进入geonnetwork，我们可以使用这种称为“custom”的新样式：http://localhost/本地主机：8080/地理网络/srv/eng/目录搜索？视图=自定义

导入默认样式¶

您可以导入默认样式以轻松开始新样式。

编辑自定义/src/main/resources/catalog/views/custom/less/gn_search_自定义.less并添加以下行：

@import "gn_search_default.css";

然后使角度模块依赖于默认的角度UI模块。编辑自定义/src/main/resources/catalog/views/custom/模块.js并将内容替换为：

(  function() {
      goog.provide('gn_search_custom');
      goog.require('gn_search_default');
      var module = angular.module('gn_search_custom', ['gn_search_default']);
})();

最后，替换文件custom/src/main/resources/catalog/views/custom/templates/index.html索引包含文件web ui/src/main/resources/catalog/views/default/templates的内容/index.html索引

现在，您可以使用自己的自定义设置来改进默认样式的副本。

将代码分离的一个主要优点是，您可以覆盖geonnetwork用户界面上默认的一些文件，并且这种覆盖不会与将来的代码升级冲突。

修改搜索结果¶

GeoNetwork样式的最常见自定义之一是修改搜索结果列表的外观。我们可以在配置js文件。编辑文件custom/src/main/resources/catalog/views/custom/配置js并修改属性搜索设置.resultViewTpls.

searchSettings.resultViewTpls = [{
                tplUrl: '../../catalog/views/custom/resultsview/' +
                'partials/viewtemplates/grid.html',
                tooltip: 'Grid',
                icon: 'fa-th'
              }];

现在我们必须创建引用的文件web ui/src/main/resources/catalog/views/custom/resultsview/partials/viewtemplates/网格.html使用我们想要的模板，比如：

<ul class="list-group gn-resultview gn-resultview-sumup">
  <li class="list-group-item gn-grid"
    data-ng-repeat="md in searchResults.records"
    data-gn-fix-mdlinks=""
    data-gn-displayextent-onhover=""
    data-gn-zoomto-onclick="">

   <div title="{{(md.abstract || md.defaultAbstract) | striptags}}"
       data-ng-click="openRecord($index, md, searchResults.records)">
    <!-- Thumbnail -->
    <div class="gn-md-thumbnail">
      <img class="gn-img-thumbnail"
           data-ng-src="{{md.getThumbnails().list[0].url}}"
           data-ng-if="md.getThumbnails().list[0].url"/>

      <!-- Display the first metadata status (apply to ISO19139 record) -->
      <div data-ng-if="md.status_text.length > 0"
           title="{{md.status_text[0]}}"
           class="gn-status gn-status-{{md.status[0]}}">{{md.status_text[0]}}
      </div>
    </div>
   </div>
  </li>
</ul>

我们可以定义任何想要的类并在gn_搜索中引用它_默认.css文件给它一些样式。