利用 CodePen 打造我的Demo演示平臺

時間 2019-11-06

標籤利用 codepen 打造我的 demo 演示平臺简体版

原文原文鏈接

【寫給前端新人的經驗分享】css

學習前端開發的過程當中免不了要寫一些 Demo 來驗證和實踐學到的知識，常見的作法就是在本身電腦上建一個文件夾專門用來存放 Demo，簡單快速，但不利於分享和傳播，因此不少人都會選擇一些在線Demo網站，如 JSFiddle、JSBin、CodePen，各平臺都有本身的優點，看我的喜愛選擇，但要注意的是 JSFiddle 在國內被牆，基本上就不要考慮了，JSBin 很是簡捷明瞭，我我的仍是比較喜歡的，CodePen 上有很是多其它分享的 Demo 能夠查看，更像一個分享社區。最後我選擇並推薦 CodePen 來做爲本身的 Demo 演示平臺，有如下幾個緣由：html

它是一個 Demo 分享社區；
它提供的第三方CDN更新更全；
它能夠引用本身建立的通用JS函數和CSS；
它能夠建立模板；

說了這麼多好處，其實最重要的緣由是.......習慣了 ( ͡° ͜ʖ ͡°) (๑>◡<๑)前端

那就跟我一塊兒開始吧git

一、建立一個Demo主頁

進入 codepen.io/，從左側菜單選擇 Pen 來建立一個新的 Pen 編輯器github

頁面 HTML 和 CSS 根據本身的喜愛來寫，這個頁面主要是用來放 demo 連接列表，因爲每一個連接的 url 都是固定的形式，同時咱們也但願全部連接都是新窗口打開，因此設置一下 base 標籤編輯器

<base href="https://codepen.io/gafish/pen/" />
<base target="_blank" />
複製代碼

打開 HTML 的設置，在 Stuff for <head> 中加入上面的代碼，點保存函數

寫好主頁的代碼好以後，最好編輯一下頁面標題，CodePen 每30秒會自動保存一次當前代碼，你也能夠手動點保存按鈕，工具

進入到我的主頁，選擇 Organize Showcase ，佈局

將剛纔建立好的 Demo主頁拖動到右側最大的展現區域，它會自動保存當前的操做，再返回我的主頁，就會看到它顯示在最顯眼的位置學習

你能夠查看個人 Demo演示主頁做爲參考

二、建立一個通用JS和CSS庫

再建立一個新的 Pen 編輯器，用來放一些通用JS和CSS，好比工具函數和基本佈局樣式等，這裏定義的方法和樣式將會和其它 demo 頁面共用，爲了不命名衝突，建議全部JS方法都放到一個統一的對象裏，CSS命名使用 g_ 前綴，保存以後複製這個 pen 的訪問地址備用，如 https://codepen.io/gafish/pen/qzMgYr

const _utils_ = {
    generateMockData: () => { ... }
};
複製代碼

CSS

.g_main { ... }
複製代碼

三、建立一個demo模板

再建立一個新的 Pen 編輯器，用來做爲某些 demo 的模板使用，能夠預先設置好基礎的 HTML、CSS、JS，點擊頂部的 Setting，再點擊 Template，這個 Pen 就被設置爲了模板，能夠在模板選擇下拉列表中看到。

在當前設置界面切換到 CSS JavaScript 分別將剛纔複製的通用JS和CSS庫的 Pen 地址填入底部的資源輸入框中，同時你能夠根據須要增長一些其它設置，好比像 jQuery D3 這樣的經常使用庫的 CDN，點擊保存。

四、開始第一個demo

從模板選擇下拉列表中選擇你須要的模板，立刻就會生成一個跟模板如出一轍的 Pen 編輯器，接下來就是你盡情寫 Demo 的時間，最後不要忘了把寫好的 Demo 加入到以前建立的 Demo主頁

五、Fork一個demo

若是以爲其它人的 Demo 寫的不錯，能夠點擊 Fork 變成本身的，或者是想複製一下本身以前寫的 Demo，Fork 一下就是一個新的 Demo

六、嵌入demo到博客

能夠把寫好的 Demo 嵌入到任何 WordPress 或者其它任何支持 HTML 插入的博客或平臺，在 Pen 編輯器底部選擇 Embed，在打開彈層裏底部會有4種嵌入方式，我比較推薦使用 Prefill Embed，好處在於它既能夠直接預覽當前保存在 CodePen 上的代碼，也能夠在嵌入的位置修改顯示內容。