博客园主题美化

配置主题的时候踩了很多坑，这里想要写一篇文章来指引一下新园友。

文章参考了很多大佬博客，下面已经标明链接。

本人新手上路，大佬路过勿喷。

参考链接：配置选项 (yuque.com)
参考链接：博客自动播放音乐 - 二次元攻城狮 - 博客园 (cnblogs.com)
参考链接：博客园添加鼠标点击特效-CSDN博客

基础配置美化

基础配置就请大家直接看大佬的语雀笔记。
https://www.yuque.com/awescnb/user/rycpvv#c6a60f3a

下面主要讲一下需要注意的几个点。

设置头部背景图和背景图

设置背景图只需要修改链接即可，主要在于如何设置为本地图片？

可以通过图床来解决

这里先介绍一下图床

图床是什么？

图床就是互联网中存储图片的空间。可以直接通过网页访问你上传的图片。

推荐图床地址

路过图床 - 免费图片上传, 专业图片外链, 免费公共图床 (imgse.com)

注册账号之后，点击右上角上传按钮。

选择上传图片

上传之后就可以通过图床访问图片。

并且图床还提供了关于图片的链接。

其实还有另一种解决方法是通过将文件上传到博客园文件列表解决。

下面会介绍。

修改链接

修改头部背景图属性链接

修改背景图属性链接

设置社会主义核心价值观点击效果：

直接将代码粘贴到博客侧边栏公告即可

<script type="text/javascript">

/* 鼠标特效 */

var a_idx = 0;

jQuery(document).ready(function($) {

    $("body").click(function(e) {

        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");

        var $i = $("<span></span>").text(a[a_idx]);

        a_idx = (a_idx + 1) % a.length;

        var x = e.pageX,

        y = e.pageY;

        $i.css({

            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,

            "top": y - 20,

            "left": x,

            "position": "absolute",

            "font-weight": "bold",

            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"

        });

        $("body").append($i);

        $i.animate({

            "top": y - 180,

            "opacity": 0

        },

        1500,

        function() {

            $i.remove();

        });

    });

});
</script>

设置音乐播放：

如何播放指定mp3音频文件。

需先通过文件上传功能将文件上传到博客园文件列表。但是常规是不能上传mp3文件的。

只要将音频文件修改后缀名为js，如果要上传图片，将图片后缀名修改为gif即可上传。

![[Pasted image 20240629110411.png]]

将音频路径设置为文件中打开音频的路径，即在文件列表中单击文件打开之后的路径。

同理，图片也一样。

这种方法也可以用来设置背景图，达到图床的效果。

怎么修改右上角图片：

右上角那个图片跟主题很不搭，所以想要修改一下。

奈何本人不懂前端，于是只能求助大佬了。

这里感谢dudu大佬的回答。

将js代码添加到js设置中，并且将src后的链接设置为指定图片链接就可以修改图片。

代码：

$('#custom-calendar img.event-img').attr('src', 'https://s21.ax1x.com/2024/06/29/pk6H0f0.jpg')

必须添加到js标签中，如下：

<script>
	$('#custom-calendar img.event-img').attr('src', 'https://s21.ax1x.com/2024/06/29/pk6H0f0.jpg')
</script>

只要将代码添加到上面js代码中最后一行，并且设置好图片路径就行了。