新sakura博客园皮肤配置,NewSakura

阳光穿透心脏的1/2处 2022-11-27 00:51 57阅读 0赞

## CNblogs-Theme-NewSakura ##

*  基于Sakura美化方案改造的博客园样式：NewSakura
 *  如使用了本样式，请给个Star。

### 文章目录 ###

*   *  CNblogs-Theme-NewSakura
     *  项目结构
     *  功能简介
     *  主题预览
     *  主题部署
     *   *  基本部署
     *  个性化定制
     *   *  新增暗黑白昼模式
         *  菜单新增分类、友链、博主、归档栏
         *  首页及文章大图
         *  随笔预览图
         *  回顶部钩子
         *  公告
         *  看板娘
         *  音乐播放器
         *  博客logo
         *  页面滚动进度条
         *  首页个人信息
     *  写在最后
     *  微信公众平台
     *  项目地址

## 项目结构 ##

CNblogs-Theme-NewSakura
    |
    ├─ CNblogs-Theme-NewSakura
    │    ├─ foot.html 页脚代码
    │    ├─ main.css 自定义css代码
    │    ├─ main.js  引用js
    │    └─ sidebar.html 侧边栏代码
    ├─ README.md
    └─ img
           ├─ 效果1.JPG
           └─ 效果2.JPG

有js权限，期间将侧边栏、页脚和css代码粘贴进博客园设置内即可！代码文件内有相应注释，根据它修改即可。

## 功能简介 ##

依次分重点：

*  新增暗黑白昼模式，白天暗黑刺激
 *  首页及随笔页头图随机切换
 *  音乐播放器，使用Aplayer插件
 *  看板娘，原先的主题已失效，现已修改
 *  自动生成文章目录，基本功能
 *  导航菜单子目录，照葫芦画瓢添加
 *  图片灯箱、滚动进度条
 *  文章打赏
 *  鼠标点击粒子效果
 *  其他网站链接，非必需
 *  将首页底部不必要的滚动条去掉
 *  修改了文章评论区的框框大小，原先的过大变形
 *  暗黑白昼切换不影响评论区，暗黑字白，白昼字黑
 *  修改了分类页面样式，为了在暗黑后看的清楚美观

注意：目前Sakura还不支持响应式，所以还需大家帮忙喽！

## 主题预览 ##

![效果1][1]  
![效果2][2]

## 主题部署 ##

快速搭建出与本博客一样的样式， 请看下面这句说明，当然前提是得有js权限！部署和本博客一样的主题，请直接下载整个主题，对应的改下**文件链接地址** ，把**css**、**侧边栏**、**页脚**代码粘贴的你的博客后台就行。为了个性化定制，如果你想个性化定制博客，请往下看基本部署。

### 基本部署 ###

