Int's blog

此文章為觀看六角學院CSS Flex 超詳解，彈性版型任你操控！影片後整理之筆記。

上一篇介紹了外容器和內容器的語法，這篇會來示範一些例子。

Chrome 開發者工具

在介紹例子之前，先來介紹chrome內建的好用工具，假如你在你的專案上用到了flex語法，可以f12打開開發者工具，在style的地方找到你撰寫display:flex的地方，你會發現有個圖案(如圖1)，按下去之後你會看到許多在上一篇出現的語法(如圖2)，點擊這些按鈕你可以即時預覽各種語法在你的網頁上呈現的效果。

flex實例

圖片文字交錯

• 這題的重點在於要善用內容器語法，先把所有內容器設成一致(文字左，圖片右)，一來方便管理，二來在做RWD時會方便許多。

• 程式碼如下

• 仔細看第二個元素，我使用了flex-direction: row-reverse;

相簿式排版

• 這題相對簡單，簡單來說把大張圖片和三張小張圖片切割成兩個容器，小張圖片再使用flex-direction改成垂直方向。

• 要注意一點，為了避免圖片因排版而被擠壓變形，這裡使用了object-fit:cover;

總結

影片內容差不多就這些，老師講的很淺顯易懂，算是對我幫助很大，如果有哪裡不懂也推薦大家去看老師影片。

前言

此文章為觀看六角學院CSS Flex 超詳解，彈性版型任你操控！影片後整理之筆記

整理下來有點太多，可能會分成兩篇來記錄，想看下一篇可以到這裡

FLex介紹

Flex是一個CSS中很常使用的排版工具，他能夠自由操作div容器，主要概念為下圖

可以透過操作主軸與交錯軸來達成排版，預設主軸線為由左至右，交錯軸為由上至下

語法介紹

外容器:

1. display: flex;(需加在外容器上)
2. flex-flow:
   • flex-direction-控制主軸方向:
     • row (預設值，由左至右)
     • row-reverse(由右至左)
     • column(由上至下)
     • column-reverse(由下至上)
   • flex-wrap-換行方式:
     • nowrap(不使用)
     • wrap(遇到邊界自動換行)
3. justify-content-對齊主軸線方式:
   • center(置中)
   • flex-start(靠主軸起點)
   • flex-end(靠主軸終點)
   • space-between(中間留空格)
   • space-around(元素左右都留空格，但比例為1:2:1)
   • space-evenly(元素左右平均分配空格)
4. align-items-與交錯軸對齊方式:
   • center(置中)
   • flex-start(靠交錯軸起點)
   • flex-end(靠交錯軸終點)
   • strech(預設值，撐開至flexbox大小)
   • baseline(對齊內容物基線)
5. align-content-內容物對齊方式
   • center(每行對齊交錯軸線中間)
   • flex-start(每行貼齊交錯軸線最前端)
   • flex-end(每行貼齊交錯軸線最末端)
   • space-between(第一行與最後一行分別對齊交錯軸線最前端與最末端)
   • space-around(每行平均分配每行間距)
   • strech(預設值，每行內容元素全部撐開至 flexbox 大小)

內容器:

1. flex:
   • flex-grow(子元素伸展比例分配)
   • flex-shrink(子元素壓縮比例分配)
   • flex-basis(子元素基本大小)
2. order: 老師這裡沒有特別介紹，以後學會再補上
3. align-self:
   • center(置中)
   • flex-start(靠交錯軸起點)
   • flex-end(靠交錯軸終點)
   • strech(撐開至flexbox大小)
4. margin-子元素邊界

下一篇將會以程式碼做與實例做更進一步的講解。

前幾天在更新文章到github時出現了一個錯誤碼:

1

Error: spawn ENOENT

ENOENT是Error NO ENTry 或 Error No ENTity的縮寫，意思等同於常見的no such file or directory，中文意思就是檔案不存在或找不到路徑。

本以為是deploy需要的hexo-publish.bat沒寫好或_config.yml中哪裡沒設定好，但後來發現是文章我使用了中文命名才導致他無法辨識。

所以說不要用中文幫文章命名，標題可以建好檔案之後改。

也算是學了一課，不然當初找半天找不要哪裡錯。

上一篇文提到了如何使用Hexo admin來部屬網站，但要部屬網站就要有相對的網域來讓你發佈，而github.io即是一個很常拿來發佈靜態網站的地方，這篇文就要來介紹如何使用github來發佈靜態網站。

步驟

1. 註冊github: https://github.com/

2. 到自己的個人頁面，按下repositories旁邊的new
   

3. 在名稱欄位輸入username.github.io(username是你註冊的帳號名稱)，因為我已經註冊過了所以會有紅字
   

4. 拉到最下面按下create repository
   

5. 接著到你安裝HEXO的blog資料夾，打開 _config.yml

