Kwoon 說明文件

頁首高度 / 捲動偏移

取決於您的標誌高度，頁首高度可能會改變，這會影響捲動偏移。您需要編輯兩者 style.css 和 style/js/scripts.js 檔案。請測量您的頁首高度，如果與原始值不同，請替換醒目區域的值。

style.css

.offset {
	padding-top: 100px; /* height of header1, header2, header5 and header6 */
}
.offset2 {
	padding-top: 145px; /* height of header3 and header7 */
}
.offset3 {
	padding-top: 159px; /* height of header4 and header8 */
}

style/js/scripts.js

/*-----------------------------------------------------------------------------------*/
/*	SCROLL NAVIGATION HIGHLIGHT
/*-----------------------------------------------------------------------------------*/
$(document).ready(function() {
	headerWrapper		= parseInt($('.navbar').height(), 10);
    
    var header_height = $('.navbar').height();
	var shrinked_header_height = 68; /* sticky header height */
  
...  
  

頁首樣式

提供 8 種頁首選項

選單

基本導覽/選單結構：

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
	 <li class="current"><a href="index.html"><strong>單一與目前選單項目</strong></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle js-activated">Menu Item with Dropdown</a>
            <ul class="dropdown-menu">
              <li class="dropdown-submenu"> <a href="#">Submenu Levels</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Second Level</a></li>
                  <li class="dropdown-submenu"> <a href="#">More</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Third Level</a></li>
                      <li><a href="#">Third Level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second Level</a></li>
                  <li><a href="#">Second Level</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dropdown yamm-fullwidth"><a href="#" class="dropdown-toggle js-activated">Mega Menu <span class="caret"></span></a>
            <ul class="dropdown-menu yamm-dropdown-menu">
              <li>
                <div class="yamm-content">
                  Mega Menu Content
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- /.navbar-nav --> 
      </div>
      <!-- /.navbar-collapse --> 

Retina 圖像

為了在配備 Retina 顯示器的裝置上顯示高解析度圖像，您需要圖像的兩個版本。一個是正常尺寸，另一個是其兩倍尺寸。高解析度圖像的名稱應與 @2x 結尾完全相同。您還需要將類別新增至 retina 圖像標籤。

用法：

<img src="style/images/logo.webp" alt="" data-src="style/images/logo.webp" data-ret="style/images/[email protected]" class="retina" />

社群圖示 (完整列表)

可在頁尾或任何其他地方使用的所有已樣式化社群圖示的列表。

<ul class="social">
	<li><a href="#"><i class="icon-s-rss"></i></a></li>
	<li><a href="#"><i class="icon-s-twitter"></i></a></li>
	<li><a href="#"><i class="icon-s-facebook"></i></a></li>
	<li><a href="#"><i class="icon-s-dribbble"></i></a></li>
	<li><a href="#"><i class="icon-s-pinterest"></i></a></li>
	<li><a href="#"><i class="icon-s-flickr"></i></a></li>
	<li><a href="#"><i class="icon-s-vimeo"></i></a></li>
	<li><a href="#"><i class="icon-s-youtube"></i></a></li>
	<li><a href="#"><i class="icon-s-skype"></i></a></li>
	<li><a href="#"><i class="icon-s-tumblr"></i></a></li>
	<li><a href="#"><i class="icon-s-linkedin"></i></a></li>
	<li><a href="#"><i class="icon-s-behance"></i></a></li>
	<li><a href="#"><i class="icon-s-github"></i></a></li>
	<li><a href="#"><i class="icon-s-delicious"></i></a></li>
	<li><a href="#"><i class="icon-s-500px"></i></a></li>
	<li><a href="#"><i class="icon-s-grooveshark"></i></a></li>
	<li><a href="#"><i class="icon-s-forrst"></i></a></li>
	<li><a href="#"><i class="icon-s-digg"></i></a></li>
	<li><a href="#"><i class="icon-s-blogger"></i></a></li>
	<li><a href="#"><i class="icon-s-klout"></i></a></li>
	<li><a href="#"><i class="icon-s-dropbox"></i></a></li>
	<li><a href="#"><i class="icon-s-songkick"></i></a></li>
	<li><a href="#"><i class="icon-s-posterous"></i></a></li>
	<li><a href="#"><i class="icon-s-appnet"></i></a></li>
	<li><a href="#"><i class="icon-s-gplus"></i></a></li>
	<li><a href="#"><i class="icon-s-stumbleupon"></i></a></li>
	<li><a href="#"><i class="icon-s-lastfm"></i></a></li>
	<li><a href="#"><i class="icon-s-spotify"></i></a></li>
	<li><a href="#"><i class="icon-s-instagram"></i></a></li>
	<li><a href="#"><i class="icon-s-evernote"></i></a></li>
	<li><a href="#"><i class="icon-s-paypal"></i></a></li>
	<li><a href="#"><i class="icon-s-picasa"></i></a></li>
	<li><a href="#"><i class="icon-s-soundcloud"></i></a></li>
</ul>

色彩方案

提供 14 種色彩選項： aqua, blue, brown, gray, green, lime, mint, navy, orange, pink, purple, red, rose 和 yellow 預設為藍色。要更改預設色彩方案，您必須編輯每頁 HTML 中的色彩 CSS 檔案名稱。

<link href="style/css/color/藍色.css" rel="stylesheet">

視差效果

具有視差效果的區段的基本結構。

HTML

<div class="parallax parallax1">
  <div class="container inner">
    Parallax Content
  </div>
</div>

每個視差區段都應具有特定的類別/ID，以便您在 style.css.

style.css

中應用不同的背景圖像。 {
	background-image: url(style/images/art/parallax1.webp);
}

聯絡表單

Update contact/vanilla-form.php 並透過編輯 TO_EMAIL 常數來指定收件者的電子郵件地址。所有表單查詢/訊息將發送至這些電子郵件地址。

// If is not empty it sets a header From in e-mail message (sets sender e-mail).
    // Note: some hosting servers can block sending e-mails with custom From field in header.
    //       If so, leave this field as empty.
    define('FROM_EMAIL', '');

    // Recipient's e-mail. To this e-mail messages will be sent.
    // e.g.: [email protected]
    // multiple recipients e.g.: [email protected], [email protected]
    define('TO_EMAIL', '[email protected]');

<label>
	<input type="checkbox" name="example" value="true" required="required">
	<span><!-- fake checkbox --></span>
	<span class="wrapped-label">Checkbox Example</span>
</label>

更改字體

如果您想使用不同的字體，請複製 Google Fonts 頁面上的字體連結，並將其貼在 HTML 檔案的關閉 head 標籤之前。

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

然後您需要將字體名稱新增至您的 CSS 樣式。

body {
    font-family: 'Raleway', sans-serif;
}

電子報

該模板與 Mailchimp 電子報相容。

您可以透過 Lists - Create a List - Signup Forms - Embedded Forms 在 Mailchimp 網站上建立自己的自訂電子報表單。將表單動作替換為您生成的電子報代碼中的動作，足以個人化模板中現有的表單。

更改字體

如果您想使用不同的 Google 字體，請複製 Google Fonts 頁面上的字體連結，並將其貼在 HTML 檔案的關閉 head 標籤之前。

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

围绕开云体育官网，kaiyunyufeng持续打磨更优质的服务。

body {
    font-family: 'Raleway', sans-serif;
}

Google 地圖

Google 地圖是使用 Google Map Builder.

如果您喜歡模板中地圖的外觀，您所要做的就是更改右側醒目顯示的值 (緯度、緯度和地址)

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1xdEVYy8IZdBKJGQp_QpDWaNQT7ZHGhY&sensor=false&extension=.js"></script> 
    <script> google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.211215, 3.226287),
        zoom: 15,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: false,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        },
        scaleControl: true,
        scrollwheel: false,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [{stylers:[{saturation:-100},{gamma:1}]},{elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{visibility:"simplified"}]},{featureType:"water",stylers:[{visibility:"on"},{saturation:50},{gamma:0},{hue:"#50a5d1"}]},{featureType:"administrative.neighborhood",elementType:"labels.text.fill",stylers:[{color:"#333333"}]},{featureType:"road.local",elementType:"labels.text",stylers:[{weight:0.5},{color:"#333333"}]},{featureType:"transit.station",elementType:"labels.icon",stylers:[{gamma:1},{saturation:50}]}]
		}

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [
        ['Boudewijn Ostenstraat 2', 51.211215, 3.226287]
    ];
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: 'style/images/map-pin.png',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script> 