*  前提：已经开通`js`权限
 *  设置皮肤选择自定义custom
 *  引入样式  
    把**main.css**中的代码粘贴到自定义css中，无需个性化操作
 *  引入文件  
    放在侧边栏html文件中，本人已为你添加。建议下载该文件并上传博客园，之后只需修改样式引入即可！
    
        <script src="https://blog-static.cnblogs.com/files/coderma/main.js"></script>
 *  顶部菜单设置
    
    将以下链接替换成自己随笔地址，以下代码在`main.js`中,建议打开该文件查看并修改
    
        $("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/coderma/p/1117239.html">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/coderma/p/1133477.html">赞赏</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a></li>');
 *  菜单icon设置  
    就是菜单前的小图标，感兴趣的可以去了解一下[Font awesome][]
    
        //博客title
        		//去掉rss替换成分类
        		$('#blog_nav_rss').replaceWith('<a id="blog_nav_fenlei" class="menu" href="https://www.cnblogs.com/coderma/p/13458241.html" target="_self">分类</a>');  //可替换以下链接
        		$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu" href="https://www.cnblogs.com/coderma/p/13413494.html" target="_self">友链</a><i></i></li><li><a id="blog_nav_myarchive" class="menu" href="https://www.cnblogs.com/coderma/p/13414527.html" target="_self">归档</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" >关于</a></li>');
        		//添加标签图标
        		$('#blog_nav_sitehome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>');   //博客园
        		$('#blog_nav_myhome').prepend('<i class="fa fa-home" aria-hidden="true"></i>');				//首页
        		$('#blog_nav_newpost').prepend('<i class="fa fa-edit" aria-hidden="true"></i>');			//新随笔
        		$('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>');	//联系
        		$('#blog_nav_fenlei').prepend('<i class="fa fa-filter" aria-hidden="true"></i>');			//分类
        		$('#blog_nav_admin').prepend('<i class="fa fa-cog" aria-hidden="true"></i>');				//管理
        		$('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>');			//友链
        		$('#blog_nav_myarchive').prepend('<i class="fa fa-archive" aria-hidden="true"></i>');		//赞赏
        		$('#blog_nav_myguanyu').prepend('<i class="fa fa-universal-access" aria-hidden="true"></i>');//关于
        		//添加li内嵌ui
 *  菜单子目录设置
    
    菜单子目录，在**关于**菜单下添加了子目录,相应的样式可自行修改添加
    
        let guanyu = '<ul class="sub-menu">' +
        				'<li><a href=" " target="_self"><i class="fa fa-user-o" aria-hidden="true"></i>博主</a></li>' +   //添加关于文章链接
        				'<li><a id="blog_nav_theme" οnclick="changeTheme();" ><i class="iconfont icon-taohua" aria-hidden="true"></i> 主题</a></li>' +  //主题/暗黑白昼模式
        				'</ul>';
        		$('#blog_nav_myguanyu').after(guanyu);
 *  脚本设置
    
    为了配置方便，我在侧边栏里设置了一些常用参数，可根据下表选择需要开启和配置
    
        <script type="text/javascript"> 
          $.silence({ 
              profile: { 
                  enable: true,
                  avatar: 'https://images.cnblogs.com/cnblogs_com/coderma/1820127/o_200803093536logo.png', //头像，可修改
                  favicon: '',
                  notice: '个人博客地址：https://index.maliaoblog.cn/ 欢迎大家来踩'   //通知，可修改
              },
              catalog: { 
                  enable: true,
                  move: true,
                  index: true,
                  level1: 'h2',
                  level2: 'h3',
                  level3: 'h4',
              },
              signature: { 
                  enable: true,
                  home: 'https://www.cnblogs.com/coderma/',  //主页链接，可修改
                  license: 'CC BY 4.0',
                  link: 'https://creativecommons.org/licenses/by/4.0'
              },
              sponsor: { 
                  enable: true,
                  paypal: null,
                  wechat: '',  //赞助，可修改图片链接
                  alipay: ''
              },
              github: { 
                  enable: false,
                  color: '#fff',
                  fill: '#FF85B8',
                  link: 'https://github.com/coderxm'  //可修改
              },
            topImg: { 
          	homeTopImg: [
            "https://img2020.cnblogs.com/blog/2027366/202008/2027366-20200807133710823-1221571975.jpg",   //主页顶部图片，可修改
          				],
                    notHomeTopImg: [
            "https://img2020.cnblogs.com/blog/2027366/202008/2027366-20200807132804040-1889645361.jpg",  //可修改
          				]
          	},
            topInfo: { 
          		title: 'Hi,流浪舟',  //首页标题（可替换）
          		text: "No one choose this life for me But I don't mind it",  //首页横幅语句
          		github: "https://github.com/coderxm/",      //github(替换成相应链接)
          		weibo: "",
          		telegram: "",
          		music: "",
          		twitter: "",
          		zhihu: "",
          		mail: "",
          	}       
          });
        </script>
    
    参数说明表：
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">模块</th> 
       <th>属性</th> 
       <th>说明</th> 
       <th>类型</th> 
       <th>默认值</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">profile（基础信息）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>true</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>avatar</td> 
       <td>作者头像</td> 
       <td>String</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>favicon</td> 
       <td>网站标题图标</td> 
       <td>String</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>notice</td> 
       <td>公告</td> 
       <td>String</td> 
       <td>感谢使用该主题</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>authorName</td> 
       <td>作者姓名</td> 
       <td>String</td> 
       <td>coderxm</td> 
      </tr> 
      <tr> 
       <td align="left">catalog（博文目录）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>move</td> 
       <td>是否允许拖拽</td> 
       <td>Boolean</td> 
       <td>true</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>index</td> 
       <td>是否显示索引</td> 
       <td>Boolean</td> 
       <td>true</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>level1</td> 
       <td>一级标题</td> 
       <td>String</td> 
       <td>h2</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>level2</td> 
       <td>二级标题</td> 
       <td>String</td> 
       <td>h3</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>level3</td> 
       <td>三级标题</td> 
       <td>String</td> 
       <td>h4</td> 
      </tr> 
      <tr> 
       <td align="left">signature（博文签名）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>true</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>home</td> 
       <td>作者主页</td> 
       <td>String</td> 
       <td><a href="https://www.cnblogs.com/" rel="nofollow">https://www.cnblogs.com</a></td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>license</td> 
       <td>许可证名称</td> 
       <td>String</td> 
       <td>CC BY 4.0</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>link</td> 
       <td>许可证链接</td> 
       <td>String</td> 
       <td><a href="https://creativecommons.org/licenses/by/4.0" rel="nofollow">https://creativecommons.org/licenses/by/4.0</a></td> 
      </tr> 
      <tr> 
       <td align="left">sponsor（博文赞赏）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>paypal</td> 
       <td>PayPal 收款地址</td> 
       <td>String</td> 
       <td>null</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>alipay</td> 
       <td>支付宝收款二维码</td> 
       <td>String</td> 
       <td>null</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>wechat</td> 
       <td>微信收款二维码</td> 
       <td>String</td> 
       <td>null</td> 
      </tr> 
      <tr> 
       <td align="left">github（GitHub Corners）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>fill</td> 
       <td>背景填充色</td> 
       <td>String</td> 
       <td>[Silence Theme Color]</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>color</td> 
       <td>章鱼猫颜色</td> 
       <td>String</td> 
       <td>#fff</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>link</td> 
       <td>Github 链接</td> 
       <td>String</td> 
       <td>null</td> 
      </tr> 
      <tr> 
       <td align="left">topImg（头图）</td> 
       <td>homeTopImg</td> 
       <td>首页头图</td> 
       <td>Array</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>notHomeTopImg</td> 
       <td>文章和随笔页头图</td> 
       <td>Array</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="left">topInfo(首页头图信息)</td> 
       <td>titile</td> 
       <td>头部标题</td> 
       <td>String</td> 
       <td>Hi, 流浪舟!</td> 
      </tr> 
      <tr> 
       <td align="left"></td> 
       <td>text</td> 
       <td>横幅标题</td> 
       <td>String</td> 
       <td>No one choose this life for me But I don’t mind it</td> 
      </tr> 
     </tbody> 
    </table>

配置完成后，记得点击「保存」按钮。

## 个性化定制 ##

### 新增暗黑白昼模式 ###

开始的时候是暗黑的，在**关于**下的子菜单栏内，点击主题可切换成白昼模式。

### 菜单新增分类、友链、博主、归档栏 ###

原理简单，只需先新建随笔即可，并替换链接，点击便可跳转到相应页面。关于分类，去掉了过去的RSS，换成博客园已有的分类，同样的方法，将所有分类链接收录到某一随笔中即可，随笔链接即是分类栏链接。博主一栏写你的信息，归档类似，我相信这样的问题难不倒有大智慧的你！

### 首页及文章大图 ###

首页和随笔以及文章页的头图都是随机切换的，添加图片在侧边栏html配置中。这里类型为随笔的时候头部会显示**标题**、**头像**、**作者**、**发布时间**、**阅读数**，而类型为文章的时候只会显示标题，根据情况选择类型发布。  
请尽量选择像素1920\*1080px的高清大图，这样的话首页图片会更适合。

### 随笔预览图 ###

![预览][2]

在写随笔或者文章的时候添加摘要图片和摘要文字，**摘要文字一定要添加**，如果不添加摘要图片会给一张默认图片。

### 回顶部钩子 ###

//回到顶部特效
    	$('body').prepend(`<a href="#" class="cd-top faa-float animated cd-fade-out" target="_self"></a>`);
    		let $win = $(window);
    		let oldScrollY = 0;
    		$win.scroll(function () { 
    			oldScrollY = this.scrollY;
    		        let height = window.innerHeight;
    			let top = '-' + (900 - height + 80) + 'px';
    			if (oldScrollY > 0) { 
    			     $('.cd-top').css('top', top);
    			} else 
    	    		    $('.cd-top').css('top', '-900px');
    			}
    		});

