Treko - 軟體與新創公司登陸頁面模板

文件

• 建立日期：2020 年 8 月 14 日

歡迎！ 首先，我們感謝您購買我們的登陸頁面套件。
我們非常感謝每一筆銷售。如果您喜歡我們的作品，請不要忘記給予評分。這有助於我們開發新的且更好的項目。

對於基本的 HTML、JavaScript 或 CSS 編輯問題，請先快速瀏覽 Google 或造訪 W3Schools 因為模板問題會獲得優先處理。您需要具備一些 HTML/CSS 知識才能編輯此模板。

使用 Firebug 或 Chrome 開發者工具。

不要從頭開始，使用示範中的現有頁面並修改它以了解其運作方式。

使用瀏覽器的「在頁面中尋找」功能（通常是 Control + F）快速找到您在本文件中需要的內容。

很多時候，外掛是網站故障的原因，如果您遇到無法解決的錯誤，請嘗試停用任何第三方外掛。

別忘了重新探索即時示範，以了解版面配置、使用想法和範例程式碼。

將下載的檔案解壓縮到您電腦的本地磁碟。在解壓縮的資料夾中，會有一個包含文件的資料夾和一個包含 HTML 模板的資料夾。

由於 Treko 是一個 HTML 模板，它使用了多個 .html 頁面（18 個示範頁面 + 9 個額外內部頁面），以及 CSS 樣式表和許多 JavaScript 外掛。以下是檔案的簡要概述和一些顯著功能的介紹。

• css （主要 CSS 檔案、bootstrap4 CSS 檔案等）
• fonts （扁平圖示）
• images （所有圖片）
• js （模板 JS）
• php （heroForm.php 等 - 表單 PHP 檔案）
• demo-x.html - 18 個 HTML 檔案（示範編號）

將下載的檔案解壓縮到您電腦的本地磁碟。在解壓縮的資料夾中，會有一個包含文件的資料夾和一個包含 HTML 模板的資料夾。Treko 是一個 HTML 模板，所以 實際上不需要「安裝」 只需解壓縮您從 Themeforest 下載的主檔案，解壓縮後您就可以使用所有模板了。

1. 選擇您將在專案中使用的版面配置和額外內部頁面
2. 重新命名 demo-x.html 在 index.html
3. 進行必要的更改（添加您的文字、圖片等）
4. 將您將在專案中使用的所有資料夾和 HTML 頁面複製到您的 www 或 public_html 使用 FTP 用戶端或檔案管理員（或類似工具）將其放置在伺服器或本地電腦的目錄中

Treko 模板基於 Bootstrap v4.5.0 - 一個 CSS 和 JS 檔案的集合，可幫助您快速開發在任何尺寸（無論是 17 吋筆電螢幕還是 iPhone）下都美觀的網站。

Bootstrap 的基本網格是網格系統的變體。語法簡單且跨瀏覽器有效，但最棒的是它還具有出色的行動裝置適應性。您可以非常輕鬆地自訂網站的所有部分或建立新的部分。

Bootstrap 的網格系統使用一系列容器、行和列來佈局和對齊內容。它使用 flexbox 構建，並且完全響應式。

The index.html 是包含模板 HTML 結構的主要模板檔案。以下是其一般結構（簡化版）：

HTML 標記

如果您需要更多資訊，請造訪此網站： https://getbootstrap.com/docs/4.0/layout/grid/

所有 CSS 檔案都儲存在「css」資料夾中。以下是我們在此模板中使用的樣式表檔案列表。您可以透過開啟每個檔案來獲取更多資訊：

1. dropdown-effects - 一個包含響應式超級選單下拉效果的資料夾
2. animate.css - 一個跨瀏覽器的 CSS3 動畫庫
3. bootstrap.min.css - 這是模板基本樣式所需的主要樣式表，例如表單、輸入框、div、列表元素等。
4. brick-theme.css - 磚色配色方案的主要 CSS 檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
5. dimgreen-theme.css - 暗綠色配色方案的主要 CSS 檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
6. flaticon.css - 一組完整的 200 多個細線向量圖示
7. green-theme.css - 綠色配色方案的主要 CSS 檔案
8. indigo-theme.css - 靛藍色配色方案的主要 CSS 檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
9. magnific-popup.css - 一個響應式燈箱樣式表
10. menu.css - 響應式超級選單的 CSS 檔案
11. orangered-theme.css - 橙紅色配色方案的主要 CSS 檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
12. owl.carousel.css - 一個響應式輪播滑塊
13. owl.theme.default.min.css - 響應式輪播滑塊自訂檔案（如果您想要預設的導航控制項，例如圓點或下一頁按鈕，則需要此檔案）
14. pink-theme.css - 粉色配色方案的主要CSS檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
15. red-theme.css - 紅色配色方案的主要CSS檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
16. responsive.css - 此樣式表包含響應式規則，用於將模板適應從桌面到小型手機的任何解析度
17. royalblue-theme.css - 皇家藍配色方案的主要CSS檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
18. skyblue-theme.css - 天藍色配色方案的主要CSS檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）
19. violet-theme.css - 紫羅蘭配色方案的主要CSS檔案（包含一些通用樣式，例如錨點標籤顏色、字型大小等）

