Onepage Website - 第3步: 與Joomla!整合

1. 建立一個工作佈景

加入以下的範例檔案在你的佈景資料夾裡:

  • favicon.ico
  • template_preview.png
  • template_thumbnail.png

然後再新增加一個佈景安裝(設定)用的xml檔案,輸入以下的內容:

/templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site" method="upgrade">
    <!-- 以下是有關這個佈景的資訊 -->
    <name>onepage</name>
    <creationDate>2016-02-16</creationDate>
    <author>your name</author>
    <copyright>Copyright xxxx example.com</copyright>
    <authorEmail>your.name@example.com</authorEmail>
    <authorUrl>http://www.example.com</authorUrl>
    <version>1.0.0</version>
    <description>onepage simple template</description>

    <!-- 以下是要安裝的檔案 -->
    <files>
        <folder>css</folder>
        <folder>images</folder>
        <folder>fonts</folder>
        <folder>js</folder>
        <filename>index.php</filename>
        <filename>template_preview.png</filename>
        <filename>template_thumbnail.png</filename>
        <filename>favicon.ico</filename>
        <filename>templateDetails.xml</filename>
    </files>

    <!-- 以下是要給模組使用的位置-->
    <positions>
        <position>home</position>
        <position>about</position>
        <position>services</position>
        <position>info</position>
        <position>contact</position>
    </positions>

</extension>

把index.html的檔名更改為index.php,然後用壓縮軟體整個打包所有檔案與目錄為一個zip檔案,到Joomla!的管理區中的"擴充套件>管理"中,進行佈景的安裝。

安裝後在Joomla!的目錄下的templates/目錄中,應該會看到有一個名稱為onepage的佈景主題,裡面有所有你剛剛製作的Bootstrap的檔案。

安裝後在Joomla!管理區的"佈景管理"中,選定這個onepage佈景為預設的佈景主題。

檢查點:是不是能正常安裝,以及指定這個佈景為預設的前台佈景主題

2. 調整css與js、圖片的載入位置

加入擴充套件必加的安全保護程式碼

這段程式碼是為了確保所有的擴充套件都只能由Joomla!系統來執行,而不能獨立被執行,這是一個安全的功能。打開index.php檔案,在最上面的地方加入以下的程式碼:

/templates/onepage/index.php

<?php defined('_JEXEC') or die; ?>

調整css與js的載入位置

由於css與js的位置目前已經換地方了,所在位置應該是在/templates/onepage/裡面才對,我們需要對所有在網頁上加入的css與js檔案的位置進調整一下。前面都需要加上<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/,這是Joomla!系統會去抓取目前的網址與目前使用的佈景名稱。

原先的程式碼:

/templates/onepage/index.php

    <!-- Bootstrap的css樣式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 自訂的css樣式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- jQuery函式庫 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap的js函式庫 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 自訂的js程式碼檔案 -->
    <script src="js/custom.js"></script>

調整後的程式碼:

    <!-- Bootstrap的css樣式 -->
    <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自訂的css樣式 -->
    <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet">
    <!-- jQuery函式庫 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap的js函式庫 -->
    <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.min.js"></script>
    <!-- 自訂的js程式碼檔案 -->
    <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/custom.js"></script>

圖檔也要改位置

有兩個圖檔的位置也需要更改,一個是"關於我們"區塊的圖檔:

原先的程式碼:

 <img src="images/joomla_logo.png" alt="" />

更改過的程式碼:

 <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/joomla_logo.png" alt="" />

另一個是"連絡我們"的google地圖的圖檔:

原先的程式碼:

 <img src="images/gmap.jpg" height="498">

更改過的程式碼:

 <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/joomla_logo.png" alt="" />

使用Joomla!系統的jQuery函式庫

我們原先是使用googleapis.com提供的外部的jQuery函式庫,Joomla!系統本身就有提供jQuery函式庫,現在要把它替換掉。改用Joomla!系統的標記,另外也會協助加入網站的一些META資料、標頭、favicon(我的最愛圖示)等等。

首先在最上面的<?php defined('_JEXEC') or die; ?>這一行的下面,加上以下的程式碼:

<?php JHtml::_('jquery.framework'); ?>

再來把以下程式碼這行刪除:

<title>我的公司</title>

這行所在的位置換成這段程式碼,因為這從也會載入在Joomla!管理區中的網站名稱到網站的標題中:

<jdoc:include type="head" />

還有這行也需要刪除,因為上面這段Joomla!佈景專用的標記會幫忙加上,所以不需要了:

<meta charset="UTF-8">

這行是原本的jQuery函式庫載入的程式碼,也可以刪除掉了不需要重覆載入:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

這個時候如果你測試的話,會發現我們的平順捲動和捲動間諜(Scrollspy)的功能沒作用了,這是因為jQuery變成no-conflict(不衝突)模式,需要調整一下我們的custom.js的程式碼,在最外面"包上一層"程式碼:

(function($){

// 原先的程式碼

})(jQuery);

所以要打開我們的custom.js,然後修改成以下這樣:

(function($){

$(document).ready(function (){

/* 啟用 scrollspy 選單 */
$('body').scrollspy({
  target: '#navbar',
  offset: 50
});

/* 平順捲動的動作 */
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 50
        }, 1000);
        return false;
      }
    }
});

});

})(jQuery);