### 公告 ###

公告内容修改在侧边栏基础信息配置中，修改`notice`，代码中已有提示

### 看板娘 ###

我个人博客的看板娘是引用别人的，同一个，失效了会及时修复的！将以下代码添加到页脚，当然本人又已经为你添加好了，所以过程非常轻松！

### 音乐播放器 ###

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

### 博客logo ###

左上角的logo，修改文字需要到`main.js`里找到以下代码，替换文字即可，如果不喜欢可以注掉,我也觉得没啥好看，main.js里我已经删了！

var title = '<div class="site-branding">' +
    					'<span class="logolink moe-mashiro">' +
    					'<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);

### 页面滚动进度条 ###

页面滚动的时候会在顶部出现一个橙色的进度条，修改颜色到页面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`
 *  其他网站链接(已注释，大都是推特等国外app，影响美观)  
    在侧边栏配置中修改`topInfo`里对应的链接地址

## 写在最后 ##

最近在博客园和皮肤厮混，发现没几个满意的！这让我追求精致的心受到了打击，最开始用的是这个，后来换了，不过换之前改进了一些！最总发现移动端不行，所以干脆把项目弄到github上，让大家看看！我把这个美化分享了出去，以我目前的前端技术改造这么个样式也很费劲的，毕竟不是专业做前端的！这是我在博客园的一篇美化文章了，博客还是有很多改进的，希望采用这个样式的你能够多多支持，有什么问题都可以提交，我也会及时为大家解决!

## 微信公众平台 ##

微信搜索 “菜鸡干Java” 关注!

## 项目地址 ##

[GitHub地址][GitHub]

[Gitee地址][Gitee]

[1]: /images/20221124/f85429c882dc499e90e587b0f8f1832c.png
[2]: /images/20221124/1da200712e0d4be9adbddd5841ac859e.png
[Font awesome]: http://fontawesome.dashgame.com/
[GitHub]: https://github.com/coderxm/CNblogs-Theme-NewSakura
[Gitee]: https://gitee.com/openkit/CNblogs-Theme-NewSakura