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

@

1.前言

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

2.过程

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

2.1复制粘贴

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828204745321.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
这里需要有js的权限,申请一下就行了。![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828204841609.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828204917479.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
之后再上传main.js文件,并将该文件引入到 博客侧边栏公告 中。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828205250530.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
在这里插入图片描述

此时我们的博客大体的样子就已经出来了,如下图:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828205140447.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
这时候只剩下一些细节性的操作了

2.2音乐播放器

这里的默认的就是网易云音乐,只是需要我们提供歌单的id即可,这里我们只需要打开相应的歌单然后查看地址栏即可:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828205626474.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
将这个id替换之后,网页上的就是我们的歌单了:
在这里插入图片描述

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828205728244.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

2.3邮箱的邮我功能

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828210111410.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
该链接就能实现下图所示的功能:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200828210201782.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
主要就是替换邮箱图标的超链接即可:
在这里插入图片描述

2.4各部分图片替换位置

这里因为需要添加图片的url链接,这里建议使用知乎老哥建议的 聚合图床 ,注册过后直接上传文件,之后就可以直接复制图片的url地址了。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200829113049456.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

2.4.1 首页的轮播图

直接在 博客侧边栏公告 编辑
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200829113132270.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

2.4.2 博客的顶部图片

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

2.4.2 首页中间的图标

main.js 文件中,改完记得重新上传
![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020082911272485.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

2.5各部分超链接替换位置

2.5.1 中间图标的链接

直接在 博客侧边栏公告 编辑
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200829112534712.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

2.5.2 首页顶部的链接

main.js 文件中,改完记得重新上传
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200829113308199.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)

3.实际效果

博客地址:萌萌哒的瓤瓤のblog
在这里插入图片描述
在这里插入图片描述
都看到这里了,如果觉得对你有帮助的话,可以关注博主的公众号,新人up需要你的支持。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200826205731531.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVseV9fUlI=,size_16,color_FFFFFF,t_70#pic_center)
如果有什么疑问或者的话,可以私聊博主。

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