如果您建立自己的樣式，必須檢查所有響應式尺寸以確保一切正常；如果您需要在特定尺寸下更改自己的樣式，請在 responsive.css 中進行

檔案的每個部分 *.css 都有註解，因此我們相信您編輯時不會有問題。例如，標記頁首包圍區塊開始的註解如下所示：

如何編輯樣式

如果您想編輯網站的特定區塊，只需在CSS檔案中找到對應的標籤，然後向下滾動直到找到需要編輯的樣式。例如，如果您想編輯背景顏色，請開啟 *.css 檔案（名稱取決於您要使用的配色方案）並執行以下操作：

如果您發現新樣式沒有生效，很可能是因為特異性問題。請在您的 *.css 檔案（名稱取決於您要使用的配色方案）中向下滾動，確保沒有權重更高的類似樣式。

此模板使用了多個腳本，其中許多在模板的程式碼中已有說明。如果您是開發者，您會發現這特別有用。以下是包含的JavaScript檔案：

1. bootstrap.min.js - 此框架提供額外的使用者介面元素，例如對話框、工具提示、輪播等
2. comment-form.js - 用於評論表單的jQuery外掛
3. contact-form.js - 用於聯絡表單的jQuery外掛
4. custom.js - 此檔案包含scrollup外掛、聯絡表單驗證等的一般jQuery設定
5. html5shiv.js - 此腳本是讓舊版Internet Explorer支援HTML5區塊元素的標準方式
6. jquery-3.4.1.min.js - 是一個大幅減少您必須編寫程式碼量的JavaScript函式庫
7. jquery.ajaxchimp.min.js - 用於MailChimp訂閱表單的jQuery外掛
8. jquery.appear.js - 用於追蹤元素在瀏覽器視口中出現的jQuery外掛
9. jquery.easing.js - 提供進階緩動選項的jQuery外掛
10. jquery.magnific-popup.min.js - Magnific Popup 是一個響應式燈箱與對話框腳本
11. jquery.scrollto.js - 平滑滾動到DOM中任何元素的jQuery外掛
12. jquery.validate.min.js - jQuery表單驗證外掛
13. jquery.vide.min.js - 用於影片背景的jQuery外掛
14. menu.js - 用於響應式大型選單的jQuery外掛
15. modernizr.custom.js - 是一個檢測使用者瀏覽器中HTML5和CSS3功能的JavaScript函式庫
16. owl.carousel.js - 一個響應式輪播滑塊jQuery外掛
17. request-form.js - 用於請求表單的jQuery外掛
18. register-form.js - 用於註冊表單的jQuery外掛
19. respond.min.js - 一個快速且輕量的min/max-width CSS3媒體查詢polyfill（適用於IE 6-8等）
20. wow.js - 用於在滾動頁面時顯示CSS動畫的jQuery外掛

選擇您想要的佈局並進行以下更改。

更改網站圖示：

網站圖示位於 /images/ - favicon.ico。您無需對HTML進行任何更改，只需將圖示檔案替換為您的即可。請務必強制重新整理瀏覽器快取以查看新的網站圖示。

您可以在此處輕鬆生成您的網站圖示： 網站圖示與應用程式圖示產生器

別忘了替換iOS裝置的圖示 - apple-touch-icon-152x152.png , apple-touch-icon-120x120.png, apple-touch-icon-76x76.png 和 apple-touch-icon.png。這些圖示也位於 /images 資料夾中

更改字型：

Treko使用了兩種不同的字型 "Roboto" 用於文字的Google WebFont 和 "Noto+Sans+TC" 用於標題的Google WebFont。要更改嵌入的字型，請查看網站的head部分，您會找到這個標籤：

要更改字型，首先前往 http://www.google.com/fonts/ 選擇一個字型並使用生成的程式碼。

更改標誌：

開啟 images 資料夾並將 logo-x.png 和 logo-white.png 圖片替換為您的標誌。標誌尺寸為155 x 36像素。Retina圖像的基本概念是使用一個更大的圖像，像素數量是顯示尺寸的兩倍（例如310 x 72像素），然後將圖像設定為填充該空間的一半（155 x 36像素）。

別忘了更改行動選單的標誌：

選擇模板佈局：

Treko HTML模板包含 18種不同的模板佈局 和 9個額外的內部頁面 :

注意！ 在每件单品均附独立编号与真伪验证证书方面，爱游戏1提供贴心周到的支持。

