博客园主题美化之Sakuru主题

本人所用主题，作为记录，以备以后参考使用：

基于Sakura美化方案打造的博客园样式，给你不一样的博客园体验
如有幸使用了本样式，还请给个Star。主题链接：https://github.com/Zou-Wang/CNblogs-Theme-Sakura

一键部署方式

如果你想快速搭建出与本博客一样的样式，请看下面这句说明，当然前提是得有js权限，申请js权限请自行百度，注意语气稍微委婉一些。

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

个性化部署方式

1，将下载的文件中的page.css中的代码粘贴到自定义css中，如下：

2，上传main.js于博客园的文件之中。

3，选择模板，按照图片内容设置模板，如下所示：

4，顶部菜单设置，一般不用设置，其中友链内容指向Sakuru主题作者博客地址，介意者可以删除或改为自己博客地址，内容在main.js中，更改完再次上传即可：

$("#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>');

5，脚本设置

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

<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>

其中参数含义可以参考主题下载地址下的Readme.md下参数说明表，其中有几个值得注意的点：

profile模块下avator与authorname为主题作者头像与姓名，请更改。

signature下home为作者主页，请改为自己博客主页。

github下link改为自己github主页地址。

homeTopImg为自己博客首页头图，如下所示，自行选择更改或不更改。

notHomeTopImg为文章与随笔页头图，如下所示，自行选择修改。

topInfo为首页头图信息，其中title,text,github,weibo等标题或链接均可以改为自己想要的。

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

6，更改随笔预览图：

在写随笔或者文章的时候添加摘要图片和摘要文字中添加：

7，公告栏在博客侧边栏公告中profile下notice中修改。

8，博客logo修改在，左上角的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);

9，音乐播放器设置，本人是在博客侧边栏公告中插入以下代码

<audio src="音乐链接" autoplay="autoplay" loop="true"></audio>

去掉原本在页脚HTML代码下的：

<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>

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

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

11，修改main.js下的首页标题，找到main.js下的mainHeader中data-text，修改与之前改后的文本一致。

mainHeader() {
			const config = this.defaluts.topInfo;
			var header =
					`<div class="headertop filter-dot">` +
					`</div>` +
					`<div class="main-header">` +
					`</div>` +
					`<div class="focusinfo no-select">` +
					`       <h1 class="center-text glitch is-glitching Ubuntu-font" data-text="Hi, Toretto!">${config.title}</h1>` +

找到以下代码，将其中链接，作者头像与Toretto名字改为自己博客名字与自己博客首页地址。

if (window.location.href.indexOf('articles') === -1) {
				var header =
						`<p class="entry-census"><span><a href="https://www.cnblogs.com/zouwangblog/"><img src="//pic.cnblogs.com/face/1646268/20190628143903.png"></a></span><span><a href="https://www.cnblogs.com/zouwangblog/">Toretto</a></span><span class="bull">·</span>${post_date}<span class="bull">·</span>${post_view_count} 次阅读</p>`;

写在最后：

大力感谢此主题博主的无私奋献，希望采用这个样式的你能够多多支持原博主，有什么问题都可以提交，原博主也会及时为大家解决。最后也欢迎大家光临博主小站 https://zouwang.vip/

参考资料：

https://zhuanlan.zhihu.com/p/129084235?utm_source=qq

https://github.com/Zou-Wang/CNblogs-Theme-Sakura

https://cloud.tencent.com/developer/article/1772865?from=article.detail.1953331

posted @ 2022-04-17 23:43 Deceiver_Ker 阅读(1126) 评论(7) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部