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

一、前言

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

二、首页主题预览

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

三、功能目录

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

四、主题部署

1、前期准备工作

• 下载主题安装包

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

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

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

2、开始部署

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

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

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

五、基本修改

1、main.js的基本修改

• 修改Text文本（这里我已修改过）

  topInfo: {
  	title: 'Welcom MyBlog',
      text: '如果不能成为她心中的盖世英雄，那就努力变成自己仰慕的角色吧',
    }
  

• 修改导航栏，把地址改成自己的，或改为其他模块

  $("#navList").append('
  友链
  赞赏
  关于
  ');
  

• 菜单子目录设置，菜单悬浮触发的菜单子目录，在这里也可以按自己的想法修改

  let guanyu = '
  ' +
  					'
   我？
  ' +
  					'
   统计
  ' +
  					'
   监控
  ' +
  					'
   主题
  ' +
  					'
  ';
  			$('#blog_nav_myguanyu').after(guanyu);
  

2、脚本设置

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

六、音乐播放器

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

七、博客logo

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

var title = '
' +
					'' +
					'' +
					'ふじさんの雪' +
					'富士的雪' +
					'
'
			$('body').prepend(title);

写在最后

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

都看到最后了，别忘了点个加推荐噢！！