日期:2014-05-16  浏览次数:20315 次

Joomla! 3 删除原生JS框架

早先在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的辦法移除頁面之中即可。