3.模組對應位置

在這個範例裡我們用的是模組,也就是把每個我們之前所設計的區塊的內容,轉成每一塊的模組,這樣可以方便在Joomla!的後台管理區中的模組管理區更改它的內容。Joomla!提供了佈景主題設計時用的模組位置標記,像是下面這段範例程式碼:

<jdoc:include type="modules" name="menu" style="none" />

其中的name代表是這個位置的名稱,位置名稱需要事先在templateDetails.xml檔案中的<positons>區段有記錄才能在後台管理區使用,我們在最前面的templateDetails.xml中就有加入像menu、home、about等等位置。

style代表這個模組的風格樣式,這裡面可以填入多種風格的數值,數值如果是none,代表你填入什麼就出現什麼,完全不會有風格樣式出現。

選單模組

我們將使用Main Menu選單模組,或是你可以新增一個模組,類型為"選單",然後依照以下的設定:

  1. "選擇選單"為使用Top
  2. 右邊的位置使用"menu"這個位置
  3. 在"進階"資訊標籤裡,"選單 CSS 類別字尾"選項,加入navbar-nav navbar-right,注意最前面有一個空白。

圖1

圖2

在佈景主檔案index.php中,把原先的選單項目那一段,改成用Joomla!佈景標記的寫法。

原先的程式碼:

        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">首頁</a></li>
            <li><a href="#about">關於我們</a></li>
            <li><a href="#services">產品服務</a></li>
            <li><a href="#info">最新資訊</a></li>
            <li><a href="#contact">連絡我們</a></li>
        </ul>

清除後改成以下的程式碼:

<jdoc:include type="modules" name="menu" style="none" />

如果你設定正確的話,可以看到目前的Joomla!裡的選單項目將取代原先的選單項目。

這個時候我們可以在Joomla!後台的管理區中,在"選單管理"裡進行選單的管理,把之前我們所設計的每個選單再建立出來。

接下來我們在"選單管理"中建立每個所需的選單項目,每個選單的類型都選擇"系統連結 > 外部網址",然後填入例如"#about"這樣的連結。

真正的首頁

對於Joomla!系統來說,"首頁"代表的是訪客一進到你這個網站中看到的那個頁面,也就是主選單(Main Menu)裡,有打星號的那個連結。並不是我們現在用的Top Menu中的那個"首頁"選單項目。

單頁式網站(OnePage Website)是一種特例,Joomla!系統要求"首頁"一定是要個指向元件的內容的網址才行,所以沒辦法使用原本的"首頁"連結當作我們的首頁。

我們可以在這個真正的首頁連結裡改變設定,讓瀏覽器的標題顯示這個網站的標題,例如"我的公司"。

圖3

打包整個佈景

在調整一下你的/templateDetails.xml,把整個目錄的檔案壓縮打包,就是一個Joomla!的佈景主題。

回家作業

  1. 把網站標誌(logo)區塊改成一個自訂HTML的模組,可以在模組管理區中更換
  2. 把所有區塊都改成自訂HTML的模組,或是使用其他的模組來整合
  3. 加入區塊中的某小塊的動畫
  4. 加入Google地圖區域

附錄

嵌入Google地圖

首先要到Google地圖中,找到你要的地點的經度和緯度。以下是Google地圖的說明:


取得位置座標

透過 Chrome、Firefox 或 Internet Explorer 等瀏覽器在地圖上找到位置後,您可以透過以下步驟取得該位置的座標。

開啟 Google 地圖。
在地圖上的這個位置或區域按一下滑鼠右鍵。
選取 [這是哪裡?]。
畫面下方隨即會顯示資訊卡,其中包含詳盡資訊。
注意:如果您是在精簡模式下使用 Google 地圖,就無法取得位置座標。


要先加入google地圖所需的js函式庫在custom.js之前:

<!-- Google Map的js函式庫 -->
    <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>

再來在custom.js要加入以下的程式碼,請看程式碼裡的註解說明:

// 這裡要改成你的經度和緯度資料
  var latlng = new google.maps.LatLng(22.991057, 120.204117);

  // 這是地圖的顯示與操作選項
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    mapTypeControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true
  };

  // 初始化地圖,顯示於<div id="gmap">中
  var map = new google.maps.Map(document.getElementById('gmap'), options);

  // 加入地點標記
  var marker1 = new google.maps.Marker({
    position: latlng, map: map
  });

  // 加入點按地點標記的事件
  google.maps.event.addListener(marker1, 'click', function() {
    infowindow.open(map, marker1);
  });

  // 加入地點標記被點按時的資訊視窗
  var infowindow = new google.maps.InfoWindow({
    content:  '<div class="info"><strong>這是我們的公司</strong><br><br>公司住址是<br>台南市中西區南門路2號</div>'
  });

最後,記得去除原本的地圖的圖片。

動畫參考連結

最簡單是用WOW.js,直接設定區塊的div一些屬性就可以了:

以下這套是十分常用的css動畫庫:

其他的要配合一些能偵測捲動軸的函式庫與動畫特效庫,都需要寫到Javascript裡,例如:

結論

Joomla!的佈景主題設計充滿了彈性與靈活度,只要是用像Bootstrap這樣的網頁設計框架,所設計出的佈景,都可以很容易的整合到Joomla!系統中。