一. 概述

基于 vite 和 webpack 5，构建、安装、切换博客园皮肤

源码地址：https://gitee.com/guangzan/awescnb

经常浏览博客园，看到别人的博客非常酷炫，所以也想定义一个酷炫的页面，但是发现自己的前端 css 水平太差，只会修改博客园的字体大小和颜色，百度了一下相关的文档，找到了 awescnb 这个开源仓库，能够满足我的需求，接下来我将记录一下自己使用 awescnb 构建博客园皮肤的过程，更多详细的配置可以查看文章后面的参考文档。

下面是我使用 awescnb 构建的博客园：

二. 使用Awescnb安装博客园皮肤

打开你的博客首页 -> 管理 -> 设置

设置博客皮肤为 Custom ，渲染引擎选择 highlight.js，取消勾选显示行号，主题样式选择默认的 cnblogs

复制如下代码粘贴到【页面定制 CSS】并禁用默认 CSS 样式

#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}

复制如下代码粘贴到【页首 HTML】

<div id="loading"><div class="loader-inner"></div></div>

复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）。

<!-- @format --><script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>const opts = {// 基本配置theme: {name: 'reacg',color: '#88b8f5',title: '',avatar: 'https://gitee.com/peterwd/pic-oss/raw/master/image/202112031032364.jpeg',favicon: 'https://gitee.com/peterwd/pic-oss/raw/master/image/202112031032364.jpeg',headerBackground: 'https://api.uomg.com/api/rand.avatar',log: false,},// 代码高亮highLight: {enable: true,},// 代码行号lineNumbers: {enable: true,},// 码云图标gitee: {enable: true,url: 'https://gitee.com/peterwd',},// 图片灯箱imagebox: {enable: true,},// 文章目录catalog: {enable: true,},// 右下角按钮组tools: {enable: true,},// live2d模型live2d: {enable: true,model: 'haru-01',},// 点击特效click: {enable: true,},// 评论输入框表情emoji: {enable: true,},// 暗色模式darkMode: {enable: true,autoDark: false,autoLight: false,},// 音乐播放器musicPlayer: {enable: true,page: 'all',agent: 'pc',autoplay: false,volume: 0.4,lrc: {enable: true, // 启用歌词type: 1, // 1 -> 字符串歌词 3 -> url 歌词color: '', // 颜色},audio: [{name: '不要说话',artist: 'REOL',url: 'http://music.163.com/song/media/outer/url?id=25906124.mp3',cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',lrc: ``,},{name: '这世界那么多人',artist: 'REOL',url: 'http://music.163.com/song/media/outer/url?id=1842025914.mp3',cover: 'https://gitee.com/peterwd/pic-oss/raw/master/image/202112031124807.jpeg',lrc: ``,},{name: '盛夏的果实',artist: 'REOL',url: 'http://music.163.com/song/media/outer/url?id=277382.mp3',cover: 'https://gitee.com/peterwd/pic-oss/raw/master/image/202112031128356.jpg',lrc: ``,},],},// 随笔头图postTopimage: {enable: true,},// 随笔尾图postBottomimage: {enable: true,},// 打赏二维码donation: {enable: false,qrcodes: [],},// 个性签名signature: {enable: false,contents: [],},// 侧边栏二维码qrcode: {enable: false,img: '',desc: '',},// 随笔页尾部签名postSignature: {enable: true,content: [],licenseName: '',licenseLink: '',},// 背景图片或颜色bodyBackground: {enable: true,value: '#88b8f5',opacity: 1,repeat: false,},// 自定义链接链接links: [{name: '自定义链接',link: '',},],}$.awesCnb(opts)
</script>

点击保存，进入你的博客查看效果。

参考文档

https://www.yuque.com/awescnb/user/tmpomo

使用Awescnb构建酷炫的博客园皮肤相关推荐

详谈如何定制自己的博客园皮肤
前言最近,有很多博客园的朋友给我留言或私信,询问我的博客背景是如何做的. 不是我敝帚自珍,而是由于内容较多,一一回复实在是太费劲.没有及时答复的朋友,请见谅. 我在这里做一次集中式分享,如果有喜欢的 ...
详谈如何定制自己的博客园皮肤【转】
转自:http://www.cnblogs.com/jingmoxukong/p/7826982.html 目录前言 Quickstart 定制博客园 CSS 的原理页面定制CSS代码博客侧边栏 ...
分享一款博客园皮肤及其解决方案
分享一款博客园皮肤及其解决方案参考文章: (1)分享一款博客园皮肤及其解决方案 (2)https://www.cnblogs.com/vvjiang/p/8655963.html 备忘一下.
[aaronyang]分享我的博客园皮肤代码
我的皮肤不好看,你打我.. 绝对感觉醉好用醉好的博客园皮肤,皮肤都给了,100块都不给我~ 在博客园后台里面:有个设置选项,打开它第一步:给你的博客去个主标题和副标题第二步:选择博客基础皮肤,并勾 ...
设计精美的博客园皮肤
1.为了使设计的博客园不出问题需要将博客园选项中的侧边栏控件-公告勾选 2.在设置里的CSS代码中输入博主的设置,勾选禁用模板默认CSS @keyframes spin3D {from {transf ...
一个（伪）MaterialDesign风格的博客园皮肤
皮肤长什么样,不用我说,相信各位点进来的看官都能看得一清二楚. 有关其他细节呢,也欢迎各位在我博客里逛逛,帮忙挑挑刺,提提建议. 由于水平有限,暂没能用CSS处理博客园的代码高亮字体,实在是有些遗憾. ...
新sakura博客园皮肤配置,NewSakura
CNblogs-Theme-NewSakura 基于Sakura美化方案改造的博客园样式:NewSakura 如使用了本样式,请给个Star. 文章目录 CNblogs-Theme-NewSakura ...
自定义博客园皮肤：暗色流体响应式布局
博客园的皮肤模板虽然有100多套,但我需要的作品却没几套,从布局上看,大多是固定布局,有的使用表格布局,有的将侧边栏在HTML页面的代码顺序放在主内容的前面.这些布局方式不利于页面缩放和不同屏幕尺寸与 ...
超好看的博客园皮肤 Sakura~
(｡･∀･)ﾉﾞ嗨,我的博客又更新了! 点这儿点这儿,传送门吖~(现在不一定是这个皮肤了,不过你们可以看看下面的'参考') 注:网页有时候要刷新一遍才能显示出来哦,不知道为啥

使用Awescnb构建酷炫的博客园皮肤

一. 概述

二. 使用Awescnb安装博客园皮肤

使用Awescnb构建酷炫的博客园皮肤相关推荐

最新文章

热门文章