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

.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'>

在匠心工艺，铸就非凡品质方面，超凡国际提供贴心周到的支持。

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

Google 地圖

Google 地圖是使用 Google 地圖生成器.

如果您喜歡模板中地圖的外觀，只需更改右側高亮的值（緯度、經度和地址）即可。

<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

由於 Instagram API 最近的變更，設置 Instagram 動態的過程變得稍微複雜，但本指南將幫助您逐步完成。基本上，您需要創建一個客戶端（以便 Instagram 知道您是誰），然後獲取一個訪問令牌（用於授權您的網站顯示圖片）。

步驟 1 - 創建客戶端

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

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

接下來，您需要填寫提供的表單——大部分內容不言自明，關鍵是要在 有效的重定向 URL 字段中輸入以下內容

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

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

步驟 2 - 編輯客戶端

現在您有了一個客戶端，您需要允許它授權使用您的圖片。為此，點擊「編輯」鏈接開始編輯您的客戶端設置。

進入設置後，前往「安全」選項卡並 取消勾選 勾選 停用隱式 OAuth 選項 並點擊儲存。

第三步 - 整合所有設定

還記得之前的客戶端 ID 嗎？您在這裡會需要它。

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

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 文字替換為您的實際客戶端 ID，然後將完整網址（包含您自己的 ID）複製到瀏覽器中。

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

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

將提供的 Token 複製為「accessToken」的值，位於 style/js/scripts.js 下的「INSTAGRAM」中。

要顯示您自己的 Instagram 照片，您還需要「userId」。取得存取權杖後，請造訪以下網址（將 ACCESS-TOKEN 替換為您自己的數值 Token），結果畫面上的最後一個參數就是您的數值使用者 ID：  

然後將您的 數值使用者 ID 複製為「userId」的值，位於  style/js/scripts.js 下的「INSTAGRAM」中。

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

Dribbble

要擷取您自己的 Dribbble 內容，您需要編輯「username」的值，該值輸入於 style/js/scripts.js 下的「DRIBBBLE」中

Flickr

要擷取您自己的 Flickr 圖片，您需要編輯「id」的值，該值輸入於 style/js/scripts.js 下的「FLICKR」中

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

作品集

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

作品集文章版面配置

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