ionize新手教程，边学边写

xiehao

ionize还是蛮好用的，在这里开个帖子把自己在学习中遇到的一些问题及解决方法列出来吧，依然是边学边写，免得日后忘记...哈哈哈，过去这么久了，自己还是初级选手，可悲...
1楼：前台导航栏用图片，后台左边的导航栏树还是用文字
2楼：使用extend fields给栏目加上banner特色图
3楼：使用jwplayer播放视频
4楼：
5楼：

第一个问题，昨晚遇到的。
想把导航栏的链接文字替换成图片，于是就开始折腾了

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

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

一. 前台导航栏图片，后台左侧导航树还是用文字

1. 使用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哦，可以随便改嘛。

2. 后台导航树使用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的，我们把判断删除，保留自己需要的一个值就可以了，哦也...搞定...

xiehao

这个问题嘛，跟一楼是一起遇到的，不过解决方法不同，这里用extend fields（扩展字段）来解决比较方便吧。目的：给不同的栏目加上特色banner。
思路：ionize的栏目就是page,要给栏目加banner，只要给page加一个字段，填上图片的名字就可以了，清晰简洁...

1. 登录ionize的后台，打开content->extend fields，初始时这里是空空一片，我们点击右上方的“New Extend Field”按钮，给它新增一个字段。如下图：


其中的Name是比较重要的，这里要记住喽，我们在view里面要用到。

2.点击左侧导航树中的一个栏目名，右侧会看到，上面多了一个字段，如图：

给写上一个图片的名称，当然，这张图片要存在，就放在themes\xxxxxx\assets\images里面吧。

3.接下来就是给view加上一行关键代码了，这个代码是扩展字段的Tag。
打开themes\xxxxxx\views\page.php，对，就是page.php。找个合适的位置，添加下面的代码

PHP复制代码

<img src="<ion:theme_url />assets/images/<ion:field name="pic-banner" />" />

复制代码

看到了吧？里面用了两个<ion>tag，第一个是主题路径，第二个就是扩展字段啦。
Extend fields要在页面上显示，就得需要这个标签<ion:field name="******" />
具体用法见：http://doc.ionizecms.com/en/special-tags

OK，这个功能就又实现了。

xiehao

其实希望能在文章中直接放视频的，但还没找到解决办法，于是就学习了jtzmsqzr的方法--使用jwplayer。

这个问题，可以查看原帖http://codeigniter.org.cn/forums/thread-12053-1-1.html，感谢jtzmsqzr的教程，下面只是修改了一点代码细节。

1. 首先下载这个东东，jwplayer：

2. 下载完成后解压，并重命名player.swf为jwplayer.swf，然后相关的几个文件都放到themes/xxxxxx/flash/mediaplayer中； 其中xxxxxx为你自己的模板目录。

3.在首页的view加入一段代码，嘿嘿，首页用这个页面/themes/xxxxxx/views/page_home.php

PHP复制代码

 
<ion:medias type="video">
<EMBED src="<ion:theme_url />flash/mediaplayer/jwplayer.swf" width="560" height="400" type="application/x-shockwave-flash" bgcolor="#2A2F34" allowscriptaccess="always" allowfullscreen="true" flashvars="file=<ion:base_url /><ion:path /> & link=<ion:base_url /><ion:path />"></EMBED>
</ion:medias>
 

复制代码

3. 别忘了在头部加载一下它的js文件。

HTML复制代码

<script type="text/javascript" src="<ion:theme_url />flash/mediaplayer/jwplayer.js"></script>

复制代码

4.在管理后台，给相应的文章添加一段视频文件，可以用jwplayer里面的demo视频为例。

5.最后打开首页去看看吧，我实现了，有图为证。

xiehao

占楼待编辑

xiehao

占楼待编辑

xiehao

占楼待编辑，问题多多，是个好学生

xiehao

占楼待编辑，问题多多，是个好学生