Pinax：向 basic_projects 应用程序添加新选项卡：对文档感到困惑
只是克隆了 basic_project 并尝试按照此进行自定义 - http://pinaxproject.com/ docs/0.7/tabs/#ref-tabs
创建了一个新应用程序“myapp”，将新选项卡添加到 right_nav 并编辑了“site_tabs.css”。
但是，当我单击选项卡时，尽管页面确实更改为 myapp，但选项卡的背景颜色并未更改。
文档中的这一行 - 创建一个 myapps/base.html 模板，该选项卡下的所有页面都将扩展该模板。确保它定义了一个块 body_class ，其内容 myapp 让我感到困惑。
内容为 myapp 的“body_class”是什么？是某个“div”，其类具有“{% block body_class%}”吗？
我的 myapp 页面的代码现在非常简单 -
{% extends "site_base.html" %}
{% 加载 i18n %}
{% 加载 ifsetting_tag %}
{% 块 head_title %}
{% trans“自定义应用页面”%}
{% endblock %}
< div class="myapp">
< h1>
{% trans "自定义应用页面" %}
{% if user.is_authenticated %}
< p>您已登录!!
{% 其他 %}
< p>您尚未登录!!
{% endif %}
< /div >
site_base.css 如下 -
body.profile #tab_profile a,
body.myapp #tab_myapp a，
body.notices #tab_notices
{
颜色：#000； /* 选定的选项卡文本颜色 */
}
body.profile #tab_profile,
body.myapp #tab_myapp,
body.notices #tab_notices
{
保证金：0； /* 补偿边界 */
内边距：5px 0 5px；
背景颜色：#DEF； /* 选择标签颜色 */
左边框：1px 实线#000； /* 标签边框 */
顶部边框：1px 实心#000； /* 标签边框 */
右边框：1px 实心#000； /* 标签边框 */
任何指针
都会很棒。谢谢。
Just cloned the basic_project and trying to customize by following this - http://pinaxproject.com/docs/0.7/tabs/#ref-tabs
Created a new app "myapp", added the new tab to the right_nav and edited the "site_tabs.css" as well.
However when I click on the tab, although the page does change to myapp, the background color of the tab doesn't change.
This line in the documentation - 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 is confusing me.
What is that "body_class" with content myapp ?, is it some "div" with the class having "{% block body_class%}" ?
My code of the myapp page is pretty simple right now -
{% 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 >
The site_base.css is as follows -
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 */
}
Any pointers would be great. Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只需在
site_base.html中定义一个名为body_class的块，其内容为myapp如下：这将覆盖
base 中定义的块.html。CSS 可能会使用它来使您的选项卡处于活动状态。请参阅文档底部的示例。
现在，如果您打开使用模板的页面，则正文标记如下所示：
因此上面的 CSS 选择器可以与您的选项卡匹配。
Just define a block named
body_classinside yoursite_base.htmlwith the contentmyapplike this:This will override the block defined in
base.html.It is probably used to by CSS to make your tab active. See the example at the bottom of the documentation.
Now, if you're opening pages that use your template, the body tag looks like this:
Therefore the CSS selector above can match for your tab.