博客园主题美化之Sakuru主题

Deceiver_Ker·2022-04-17 23:43·1335 次阅读

博客园主题美化之Sakuru主题

博客园主题美化之Sakuru主题#

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

一键部署方式#

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

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

个性化部署方式#

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

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

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

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

Copy
$("#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,脚本设置

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

Copy
<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里找到以下代码,替换文字即可,如果不喜欢可以注掉。

Copy
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,音乐播放器设置,本人是在博客侧边栏公告中插入以下代码

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

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

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

Copy
.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,修改与之前改后的文本一致。

Copy
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名字改为自己博客名字与自己博客首页地址。

Copy
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 @   Deceiver_Ker  阅读(1335)  评论(7编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示
目录