Question

刚刚克隆了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？，是否有一个“div”，类有“{％block body_class％}”？

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 */ }

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

Answer 1

只需在body_class内定义一个名为site_base.html的广告块，其内容为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标签如下所示：

<body class="myapp">

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

body.myapp #tab_myapp a { // active

Pinax：向basic_projects应用程序添加新选项卡：文档困惑

1 个答案: