django - いくつかの動的要素を持つ共通ヘッダを使用する

私はWebサイト全体に共通ヘッダを持つdjangoを使用してWebサイトを作成する予定です。私はテンプレートの継承に関するdjangoのドキュメントを読んだことがありますが、私のヘッダの "動的な"要素のための洗練された解決策を見つけることはできません。django - いくつかの動的要素を持つ共通ヘッダを使用する

たとえば、ウェブサイトのヘッダーには、http://www.google.com/（「Web」、「Images」など）のようなタブが含まれます。ここでは、選択したタブでWebサイトの現在の位置が示されます。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <link rel="stylesheet" href="style.css" /> 
    <title>{% block title %}My Amazing Site{% endblock %}</title> 
</head> 
<body> 
<div id="header"> 
    {% block header %} 
    .... html to create tabs ... 
    {% endblock header %} 
</div>

、その後、私の他のすべてのページに、私はこれを行うだろう：

{% extends "base.html" %} 
{% block header % } 
.... html to create tabs with one tab "selected" ... 
{% endblock header %}

あなたは、このような基本テンプレートを作成しますようにDjangoのテンプレートの継承を使用して

は

、それが思われます

私のページのすべての1つがヘッダー情報でHTMLを複製する必要がありますが、わずかに異なるので迷惑なようです。ですから、新しいタブを追加するときは、すべてのHTMLファイルを変更する必要があります。現在選択されているタブを取り込んでカスタムテンプレートタグを作成し、各HTMLページでそのように、私はちょうど呼び出し -

が

1： {％、さらに読め

は、他のいくつかの可能な解決策のように思えますブロックヘッダー％} {％mycustomtag abc％} {％エンドブロックヘッダー％}

このカスタムタグを作成するには、PythonコードにHTMLを配置する必要があるため、このソリューションが嫌いです。

2 - base.htmlのX個のサブテンプレートを作成し、すべて適切なタブを選択します。次に、各ページは、選択したいタブに基づいて適切なサブテンプレートを継承します。

このソリューションは、ほぼ同じHTMLのX個の数字が必要で、タブが追加または削除されたときにすべてのファイルを修正する必要があるという問題があります。

3 - javascript（jqueryなど）を使用して、ページの読み込み時のヘッダーを変更して、正しいタブを「選択」します。

このソリューションは問題ありませんが、この機能をすべてのページのJavaScriptに追加することを忘れないでください。ヘッダーHTMLは単一のHTMLファイルにしか存在しないというのが良い点です。

他の提案はありますか？

ありがとうございます！

出典

2009-09-22 Anonymous

＃1のバージョンでは、そのタグ用に別のテンプレートファイルを使用してトリックを行います。

「カテゴリ」と「記事」のモデルがあるとします。あなたがテンプレートに表示されているカテゴリを渡すあなたの意見に

class Category(models.Model): 
    title   = models.CharField(_("Name"), max_length=200) 
    introduction = models.TextField(blank=True, null=True) 
    slug   = models.SlugField(help_text=_("Used for URLs")) 
    sort_order  = models.IntegerField(_("Sortierung")) 

class Article(models.Model): 
    title = models.CharField(_("Full Name"), max_length=255) 
    slug = models.SlugField(_("Slug Name"), unique=True, help_text=_("This is a short, descriptive name of article that will be used in the URL link to this item")) 
    text = models.TextField(_("Text of Article"), blank=True, null=True) 
    category = models.ForeignKey(Category)

：

@render_to('cat_index.html') 
def category_view(request,string): 

    cat = Category.objects.get(slug=string) 
    articles = Article.objects.filter(category = cat).order_by('date') 
    return { 
      'articles':articles, 
      'category':cat, 
      }

（注：annoyingrender_to -decorator使用して - render_to_responseと同じ）

とでは、あなたのあなたはこのようにinclusion_tagを呼び出します：

@register.inclusion_tag('snippets/navigation.html') 
def navigation(cat=None): 
    return {'cats':Category.objects.order_by('sort_order'), 
      'cat':cat 
      }

