博客园主题美化 最详细的美化过程

作者: 晋座

更新时间:2022-03-26 13:40:04

1090 阅读

一、前言

很多小伙伴是不是也和我一样,想拥有一个自定义样式的博客网站呀!看到这篇随笔你就能随意地定义自己的博客网了,拥有一个完美的主题博客网,详细教程往下看。

二、首页主题预览

image

image

想看详细主题样式可以进首页看看:https://www.cnblogs.com/cyy22321-blog/

三、功能目录

  • 首页
  • 导航标题
  • 其他网站链接
  • 音乐播放器
  • 自动生成文章目录

四、主题部署

1、前期准备工作

  • 下载主题安装包

    下载地址:https://link.zhihu.com/?target=https%3A//files.cnblogs.com/files/qimuz/Sakura.zip

  • 解压安装包,打开解压后得到的文件,如下:

image

  • 申请开通js权限(我这里已经开通),并把博客皮肤选为Custom

image

2、开始部署

  • 引入样式,把page.css中的代码复制粘贴到博客园后台

image

  • 复制main.js文件中代码,放在博客侧边栏公告中

  • 复制foot.html文件中代码,放在博客页脚中

五、基本修改

1、main.js的基本修改

  • 修改Text文本(这里我已修改过)

    topInfo: {
    	title: 'Welcom MyBlog',
        text: '如果不能成为她心中的盖世英雄,那就努力变成自己仰慕的角色吧',
      }
    
  • 修改导航栏,把地址改成自己的,或改为其他模块

    $("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/zouwangblog/articles/11177049.html">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zouwangblog/articles/11340077.html">赞赏</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');
    
  • 菜单子目录设置,菜单悬浮触发的菜单子目录,在这里也可以按自己的想法修改

    let guanyu = '<ul class="sub-menu">' +
    					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11157339.html "><i class="fa fa-meetup" aria-hidden="true"></i> 我?</a></li>' +
    					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11346906.html "><i class="fa fa-area-chart" aria-hidden="true"></i> 统计</a></li>' +
    					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350777.html "><i class="fa fa-heartbeat" aria-hidden="true"></i> 监控</a></li>' +
    					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350787.html"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主题</a></li>' +
    					'</ul>';
    			$('#blog_nav_myguanyu').after(guanyu);
    

2、脚本设置

为了配置方便,侧边栏里设置了一些常用参数,可根据自己的需要开启和配置

<script type="text/javascript"> 
$.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/zouwangblog/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png',
            alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png'
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://github.com/Zou-Wang'
        },
	topImg: {
		homeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190828104950450-644943924.jpg",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
					],
              notHomeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151151330-1121103170.png",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg",
					]
		},
    topInfo: {
					title: 'Hi,Toretto',
                      text: 'You got to put the past behind you before you can move on.',
					github: "https://github.com/Zou-Wang",
					weibo: "https://weibo.com/5682002748/profile?topnav=1&wvr=6&is_all=1",
					telegram: "",
					music: "https://music.163.com/#/user/home?id=436757779",
					twitter: "",
					zhihu:"https://www.zhihu.com/people/zouwang/activities",
					mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=KlBFX11LRE0SGBlqW1sESUVH",
				}
    });
</script>

六、音乐播放器

关于音乐播放器就直接用作者的吧,他用的是网易云的外链接播放器,现在网易云音乐已经不支持使用了,但是作者的可以用——亲测

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

左上角的logo,需要去main.js中修改,可以改成自己的昵称等

var title = '<div class="site-branding">' +
					'<span class="logolink moe-mashiro">' +
					'<a href="https://www.cnblogs.com/zouwangblog/" alt="富士的雪">' +
					'<ruby><span class="sakuraso">ふじさん</span><span class="no">の</span><span class="shironeko">雪</span>' +
					'<rt class="chinese-font">富士的雪</rt></ruby></a></span>' +
					'</div>'
			$('body').prepend(title);

写在最后

该博客网主题是参考于“不忘编码”博主的,源码中有很多地方都与自己的页面不符合,特别是导航栏部分,BUG还是蛮多的,不过都已经修复好了,如果你也遇到了同样的BUG,可以去订阅的我的博文,里面会有如何解决美化过程中的一些BUG方案。

都看到最后了,别忘了点个加推荐噢!!

版权声明:本文著作权归作者【晋座 】所有,不代表本网站立场。

侵权请联系:root_email@163.com