用 webpack 玩转博客园 ⛷
前置
自定义博客园样式需要一下几部分
- 页面定制 CSS 代码
- 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码）
- 页首 HTML 代码
- 页脚 HTML 代码
你可能不熟悉 页首 HTML 代码 ，可以在此处放入一个 loading，因为页面加载时会最先加载这部分。总之，页面定制 CSS 代码 和 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码） 是最重要的两部分。
方式
自定义你的皮肤可以使用下面这几种方式：
css in js
通过 webpack 我们可以实现将 css 打包到 js， 样式由 js 动态添加。使用时只需要这样：
- 引入打包好的 js
- 给你的皮肤添加一些配置（可选的）
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
// 给你的皮肤添加一些配置
})
</script>
如果不暴露配置直接引入一个 js 就好了，是不是非常简单？
缺点
页面不能及时渲染 css，因为 css in js，但是我们可以加个 loading 解决。
版权声明：本文为guangzan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。