zoukankan      html  css  js  c++  java
  • EmWebAdmin 导航栏分析

    • templates/gentelella/base.tpl

           <!DOCTYPE html>
           <html lang="en">
             <!-- Smarty lib -->
               <!-- 这里就调用了 templates/smarty/config/tplconf.json   -->
             <?php require('tpl/SmartySetup.php'); ?> 
             <!-- /Smarty lib -->
           
             <!-- head -->
             <head>
               <!-- 这里就只有一句     <title>{$tplconf["appName"]}</title>  -->
             <?php $smarty->display('tpl/head.tpl'); ?>
             </head>
             <!-- /head -->
          
             <body class="nav-md">
               <div class="container body">
                 <div class="main_container">
           
                   <!-- left content -->
                    <!-- 调用导航栏模板 -->
                   <?php $smarty->display('tpl/nav.tpl'); ?>
                   <!-- /left content -->
          
                   <!-- right content -->
                    // 这是是中间的功能显示,index, network, about, 等等。
                   <?php $smarty->display('tpl/********'); ?>
                   <!-- /right content -->
          
                   <!-- footer content -->
                   <?php $smarty->display('tpl/foot.tpl'); ?>
                   <!-- /footer content -->
           
                 </div>
               </div>
           
             <!-- JavaScript -->
             <?php $smarty->display('tpl/tail.tpl'); ?>
             <!-- /JavaScript -->
              
             </body>
           </html>
    
    • EmWebAdmin 的导航栏的配置文件是 templates/smarty/config/tplconf.json 文件

        // 这个文件的解析是在 templates/smarty/preprocess/SmartySetup.php 里面被调用然后解析
              // NOTE: Smarty has a capital 'S'
              require_once('smarty/Smarty.class.php');
              $smarty = new Smarty();
              // $smarty->debugging = true;
              
              // template configures
              $tplconf = json_decode(file_get_contents("config/tplconf.json"), true);
              $smarty->assign('tplconf', $tplconf);
          
              // system configures
              $sysconf = json_decode(file_get_contents("config/sysconf.json"), true);
              $smarty->assign('sysconf', $sysconf);
          
              // custom configures
              $cusconf = json_decode(file_get_contents("config/cusconf.json"), true);
              $smarty->assign('cusconf', $cusconf);
          
              include "tpl/tplFuncs.php";
    
    • 真正解析 的地方在 templates/smarty/preprocess/tplFuncs.php 里面

          $level = 1;             
          $active = "Home";                                           
          $currentPage = end(explode('/', $_SERVER['PHP_SELF']));        
                 // end 返回的值里面数组的最后一个值
                 // explode 是以前面一个字符串作为分隔符将后面的字符串进行分割   
                 //  PHP_SELF 是当前页面的链接
                 // 所以这个是返回当前页面的 php 文件       
          /**                                                                             
           * @jsonData: nav data as JSON data format                                      
           * @level: indent level                                                         
           * @active: Classify for php file                                               
           * @currentPage: current php file                                               
           */                                                                             
          Function recursiveNav($jsonData, $level, $active, $currentPage)                 
          {  // ret 变量存储了所有的 导航栏的文字的显示以及链接       
              $ret = "";    // 循环 nav 索引内的所有对应的子索引 
              foreach( $jsonData as $key => $value ) {        
                  if( isset( $value['subitem'] ) ) {     
                      // 判断 子索引对应的内容中有没有 subitem 
                      // with the drop-down options  
                      // 缩进的控制                                     
                      $ret .= fillBlank($level);                                          
                      $ret .=  '<li';                                                     
                      if ($key == $active) $ret .= ' class="active"';                     
                      $ret .= '><a><i class="fa fa-'.$value["icon"].'"></i> '.$key.' <span class="fa fa-chevron-down"></span></a    >'."
    ";
                                                                                          
                      // code indent  增加缩进                                                     
                      $ret .= fillBlank($level+1);                                        
                      $ret .= '<ul class="nav child_menu">'."
    ";                         
                                                                                          
                      // recursive callback  子目录  
                      $ret .= recursiveNav($value['subitem'], $level+2, $active, $currentPage);
                                 // 缩进    
                      $ret .= fillBlank($level+1);                                        
                      $ret .= '</ul>'."
    ";                                               
                                  // 缩进   
                      $ret .= fillBlank($level);                                          
                      $ret .= '</li>'."
    ";                                               
                                                                                          
                  } else {                                                                
                      // 如果不存在,调用 fillBlank 函数,其实这个函数就是根据你的 level 决定ret的缩进
                      $ret .= fillBlank($level);                                          
                      $ret .= '<li';  
                        // 如果对应有 link 索引, 并且 link 索引对应的值存在 那么添加链接                                                     
                      if ($currentPage == $value['link']) 
                            $ret .= ' class="current-page"';
                      $ret .= '><a href="'.$value['link'].'"><i class="fa fa-'.$value['icon'].'"></i>'.$key.'</a></li>'."
    ";
                                                                                          
                  }                                                                       
              }                                                                           
                                                                                          
              return $ret;                                                                
          }       
          // 他把对应的 nav 索引下的数据作为第一个参数,级别为1, active 为home,  当前的页面的php文件
          $smarty->assign("recursiveNav", recursiveNav($tplconf['nav'], $level, $active, $currentPage));
    
    • 最终这个模板的实现是在 templates/gentelella/nav.tpl 内。

         <div class="col-md-3 left_col">                                                 
           <div class="left_col scroll-view">                                            
             <div class="navbar nav_title" style="border: 0;" align="center">            
               <a href="index.php"><img src="images/webadmin.png" class="img-rounded"></a>
             </div>                                                                      
                                                                                         
             <div class="clearfix"></div>                                                
             <br />                                                                      
                                                                                         
             <!-- sidebar menu -->                                                       
             <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">       
               <div class="menu_section">                                                
                 <ul class="nav side-menu">                                              
                   {$recursiveNav}  <!-- 模板变量  -->  
                 </ul>                                                                   
               </div>                                                                    
             </div>                                                                      
             <!-- /sidebar menu -->                                                      
           </div>                                                                        
         </div>     
    
  • 相关阅读:
    Spark学习之路 九、SparkCore的调优之数据倾斜调优
    Spark学习之路 八、SparkCore的调优之开发调优
    Spark Core、Spark Sql、Spark Streaming 联系与区别
    Spark学习之路 七、Spark 运行流程
    Spark学习之路 六、Spark Transformation和Action
    Spark学习之路 五、Spark伪分布式安装
    一起来学习Shell脚本
    简单整理React的Context API
    阅读别人项目源码时的随手记(乱七八糟待归类整理)
    React.Component 与 React.PureComponent(React之性能优化)
  • 原文地址:https://www.cnblogs.com/chenfulin5/p/6860424.html
Copyright © 2011-2022 走看看