博客园皮肤构建工具 awescnb

🎨 Awescnb, awesome cnblog.

简介

可能许多初来乍到的新手会被博客园经典的风格劝退,或者你是一位老园友,需要为你的博客定制一些功能而不想浪费太多时间。发布这个项目的目的就是希望园友能够通过前端工程化的方式轻易地构建一个博客园皮肤。awescnb 不仅仅是一套博客园皮肤,它内部集成了几十个开箱即用的插件,以及大量的工具函数,它高度可定制,创建一个博客园皮肤从未如此简单。如果你不喜欢动手,那么没关系,可以将使用 awescnb 构建的皮肤轻松安装到你的博客。简而言之,awescnb 可以做以下几件事:

  1. 安装:在你的博客园安装这个项目中已经集成的皮肤;
  2. 切换:安装之后,体验多套皮肤无缝切换(皮肤之间共享配置);
  3. 创建:使用 awescnb 从零开始构建一个博客园皮肤;
  4. 分享:如果你已经拥有自己创建的皮肤,可以轻松迁移到 awescnb,享受现代前端工具链带来的好处。

文档

起初我使用 vuepress 搭建了在线文档,但它在本地开发时问题诸多。接着将文档迁移到了 docusaurus。为了可访问性等因素,文档部署在 Gitee Pages 服务上。带来的问题是,每次更新文档都意味着需要构建文档并推送到远程仓库,再更新 Pages 服务,这花费我一部分不必要的一些时间。现在,已将文档全部迁移至语雀在线文档。如果你希望使用 awescnb 构建一个博客园皮肤或者将皮肤安装到你的博客,请 点击这里 以查看文档 📑。旧版文档中,在醒目的位置也添加了语雀链接,感谢理解。

视频教程

今天周末,录制了一个简单视频教程。虽然我在文档里有写,但希望通过这个简短的视频帮你更容易上手。视频从博客皮肤的安装、切换、从零开始制作三个方面简单展开。如果你是后端开发人员,你可能会对视频中用到的命令感到疑惑,只需要下载node并安装到你的电脑,就拥有了一个叫做 NPM 的东西(包管理器工具),而视频中使用的 npm xx 命令正是来源于此。

最后

起初我只是用 gulp(前端构建工具) 简单制作了一个博客园皮肤供自己使用,后来得到越来越多的园友的支持,遂用 webpack 将它重构并和交流群里的小伙伴一起完善。现在它已经能够完全胜任当前的工作了,enjoy!今后我不再花费精力发布关于它的介绍随笔,但会保证本项目的持续更新。

本项目不接受捐助,感谢支持!有任何建议或者问题都可以到 QQ 交流群(541802647)里交流或者在项目仓库提个 issue。再次感谢所有提供建议的园友。💗

相关链接

posted @ 2020-05-31 19:54  guangzan  阅读(6307)  评论(139编辑  收藏  举报