あなたは cats上で、それの一つは、あなたが他の割り当てることができる cat等しい場合、forループ（ snippets/navigation.html）inclusions_tagsのテンプレートに今（しばしばbase.htmlと呼ばれる）あなたのベース・テンプレート

{% navigation category %}

でこれを考え使用して

スタイル

<ul>  
     {% for c in cats %} 
      <li{% ifequal c cat %} class="active"{% endifequal %}> 
       <a href="{{c|url}}">{{ c }}</a> 
      </li> 
     {% endfor %} 
    </ul>

出典

2009-09-23 00:22:03 vikingosegundo

私は、各タブには、テンプレートbase.html内のリスト項目であると仮定しています。

<ul> 
    <li>Tab 1</li> 
    <li>Tab 2</li> 
    ... 
</ul>

liに余分なブロックを追加します。

<ul> 
    <li class="active">Tab 1</li> 
    <li class="inactive">Tab 2</li> 
    <li class="inactive">Tab 3</li> 
    ... 
</ul>

、あなたがターゲットにCSSを記述することができます。

{% extends "base.html" %} 

{% block class_tab1 %}active{% endblock %} 
...

だから、タブの1のためにレンダリングされたHTMLは次のとおりです。あなたのテンプレートで次に

<ul> 
    <li class="{% block class_tab1 %}inactive{% endblock %}">Tab 1</li> 
    <li class="{% block class_tab2 %}inactive{% endblock %}">Tab 2</li> 
    <li class="{% block class_tab3 %}inactive{% endblock %}">Tab 3</li> 
    ... 
</ul>

は、タブ1が選択される場合li .activeをお送りします。

出典

2009-09-23 00:47:22 Alasdair

これはかなり一般的な問題であり、私はそれを解決するためのさまざまな方法を考え出しました。

オプションを求めているので、ここでは3つの方法があります。あなたが言及したオプションと以下にリストされているオプションは、すべてポジティブなものとネガティブなものがあります。どちらが最適かを判断するのはあなた次第です。

1代替 - 使用正規表現とハッシュテーブル

これは、クライアントサイド（不利）またはサーバ側（より良いピック）のいずれかを実行することができます。これを行うには、1つの入力を持つタグ、つまり正規表現を使用できます。使用時には、それは次のようになります...

// In base.html... 

<li class="tab {% is_tab_active r'^/cars/' %}"><a>Cars</a></li> 
<li class="tab {% is_tab_active r'^/trucks/' %}"><a>Trucks</a></li>

カスタムタグが表示されている現在のページに対して正規表現を適用します。成功した場合は、 "非アクティブ"でない場合（またはCSSクラスが何であれ）、CSSクラス "アクティブ"を追加します。

私はしばらくこの方法を熟考してきました。それをurls.pyに結びつける方法を考える良い方法があるはずなのに、私はまだそれを見ていないように感じます。

代替2 - 利用CSS

あなたは、各[ボディ]タグを識別するか、または少なくともあなたのサイトのセクションのための共通のテンプレートを持っているとしたら、CSSが有効だった割り当てるために使用することができます。次のことを考えてみましょう：

お使いのベーステンプレートの

body.cars_section .navigation #cars_tab { color: #00000; } 
body.truck_section .navigation #trucks_tab { color: #00000; }

...あなたは、単にそれが（CSSルールと一致）の一部だカテゴリーを置く任意のページに対して次に

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

... 

<ul class="navigation"> 
    <li id="cars_tab"><a>Cars</a></li> 
    <li id="trucks_tab"><a>Trucks</a></li>

...

{% extends "base.html" %} 

... 

{% block category %}cars_section{% endblock %}

代替3 - いくつかの肥大化ミドルウェア

Dを持っていますジャンゴはミドルウェアを書いて、あなたが望むものの振る舞いに影響を与えることができます。これは潜在的なマイナスのパフォーマンスへの影響を伴う肥大化した複雑なルートのようですが、少なくともオプションとして言及しています。

出典

2009-09-23 01:41:37

私は「代替2 - 使用CSS」を使用しています。私はこれが最善の方法だと思う。論理のいくつかのブロックを持つ代わりに、あなたは1つしか持っていません！ありがとう！ –

django - いくつかの動的要素を持つ共通ヘッダを使用する

答えて

関連する問題