早先在Joomla! 1.5中曾經有這樣的需求,如何移除Mootools這個JS框架,今天在Joomla! 3中你再也沒有這樣的需求了,因爲Joomla! 3中引入了jQuery框架,但是你可能還有這樣的需求:怎麽移除原生的BootStrap框架呀?
在Joomla! 3中的11大新特色一文中我們介紹過Joomla! 3引入了BootStrap這個當下最流行的前端框架,是的,它确實好用!不過這個框架目前在國内很難實用起來,因爲它徹底不兼容IE6(至少我們網站也放棄IE6),而且IE7、IE8的支持并不太好,比如一些CSS3的東西都無法支持,而且在IE9中也有一些屬性無法兼容,那麽當前中國互聯網的普通用戶群仍然是以這些浏覽器爲主流,注定了我們這些二次開發者需要兼顧!
我們再用Chrome的開發者工具看一下Joomla! 3中多了些什麽,mootools仍然是主要框架,在/media/jui/js中我們能看到jQuery框架,還有一個BootStrap框架,然後就是googleapis的字體框架,按照國内的開發者習慣以及一些政策來說,BootStrap和GoogleAPIS是我們要删掉的東西,BootStrap我們上面講了,GoogleAPIS本來是個好東西,但是相信大家也了解,這個東西在國内會影響效率,搞不好網站半天打不開來。
重點來了,删除之前,我要和大家介紹一下這些東西是怎麽來的,打開Joomla! 3中的默認模闆文件:/templates/protostar/index.php,看到下面代碼:
<jdoc:include type="head" /><!-- 所有的原生框架資源都是這一句 --> <?php // Use of Google Font if ($this->params->get('googleFont')) { ?><!-- 判斷是否要Google字體,如果後台設置爲是,那麽引用下述代碼 --> <link href='http://fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' /> <style type="text/css"> h1,h2,h3,h4,h5,h6,.site-title{ font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif; } </style> <?php } ?>
我在行内給大家注釋了,<jdoc:include type="head" />主要是Joomla! 引用所有原生框架資源的語句,下面的GoogleFont是可以通過後台關閉的,進入後台 - 擴展 - 模闆管理 - 選擇進入“protostar - Default”模闆 - 點擊“選項”選項卡 - 下方“标題采用Google字體”選擇否就可以了!如果是外貿網站,可以保留此項
關鍵我們現在要把BootStrap給它弄掉,通常不建議修改Joomla! 核心代碼,所以方法很簡單,Joomla! 3引入了jQuery框架,我們就用jQuery的方法删掉BootStrap或者其它不想要的東西,方法如下:
打開Joomla! 3中的默認模闆文件:/templates/protostar/index.php,找到代碼“<jdoc:include type="head" />”,在其上方插入以下代碼:
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script> <script> $(function(){$("script[src='/media/jui/js/bootstrap.min.js']").remove();}); </script> <jdoc:include type="head" />
我們在上文第2張圖中知道這些JS文件的位置,由于我們使用的是jQuery語法,所以必須要先引用jQuery框架,按照第2張圖标明的位置先引用,然後找到bootstrap.min.js的位置,使用jQuery的remove方法,删除此js即可。語句放在<jdoc:include type="head" />之前是按照先後加載的原則,如果放在其後面經過測試是無效的。
同樣道理,其它的JS都可以JS的辦法移除頁面之中即可。