利用 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 上的代码，也能够在嵌入的位置修改显示内容。

至此，属于你我的的Demo演示平台就搭建好了。

CodePen 上还有不少好用的实用的功能等着你来发现，文章的最后发一个彩蛋，你知道这么多实用的资源在哪能够找到吗？

I'm Gafish 原创文章，首发于个人博客，内容若有错误，还望指正，谢谢您的阅读。