測試部落格園皮膚

aliving發表於2024-07-01

如何在部落格園中修改皮膚

部落格園是一個提供給使用者分享技術文章和知識的平臺。許多使用者希望自定義部落格園的外觀來反映自己的個性和風格。本文將詳細說明如何在部落格園中修改皮膚，包括新增黑色小貓、在右側新增閱讀目錄、設定文章頁面背景以及在最上方新增看板娘。

一、前期準備

1. 登入部落格園

首先，您需要登入您的部落格園賬號。如果您還沒有賬號，請先註冊一個。

2. 進入管理後臺

登入後，點選右上角的頭像，選擇“管理”進入管理後臺。

二、修改皮膚步驟

1. 新增黑色小貓

我們將使用CSS程式碼來實現黑色小貓的新增。步驟如下：

  1. 在管理後臺，選擇“設定”-“部落格皮膚”。
  2. 選擇“自定義CSS”選項。
  3. 在文字框中貼上以下CSS程式碼：
/* 新增黑色小貓 */
body::after {
    content: "";
    display: block;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: url('https://path/to/your/black-cat-image.png') no-repeat center center;
    background-size: contain;
    z-index: 1000;
}
  1. 確保將'https://path/to/your/black-cat-image.png'替換為實際的黑色小貓圖片URL。
  2. 儲存更改。

2. 新增閱讀目錄

為了在右側新增閱讀目錄，我們需要使用JavaScript外掛。這裡推薦使用TOCbot。步驟如下：

  1. 依次選擇“設定”-“頁面定製”-“側邊欄”。
  2. 新增以下HTML和JavaScript程式碼：
<!-- 閱讀目錄容器 -->
<div id="tocbot-container"></div>

<!-- TOCbot 外掛 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.10.0/dist/tocbot.css">
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.10.0/dist/tocbot.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    tocbot.init({
        tocSelector: '#tocbot-container',
        contentSelector: '.post',
        headingSelector: 'h1, h2, h3, h4, h5, h6',
        positionFixedSelector: '#tocbot-container',
        positionFixedClass: 'is-position-fixed',
        includeTitleTags: true,
    });
});
</script>
  1. 儲存更改。

3. 設定文章頁面背景

為文章頁面設定背景同樣需要透過CSS來實現。步驟如下：

  1. 選擇“設定”-“部落格皮膚”。
  2. 在自定義CSS中新增以下程式碼：
/* 設定文章頁面背景 */
body {
    background: url('https://path/to/your/background-image.jpg') no-repeat center center fixed;
    background-size: cover;
}
  1. 確保將'https://path/to/your/background-image.jpg'替換為實際的背景圖片URL。
  2. 儲存更改。

4. 新增看板娘

看板娘是很多部落格使用者喜歡的一種裝飾，可以透過引入JavaScript庫來實現。步驟如下：

  1. 選擇“設定”-“頁面定製”-“頁尾”。
  2. 新增以下JavaScript程式碼：
<!-- 看板娘外掛 -->
<script src="https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/live2d.min.js"></script>
<script>
    loadlive2d("live2d", "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/model/hijiki/hijiki.model.json");
</script>
  1. 在“設定”-“頁面定製”-“頭部”中新增以下HTML程式碼：
<!-- 看板娘容器 -->
<canvas id="live2d" width="300" height="300" style="position: fixed; right: 0; bottom: 0; z-index: 1000;"></canvas>
  1. 儲存更改。

三、總結

透過以上步驟，您可以在部落格園中實現個性化的皮膚修改，包括新增黑色小貓、在右側新增閱讀目錄、設定文章頁面背景以及新增看板娘。希望這篇文章對您有所幫助，祝您在部落格園的創作之旅愉快！

如有任何問題或需要進一步的幫助，請隨時在評論區留言。

相關文章