ionize教程：前台导航栏用图片，后台导航栏树还是用文字

xiehao

ionize确实蛮方便的，但这个导航栏使用图片替换文字的问题，还是让我折腾了好久。

不晓得ionize的创始人是怎么 想的，菜单对应的栏目叫page，而且预留了很多的字段，这个page只是个容器，如果要显示东西的话，需要在里面加上article，呵呵，想想吧，说不明白。

创始人给page留了很多的字段，Title，Subtitle，URL，Navigation title，Window title。为了实现我想要的功能，需要折腾其中的两个字段，Title和Navigation title。

一. 前台导航栏图片

使用Navigation title字段。修改helper文件。

首先要把application\helpers\navigation_helper.php文件复制一份放到自己的themes下，如themes\xxxxx\helpers下。

修改前：

PHP复制代码

$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];
$tree .= '<li'.$class.'><a'.$class.' href="' . $page['absolute_url'] . '">'.$title. '</a>';
 
 

复制代码

修改为：

PHP复制代码

 
$title = $page['nav_title'];
$tree .= '<li'.$class.'><a'.$class.' href="' . $page['absolute_url'] . '"><img src="http://127.0.0.1/ionize/themes/xxxxx/assets/images/'.$page['nav_title']. '.png" /></a>';
 
 

复制代码

只是使了点小伎俩，把前台要显示的$title固定为nav_title，而且添加了图片标签。嘿嘿...够坏的...至于图片放在哪里，自己决定吧。如下图，在相应的字段天上图片的名字就可以了。上面的代码写的可是png哦，可以随便改嘛。

二. 后台导航树

使用Title字段。

修改两个js文件。导航树是js控制的，呜呜，我很笨，找了好久才找到...

文件在themes\admin\javascript\ionize目录下，需要修改的是：ionize_tree_xhr.js 和 ionize_content.js（其实这个不必改）

ionize_tree_xhr.js 的第183行，修改为：

JS复制代码

var title = element.title;

复制代码

ionize_content.js的1113行，修改为：

JS复制代码

var title = args.title;

复制代码

具体原因，就是ionize默认是判断式赋值给title的，我们把判断删除，保留自己需要的一个值就可以了，哦也...搞定...