Pinax：向 basic_projects 应用程序添加新选项卡：被文档混淆答案

【问题标题】：Pinax : Add new tab to the basic_projects application : Confused by documentationPinax：向 basic_projects 应用程序添加新选项卡：被文档混淆
【发布时间】：2011-02-09 20:19:09
【问题描述】：

刚刚克隆了 basic_project 并尝试按照此进行自定义 - http://pinaxproject.com/docs/0.7/tabs/#ref-tabs

创建了一个新应用“myapp”，将新标签添加到 right_nav 并编辑了“site_tabs.css”。
但是当我点击标签时，虽然页面确实变成了myapp，但标签的背景颜色并没有改变。

文档中的这一行 - Create a myapps/base.html template that all pages under that tab will extend. Make sure it defines a block body_class with content myapp 让我感到困惑。

"body_class" with content myapp 是什么？，它是某个类具有“{% block body_class%}”的“div”吗？

我的 myapp 页面的代码现在非常简单 -

{% extends "site_base.html" %} {% load i18n %} {% load ifsetting_tag %} {% block head_title %} {% trans "Custom App page" %} {% endblock %}

< div class="myapp"> < h1 > {% trans "Custom App page" %}</h1> {% if user.is_authenticated %} < p >You are signed in !!</p> {% else %} < p >You are NOT signed in !!</p> {% endif %} < /div >

site_base.css如下-

body.profile #tab_profile a, body.myapp #tab_myapp a, body.notices #tab_notices a { color: #000; /* selected tab text colour */ }

body.profile #tab_profile, body.myapp #tab_myapp, body.notices #tab_notices { margin: 0; /* to compensate for border */ padding: 5px 0 5px; background-color: #DEF; /* selected tab colour */ border-left: 1px solid #000; /* tab border */ border-top: 1px solid #000; /* tab border */ border-right: 1px solid #000; /* tab border */ }

任何指针都会很棒。谢谢。

【问题讨论】：

你的 site_base.html 和 site_tabs.css 是什么样的？
site_base.html 是 pinax 版本 0.7.3 的默认值。在问题中添加 site_tabs.css。

标签： django pinax

【解决方案1】：

只需在 site_base.html 中定义一个名为 body_class 的块，内容为 myapp，如下所示：

{% block body_class %}myapp{% endblock %}

这将覆盖base.html中定义的块。

<body class="{% block body_class %}{% endblock %}">

CSS 可能习惯于使您的标签处于活动状态。请参阅文档底部的示例。

body.profile #tab_profile a,
body.blogs #tab_blogs a,
body.bookmarks #tab_bookmarks a
{
    color: #000; /* selected tab text colour */
}

现在，如果您要打开使用模板的页面，则正文标记如下所示：

<body class="myapp">

因此，上面的 CSS 选择器可以匹配您的标签。

body.myapp #tab_myapp a { // active

【讨论】：

太棒了！那行得通。为了覆盖内容，我在 myapp_base.html 中使用了“{% block body %}”？
@PlanetUnknown 在文档中找不到，但根据基本模板，body 似乎是正确的块。
我试图找到最基础的 html，并在 pinax/templates/default/ 目录中找到它，名称为 base.html。它有这个块 - {% block body %}{% endblock %} 并在渲染时转换为
。因此，要填充页面的正文部分，我必须在 myapp 下的页面中覆盖它。刚刚尝试过并工作了 8-)
@PlanetUnknown 所以，我想在 myapp.html 中写 {% block body %} 吗？谢谢。