DjangoでTagとFilterをカスタマイズ(一)

19517 ワード
ここはカスタムTagのDemoです.
  • プロジェクトとappを作成します.django-admin.py startproject DynamicNavコマンドを使用して、DynamicNavという名前のDjangoプロジェクトを作成し、manage.py startapp navを使用してDynamicNavディレクトリにappを作成します.
  • ディレクトリを作成します.テンプレートに格納するためにDynamicNavディレクトリにtemplatesのディレクトリを作成します.DynamicNavディレクトリの下に、静的ファイルを保存するためのmediasディレクトリを作成します.DynamicNav/Navディレクトリの下にtemplatetagsというディレクトリを作成し、カスタムtagを保存しながらtemplatetagsディレクトリに__という名前のディレクトリを作成します.init__.pyのファイルで、Djangoにこのディレクトリに格納されているソースコードを説明します.
  • テンプレートを作成します.templatesディレクトリにnav.htmlのテンプレートファイルを作成します.このファイルではCSS+DIVを使ってナビゲーションバーを簡単に実現しています.CSS、DIVに関する知識は、その文章を参考にすることができます.テンプレートのソースコードは次のとおりです:
    • nav.html: 
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      2. 

  
  
   
   
   
   
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. 

  
  
   
   
   
   
    3. <head>  
      4. 

  
  
   
   
   
   
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />  
      5. 

  
  
   
   
   
   
    5. <title>       </title>  
      6. 

  
  
   
   
   
   
    6. <link href="/site_media/style.css" rel="stylesheet" type="text/css"  />  
      7. 

  
  
   
   
   
   
    7. </head>  
      8. 

  
  
   
   
   
   
    8. <body>  
      9. 

  
  
   
   
   
   
    9.         <ul id="nav">  
      10. 

  
  
   
   
   
   
    10.                 <li><a href="/" id="current">   </a></li>  
      11. 

  
  
   
   
   
   
    11.                 <li><a href="/article/" >   </a></li>          
      12. 

  
  
   
   
   
   
    12.                 <li><a href="/blog/" >Blog</a></li>  
      13. 

  
  
   
   
   
   
    13.                 <li><a href="/forum/" >   </a></li>  
      14. 

  
  
   
   
   
   
    14.                 <li><a href="/about/" >   </a></li>                                                          
      15. 

  
  
   
   
   
   
    15.         </ul>  
      16. 

  
  
   
   
   
   
    16. </body>  
      17. 

  
  
   
   
   
   
    17. </html>
      18.
    このテンプレートはすぐに修正する必要があります.焦らないでください~~~.Mediasディレクトリの下にcssファイルを作成します:style.css:
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. body  
      2. 

  
  
   
   
   
   
    2. {  
      3. 

  
  
   
   
   
   
    3.         background-color:#FFFFFF;  
      4. 

  
  
   
   
   
   
    4. }  
      5. 

  
  
   
   
   
   
    5.  
      6. 

  
  
   
   
   
   
    6. #nav  
      7. 

  
  
   
   
   
   
    7. {  
      8. 

  
  
   
   
   
   
    8.         height:26px;  
      9. 

  
  
   
   
   
   
    9.         border-bottom:2px solid #ccc;  
      10. 

  
  
   
   
   
   
    10.         list-style:none;  
      11. 

  
  
   
   
   
   
    11. }  
      12. 

  
  
   
   
   
   
    12.  
      13. 

  
  
   
   
   
   
    13. #nav li  
      14. 

  
  
   
   
   
   
    14. {  
      15. 

  
  
   
   
   
   
    15.         float:left;  
      16. 

  
  
   
   
   
   
    16.         font-size:14px;  
      17. 

  
  
   
   
   
   
    17. }  
      18. 

  
  
   
   
   
   
    18.  
      19. 

  
  
   
   
   
   
    19. #nav li a  
      20. 

  
  
   
   
   
   
    20. {  
      21. 

  
  
   
   
   
   
    21.         color:#03b;  
      22. 

  
  
   
   
   
   
    22.         text-decoration:none;  
      23. 

  
  
   
   
   
   
    23.         display:block;  
      24. 

  
  
   
   
   
   
    24.         width:88px;  
      25. 

  
  
   
   
   
   
    25.         height:19px;  
      26. 

  
  
   
   
   
   
    26.         text-align:center;  
      27. 

  
  
   
   
   
   
    27.         background:url(bg.gif) no-repeat;  
      28. 

  
  
   
   
   
   
    28.         margin-left:8px;  
      29. 

  
  
   
   
   
   
    29.         padding-top:6px;  
      30. 

  
  
   
   
   
   
    30. }  
      31. 

  
  
   
   
   
   
    31.  
      32. 

  
  
   
   
   
   
    32. #nav li a:hover  
      33. 

  
  
   
   
   
   
    33. {  
      34. 

  
  
   
   
   
   
    34.         font-weight:bold;  
      35. 

  
  
   
   
   
   
    35. }  
      36. 

  
  
   
   
   
   
    36.  
      37. 

  
  
   
   
   
   
    37. #nav li a#current  
      38. 

  
  
   
   
   
   
    38. {  
      39. 

  
  
   
   
   
   
    39.         background:url(cur.gif) no-repeat;  
      40. 

  
  
   
   
   
   
    40.         color:#666;  
      41. 

  
  
   
   
   
   
    41.         font-weight:bold;  
      42. 

  
  
   
   
   
   
    42.         height:20px;  
      43. 

  
  
   
   
   
   
    43. } 
      44.

     このコードは、次の効果のナビゲーションバーを定義します.
     4、nav/view.pyファイルを変更します.navのview.pyファイルを簡単に書きます.
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. #coding=utf-8  
      2. 

  
  
   
   
   
   
    2.  
      3. 

  
  
   
   
   
   
    3. from django.shortcuts import render_to_response  
      4. 

  
  
   
   
   
   
    4. from django.template import RequestContext  
      5. 

  
  
   
   
   
   
    5.  
      6. 

  
  
   
   
   
   
    6. def index(request):  
      7. 

  
  
   
   
   
   
    7.     return render_to_response('nav.html', {}, RequestContext(request))  
      8.

     
    ここではrequestをパラメータとしてテンプレートに転送します.
    5、urls.pyとsetting.pyファイルを修正する.
    urls.pyを開いたら、次のように変更します(怠け者で、そんなに多くのページを書いていません.すべてのリンクは1つのページを使用しています).
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. from django.conf.urls.defaults import *  
      2. 

  
  
   
   
   
   
    2. import settings  
      3. 

  
  
   
   
   
   
    3.  
      4. 

  
  
   
   
   
   
    4. urlpatterns = patterns('',  
      5. 

  
  
   
   
   
   
    5.     (r'^$', 'DynamicNav.nav.views.index'),  
      6. 

  
  
   
   
   
   
    6.     (r'^article/$', 'DynamicNav.nav.views.index'),  
      7. 

  
  
   
   
   
   
    7.     (r'^blog/$', 'DynamicNav.nav.views.index'),  
      8. 

  
  
   
   
   
   
    8.     (r'^forum/$', 'DynamicNav.nav.views.index'),  
      9. 

  
  
   
   
   
   
    9.     (r'^about/$', 'DynamicNav.nav.views.index'), 
      10. 

  
  
   
   
   
   
    10.     #define the media url 
      11. 

  
  
   
   
   
   
    11.     (r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root' : settings.MEDIA_ROOT}),  
      12. 

  
  
   
   
   
   
    12. ) 
      13.

     setting.pyのN箇所を修正する:
            1)templatesの絶対パスをTEMPLATE_に追加DIRS中です.次の文を使用します.
    os.path.join(os.path.dirname(__file__),'templates').replace('\\','/'),
    import osを忘れないでね.
            2)MEDIA_をROOT変更:MEDIA_ROOT = os.path.join(os.path.dirname(__file__),'medias').replace('\\','/')
            3)INSTALLED_でAPPSに「DynamicNav.nav」という行を追加して、さっき作ったアプリをインストールします.
            4)Context Processorを追加します.setting.pyの最後に以下を加えればOKです.
    TEMPLATE_CONTEXT_PROCESSORS = ( 
        "django.core.context_processors.request", 
        "django.core.context_processors.auth", 
        "django.core.context_processors.debug", 
        "django.core.context_processors.i18n", 
         )
    OK manage.py runserverを実行して開くことができますhttp://127.0.0.1:8000運行効果を見てみましょう.
    6、次はカスタムタグの作成をします.皆さん、よく見てくださいね~~
    Nav/templatetagsにNavTag.pyというファイルを作成し、変更を開始します.
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. #coding=utf-8  
      2. 

  
  
   
   
   
   
    2. from django import template  
      3. 

  
  
   
   
   
   
    3.  
      4. 

  
  
   
   
   
   
    4. #        
      5. 

  
  
   
   
   
   
    5. register = template.Library()  
      6. 

  
  
   
   
   
   
    6.  
      7. 

  
  
   
   
   
   
    7. #        Tag Node ，       
      8. 

  
  
   
   
   
   
    8. class NavTagItem(template.Node):  
      9. 

  
  
   
   
   
   
    9.     def __init__(self, nav_path, nav_displaytext):  
      10. 

  
  
   
   
   
   
    10.         self.path = nav_path.strip('"')  
      11. 

  
  
   
   
   
   
    11.         self.text = nav_displaytext.strip('"')  
      12. 

  
  
   
   
   
   
    12.           
      13. 

  
  
   
   
   
   
    13.     def render(self, context):  
      14. 

  
  
   
   
   
   
    14.         cur_path = context['request'].path  
      15. 

  
  
   
   
   
   
    15.         #context['request'] views      request  ，            
      16. 

  
  
   
   
   
   
    16.         #   context     
      17. 

  
  
   
   
   
   
    17.           
      18. 

  
  
   
   
   
   
    18.         current = False  
      19. 

  
  
   
   
   
   
    19.         if self.path == '/':  
      20. 

  
  
   
   
   
   
    20.             current = cur_path == '/'  
      21. 

  
  
   
   
   
   
    21.         else:  
      22. 

  
  
   
   
   
   
    22.             current = cur_path.startswith(self.path)  
      23. 

  
  
   
   
   
   
    23.               
      24. 

  
  
   
   
   
   
    24.         cur_id = ''  
      25. 

  
  
   
   
   
   
    25.         if current:  
      26. 

  
  
   
   
   
   
    26.             cur_id = ' id="current" '  
      27. 

  
  
   
   
   
   
    27.               
      28. 

  
  
   
   
   
   
    28.         return '<li><a %s href="%s">%s</a></li>' % (cur_id, self.path, self.text)  
      29. 

  
  
   
   
   
   
    29.  
      30. 

  
  
   
   
   
   
    30. #  tag，          ，             
      31. 

  
  
   
   
   
   
    31. @register .tag(name='NavTag')
      32. 

  
  
   
   
   
   
    32. def navtagitem(parser, token):  
      33. 

  
  
   
   
   
   
    33.     try:  
      34. 

  
  
   
   
   
   
    34.         tag_name, nav_path, nav_text = token.split_contents()  
      35. 

  
  
   
   
   
   
    35.     except ValueError:  
      36. 

  
  
   
   
   
   
    36.         raise template.TemplateSyntaxError, \  
      37. 

  
  
   
   
   
   
    37.                 "%r tag requires exactly two arguments: path and text" % \  
      38. 

  
  
   
   
   
   
    38.                 token.split_contents[0]  
      39. 

  
  
   
   
   
   
    39.       
      40. 

  
  
   
   
   
   
    40.     return NavTagItem(nav_path, nav_text)     
      41.
    、nav.htmlファイルを再変更します.nav.htmlファイルを変更するには、次のようにします.
    
 
 
  
  
  
  
      
  
  
   
   
   
   
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      2. 

  
  
   
   
   
   
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. 

  
  
   
   
   
   
    3. <head>  
      4. 

  
  
   
   
   
   
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />  
      5. 

  
  
   
   
   
   
    5. <title>       </title>  
      6. 

  
  
   
   
   
   
    6. <link href="/site_media/style.css" rel="stylesheet" type="text/css"  />  
      7. 

  
  
   
   
   
   
    7. </head>  
      8. 

  
  
   
   
   
   
    8. <body>  
      9. 

  
  
   
   
   
   
    9.         {% load NavTag %}  
      10. 

  
  
   
   
   
   
    10.         <ul id="nav">  
      11. 

  
  
   
   
   
   
    11.                 {% navtagitem / "   " %}  
      12. 

  
  
   
   
   
   
    12.                 {% navtagitem /article/ "   " %}  
      13. 

  
  
   
   
   
   
    13.                 {% navtagitem /blog/ "Blog" %}  
      14. 

  
  
   
   
   
   
    14.                 {% navtagitem /forum/ "   " %}  
      15. 

  
  
   
   
   
   
    15.                 {% navtagitem /about/ "   " %}                                                       
      16. 

  
  
   
   
   
   
    16.         </ul>  
      17. 

  
  
   
   
   
   
    17. </body>  
      18. 

  
  
   
   
   
   
    18. </html> 
      19.

    ここで、黒い文字は修正された部分です.{%load NavTag%}カスタムtagファイルをロードするため、Djangoはappの下のtemplatetagsディレクトリを自動的に削除してNavTag.pyファイルを検索します.{%navtagitem/「トップページ」%}タグを使用してナビゲーションバーを定義するには、トップページの2文字の間にスペースがあるため、二重引用符で起こさなければなりません.起こさなければ、Djangoはnavtagitemラベルに3つのパラメータが伝達されたと考えられ、TemplateSyntaxErrorが生成されます.
    「person.username.firstname」タイプのパラメータ文字列が自動的にオブジェクトに組み立てられる原理
    MVVMモードにおけるViewModelにおけるICommandの応用