Owl Carousel

輪播和作品集滑桿均使用 Owl Carousel 創建。您可以在 style/js/scripts.js 下的 "OWL CAROUSEL" 中更改輪播設定。詳細資訊和選項可在 http://www.owlcarousel.owlgraphic.com

您可以在輪播中顯示您最新的 Instagram、Flickr 和 Dribbble 作品。範例可在 social.html

Instagram

由於 Instagram API 的近期變更，設定 Instagram 動態消息的過程變得有些棘手，但本指南將協助您完成每一個步驟。基本上，您需要建立一個 Client (讓 Instagram 知道您是誰)，然後是一個存取權杖 (讓您的網站有權顯示圖片)

步驟 1 - 建立 Client

首先，您需要造訪 ，您將會看到以下畫面。

點擊「註冊您的應用程式」按鈕繼續下一步。在下一個畫面 (如下圖所示) 點擊「註冊新 Client」

接下來，您需要填寫提供的表單 - 大部分內容不言而喻，關鍵是要記住要在 有效的重新導向 URL 欄位中輸入以下內容

http://www.tommusrhodus.com/instagram/

好的，第一步完成了，您現在擁有一個 Client，更重要的是，您現在擁有下一步所需的 Client ID。將此 Client ID 複製到記事本，您很快就會再次用到它。

