我的博客园美化

Posted MeloJun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的博客园美化相关的知识,希望对你有一定的参考价值。

有小伙伴问到我的博客园皮肤具体是怎么配置的,于是有了这篇博客hhh

配置参考

https://www.yuque.com/awescnb

使用的是awescnb中的reacg皮肤

效果体验

https://www.cnblogs.com/melojun/

设置博客皮肤为Custom

页面定制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;
}
}

页首

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

页脚(需要自定义修改)

音乐

获取音乐链接以及歌词:https://music.liuzhijin.cn/

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    theme: {
      name: \'reacg\',
      avatar: "https://pic.cnblogs.com/avatar/2334298/20210317231420.png",
      color: "#B0C4DE",
    },
    //音乐
    musicPlayer: {
        enable: true,
        autoplay: false,
        lrc: {
            enable: false,        // 启用歌词
            type: 1,             // 歌词类型  1 -> 字符串 3 -> url
            color: \'#10ac84\',    // 颜色
        },
        audio: [
            {	
              	//显示出来的名字
                name: \'糸守に東京に\',
              	//作者
                artist: \'SimorE\',
              	//此处要用上边的网址去获取链接
                url:
                    \'http://music.163.com/song/media/outer/url?id=454710238.mp3\',
                //音乐的封面图,此处用了自己的图床
              	cover:
                    \'https://i.loli.net/2021/10/28/JszYXB3M6geZpEi.jpg\',
                //歌词(同样在上边的网址去获取)
                //lrc:
                   // "[ti:糸守に東京に][ar:SimorE][al:Σ][by:SimorE][00:00.000] 作曲 : SimorE[00:00.008] 作词 : SimorE[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]",
            },
        ],
    },
    //背景图片或颜色
    bodyBackground: {
        enable: true,
        // value:
        // \'white\',
        // value:
        // \'https://i.loli.net/2021/10/27/42SXrEV8ZDBGkpv.png\',
        //街道
        value:
        \'https://i.loli.net/2021/10/27/gMf5Fd9DO6tsNu4.jpg\',
        // value:
        // \'https://gitee.com/melo-jun/resource-pool/blob/master/img/street.png\',
        opacity: 0.89,
        repeat: false,
    },
    //介绍签名
    signature: {
        enable: true,
        contents: [
        "软件工程卓越班大二在读生,目前偏向于后台开发,兼顾课内知识,期待在大学期间,可以积累更多在后台开发道路上走得更远的资本!<b style=\'color:#ff6b81\'></b>",
        "<b>

关于此博客园及其美化

我的美化是从西窗夜雨\\(dalao\\)那里拿来二次开发的.
而这位\\(dalao\\)是这份美化的源头:自为风月马前卒.
我拿来之后修改了页首的部分参数,更换了所有的图片与链接/按钮.
同时去掉了一些本人认为意义不大的美化,所以我的博客看起来要相对简约一些.
我对自己的美化给出的\\(label\\)\\(Simple\\:and\\:light\\).喜欢的小伙伴可以通过\\(QQ\\)私信或在本帖下评论索要.
当然也可以去找两位源头——终极源头和直接源头.至于博文嘛...我只能说博主水平不高...确实⑧太行.
\\(So\\:much\\:for\\:this.\\)

以上是关于我的博客园美化的主要内容,如果未能解决你的问题,请参考以下文章

博客园细节美化,打磨

[美化] 博客园美化历程

博客园美化阅读模式

博客园美化博客随笔目录

关于此博客园及其美化

博客园个人界面美化(初入博客园)