yellowpencil官网
https://yellowpencil.waspthemes.com/
tips: 在官网中的Docs中，已经简短的不能再简短了（不详细）。
原生的限制[弱]
yellowpencil原版有几点限制：
1、平台依赖。yellowpencil是在wordpress平台下部署的，而wordpress是基于php的。我们也可以在后台看到yellowpencil的源码（php版的）。免费版yellowpencil部署步骤见： https://yellowpencil.waspthemes.com/docs/how-to-install-yellowpencil-lite/ 。
2、对同源网站存在稍许的bug,在customize another page中，有时候同源网站被判断为无效url。
蛋哥的贡献[强]
1、解放了yellowpencil对平台的依赖，使其能自由部署。
2、修复了customize another page中的一些bug，消除对同源站点的限制。
install(部署)
文件资源见：https://download.csdn.net/download/qqhanhan/12082916
把文件解压后，直接部署在网站后端即可，因为整套文件只包含js、css等静态文件。
快速上手
比如，我把yellowpenci直接部署在wamp服务器的yellowpencil目录下。并在模板之间下载了一个模板例子，部署在loot-4-Nava文件夹下。
访问链接：http://localhost/yellowpencil/index.html?href=localhost/loot-4-Nava 即可对loot-4-Nava进行编辑。
其中http://localhost/yellowpencil/index.html是整个编辑器的入口网址（需要根据自己的需要进行相应的修改）。localhost/loot-4-Nava是需要编辑css的目标文件。
由于同源安全问题，蛋哥在这个版本暂未对异源网址开放权限。
页面效果
如何使用生成的css文件
编辑得到到满意效果后，如何使用生成的css。
- css中 .yp_onscreen删掉；
- 如果对页面的animation进行了一些编辑操作，除了需要在目标页面中写入上面生成的css，还需要引入上面压缩包中library/css/animate.css 。如上图在css中的L2~L6行是对动画效果的描述。由于它使用了animation-name的自定义的‘“pop”名字，而此animation的描述效果在library/css/animate.css中。
注意
实际操作中需要对选择的element进行点击操作，才会出现右侧的panel内容。此时可以对element进行拖拽调整位置和边距。
详细的操作（举一个例子）
持续更新中。。。[奋斗]