你在这里

第4节 模仿首页

一、定义首页

1.打开公共模块common.module,编写如下代码

  static2theme-4-01.jpg

title为页面的标题,<title></title>会用到。

page callback为页面回调函数,也就是页面主体(教程二里提到的page.tpl.php里的变量:$page[‘content’])的输出从这个函数里来。

access callback为TRUE表示所有用户包括匿名用户都能访问该页面

file表示把该文件include进来,也就是我们后面定义回调函数common_home_page的地方

2.在common目录下创建common.pages.inc并打开它:编写以下代码:

static2theme-4-02.jpg

回调函数通过return把页面的主体内容输出

theme('common_home')跟我们之前的教程theme('header')是一个道理,就是调用相应的模板来输出内容,由于我们还没定义机读名为common_home的模板,现在我们打开common.module,编写如下代码:

static2theme-4-03.jpg

template我们之前的教程解释过了,模板名称

file表示把该文件include进来,以后我们会用来放模板的预注册函数,跟hook_menu一个道理

path表示模版的具体位置,在模块里定义的hook_theme,默认是在模块根目录下,我们为了方便管理,所以创建一个子目录来专门存放模板文件,包括theme.inc。

在common目录下创建theme目录,在theme目录下创建theme.inc和common-home.tpl.php并打开它,把首页主体(刨去header和footer部分)的html、css和js等复制进去,加上主题根地址,效果如下:

static2theme-4-04.jpg

3.去网站信息配置页面admin/config/system/site-information 设置首页路径为home,也就是我们之前通过hook_menu定义的路径:

static2theme-4-05.jpg

清空缓存,刷新首页,这时候我们会看到幻灯片的效果了,但是幻灯片里的内容还是静态的,请看下一节的动态处理

二、幻灯片内容动态化

1.定义内容类型:

查看幻灯片的js代码,我们发现数据结构是这样的

{
  image : 'http://www.arkhefield.com.au/wp/wp-ce-Slider-Arkmark4.gif',
  title : 'Architecture + Interior Design',
  thumb :'http://www.arkhefield.com.au/wp/wme-Slider-Arkmark-Portal2.jpg',
  url : 'http://www.arkhefield.com.au/practice/'
}

所以我们定义的内容类型需要三个字段分别是tltle、image、url,其中thumb通过drupal的image style缩放image来处理

创建内容类型,名称为Slideshow,,机读名为slideshow,机读名对大小写敏感,以后我们读取数据时候的设置的过滤条件会用到它

删除body字段;

创建image字段,类型为image,机读名为field_image;

创建URL字段,类型为text,机读名为field_url

static2theme-4-06.jpg

2.创建测试数据,这里我为了省时间只加了两个node

3.动态生成json数据,提供给幻灯片的js

打开commn目录下的theme目录下的theme.inc,编写以下代码:

static2theme-4-07.jpg
template_preprocess_是规则以内的,common_home为模版的机读名,这样就可以为common-home.tpl.php注册变量了。

蓝色部分是通过drupal数据库api 读取数据

绿色部分对读取到的原始数据进行处理,只要有四个值:title、image、url和thumb

黄色部分把数据转换成json格式

4.模板里使用变量替换掉静态数据

static2theme-4-08.jpg

后台清空缓存,刷新首页,大功告成~

Taxonomy upgrade extras: 

猜你喜欢