6. 拉到最底下找到 **deploy:**，並輸入以下文字，同樣的username也是你的github帳號名稱

   1 2 3 4

   deploy: type: git repo: https://github.com/username/username.github.io.git branch: master

   基本上這樣就算完成了，你可以按照上篇文的步驟按下admin的deploy就可以部屬網站到github.io上，又或者你可以在終端機輸入以下指令:

   1 2 3

   hexo cl hexo g hexo d

   • hexo g和hexo d也可以合併替換成hexo g -d

     完成後你可以前往自己的github.io網站(https://username.github.io/) ，你會看到網站成功出現，不過有時候他不會那麼快更新，你要稍等一下

     以後如果要更新文章或是發布文章也只需要輸入最後那三個終端機指令，或是直接使用admin的deploy即可，那這篇文差不多到這邊，有任何問題歡迎和我提出。

Hexo admin是一個很方便的插件，可以用圖形化介面來管理你的網站後台，不過下載後來是要自己設定一些東西才能部屬網站，這篇文就是來介紹部屬的設定。

步驟

1. 安裝hexo admin: 在cmd輸入以下指令，不知道怎麼打開cmd可以看這篇文

   1	$npm install hexo-admin --save

2. 打開blog資料夾裡的 _config.yml，在最底下新增以下程式碼

   1 2	admin: deployCommand: 'hexo-publish.bat'

3. 在跟 _config.yml 同一層的地方新增一個叫 hexo-publish.bat 的檔案

4. 在hexo-publish.bat中新增以下程式碼

   1

   hexo g -d

5. 切換到Hexo Admin中的deploy頁面
   

6. 在輸入欄輸入本次更新說明文字後按下deploy即可
   

因為我自己是用github.io來部屬網站，所以我成功後就可以在自己的github上面看到更新後的檔案，至於怎麼使用github來部屬網站可以到這篇文。

圖片對文章來說是很重要的，有了圖片的文章在各方面都比較好閱讀，想當然如果能直接上傳電腦中的圖片到文章上會是件很方便的事，然而用預設編輯器打開文章可能沒辦法直接上傳本地端的圖片，所以這篇文就要來介紹如何在你的HEXO文章中插入本地端圖片。

步驟

1. 先去下載hexo admin插件，在cmd輸入以下指令就可以了，不知道怎麼開cmd可以看我上一篇文

   1	$npm install hexo-admin --save

2. 下載好以後打開你的hexo server，打開瀏覽器輸入網址http://localhost:4000/admin 就可以進入hexo後端主控台

3. 其實到這邊就差不多結束了，只要用admin編輯文章就能直接貼上圖片

使用說明

現在你可以貼上任何來源的圖片，包含你電腦本地端的圖片，使用複製貼上hexo就會自動幫你上傳圖片，上傳完成後會出現以下Markdown語法:

1

![upload successful](\\images\pasted-0.png\)

之後你需要把這個語法改成顯示圖片的Markdown語法如下所示:

1

![](../images/pasted-0.png)

其中括弧內代表圖片的位址，同時pasted-0.png代表圖片名稱，是hexo自己取的，你也可以到admin settings更改設定，這個等等再介紹。


改好後圖片就可以成功顯示了，如果忘記圖片路徑可以到D:/blog/source/images查看(我的電腦是把hexo裝在D槽，所以根目錄才是D:，要看你當初裝在哪)

更改設定

可以到admin的setting更改上傳圖片後會存的資料夾名稱與圖片前綴

最底下的Image Pasting Settings可以調整這兩個設定

Image diectory可以更改資料夾名稱

Image filename prefix可以更改圖片前綴，前綴就是你圖片名稱最前面的pasted-

總結

當初原本按照這篇文章來做，結果他還是顯示不出來，後來參考了這篇文章才順利解決，沒想到上傳個圖片會比我想的還費工夫XD 不過至少能用了，分享給大家。

前言

一些廢話，不想看可以直接看步驟

許多工程師都擁有自己的技術部落格，剛好在六角學院上課的時候有一小節就是在介紹寫部落格這件事，剛好趁這次機會開始養成寫部落格的習慣。

一開始我跟著HEXO的 官方文件 操作，不過中間的步驟可能是我誤解文件的意思還是怎樣，總之我按照首頁的步驟做是錯的，所以想說順便用這個主題來當作我的第一篇文章。

步驟:

1. 打開cmd(不會的可以按 window +R 輸入後 cmd 或直接在工具列的搜尋欄搜尋cmd)

2. 切到自己希望網站放置的資料夾，我是選D槽根目錄，當然你也可以選別的槽，又或者是在槽中建個資料夾來放之類的，不過他等等會自己產生一個叫blog的資料夾我就沒特別創資料夾了

3. 依序輸入下列指令

   1 2 3 4 5

   $ npm install hexo-cli -g $ cd blog $ npm install $ hexo init blog $ hexo server

4. 依照指令執行完就建置好環境了，你的cmd應該會跳出一行字: Hexo is running at http://localhost:4000/(如圖)

5. 在瀏覽器上輸入剛剛出現在cmd上的網址就可以成功打開Hexo部落格了

結語:

第一次寫部落格，挺有趣的，之後應該會記錄一些Hexo的使用方法跟程式課程的筆記
如果有任何問題歡迎和我聯繫