美化博客园样式

主题官方文档：https://guangzan.gitee.io/awescnb-docs/

快速美化

接下来开始由我来给你们讲解

首先需要切换博客园的皮肤，切换方式如下图，选择设置下方我框出来的就是切换博客园提供的皮肤的位置：

然后按照文档中讲解的复制 JS、CSS、HTML，如下是 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 .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代码）（支持 JS 代码）

如下图中的 √ 需要打上

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    // 默认启用皮肤 'reacg',
    // 在这里写入配置
    // 什么都不写代表全部使用默认配置
  })
</script>

页首 HTML 代码

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

细致美化

其实也就是切换主题方式如下：

我比较喜欢的是 geek 这款主题其他的主题你自己按照官方文档进行修改即可

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
    $.awesCnb({
        // 配置主题
        theme: {
            // 需要切换的主题名称
            name: 'geek',
        },
    })
</script>

我的最终代码如下，如果你需要我来一一配置好给你参考可以私信我给我发消息即可

如果你还需要配置其他的自行参考官方文档即可：https://guangzan.gitee.io/awescnb-docs/options

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
    $.awesCnb({
        // 配置主题
        theme: {
            // 需要切换的主题名称, 要使用的皮肤主题名称
            name: 'geek',
            // 全局主题色 defaultValue=跟随皮肤
            // color: '',
            // 网站标题
            title: 'BNTang',
            // 头像图片链接
            avatar: 'https://images.cnblogs.com/cnblogs_com/BNTang/1812554/t_20092711144720180414165942.jpg',
            // 网站图标
            favicon: 'https://images.cnblogs.com/cnblogs_com/BNTang/1812554/t_200927111234BNTangIcon.png',
            // 头部背景，图片链接
            headerBackground: 'https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp'
        },
        // 画笔
        notation: {
            enable: true,
        },
        // 音乐播放器
        musicPlayer: {
            enable: true,
            autoplay: false,
            lrc: {
                enable: true,
                type: 1,
                color: '#10ac84',
            },
            audio: [
                {
                    name: '404 not found',
                    artist: 'REOL',
                    url: 'http://music.163.com/song/media/outer/url?id=436016480.mp3',
                    cover: 'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
                    lrc: "[ti:404 not found][ar:REOL][al:Σ][by:菜籽酱][00:00.000] 作曲 : Reol[00:00.008] 作词 : Reol[00:00.25][00:01.69]fade away...do over again...[00:13.35][00:13.76]歌い始めの一文字目 いつも迷ってる[00:18.57]どうせとりとめのないことだけど[00:22.85]伝わらなきゃもっと意味がない[00:26.84][00:27.38]どうしたってこんなに複雑なのに[00:30.75]噛み砕いてやらなきゃ伝わらない[00:34.18]ほら結局歌詞なんかどうだっていい[00:37.64]僕の音楽なんかこの世になくたっていいんだよ[00:41.32][00:54.74]Everybody don't know why.[00:58.20]Everybody don't know much.[01:01.56]僕は気にしない 君は気付かない[01:04.99]何処にももういないいない[01:08.17][01:08.59]Everybody don't know why.[01:11.86]Everybody don't know much.[01:15.25]忘れていく 忘れられていく[01:18.61]We don't know,We don't know.[01:22.86][01:39.61]目の前 広がる現実世界がまた歪んだ[01:46.30]何度リセットしても[01:47.57]僕は僕以外の誰かには生まれ変われない[01:51.88]「そんなの知ってるよ」[01:53.41]気になるあの子の噂話も[01:56.52]シニカル標的は次の速報[01:59.75][02:00.22]麻痺しちゃってるこっからエスケープ[02:03.57]遠く遠くまで行けるよ[02:06.71][02:07.15]安定なんてない 不安定な世界[02:14.04]安定なんてない きっと明日には忘れるよ[02:20.52][02:22.35]fade away...do over again...[02:33.62][02:34.41]そうだ世界はどこかがいつも嘘くさい[02:37.51]綺麗事だけじゃ大事な人たちすら守れない[02:41.06]くだらない 僕らみんなどこか狂ってるみたい[02:44.48]本当のことなんか全部神様も知らない[02:48.56][03:03.39]Everybody don't know why.[03:06.80]Everybody don't know much.[03:10.17]僕は気にしない 君は気付かない[03:13.62]何処にももういないいない[03:17.02][03:17.46]Everybody don't know why.[03:20.49]Everybody don't know much.[03:23.88]忘れていく 忘れられていく[03:27.18]We don't know,We don't know.[03:29.83]",
                },
            ],
        },
        // 头部进度条
        topProgress: {
            enable: false,
            page: 'all',
            agent: 'pc',
            background: '#FFB3CC',
            height: '5px',
        },
        // 图片灯箱
        imagebox: {
            // 开启
            enable: true,
        },
        // 暗色模式
        darkMode: {
            enable: true,
            autoDark: true,
            autoLight: true
        },
        // 个性签名
        signature: {
            enable: true,
            contents: [
                "🖖 I’m a system architecture developer. <b style='color:#ff6b81'>BNTang</b>.",
                "<b>console.log(🍺);</b>",
            ],
        },
        // 代码高亮
        highLight: {
            dark: 'github',
            light: 'github',
        },
        // 按钮工具
        tools: {
            // 是否启用
            enable: true,
            // 是否自动展开
            initialOpen: false,
        },
        // 弹幕
        barrage: {
            enable: true,
            opacity: 0.6,
            colors: [],
            barrages: [],
            indexBarrages: [],
            postPageBarrages: [],
        },
        // 自定义链接
        links: [
            {
                name: 'Blog',
                link: 'https://xiaohuihuit.github.io',
            },
            {
                name: 'Gitee',
                link: 'https://gitee.com/tang_ying_hao',
            },
            {
                name: 'GitLab',
                link: 'https://gitlab.com/Jone_Tang',
            },
            {
                name: 'GitHub',
                link: 'https://github.com/XiaoHuiHuiT',
            },
            {
                name: 'Cnblogs',
                link: 'https://www.cnblogs.com',
            },
        ],
    })
</script>

posted @ 2020-10-06 10:33 BNTang 阅读(313) 评论(0) 编辑收藏举报

刷新页面返回顶部