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

目录

• 1.前言
• 2.过程
• • 2.1复制粘贴
  • 2.2音乐播放器
  • 2.3邮箱的邮我功能
  • 2.4各部分图片替换位置
  • • 2.4.1 首页的轮播图
    • 2.4.2 博客的顶部图片
    • 2.4.2 首页中间的图标
  • 2.5各部分超链接替换位置
  • • 2.5.1 中间图标的链接
    • 2.5.2 首页顶部的链接
• 3.实际效果

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需要你的支持。