博客主题美化第一弹

博客园主题自定义——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
	wechat	微信收款二维码	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	“ ”
	weibo	微博链接	String	“ ”
	telegram	telegram链接	String	“ ”
	music	网易云音乐链接	String	“ ”
	twitter	twitter链接	String	“ ”
	zhihu	知乎链接	String	“ ”
	mail	邮箱链接	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

posted @ 2022-08-01 21:45 Apcin 阅读(156) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

apcin