You are here

Views 2.x 主题化, 视频简介(已录制)

g089h515r806 的头像
Submitted by g089h515r806 on 星期日, 2009-06-21 11:39

 

通常,我们会使用Views来输出分类新闻,这里以我们的Drupal abc中,news view为例,使用这个view来输出包含时间,标题的节点列表.
 
       我们的目标HTML输出为:
<ul>
<li><span>2009-04-28</span><a>子部门A1新闻标题2</a></li>
<li><span>2009-04-28</span><a>子部门A1新闻标题1</a></li>
<li></li>
</ul>
这个目标HTML片段,是由美工设计,如何对Views的默认样式进行覆写,完全按照美工设计的进行输出呢?
 
       我们知道,views提供了4种默认样式, Unformatted(未格式化的), Grid(格子), HTML list(HTML 列表), Table(表格).以时间标题为例,他们的输出如下所示,距离我们的目标HTML片段有很大的距离。
 
Unformatted:
<div class="view-content">
       
       <div class="views-row-1 views-row-odd views-row-first">
     
 
              <div class="views-field-created">
               
                     <span class="field-content">2009-04-28</span>
 
              </div>
 
 
              <div class="views-field-title">
              
                     <span class="field-content"><a href="/drupal-abc/node/11">子部门A1新闻标题2</a></span>
 
                </div>
 
       </div>
 
       <div class="views-row-2 views-row-even views-row-last">
     
 
              <div class="views-field-created">
               
                     <span class="field-content">2009-04-28</span>
 
              </div>
 
 
              <div class="views-field-title">
               
                     <span class="field-content"><a href="/drupal-abc/node/10">子部门A1新闻标题1</a></span>
 
              </div>
 
       </div>
   
</div>
 
 
 
Grid:
<div class="view-content">
     
       <table class="views-view-grid">
 
              <tbody>
                
                     <tr class="row-1 row-first">
                 
                            <td class="col-1">
     
       
                          <div class="views-field-created">
               
                                          <span class="field-content">2009-04-28</span>
 
                                   </div>
 
 
                                   <div class="views-field-title">
          
                                             <span class="field-content"><a href="/drupal-abc/node/11">子部门A1新闻标题2</a></span>
 
                                   </div>
         
                            </td>
                 
                            <td class="col-2">
       
     
                          <div class="views-field-created">
               
                                          <span class="field-content">2009-04-28</span>
 
                                   </div>
 
 
                                   <div class="views-field-title">
            
                                        <span class="field-content"><a href="/drupal-abc/node/10">子部门A1新闻标题1</a></span>
 
                                   </div>
         
                            </td>
             
                     </tr>
     
              </tbody>
       </table>
   
</div>
 
 
HTML list:
<div class="view-content">
     
       <div class="item-list">
   
              <ul>
         
                     <li class="views-row-1 views-row-odd views-row-first"> 
 
                            <div class="views-field-created">
                
                                   <span class="field-content">2009-04-28</span>
 </div>
 
 
                            <div class="views-field-title">
               
                                   <span class="field-content"><a href="/drupal-abc/node/11">子部门A1新闻标题2</a></span>
 
                            </div>
 
                     </li>
         
                     <li class="views-row-2 views-row-even views-row-last"> 
 
                            <div class="views-field-created">
               
                                   <span class="field-content">2009-04-28</span>
 
                            </div>
 
 
                            <div class="views-field-title">
               
                                   <span class="field-content"><a href="/drupal-abc/node/10">子部门A1新闻标题1</a></span>
 
                            </div>
                    
</li>
     
              </ul>
      
</div>   
</div>
 
 
 
Table:
<div class="view-content">
     
       <table class="views-table">
   
              <thead>
   
                     <tr>
             
                            <th class="views-field views-field-created">
 </th>
                                    
                            <th class="views-field views-field-title">
 </th>
                                             
                     </tr>
 
              </thead>
 
              <tbody>
         
                     <tr class="odd">
 
                            <td class="views-field views-field-created">
2009-04-28</td>
                 
                            <td class="views-field views-field-title">
<a href="/drupal-abc/node/11">子部门A1新闻标题2</a></td>
          
                     </tr>
         
                     <tr class="even">
                 
                            <td class="views-field views-field-created">
2009-04-28</td>
                 
                            <td class="views-field views-field-title">
<a href="/drupal-abc/node/10">子部门A1新闻标题1</a></td>
                    
</tr>
     
              </tbody>
      
</table>
   
</div>
 
 
本视频,一步一步地带领大家实现这一目标,完全按照美工的设计输出views。通过本视频,你能够了解到Views主题化的基本知识,为你实际项目中的主题化,打下坚实的基础,让你少走弯路^_^
 
Drupal付费视频,更精彩。

会员自由标签:

评论