快速安装
文档迁移通知
📑 感谢大家的支持,当前文档已经不再保持更新。原因是,为了不影响访问速度,我将该文档托管在码云上。每次更新文档我都需要重新构建文档项目并手动更新码云 Pages 服务。这样效率是不够的,现在已经将将所有文档相关的内容托管到在线文档-语雀了。请务必访问新的文档,感谢理解! 点击查看
你好,新朋友!
🎉 仅需几步就能在您的博客园快速安装皮肤,下方提供了三种方式,推荐您使用 方式一 进行安装,您也可以查看下文所有安装方式。
看视频
🎞 如果您感到力不从心,我还精心制作了视频教程供您 参考。
发现无法进入博客了
👾 当您编辑 JavaScript 出现语法错误时,可能无法进入博客了。不用担心,随时都可以点击此处进入博客后台页面,重新配置。
方式一
特点
- 推荐的方式
- 支持自动升级
- 支持切换项目中已经集成的所有皮肤
步骤
1.您的博客首页 -> 管理 -> 设置
2.设置博客默认皮肤为 Custom
3.使用 loading
复制如下 html 粘贴到 页首 HTML.
复制如下 css 粘贴到 页面定制 CSS
4. 禁用默认 css 样式
5.复制如下 js 粘贴到 博客侧边栏公告 (如没开通 js 权限请先开通,理由填适度美化博客)。
6.保存.
7.进入您的博客查看效果
方式二
查看
特点
- 速度相比第一种方式稍快
- 支持在线升级
- 不支持全局皮肤切换
步骤
1.您的博客首页 -> 管理 -> 设置
2.设置博客默认皮肤为 Custom
3.使用 loading
复制如下 html 粘贴到 页首 HTML.
复制如下 css 粘贴到 页面定制 CSS
4. 禁用默认 css 样式
5.复制如下 js 粘贴到 博客侧边栏公告 如没开通 js 权限请先开通.
请先选择一个您喜欢的皮肤,比如 reacg。
6.保存.
7.进入您的博客查看效果
方式三
查看
特点
- 速度最快
- 不需要使用 loading
- 不支持在线升级
- 不支持全局皮肤切换
步骤
请先选择一个您喜欢的皮肤,比如 reacg。
1.您的博客首页 -> 管理 -> 设置
2.设置博客默认皮肤为 Custom
3.复制项目awescnb /dist/ext/reacg.css 粘贴到 页面定制 CSS
4. 禁用默认 css 样式
5.复制项目awescnb /dist/ext/reacg.js, 如没开通 js 权限请先开通.
或者直接使用链接:
6.保存
7.进入您的博客查看效果
备选 loading
tip
您可以使用任何 loading,只需要保证 loading 的最外层盒子的选择器为 id="loading"
。下面提供了一些优秀的 loading 供您选择。
每个 loading 都包含一段 CSS 和一段 HTML:
- 复制 html 替换 页首 HTML 中的内容
- 复制 css 替换 页面定制 CSS 中的内容