背景圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 圖片滿版 */
.img-cover {
    background-image: url(./bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 圖片居中 */
.img-contain {
    background-image: url(./bg.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

其他背景圖範例：固定、滿版、置中
background-attachment是背景固定模式的屬性
註：作为背景的圖片是撑不起元素的，須額外需要给div新增「寬、高」

前言

在新增 Hexo 的 Local Search 時，參考下列的連結文章，跟著步驟安裝及設定即可，
不過剛裝好後，發現搜尋功能無法正常使用，後來有查到原因，在此紀錄一下Debug過程。

Local Search
Hexo博客添加站內搜索

前言

在安裝 MAC終端機高亮的過程，主要是參考下列的文章，跟著步驟安裝及設定即可，
不過安裝過程中，還是有遇到卡卡的地方，所以特別記一下 卡卡的歷程。

為 MAC 的 Terminal 上色 - 透過 iTerm 2 和 Oh My Zsh 高亮你的終端機

讓 MAC 終端機變好看

iterm2-solarized 原文

前言

簡單來說，實現備份方法就是利用 二個分支線 個別放我們要的檔案，
一個分支線 放 發佈的文章，另一個分支線 放 備份的檔案，

• master: 利用 hexo deploy 直接推送，存放由 hexo 產生的靜態頁面
• hexo: 利用 git command 推送，存放部落格原始碼

由於 Github Page 本身限制頁面主要分支必須為 master，
因此考慮增設分支 hexo 用以存放部落格原始碼。

前言

建立Hexo環境，需要完成的事情有：

1. 建置github空間
2. 安裝 Node.js（如果還沒有的話）
3. 安裝 Hexo
4. 初始化 Hexo，並在目標資料夾建立所需檔案
5. 安裝 hexo-deployer-git (很重要)
6. 在_config.yml 中設定 Git 等資訊

教學來源

Youtube：直播 - 切個垂直時間軸

• GitHub 分支：https://goo.gl/VEbWkm
• 參考版型：https://goo.gl/rqjErS
• 螢幕吸顏色 Sip：https://goo.gl/Vh6YIo
• LiveCoding 官方網站：https://goo.gl/weYx5q
• LiveCoding Youtube 頻道：https://goo.gl/Hyih3u
• LiveCoding 臉書粉絲專頁：https://goo.gl/yhDg0l

排版小技巧紀錄

• 切版過程中，可常利用新增「外層的紅框線」，先確認位置是否正確，事後再拿掉。

  border: 1px solid rgba(255, 0, 0, .3)

• CSS之calc可做運算式運算

  calc(50% — 10px / 2)

gulp環境安裝

安裝 Global Gulp 環境

npm install gulp -g

如果無法安裝 Global Gulp 環境，請用以下並輸入系統密碼
sudo npm install gulp -g

紀錄一下 float排版問題