部落格園主題美化

nanhang發表於2024-06-30

配置主題的時候踩了很多坑，這裡想要寫一篇文章來指引一下新園友。

文章參考了很多大佬部落格，下面已經標明連結。

本人新手上路，大佬路過勿噴。

參考連結：配置選項 (yuque.com)
參考連結：部落格自動播放音樂 - 二次元攻城獅 - 部落格園 (cnblogs.com)
參考連結：部落格園新增滑鼠點選特效-CSDN部落格

基礎配置美化

基礎配置就請大家直接看大佬的語雀筆記。
https://www.yuque.com/awescnb/user/rycpvv#c6a60f3a

下面主要講一下需要注意的幾個點。

設定頭部背景圖和背景圖

設定背景圖只需要修改連結即可，主要在於如何設定為本地圖片？

可以透過圖床來解決

這裡先介紹一下圖床

圖床是什麼？

圖床就是網際網路中儲存圖片的空間。可以直接透過網頁訪問你上傳的圖片。

推薦圖床地址

路過圖床 - 免費圖片上傳, 專業圖片外鏈, 免費公共圖床 (imgse.com)

註冊賬號之後，點選右上角上傳按鈕。
Pasted image 20240630094516

選擇上傳圖片

上傳之後就可以透過圖床訪問圖片。

並且圖床還提供了關於圖片的連結。

Pasted image 20240630094707

其實還有另一種解決方法是透過將檔案上傳到部落格園檔案列表解決。

下面會介紹。

修改連結

修改頭部背景圖屬性連結

修改背景圖屬性連結

設定社會主義核心價值觀點選效果：

直接將程式碼貼上到部落格側邊欄公告即可

<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大佬的回答。

Pasted image 20240629111852

將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程式碼中最後一行，並且設定好圖片路徑就行了。

相關文章