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