博客主题美化第一弹
博客园主题自定义——Sakura
- 基于Sakura美化方案打造的博客园样式,给你不一样的博客园体验
- 如有幸使用了本样式,还请给个Star。
- 文件链接:https://github.com/Zou-Wang/CNblogs-Theme-Sakura
主题预览
主题部署
一键部署
如果你想快速搭建出与本博客一样的样式, 请看下面这句说明,当然前提是得有js权限,申请方法网上搜索,申请理由委婉些,一般10-20分钟即可得到批复
如果将部署和本博客一样的主题,直接下载整个主题,下载地址在文末。把css、侧边栏、页脚三种文件中的代码粘贴的你的博客后台,然后对应的改下文件链接地址 就行(建议将以上三种文件的代码自行在本地备份一份,之后上传到博客园文件中,以免原博主文件删除后导致文件缺失)。下面的内容是为了个性化定制而写,如果你想个性化定制博客,请往下看基本部署。
基本部署
-
前提:已经开通
js
权限 -
引入样式
把page.css、sidebar.css、head.css、foot.css中的代码分别粘贴到页面定制CSS代码、博客侧边栏公告、页首HTML代码、页脚HTML代码中。 -
选择模板
按照图片内容设置模板
-
顶部菜单设置
可选择不设置,如果介意可把链接改成自己的,代码在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>');
- 脚本设置
为了配置方便,我在侧边栏里设置了一些常用参数,可根据下表选择需要开启和配置
<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>
参数说明表:
模块 | 属性 | 说明 | 类型 | 默认值 |
---|---|---|---|---|
profile(基础信息) | enable | 是否启用 | Boolean | true |
avatar | 作者头像 | String | ||
favicon | 网站标题图标 | String | ||
notice | 公告 | String | 海上月是天上月,眼前人是心上人。 | |
authorName | 作者姓名 | String | 不忘编码 | |
catalog(博文目录) | enable | 是否启用 | Boolean | false |
move | 是否允许拖拽 | Boolean | true | |
index | 是否显示索引 | Boolean | true | |
level1 | 一级标题 | String | h2 | |
level2 | 二级标题 | String | h3 | |
level3 | 三级标题 | String | h4 | |
signature(博文签名 | enable | 是否启用 | Boolean | true |
home | 作者主页 | String | https://www.cnblogs.com | |
license | 许可证名称 | String | CC BY 4.0 | |
link | 许可证链接 | String | https://creativecommons.org/licenses/by/4.0 | |
sponsor(博文赞赏) | enable | 是否启用 | Boolean | false |
paypal | PayPal 收款地址 | String | null | |
alipay | 支付宝收款二维码 | String | null | |
微信收款二维码 | String | null | ||
github(GitHub Corners) | enable | 是否启用 | Boolean | false |
fill | 背景填充色 | String | [Silence Theme Color] | |
color | 章鱼猫颜色 | String | #fff | |
link | Github 链接 | String | null | |
topImg(头图) | homeTopImg | 首页头图 | Array | [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg] |
notHomeTopImg | 文章和随笔页头图 | Array | [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg] | |
topInfo(首页头图信息) | titile | 头部标题 | String | Hi, Toretto! |
text | 座右铭 | String | You got to put the past behind you before you can move on. | |
github | GitHub链接 | String | “ ” | |
微博链接 | String | “ ” | ||
telegram | telegram链接 | String | “ ” | |
music | 网易云音乐链接 | String | “ ” | |
twitter链接 | String | “ ” | ||
zhihu | 知乎链接 | String | “ ” | |
邮箱链接 | String | “ ” |
博客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);
页面滚动进度条
页面滚动的时候会在顶部出现一个橙色的进度条,修改颜色到页面css里,找到以下代码修改background
.scrollCls {
position: fixed;
top: 0;
height: 3px;
background: orange;
transiton-property: width,background;
transition-duration: 1s,1s;
z-index: 99999;
}
首页个人信息
- 找到以下代码,将其中链接,作者头像与Toretto名字改为自己博客名字与自己博客首页地址(main.js)。
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>`;
-
名称
在侧边栏配置中修改topInfo
里的title
-
座右铭
在侧边栏配置中修改topInfo
里的text
参考资料:
此博客主题非博主原创,由于主题样式较为精美,因此写下此博文,希望大家大大支持原博主,同时在部署过程中有啥问题欢迎在下方评论区提出!
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