如何在CI中引入外部CSS和JS

html-css025

如何在CI中引入外部CSS和JS,第1张

其实不管是在用CI还是ZF都有同样一个问题,就是路径的问题。前期,我在用ZF做CMS时,我在.htaccess文件中设置了如遇到js,css,img等资源文件都不重定向。但今天在用CI时,却忘记了,搞了很久都没有出来,上了CI的中国官方网,终于在他们帮助下把问题觖决了,在这里把它贴出来,供大家分享。

(另注:我这里是隐藏了url中的index.php文件的,与不隐藏有所不同,但最终都是采用绝对URL)

首先,我在.htaccess文件里设置(作用是隐藏index.php),如下:

RewriteEngine on

RewriteCond $1 !^(index/.php|images|js|img|css|robots/.txt)#在这里写要排除的资源等

RewriteRule ^(.*)$ index.php/$1 [L]

我把JS,CSS,IMG等资源文件夹与SYSTEM文件夹放在同一级下,然后在JS文件夹中建立ajax.js文件,我在VIEW层中的文件为index.html。这样我要引入JS时,如下:

<script type="text/javascript" src="url/js/ajax.js'?>"></script>:注这里url是你的网站绝对URL(绝对 URL,就是 http://domain/js/ajax.js 这样叫做绝对 URL)

到这里就行了。当然为了可维护性,你也可以用CI自带的BASE_URL来设置,如下:

进入 application/config/config.php文件,在config.php文件中设置base_url:

$config['base_url'] = //这里是你的网站根目录

设置好后 再controller某处

$this->load->helper('url'),

然后再在VIEW层中具体页面中引入即可:

<script type="text/javascript" src='<?=base_url().'js/Ajax.js'?>'></script>

好了,CI中引入外部的JS与CSS就这么简单.

注别的说明:“ RewriteCond $1 !^(index/.php|images|js|img|css|robots/.txt) ”这里代码的意思是:任意你想访问的资源都不被重定向时,都可写在这里。有时,网站没有加载CSS,JS(它的路径都是正确的)时,都是被重定向了,这要注意.

谢谢采纳

以CI框架使用2.0版本为例:

我们下载解压后就看到如下文件目录:

这里要注意一下:如果你使用版本较低的话,目录结构就不这样的了,不过不影响我们。

1  我们将application、system、index.php 上传到网站根目录下。

2  我们再在根目录下新建一个目录“resources” 来专门存放我们CSS、JS、image等资源(这里资源目录的结构可自行定义,我这里为了做演示,只是简单处理)。

这里css、JS等是不能放到application、system目录的(有网友就这么做)。 因为出于安全原因(或者MVC模式) 这里目录是只不能直接通过URL形式访问到的,这些目录里有一个..htaccess 文件,里包含一句代码:“Deny from all”。就是此命令阻止用户直接访问这些目录。

3  我们在 resources 目录里添加一个文件:ajax.js。 这样我们在VIEW层中的文件为index.html引入JS时,如下方式:

<script type="text/javascript" src="url/ajax.js'?>"></script>

注这里url是你的网站绝对URL。

另外:

1 使用 BASE_URL() 函数

当然为了可维护性,你也可以用CI自带的BASE_URL来设置,如下:

1)  首先进入 application/config/config.php文件,在config.php文件中设置base_url:

$config['base_url'] =http://www.exiplode/ //这里是你的网站根目录

2) 导入 BASE_URL()函数

 base_url()函数是helper 函数,需要导入才能使用。

可以在控制器里如下导入:

 $this->load->helper('url')

或者在config/autoload.php 文件里自动导入

/*

| -------------------------------------------------------------------

|  Auto-load Helper Files

| -------------------------------------------------------------------

| Prototype:

|

|    $autoload['helper'] = array('url', 'file')

*/

$autoload['helper'] = array('url')

3) 然后进入VIEW层中具体页面中引入即可:

<script type="text/javascript" src='<?=base_url().'resources/Ajax.js'?>'></script>

2 隐藏了url中的index.php文件、使用URL重写规则时。当然我们有时为了URL SEO方面考虑,会将index.php 隐藏起来,即让URL重写。但要注意像CSS、JS等这些资源是要排除掉的。

 我们在网站根目录里放入.htaccess文件,内容为:

       RewriteEngine on    

       RewriteCond $1 !^(index\.php|resources|robots\.txt)    #在这里写要排除的资源等

       RewriteRule ^(.*)$ index.php/$1 [L]

也就是说:当用户访问resources目录、robots.txt文件时都不重定向到index.php, 其它一律重定向到index.php。

3  还是无效果?浏览器访问一下。

  如果以上都OK后,还没有效果的话。就要看看JS、CSS是否引入进来了。你可以直接访问一下JS URL看是否有内容。

CI是属于单入口的框架,所有的请求基本都在index.php这个文件完成,使用相对路径会有问题的。在ci中最好使用site_url()函数处理链接,或者使用

base_url() . + '#url#'

具体可以参看CI文档