博客园二次元主题——Sakura

碎碎念

嗯，时隔多久也记不清了，我又回来了，总算是忙里偷闲把这篇文章写出来，有人要过很多次我的博客园美化方案，但是实在是忙啊，也因为我的前台技术不好，代码bug很多，所以也有点不想把这个美化发出来，但是因为个人博客搭建完成了，以后主要精力还是在那边，所以就成全大家。本博客美化样式风格来自于樱花庄的白猫写的Sakura美化方案，我按照他的风格在博客园写了个几乎是一样的。这是我写过的第三篇美化文章了，（也是爱折腾），每一篇都是不同地风格，随爱好获取吧，好了不念叨了进入正题。

功能简介

• 首页及随笔页头图随机切换
• 其他网站链接
• 音乐播放器
• 看板娘
• 图片灯箱
• 自动生成文章目录
• 导航菜单子目录
• 滚动进度条

主题预览

以下图片分别是，首页，随笔列表页，随笔页，文章页。

主题部署

一键部署

如果你想快速搭建出与本博客一样的样式， 请看下面这句说明，当然前提是得有js权限

如果将部署和本博客一样的主题，直接下载整个主题，下载地址在文末。把css、侧边栏、页脚，代码粘贴的你的博客后台，然后对应的改下文件链接地址 就行。下面的内容是为了个性化定制而写，如果你想个性化定制博客，请往下看。

基本部署

• 前提：已经开通js权限

• 引入样式
  把page.css中的代码粘贴到自定义css中

• 引入文件
  放在侧边栏中

• 选择模板
  按照图片内容设置模板
  

• 脚本设置

  为了配置方便，我在侧边栏里设置了一些常用参数，可根据下表选择需要开启和配置

  音乐播放器

  相信看过我以前文章的同学对这个一定不会陌生，怎么获取id我也不在这里罗嗦了，可以去找我以前的文章。获取到id之后把下面的id替换掉就可以了

  博客logo

  左上角的logo，修改文字需要到main.js里找到以下代码，替换文字即可，如果不喜欢可以注掉（我费了很大劲竟然敢不喜欢??）。

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

  页面滚动进度条

  页面滚动的时候会在顶部出现一个橙色的进度条，修改颜色到页面css里，找到以下代码修改background

  .scrollCls {
      position: fixed;
      top: 0;
      height: 3px;
      background: orange;
      transiton-property: width,background;
      transition-duration: 1s,1s;
      z-index: 99999;
  }
  

  首页个人信息

  • 名称
    在侧边栏配置中修改topInfo里的title

  • 座右铭
    在侧边栏配置中修改topInfo里的text

  • 其他网站链接
    在侧边栏配置中修改topInfo里对应的链接地址，这里邮箱使用的是QQ邮箱的邮我，可以在QQ邮箱里配置。

  顶部菜单设置

  将以下链接替换成自己的文章或者随笔地址，以下代码在main.js中

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

  • 菜单icon设置
    就是菜单前的小图标，感兴趣的可以去了解一下Font awesome

    $('#blog_nav_myhome').prepend('');
    			$('#blog_nav_contact').prepend('');
    			$('#blog_nav_rss').prepend('');
    			$('#blog_nav_admin').prepend('');
    			$('#blog_nav_myyoulian').prepend('');
    			$('#blog_nav_myzanshang').prepend('');
    			$('#blog_nav_myguanyu').prepend('');
    

  • 菜单子目录设置

    菜单悬浮触发的菜单子目录，这里我在关于菜单下添加了子目录

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

  下载地址

  • https://github.com/Zou-Wang/CNblogs-Theme-Sakura
  • 国内镜像（下载慢的使用这个）
  • 给个Star呀?

  写在最后

  技术是无私的，非常不舍得把我这个美化分享了出去，毕竟以我的前端技术构建这么个样式还是很费劲的，花了很多心血，这也是我在博客园的最后一篇美化文章了，毕竟太浪费时间，以后精力还是放在个人网站上，博客还有很多小功能在这里就不叙述了，比如我比较喜欢的小吊死鬼和首页的波浪，希望采用这个样式的你能够多多支持关注博主（关注博主请移步），有什么问题都可以在下方留言，我也会及时为大家解决。