0

刚刚克隆了 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 */
}

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

4

1 回答 1

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
于 2011-02-09T20:35:18.150 回答