这特么也太好看了----------博客园主题美化

@

1.前言

因为博主最近一直在想着把自己的文章同步到博客园,掘金,简书等类似的技术博客网站上,偶然间看到了博客园可以自己自定义博客的样式。博主立马就来了兴趣,毕竟谁不喜欢好看的,我就是馋它的身子。我下贱。
在这里插入图片描述
经过一个下午的探索终于是把它搞好了,反正博主自己感觉好看的一笔。

2.过程

网站的样式主要是由这位小姐姐提供的,小姐姐的是做前端的,难怪做出来的网站这么好看!!小姐姐和知乎上一个老哥都出过安装的教程,以下是网址:
博客园二次元主题——Sakura
博客园主题美化
这是模板的下载链接:https://link.zhihu.com/?target=https%3A//files.cnblogs.com/files/qimuz/Sakura.zip
打开是这样的:
在这里插入图片描述
我们首先需要将博客园的皮肤选定为Custom,因为该模板就是根据这个皮肤改的。
在这里插入图片描述

2.1复制粘贴

在这里插入图片描述
这里需要有js的权限,申请一下就行了。在这里插入图片描述在这里插入图片描述
之后再上传main.js文件,并将该文件引入到 博客侧边栏公告 中。
在这里插入图片描述
在这里插入图片描述

此时我们的博客大体的样子就已经出来了,如下图:
在这里插入图片描述
这时候只剩下一些细节性的操作了

2.2音乐播放器

这里的默认的就是网易云音乐,只是需要我们提供歌单的id即可,这里我们只需要打开相应的歌单然后查看地址栏即可:
在这里插入图片描述
将这个id替换之后,网页上的就是我们的歌单了:
在这里插入图片描述

在这里插入图片描述

2.3邮箱的邮我功能

在这里插入图片描述
该链接就能实现下图所示的功能:
在这里插入图片描述
主要就是替换邮箱图标的超链接即可:
在这里插入图片描述

2.4各部分图片替换位置

这里因为需要添加图片的url链接,这里建议使用知乎老哥建议的 聚合图床 ,注册过后直接上传文件,之后就可以直接复制图片的url地址了。
在这里插入图片描述

2.4.1 首页的轮播图

直接在 博客侧边栏公告 编辑
在这里插入图片描述

2.4.2 博客的顶部图片

直接在 博客侧边栏公告 编辑
在这里插入图片描述

2.4.2 首页中间的图标

main.js 文件中,改完记得重新上传
在这里插入图片描述

2.5各部分超链接替换位置

2.5.1 中间图标的链接

直接在 博客侧边栏公告 编辑
在这里插入图片描述

2.5.2 首页顶部的链接

main.js 文件中,改完记得重新上传
在这里插入图片描述

3.实际效果

博客地址:萌萌哒的瓤瓤のblog
在这里插入图片描述
在这里插入图片描述
都看到这里了,如果觉得对你有帮助的话,可以关注博主的公众号,新人up需要你的支持。
在这里插入图片描述
如果有什么疑问或者的话,可以私聊博主。

posted @ 2020-08-29 13:56  萌萌哒的瓤瓤  阅读(719)  评论(8编辑  收藏  举报