1.3 Drupal前端培训

一、设计上，尽量统一图片尺寸的规范，减少image style的数量

二、提供几个测试用的页面和假数据接口

test 页面模板测试地址，顾名思义，这是对page级别模板进行修改，通常指的是模板里包含header和footer部分

test_content 页面内容模板测试地址，顾名思义，这是对内容级别模板进行修改，通常指的是模板里不包含header和footer部分

test_ajax_url ajax调用测试地址，前端可以自己在回调函数里接收并返回假数据进行测试

三、提供上传文件的统一接口

前台会有多处需要上传文件的地方，这个可以准备一个统一的接口提供文件上传的功能，一般前端都会用js来实现上传文件的效果，我们给他准备这样一个接口，接收文件数据保存，返回fid

四、图标尽量使用webfont

减少图标文件数量

五、图标尺寸和文件格式，文件大小注意

注意色彩丰富的图片适合用jpg，颜色较少的适合png，等...

六、本地搭建网站环境进行开发测试

保证后端跟前端彻底分离，得让前端牺牲一下，直接参与到网站开发环境中来。

七、采用面向对象思想组织css样式

如：按钮样式：btn, btn-default, btn-primary, btn-danger, btn-disable

八、提供：pager.php, table的html样例

因为分页和表格，我们通常是用drupal提供的方法输出的，所以前端的html代码要保持一致。

九.php模板语法

1.模板变量

我们为前端准备的模板文件，要说明此模板的可用变量信息，套数据的工作交由前端来干。

/**
 * @file
 * 我的项目经历页面
 *
 * 可用变量:
 * $user_display_name 用户姓名
 * $user_avatar_url 用户头像文件地址
 * ......
 */

2.print

输出变量

<?php print $user_name; ?>

3.if else endif

条件判断输出

<?php if ($front_page): ?>
  <a href="">首页</a>
<?php else: ?>
  <a href="">不是首页</a>
<?php endif; ?>

4.foreach

循环数组输出

<?php foreach ($project_lable as $tag): ?>
  <span><?php print $tag->name; ?></span>
<?php endforeach; ?>

5.drupal_add_css

drupal_add_css(path_to_theme() . '/css/cropper.min.css'); 加载css文件

6.drupal_add_js

drupal_add_js(path_to_theme() . '/js/cropper.js'); 加载js文件
drupal_add_js(array('profile' => array('uid' => $uid)), 'setting'); 定义js变量

7.drupal_add_library

加载工具库

drupal_add_library('common', 'angular');

8.include

包含文件

include path_to_theme() . "/templates/html/footer.php";

9.url

输出网页地址

<?php print url(''); ?> // 首页
<?php print url('project_list'); ?> // 项目列表页
<?php print url('user/' . $user->uid); ?> // 用户主页

10.file_create_url

输出文件地址（path_to_theme() 获取当前主题路径）

<?php print file_create_url(path_to_theme() . '/images/example.jpg'); ?>

11.switch

switch 语句用于基于不同条件执行不同动作

<?php
  $fa_icon_file_type = '';

  switch ($value['report_file_type']) {
    case 'video':
      $fa_icon_file_type = 'fa-file-video-o';
      break;
    case 'document':
      $fa_icon_file_type = 'fa-file-text-o';
      break;
    case 'audio':
      $fa_icon_file_type = 'fa-file-audio-o';
      break;
    case 'image':
      $fa_icon_file_type = 'fa-file-image-o';
      break;
  }
?>

12.current_path

获取当前页面系统路径

<?php print current_path(); ?>

获取当前页面绝对路径

<?php
  global $base_url; // 域名前缀
  
  print $base_url . '/' . current_path();
?>

13.dpm

给前端人员一个本地开发环境的开发者账号，可以使用devel模块的dpm来打印模板可用变量。

本书共8小节。


评论 (0)