1. 爱游戏1以由资深游戏策划师与时尚买手联合策选为核心，带来高效便捷的体验。
2. 重新命名 demo-x.html 在 index.html
3. 想了解更多尊享一对一私人搭配顾问与免费定制刺绣相关内容，尽在爱游戏1。
4. 爱游戏1围绕爱游戏官网不断创新，回应用户的真实需求。 www 或 public_html 精选爱游戏入口内容，爱游戏1与你一同发现更多精彩。

選擇配色方案：

Treko HTML template includes 10 color schemes. Inside the css folder there are 10 css files for diferent color schemes. You can use one of predefinied colors or build custom CSS with color which you want.

爱游戏1深耕独家收录全球热门游戏联名限量款服饰领域，用心服务每一位用户。

1. 開啟 index.html file.
2. Find these lines of code in <head> section (skyblue-color scheme set as default!!):




3. Choose your favorite color (for example you want to change the skyblue-color scheme to the green) with remove one of the comment tag like this:





4. Save and see the result!

Background color for navigation menu:

在每件单品均附独立编号与真伪验证证书方面，爱游戏1提供贴心周到的支持。

爱游戏1以由资深游戏策划师与时尚买手联合策选为核心，带来高效便捷的体验。

HTML Markup:

tra-menu - No Background Color

2) To set the white background color for navigation menu just change the class tra-menu to white-menu

HTML Markup:

white-menu - White Background Color

Navigation Menu: Scrolling to a spot :

爱游戏1以由资深游戏策划师与时尚买手联合策选为核心，带来高效便捷的体验。

Background color for section:

想了解更多尊享一对一私人搭配顾问与免费定制刺绣相关内容，尽在爱游戏1。

1. 開啟 index.html file in your text editor (I use Sublime Text (http://www.sublimetext.com/3) .
2. Find the section you want to change the background color (for example content-1):




3. Select the background color you want to apply:




4. Add the class of the background color to the section (for example you want to change white background color to the skyblue, so you can add the class bg-skyblue to the section):
5. Add the class white-color to the container to change the font color from black to white:




6. 爱游戏1专注爱游戏体育，为用户提供专业可靠的体验。

Lightbox Customization

爱游戏1围绕爱游戏官网不断创新，回应用户的真实需求。

HTML Markup:

It is very easy to customize just add suitable class video-popup1, video-popup2 or video-popup2 to the link you want Magnific Popup to be enabled on and video link into the tag a

Initializing popup

Popup initialization code is situated in the custom.js file. There are 3 ways for video (class="video-popup1, video-popup2 or video-popup2") to initialize a popup (in this place you need only enter your video link):

For more information visit their website and check the documentation

Treko uses Flaticons Pack (250+ Icons), FontAwesome Icons (675+ Icons) and Flat PNG icons (300+ Icons)

HTML Markup for FlatIcons:

Flaticons icons use the 'span' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for FontAwesome Icons:

UniSet uses also the FontAwesome Icons. Using these icon packs is a simple matter of knowing the correct class to use. If you need more information, please visit this site: http://fontawesome.io/

FontAwesome icons use the 'i' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for Flat PNG Icons:

精选爱游戏入口内容，爱游戏1与你一同发现更多精彩。

Mailchimp Subscribe Form

If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - http://mailchimp.com/).

爱游戏1专注爱游戏体育，为用户提供专业可靠的体验。

http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

You need to change three value

How to find mailchimp form action URL?

Just go to your mailchimp account. Then your list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

Here you'll learn how to add an embedded form to your site, and which third-party sites accept MailChimp Add an embedded form to your website

围绕爱游戏平台，爱游戏1持续打磨更优质的服务。

Contact Form / Register Form / Request Form / Comment Form:

Treko also uses the PHP engine for activate contact process. The message direct send to your email address, so you can edit your email address in php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file. This will not be available for anyone to see, it is only used by the server to send your email. You can also specify an email subject line (or just leave the one which is there). To do this, please open php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file and change these lines:

围绕爱游戏平台，爱游戏1持续打磨更优质的服务。

爱游戏1深耕独家收录全球热门游戏联名限量款服饰领域，用心服务每一位用户。

Fonts:

  Google Fonts - http://www.google.com/webfonts
  Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:

• Bootstrap Framework - http://twitter.github.com/bootstrap/
• Lightbox - http://dimsemenov.com/plugins/magnific-popup/
• jQuery - http://www.jquery.com/
• jQuery.ScrollTo - https://github.com/yckart/jquery.scrollto.js
• jQuery scrollUp - https://github.com/markgoodyear/scrollup
• Form Validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

在每件单品均附独立编号与真伪验证证书方面，爱游戏1提供贴心周到的支持。

Support does not include:

• solving problems for plugins not packaged with our framework and templates;
• plugins integration;
• adding new features or extending the features currently available;
• any type of modification or customization.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Jthemes