BNTang

美化博客園樣式

主題官方文檔：https://guangzan.gitee.io/awescnb-docs/

快速美化

接下來(lái)開始由我來(lái)給你們講解

首先需要切換博客園的皮膚，切換方式如下圖，選擇設(shè)置下方我框出來(lái)的就是切換博客園提供的皮膚的位置：

然后按照文檔中講解的復(fù)制 JS、CSS、HTML，如下是 CSS 樣式代碼，復(fù)制到的位置我下面用粗體標(biāo)記的

頁(yè)面定制 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}}

博客側(cè)邊欄公告（支持HTML代碼）（支持 JS 代碼）

如下圖中的 √ 需要打上

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    // 默認(rèn)啟用皮膚 'reacg',
    // 在這里寫入配置
    // 什么都不寫代表全部使用默認(rèn)配置
  })
</script>

頁(yè)首 HTML 代碼

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

細(xì)致美化

其實(shí)也就是切換主題方式如下：

我比較喜歡的是 geek 這款主題其他的主題你自己按照官方文檔進(jìn)行修改即可

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

我的最終代碼如下，如果你需要我來(lái)一一配置好給你參考可以私信我給我發(fā)消息即可

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

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
    $.awesCnb({
        // 配置主題
        theme: {
            // 需要切換的主題名稱, 要使用的皮膚主題名稱
            name: 'geek',
            // 全局主題色 defaultValue=跟隨皮膚
            // color: '',
            // 網(wǎng)站標(biāo)題
            title: 'BNTang',
            // 頭像圖片鏈接
            avatar: 'https://images.cnblogs.com/cnblogs_com/BNTang/1812554/t_20092711144720180414165942.jpg',
            // 網(wǎng)站圖標(biāo)
            favicon: 'https://images.cnblogs.com/cnblogs_com/BNTang/1812554/t_200927111234BNTangIcon.png',
            // 頭部背景，圖片鏈接
            headerBackground: 'https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp'
        },
        // 畫筆
        notation: {
            enable: true,
        },
        // 音樂(lè)播放器
        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]ほら結(jié)局歌詞なんかどうだっていい[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]目の前 広がる現(xiàn)実世界がまた歪んだ[01:46.30]何度リセットしても[01:47.57]僕は僕以外の誰(shuí)かには生まれ変われない[01:51.88]「そんなの知ってるよ」[01:53.41]気になるあの子の噂話も[01:56.52]シニカル標(biāo)的は次の速報(bào)[01:59.75][02:00.22]麻痺しちゃってるこっからエスケープ[02:03.57]遠(yuǎn)く遠(yuǎn)くまで行けるよ[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]本當(dāng)のことなんか全部神様も知らない[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]",
                },
            ],
        },
        // 頭部進(jìn)度條
        topProgress: {
            enable: false,
            page: 'all',
            agent: 'pc',
            background: '#FFB3CC',
            height: '5px',
        },
        // 圖片燈箱
        imagebox: {
            // 開啟
            enable: true,
        },
        // 暗色模式
        darkMode: {
            enable: true,
            autoDark: true,
            autoLight: true
        },
        // 個(gè)性簽名
        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,
            // 是否自動(dòng)展開
            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: 'http://www.rzrgm.cn',
            },
        ],
    })
</script>

posted @ 2020-10-06 10:33 BNTang 閱讀(349) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部