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 Default logo (e.g.: 100x100px)

社群圖示

<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 種顏色選項：

預設為藍色。要更改預設顏色配置，您必須編輯每頁 HTML 中的顏色 CSS 檔案名稱。 aqua, blue, brown, gray, green, lime, mint, navy, orange, pink, purple, red, rose 和 yellow blue

<link href="style/css/color/視差效果.css" rel="stylesheet">

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

HTML

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

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

中應用不同的背景圖像。 style.css.

style.css

parallax1 {
	background-image: url(style/images/art/parallax1.webp);
}

聯絡表單

更新 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'>

多多28大舞台围绕聚合式服务，一站式满足用户多样化需求。不断创新，回应用户的真实需求。

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

Dribbble

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

要擷取您自己的 Flickr 圖片，您需要編輯 "id" 值，在

中的 "FLICKR" 下。 style/js/scripts.js 您可以在

這裡 取得您的 Flickr ID。.

Instagram

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

步驟 1 - 建立 Client

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

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

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

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

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

步驟 2 - 編輯 Client

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

進入設定後，前往「安全性」標籤頁，然後 Disable Implicit OAuth option 並點擊儲存。 步驟 3 - 整合 Uncheck

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

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

https

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

文字替換為您的實際 Client ID，然後將整個 URL（包含您的 ID）複製到您的瀏覽器中。 接下來，系統會要求您授權存取，只需點擊「授權」按鈕即可繼續最後一步。 CLIENT-ID-HERE

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

複製提供的 Token 作為 "accessToken" 值，在

中的 "INSTAGRAM" 下。 style/js/scripts.js 要顯示您自己的 Instagram 拍攝內容，您還需要您的 "userId"。一旦您有了存取權杖，請造訪以下 URL（將 ACCESS-TOKEN 替換為您自己的數字權杖），結果畫面上的最後一個參數就是您的數字使用者 ID：

然後將您的  

數字使用者 ID 複製為 "userId" 值，在 Flickr  style/js/scripts.js 要顯示您自己的 Instagram 拍攝內容，您還需要您的 "userId"。一旦您有了存取權杖，請造訪以下 URL（將 ACCESS-TOKEN 替換為您自己的數字權杖），結果畫面上的最後一個參數就是您的數字使用者 ID：

作品集

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

作品集文章版面配置

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