十分鐘快速入門上手 CodePen(有中文翻譯)

前言

身為一名前端工程師,想要臨時分享一些作品時,CodePen 就會是一個非常好用的工具,因此這一篇就來快速介紹並入門 CodePen 吧~

CodePen

CodePen 中文叫做原始碼筆,基本上只要你是前端或是你有臨時想做一些網頁互動效果等,都會使用到該服務,因此在上面你可以看到許多開發者在上面分享各種特效以及練習

超多練習

因此如果你有一些作品找不到靈感與製作,你可以到 CodePen 上面來尋找。

主要功能

CodePen 主要有三種類型功能

  • Pen
  • Project
  • Collection

我們比較常用的功能大多都是 Pen,假設你今天是一名前端工程師,基本上使用 Pen 其實就非常綽綽有餘了,而專案(Project)與集合(Collection)就比較少使用,因此本篇會集中在 Pen 介紹唷。

Pen

Pen 基本的模式會是以下

Pen

左邊是撰寫 HTML、CSS 與 JavaScript 的地方,右邊則是顯示結果畫面的地方。

附帶一提 CodePen 上面是支援 Emmet,當你要產生多個 div class 的時候,它就會像下圖一樣提前預覽給你結果

Emmet

而 Emmet 的使用方式就是例如打 w100,然後按下鍵盤的「Tab」就會自動展開囉。

如果你不滿意現在的呈現方式,你也可以透過點上方「Change View」來切換顯示方向

Change View

這邊也附上中文說明圖

Change View

假設你今天想載入一些 CDN,例如:jQuery 或 Bootstrap 的話,那麼就可以點上方「Setting」或是下方紅框所圈的齒輪也可以

Setting

然後在底下填入相關 CDN 即可

CDN

而在此如果你希望 CSS 可以有 Reset 的話,其實 Codepen 都內建有

CSS Reset

如果你想直接在 CodePen 上面搜尋相關 CDN 也是可以的,只需要在下面搜尋欄位輸入要載入的 CDN 名稱就可以了。

這邊要注意一下載入的順序也是相當重要的,以 Boostrap 來講,它會建議你先載入 jQuery 之後再載入 Bootstrap 的 JS 哩。

最後這邊也附上相關功能介紹圖

畫面說明

預處理器

如果你是比較進階的前端開發者,可能會用 HTML Pug 或是 CSS 的 Sass/SCSS 撰寫,而在此 Pen 也是可以做到的,假設你今天希望 HTML 改用 Pug 撰寫的話,只需要在 Setting 中找到「HTML Preprocessor」,然後下拉選擇「Pug」就可以囉

HTML Preprocessor

切換完畢之後你就可以撰寫 Pug 並且你會發現後面會帶上一個「(Pug)」

Pug

除此之外你也可以看 Pug 編譯後的樣子是怎麼樣,只需要點一下旁邊的箭頭,然後「View Compiled HTML」就可以看到了

View Compiled HTML

Compiled

這邊要注意一件事情,當若你是在 Compiled 模式下是無法再次編輯 HTML 的,你必須切換回去原本的原始碼模式才可以,切換回去的方式相同,只需要點「View Uncompiled Pug」就可以囉。

那 CSS 改 Less/Sass/SCSS 可不可以,當然可以,CodePen 就是如此的強大

CSS Preprocessor

而它的操作基本上也與 HTML Preprocessor 相同。

格式化整理程式碼

在 CodePen 上面也有支援 Format 功能,一種方式是全選程式碼然後 Shift+Tab 另一種方式則是點下方圖片

Format

按下去之後 CodePen 就會幫你自動整理囉

Format End

Pen 注意事項

在 CodePen 上面撰寫程式碼時有一個注意事項多加注意,請不要把 bodyhead 等標籤放進去 CodePen,因為這有可能出現一些無法預期的錯誤,通常比較常見的就是,本身的 HTML 結構就有 CDN 但因為沒有去除這些而直接貼入,導致二次覆蓋樣式,雖然結果呈現「可能」沒有問題,但還是會建議不要犯這種錯

錯誤示範

正確示範

那這兩者差異在哪裡呢?首先 CodePen 是將你撰寫好的用 iFrame 重新呈現在畫面上,因此若你又寫一次 bodyhead 那麼就會發生一些結構問題,這邊示範一次

結構問題

可以看到結構是相當的奇怪 body 裡面會出現 meta 標籤哩~

正確結構

因此在撰寫 CodePen 的時候,請不要整個 HTMl 丟進來,因為很多狀況跑版或者是 JS 無效等都是這些問題導致的,因此會建議分開來寫。

Explore Topics

CodePen 上也有支援 Vue 開發或者是 React 等,你只需要點一下側邊欄的「Explore Topics」就可以進入到開主題頁面

Explore Topics

這邊舉例使用 Vue,當你點進去後底下其實有非常多的 Template 供你使用

Template

如果你希望是一個乾淨的環境,那麼就點一下旁邊的「Open Vue Edit」就可以囉

Open Vue Edit

接下來你就可以看到 Vue 的開發環境

Vue

Project

最後講一下 Project,Project 是一個可以直接線上分類的功能,但普通帳號只能開啟一個 Project

Project

因此實際上在使用上機會是比較不大的,因為若要開第二個就必須先刪除第一個,因此在使用上就會相對比較麻煩,因此實際使用機會就很低。

參考文獻

可以給點牡蠣。
Google AD