fluentcms-jumbotron

为django-fluent-contents提供的Bootstrap 3 Jumbotron元素

这些详情未由PyPI验证

项目链接

项目描述

https://img.shields.io/pypi/l/fluentcms-jumbotron.svg

https://img.shields.io/codecov/c/github/django-fluent/fluentcms-jumbotron/master.svg

在页面中显示Bootstrap 3 Jumbotron

安装

首先安装模块，最好在虚拟环境中安装。可以从PyPI安装

pip install fluentcms-jumbotron

首先确保项目已配置为django-fluent-contents。

然后添加以下设置

INSTALLED_APPS += (
    'fluentcms_jumbotron',
)

FLUENT_CONTENTS_PLACEHOLDER_CONFIG = {
    'slot name': {
        'plugins': ('JumbotronPlugin', ...),
    },
}

之后可以创建数据库表

./manage.py migrate

前端样式

Jumbotron使用Bootstrap规定的HTML渲染

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

标准的Bootstrap 3 CSS将为此提供合理的样式，这可以由自己的CSS文件覆盖或替换。Bootstrap 3提供的默认值是：https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_jumbotron.scss

自定义

居中、添加背景等，所有这些都可以通过添加CSS样式来实现。例如

.jumbotron {
  background: url('/static/frontend/images/background.jpg') no-repeat fixed 0 0;
  background-size: cover;
  color: #fff;
  text-align: center;
}

.jumbotron .btn {
  margin-top: 12px;  /* For Sass: $padding-base-vertical * 2; */
}

当您使用Sass时，也可以覆盖Sass变量。

全页宽

要显示全页宽的Bootstrap Jumbotron，您可能需要从渲染JumbotronPlugin的容器中退出。例如，当您的页面看起来像

<div class="container">
    {% page_placeholder "homepage" title="Homepage" role="m" %}
</div>

您可以将它改为

<div class="container">
    {% page_placeholder "homepage" title="Homepage" role="m" template="pages/placeholders/homepage.html" cachable=1 %}
</div>

pages/placeholders/homepage.html 模板看起来像

{% for contentitem, html in contentitems %}
  {% if contentitem.plugin.name == 'JumbotronPlugin' %}
    </div>
    {{ html }}
    <div class="container">
  {% else %}
    {{ html }}
  {% endif %}
{% endfor %}

注意，确切的HTML标签取决于您的前端HTML布局。

带有 cachable=1 标志的承诺是模板对于每个请求都返回相同的结果。否则，请删除它。

贡献

如果您喜欢这个模块，已经进行了分叉，或者想要改进它，请告诉我们！我们也欢迎拉取请求。:-)

项目详情

这些详情未由PyPI验证

项目链接

发布历史发布通知 | RSS源

此版本

3.0

2021年11月16日

2.0

2018年1月22日

1.1.1

2016年8月19日

1.1

2016年6月19日

1.0

2016年5月14日

下载文件

下载适用于您的平台的文件。如果您不确定选择哪个，请了解更多关于安装包的信息。

源分布

fluentcms-jumbotron-3.0.tar.gz (13.7 kB 查看哈希值)

上传时间 2021年11月16日 源

构建分布

fluentcms_jumbotron-3.0-py3-none-any.whl (14.3 kB 查看哈希值)

上传时间 2021年11月16日 Python 3