---
tags: 套版,laravel
---
# Canvas版型介紹
[Canvas版型購買連結](https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123)
Canvas是一套對應HTML5，支持Bootstrap4，可適應電腦與手持裝置顯示的套版資源。
## 將Canvas整合入Laravel專案
Step 1.下載Canvas檔案後解壓縮
Step 2.開啟 Package/HTML 資料夾來找到所有版型檔案
Step 3.請將以下資料夾放到Laravel專案的public資料夾內：
```
HTML/css - 額外的樣式表資料夾
HTML/include - 必須的PHP函式資料夾
HTML/images - 圖檔資料夾
HTML/js - Javacripts資料夾
HTML/style.css - 主要的樣式表檔案
HTML/xxx.html - 版型範例html
其他檔案可以根據你的喜好來使用。
```
Step 4.導入CSS或JS檔案，建議使用asset()以確保正確生成檔案路徑，以下為範例：
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />
你現在可以準備開始囉!開始加上你的內容並且展現出你全新風格的美麗Laravel網站
## 基本需要載入的檔案
### CSS
css/bootstrap.css
style.css
css/swiper.css
css/dark.css
css/font-icons.css
css/animate.css
css/magnific-popup.css
css/responsive.css
### JS
js/jquery.js
js/plugins.js
js/functions.js
## HTML結構
Canvas按照一個簡單的編碼結構。這裡是範例:
```
<!DOCTYPE html>
<html dir="ltr" lang="zh-TW">
<head>
<!-- 你的樣式表 . 標題 . Favicon
============================================= -->
...
</head>
<body>
<!-- 主要包裝(The Main Wrapper)
============================================= -->
<div id="wrapper" class="clearfix">
<!-- 標頭(Header)
============================================= -->
<header id="header">
...
</header>
<!-- 網頁內容
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
...
</div>
</div>
</section>
<!-- 頁尾(Footer)
============================================= -->
<footer id="footer" class="dark">
<div class="container">
...
</div>
<!-- 版權宣告(Copyrights)
============================================= -->
<div id="copyrights">
<div class="container clearfix">
...
</div>
</div>
</footer>
</div>
</body>
</html>
```
### 視圖分割建議
將網頁內容區域獨立成各頁面的Blade檔案，至於剩餘部分則移到master.blade.php
### 佈局設定
這些主題同時支援 Boxed & Wide Layout。加上class".stretched" 到 <body>將會讓你的網站變成Wide Layout:
<body class="stretched">
更多資訊可參考[這裡](https://wpexplorer-themes.com/total/docs/theme-layouts/)
### Favicons & Apple Touch Icons
你可以加入 Favicon 到你的網站使用以下的程式碼:
`<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">`
你可以加入Apple Touch Icons(顯示在iPhone/iPad桌面上的網頁icon) 到你的網站使用以下的程式碼:
```
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
```
### 頁面載入切換(Page Loading Transitions)
你能夠顯示互動的載入切換來提示使用者當你的網頁仍在背景載入的時候，載入完後在利用CSS3 Transitions來揭示你的頁面。頁面載入動畫預設是開啟的，如果需要關閉的話，你只需要加入.no-transition Class到<body>標籤。
<body class="no-transition">
你可以客製你頁面載入的動畫使用以下屬性值：
* data-animation-in -頁面載入動畫風格。例如 fadeIn
* data-animation-out - 頁面跳出動畫風格。例如 fadeOut
* data-speed-in - 頁面載入動畫速度，單位是微秒。 例如 1500
* data-speed-out - 頁面跳出動畫速度，單位是微秒。 例如 800
* data-loader - 載入動畫風格. 例如 2。 選項有 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 and 14
* data-loader-color - 載入動畫的HEX顏色。 例如 #FF0000
* data-loader-timeout - 載入動畫TimeOut以結束未完成的動畫，單位是微秒。 例如 4000
* data-loader-html - 加入客製HTML碼到載入動畫。
```
<body data-loader="2" data-animation-in="fadeIn" data-speed-in="1500" data-animation-out="fadeOut" data-speed-out="800">
```
### Logo設定
Logo容器能夠在標頭容器內找到 - #header
```
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
</div>
```
:::info
Logo圖片的最大高度能夠到100px，另外為確保你能夠在Light/Dark主題間切換，建議你能夠加入暗版Logo。不過，這是非必須的
:::
#### 高清Logo
假如你想使用高清Logo，確保你使用雙倍大小的標準Logo檔案。使用下方的程式碼來替換上方程式碼:
```
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div>
```
### 配色方案
你可以快速變更你網站的配色方案，只需要變更HEX Color碼，就在 css/colors.css 檔裡頭。何不試看看呢， 透過以下幾個簡單步驟:
Step 1.確保你加入了 css/colors.css 樣式表在你的head標籤內，就在responsive樣式表後.
<head>
...
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- 這裡加入你的colors.css
============================================= -->
<link rel="stylesheet" href="{{ asset('css/colors.css') }}" type="text/css" />
...
</head>
Step 2.現在僅需根據你的需要來改變HEX Codes。
### 暗版方案
你能夠完全改變網站的配色風格到極端的暗系，只需加入.dark class到body標籤。
除此之外，你也能夠加入.dark Class 到某些元素像是 #header, #primary-menu, .section, Slides, #footer & 還有很多其他元素， 這將會幫助你試驗出不同的配色方案。 這個 .dark Class 對於將容器內的文字變成亮色也非常有用！
### 改變字體(Changing Fonts)
為了讓你快速的變更字體我們包含了一個 css/fonts.css 檔案來方便管理你包進來的自定字體。 預設上, Canvas使用3種字體，那就是: Raleway. Lato & Crete Round 源於 Google字體庫. 你能夠找到字體檔案連結在head 標籤，散布於所有.html檔案。
`<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />`
為了要改變字體，你將需要編輯上方的連結用你自定義的字體，假如你想要使用一個Google字體又或是完全移除它改用本地字體檔。 這裡是一個例子使用 本地端字體.
你現在能夠改變Font Names，就在css/fonts.css 檔案內。
### 自定義主題(Theme Customization)
Canvas包含了一個自定義CSS檔案在css 資料夾內，這讓你能更好的處理你的自定義。
當更新Canvas到最新版本時。只需要加入所有你自定義CSS碼在css/custom.css檔案，並將該連結放在<head>內，在 css/responsive.css 連結之後。
而且要確定這是標籤<head>最後連結的CSS檔案，這樣你的自定義CSS才能正常的覆蓋屬性。
範例:
```
<head>
...
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- 這裡擺放你的自定義custom.css
============================================= -->
<link rel="stylesheet" href="{{ asset('css/custom.css') }}" type="text/css" />
</head>
```
## 網頁優化秘訣
一個快速且優化過的網站有幾個重點需要被處理才能達到想要的結果，這裡有幾個優化技術絕對能夠正向的影響你的網站表現 & 我們想要分享其中一些給你：
### 圖片壓縮與優化(Image Compression & Optimization)
我們傾向使用大量的圖片在我們的網頁上，但常常沒有做好壓縮與優畫的工作。
記得，圖片越大的話就需要花越多的時間來下載，因此導致網頁載入時間變長且用戶體驗變差。你的用戶將會離開你的網站。
如果沒辦法在3-5秒內載入完畢的話，這對你的銷售是不利的。因此，縮圖.優化.以及壓縮圖片在將它們放上你的網頁之前。這裡有一些秘訣也許在優化圖片上可以派上用場:
#### 縮圖
在將圖放上網頁前先縮小你的圖片，不要只是下載圖片後就直接放上你網頁的<img>標籤卻忽略要進行縮圖。圖片的尺寸和解析度部分不推薦使用1200px x 800px大小的圖片到300px x 200px的圖片內容裡頭，這是沒有必要的，應該縮到300px x 200px。
#### 圖片格式
總共有3種常用的圖檔類型用在網頁圖片上，分別是JPEG. GIF. & PNG。對於一般的單純背景圖可使用 JPEG 圖檔, 對於包含透明背景的圖片使用PNG 圖檔，而有動畫效果的圖片需使用 GIF圖檔。
#### 壓縮圖片
圖片壓縮重要在能減少圖片的大小卻無損解析度，這裡有一些免費的圖片優化工具供你下載。
給MAC 使用 ImageOptim
給Windows 使用 Riot 如壓縮 JPEG 圖檔 & PNG Gauntlet 如壓縮 PNG 圖檔。
### CSS & jQuery 壓縮
建議你結合 & 壓縮 所有你的CSS檔到單一檔案 & 所有Javascript檔案到單一JS檔案。
因為Minification減少檔案的大小而Combining所有檔案能助於減少對於伺服器的HTTP請求數量。這也是能提升網頁速度的一個重要因素。
有幾個線上工具能幫你壓縮 CSS & JS 檔案，我們推薦使用:
針對 CSS 使用 CSS Minifier
針對 Javascript 使用 Javascript Minifier。
至於在Laravel專案將CSS與JS壓縮成單一檔案，請參考[這裡](https://hackmd.io/tv5xNJ_ASn6acZuJmiboZw)
### 內容傳遞網路(CDN)
你能夠使用 CDN來再次提升網站速度。你能夠使用CND來傳遞網站內的靜態檔案比如 CSS. JS .圖檔 & 字體檔案。
有好幾個在網路上的CDN主機可用，但我們會推薦 MaxCDN 或 CloudFlare。
==注意: CDN設定需要額外的月費，所以這完全是根據你的需要在選購的。==
## 頁面元素
### 欄位/格線系統
==.show-grid 可用來顯示格線==
#### Bootstrap格線系統
#### 到頂部(Go To Top)
你能加入一個到頂部觸發器到你的頁面去允許你的使用者隨時都能回到頁面頂部。只要加入下方的程式碼在頁面的底部就在</wrapper>的後面:
```
<div id="gotoTop" class="icon-angle-up"></div>
設定:
data-offset - 你希望從頂部位移多少像素之後能觸發Trigger，顯示到頂部按鈕。 例如 300
data-mobile - 在手機上要啟動/關閉到頂部功能。 例如 true/false
data-speed - 滑到頂部的速度，單位是微秒。 例如 800
data-easing - 滑到頂部的速度變化模式。 例如 easeInQuad
```
#### 幫助類別(Helper Classes)
>官方建立了一些非常有用的幫助類別給你。這是其中一部分
.allmargin - Margin 為 50px 在每一邊。
.topmargin - Margin 為 50px 在頂部。
.bottommargin - Margin 為 50px 在底部。
.leftmargin - Margin 為 50px 在左邊。
.rightmargin - Margin 為 50px 在右邊。
.allmargin-sm - Margin 為 30px 在每一邊。
.topmargin-sm - Margin of 30px 在頂部。
.bottommargin-sm - Margin of 30px 在底部。
.leftmargin-sm - Margin of 30px 在左邊。
.rightmargin-sm - Margin of 30px 在右邊。
.allmargin-lg - Margin of 80px 在每一邊。
.topmargin-lg - Margin of 80px 在頂部。
.bottommargin-lg - Margin of 80px 在底部。
.leftmargin-lg - Margin of 80px 在左邊。
.rightmargin-lg - Margin of 80px 在右邊。
.nomargin - 每一邊都沒 Margin。
.notopmargin - 頂部沒 Margin。
.nobottommargin - 底部沒 Margin。
.noleftmargin - 左邊沒 Margin。
.norightmargin - 右邊沒 Margin。
.header-stick - 內容和標頭黏在一起。
.footer-stick - 內容和Footer黏在一起。
.noborder - 每一邊都沒 Border。
.notopborder - 頂部沒 Border。
.nobottomborder - 底部沒 Border。
.noleftborder - 左邊沒 Border。
.norightborder - 右邊沒 Border。
.nopadding - 每一邊都沒 Padding。
.notoppadding - 頂部沒 Padding。
.nobottompadding - 底部沒 Padding。
.noleftpadding - 左邊沒 Padding。
.norightpadding - 右邊沒 Padding。
.col-padding - Padding 為 60px 在每一邊。
.noradius - No Border Radius.
.noshadow - No Box Shadows.
.nobg - 沒有背景。
.nobgcolor - 沒有背景色。
.noabsolute - 強制相對位置。
.hidden - Hidden Blocks.
.nothidden - No Hidden Blocks.
.inline-block - Inline Blocks.
.center - 文字置中對齊。
.tright - 文字靠右對齊。
.divcenter - DIVs 置中對齊。
.fleft - DIVs 靠左對齊。
.fright - DIVs 靠右對齊。
.color - 主題文字顏色。
.bgcolor - 主題背景顏色。
.border-color - 主題 Border 顏色。
.bgicon - 背景 Icon。
.bganimate - Animates Background Vertically.
.grayscale - 當指標滑過加上一個灰階濾鏡到圖片和顏色上。
.imagescale - 當指標滑過加上一個Zoom Out效果到圖片上。
.t300 - 改變字體 Weight 到 Light。
.t400 - 改變字體 Weight 到 Normal。
.t500 - 改變字體 Weight 到 Medium。
.t600 - 改變字體 Weight 到 Semi Bold。
.t700 - 改變字體 Weight 到 Bold。
.ls1 - 加上一個字母間隔為 1px。
.ls2 - 加上一個字母間隔為 2px。
.ls3 - 加上一個字母間隔為 3px。
.ls4 - 加上一個字母間隔為 4px。
.ls5 - 加上一個字母間隔為 5px。
.noheight - 改變元素的高到 0px。
## 補充資料
* 短程式碼 > 區塊與視差
* 短程式碼 > 動畫
* 短程式碼 > 圖示
[中文Canvas教學文件](https://canvas.goblinlab.org/Documentation/index.html)
### .gitignore
以下是Laravel專案建議的gitignore清單
```
/node_modules
/public/storage
/public/one-page
/public/html
/public/demos
/public/include
/public/images
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
```
## 客製化介紹
### 01.將手機版的選單改成從左邊滑入
作法：當前版本與客製化02衝突，在nav標籤裡頭加入以下類別
`<nav id="primary-menu" class="mobile-menu-off-canvas from-left" >`
### 02.讓Header在手機版能夠持續在最上方
作法：當前版本與客製化01衝突，在body標籤加上.sticky-responsive-menu，如下：
`<body class="stretched sticky-responsive-menu">`
### 03.移除文章間的隔線條
作法：在custom.css加入以下樣式
```
.entry:after {
height: 0px;
margin-top: 0px;
}
```
### 04.讓區塊只在手機版本出現或隱藏
作法：請參考[Bootstrap的文件](https://getbootstrap.com/docs/4.3/utilities/display/)
Sign in with Wallet
Connect another wallet