步驟 2 - 編輯 Client

現在您有了 Client，您需要允許它授權使用您的圖片。為此，請點擊「編輯」連結開始編輯您的 Client 設定。

進入設定後，前往「安全性」標籤頁，然後 取消勾選 和 停用隱含 OAuth 選項 點擊儲存。

步驟 3 - 整合

還記得之前的 Client ID 嗎？您在這裡會用到它。

要建立所需的 Token (輸入到佈景主題選項中)，您需要將此 URL 複製到您想要的任何文字/程式碼編輯器中

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID-HERE&redirect_uri=http://www.tommusrhodus.com/instagram/&response_type=token&scope=public_content

將 CLIENT-ID-HERE 文字替換為您的實際 Client ID，然後將整個 URL (包含您的 ID) 複製到您的瀏覽器中。

接下來，系統會要求您授權存取，只需點擊「授權」按鈕即可進入最後一步。

完成後，您將看到此畫面。

將提供的 Token 複製為 "accessToken" 值，在 style/js/scripts.js 下的 "INSTAGRAM" 中。

要顯示您自己的 Instagram 照片，您還需要您的 "userId"。一旦您有了存取權杖，請造訪以下 URL (將 ACCESS-TOKEN 替換為您自己的數字權杖)，結果畫面上的最後一個參數就是您的數字使用者 ID：  

然後將您的 數字使用者 ID 複製為 "userId" 值，在  style/js/scripts.js 下的 "INSTAGRAM" 中。

Flickr

要擷取您自己的 Flickr 圖片，您需要編輯 "id" 值，在 style/js/scripts.js 下的 "FLICKR" 中輸入。

您可以在這裡取得您的 Flickr ID here.

Dribbble

要擷取您自己的 Dribbble 作品，您需要編輯 "username" 值，在 style/js/scripts.js 下的 "DRIBBBLE" 中輸入。

作品集

提供 7 種不同的版面配置供您選擇。

作品集文章版面配置

提供 12 種不同的版面配置供您選擇。當然，您可以混合搭配/修改這些版面配置並創建您自己的版面配置。