地理节点主题

我们已经解释过了 简单主题化 如何直接从 管理界面 是的。这是自定义geonode外观的简单方法,但在某些情况下,您可能需要对其进行更多的控制。
在这些情况下,您必须深入代码,强烈建议使用geonode项目并对其进行自定义,而不是使用geonode默认的html/css代码。请参阅以下各节了解更多信息。

创建geonode项目的主题

如果您想更改 Geonode项目 是的。因为geonode的样式基于 Bootstrap 您将能够利用bootstrap在主题定制方面提供的所有功能。一旦您熟悉geonode如何实现bootstrap以及如何在您自己的项目中重写geonode的主题和模板,就应该参考bootstrap的文档作为主要指南。

徽标和图形

geonode故意不在其接口中包含大量图形文件。这样可以将页面加载时间保持在最低限度,并使界面更具响应性。也就是说,您可以通过简单地更改默认徽标,或者通过添加自己的图像和图形来定制geonode的界面,从而以您预想的方式提供geonode体验。

您的geonode项目已经设置了一个目录,用于在 <my_geonode>/static/img 是的。您应该将要用于项目的任何图像文件放置在此目录中。

让我们来看看更改默认徽标所需步骤的示例。

  1. 改为 img 目录:

    $ cd <my_geonode>/static/img
    
  2. 如果你还没有,获取你的标志图像。下面的URL只是一个示例,因此您需要更改此URL以匹配文件的位置或将其复制到此位置:

    $ sudo wget https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Service_mark.svg/500px-Service_mark.svg.png
    $ sudo chown -Rf geonode: .
    
  3. 改为 css 目录:

    $ cd ../../..
    
  4. 通过编辑覆盖显示徽标的css <my_geonode>/static/css/site_base.css 使用您喜爱的编辑器并添加以下行,确保更新宽度、高度和url以匹配图像的规格。

    $ sudo vi site_base.css
    
    .navbar-brand {
        width: 350px;
        height: 80px;
        background: transparent url("../img/500px-Service_mark.svg.png") no-repeat;
        background-size: 300px 70px;
        background-position-y: center;
    }
    
  5. 重新启动geonode项目并查看浏览器中的页面:

    $ cd /home/geonode
    $ sudo rm -Rf geonode/geonode/static_root/*
    $ cd my_geonode
    $ python manage.py collectstatic
    $ sudo service apache2 restart
    

    注解

    清理 static_folder 以及重新加载之前的浏览器缓存,以确保更改已正确执行并显示在屏幕上。

访问您的站点http://localhost/或站点的远程url。

../../_images/logo_override.png

自定义徽标

您可以看到页眉已展开以适合您的图形。在下面的部分中,您将学习如何自定义此标题以使其符合您的需要。

注解

您应该在完成本节的过程中将这些更改提交到您的存储库中,并养成尽早和经常提交的习惯,以便您和其他人可以在github上跟踪您的项目。进行许多原子提交并与远程存储库保持同步,可以更轻松地与项目中的其他人协作。

层叠样式表

在最后一节中,您已经学习了如何重写geonode的默认css规则以包含您自己的徽标。您可以通过这种方式自定义geonode外观的任何方面。在上一张截图中,您看到主页的主要区域被扩展的标题所覆盖。

首先,我们将通过必要的步骤将其向下移动,使其不再隐藏,然后更改标题的背景色,使其与徽标图形中的颜色匹配。

  1. 重新打开 <my_geonode>/static/css/site_base.css 在编辑器中:

$ cd /home/geonode/my_geonode/my_geonode/static/css
$ sudo vi site_base.css
  1. 添加以下css规则以考虑扩展的页眉高度:

#wrap {
    margin-top: 100px !important;
    padding-top: 0px;
}
  1. 添加规则以更改标题的背景色以匹配徽标图形:

.navbar-inverse {
    background-color: #ff0000 !important;
}
  1. 为添加背景图像 hero 章节:

.jumbotron {
    background: url("https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg") no-repeat !important;
    background-size: cover !important;
}
  1. 您的项目css文件现在应该如下所示:

.navbar-brand {
    width: 350px;
    height: 150px;
    background: transparent url("../img/500px-Service_mark.svg.png") no-repeat;
    background-size: 300px 100px;
    background-position-y: center;
}

#wrap {
    margin-top: 100px !important;
    padding-top: 0px;
}

.navbar-inverse {
    background-color: #ff0000 !important;
}

.jumbotron {
    background: url("https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg") no-repeat !important;
    background-size: cover !important;
}
  1. 将静态文件收集到静态根目录,重新启动开发服务器并重新加载页面:

    $ python manage.py collectstatic
    $ sudo service apache2 restart
    
../../_images/css_override.png

CSS覆盖

您可以继续向该文件添加规则,以覆盖geonode基css文件中的样式,该文件是从 base.less .

注解

您可能会发现,使用浏览器的开发工具检查要覆盖的网站元素以确定哪些规则已经应用是很有帮助的。请看下面的截图。

../../_images/inspect_element.png

使用浏览器调试器检查css覆盖的屏幕截图

模板和静态页面

现在我们已经更改了默认徽标,并调整了主要内容区域以适应扩展的标题,下一步是更新主页本身的内容。geonode项目包含两个基本模板,您将使用它们来更改页面内容。

文件 site_base.html<my_geonode>/templates/ )是所有其他模板继承的基本模板,您将使用它来更新诸如页眉、导航栏、站点范围的公告、页脚等内容,还将包括您自己的javascript或站点中每个页面中包含的其他静态内容。值得一看 GeoNode's base file on GitHub 是的。您有几个块可供重写,但由于我们将在本指南的后续章节中重新访问此文件,所以现在就让我们先看一下它,不要修改它。

正常开放 <my_geonode>/templates/site_base.html 在编辑器中:

$ cd /home/geonode/my_geonode/my_geonode/templates
$ sudo vi site_base.html

你会看到它从 base.html ,这是上面引用的geonode模板,它当前仅重写 extra_head 包括我们项目的 site_base.css 我们在上一节已经修改过了。

{% extends "base.html" %}
{% block extra_head %}
      <link href="{{ STATIC_URL }}css/site_base.css" rel="stylesheet"/>
{% endblock %}

你可以看到 line 189 of the GeoNode base.html template 此块包含在空状态中,并且是专门为您设置的,以便在项目已经设置好要包含额外的css文件时包含这些文件。

文件 site_index.html 是用于定义geonode项目主页的模板。让我们重写这个模板。
它扩展了geonode的默认值 index.html 模板,并为您提供覆盖主页特定区域的选项,如 英雄区 ,但它也允许您保持其他部分的原样。当然,您可以随意重写您喜欢的部分,下面的步骤为您提供了一个示例。
  1. 正常开放 <my_geonode>/templates/site_index.html 在你的编辑那里。

  2. 编辑第一个 <h1> 元素内部 <div class="container"> 说“欢迎”以外的话:

<h1>{{custom_theme.jumbotron_welcome_title|default:_("GeoNode Project Example")}}</h1>

警告

注意 custom_theme.jumbotron_welcome_title 部分,如果删除它,则无法使用“基于管理员”的主题自定义选项(请参见 简单主题化

  1. 编辑介绍性段落,介绍您的geonode项目:

<p>
    <p>{{custom_theme.jumbotron_welcome_content|default:_("This GeoNode has been customized through my GeoNode Project.")}}</p>
</p>

警告

照顾好 custom_theme.jumbotron_welcome_content 如果使用的是“基于管理员”的主题自定义选项(请参见 简单主题化

  1. 您编辑的 site_index.html 文件现在应该如下所示:

{% extends 'index.html' %}
{% load i18n %}

{% comment %}
    This is where you can override the hero area block. You can simply modify the content below or replace it wholesale to meet your own needs.
{% endcomment %}

{% block hero %}
    <div class="jumbotron">
        <div class="container">
            <h1>{{custom_theme.jumbotron_welcome_title|default:_("GeoNode Project Example")}}</h1>
            <p></p>
            <p>{{custom_theme.jumbotron_welcome_content|default:_("This GeoNode has been customized through my GeoNode Project.")}}</p>
            {% if not custom_theme.jumbotron_cta_hide %}
                <p>
                    <a class="btn btn-default btn-lg" target="_blank" role="button"
                      href="{{custom_theme.jumbotron_cta_link|default:_('http://docs.geonode.org/en/master/usage/index.html')}}">
                        {{custom_theme.jumbotron_cta_text|default:_("Get Started &raquo;")}}
                    </a>
                </p>
            {% endif %}
        </div>
    </div>
{% endblock %}
  1. 将静态文件收集到静态根目录中,重新启动开发服务器并重新加载页面以查看更改:

$ python manage.py collectstatic
$ sudo service apache2 restart
../../_images/customized_geonode_project_home.png

自定义geonode项目主页

其他主题化选项

通过向site_base.css添加css规则,您可以更改geonode项目样式的任何特定部分,但是由于geonode是基于引导的,因此有许多预定义的主题可以直接放入项目中以获得全新的外观。这与 WordPress 主题和它是一个强大和容易的方式来改变你的网站外观,不需要太多的努力。

鞋样

Bootswatch 您可以下载基于引导的网站的现成主题。

警告

目前geonode使用的是3.3.7版本的bootstrap,所以 suitable Bootswatch themes 应该是为同一版本而构建的。

以下步骤将向您展示如何在自己的geonode项目中使用bootswatch中的主题。

  1. 下载 Bootswatch themes for Bootstrap v3.3.7 archive 并将其解压缩到磁盘中的某个文件夹中。

  2. 选择一个主题(在本例中,我们将使用 砂岩 )然后复制 bootstrap.css 主题文件夹中的文件 <my_geonode>/static/css (geonode项目的静态文件夹)。

  3. 更新 site_base.html 包含此文件的模板。现在应该是这样:

$ cd <my_geonode>/templates
$ sudo vi site_base.html
{% extends "base.html" %}
{% block extra_head %}
    <link href="{{ STATIC_URL }}css/site_base.css" rel="stylesheet"/>
    <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet"/>
{% endblock %}
  1. 将静态文件收集到静态根目录,重新启动开发服务器并重新加载页面:

$ python manage.py collectstatic
$ sudo service apache2 restart
../../_images/bootswatch_theme.png

geonode项目的bootswatch主题