博客美化

日期： 2026-10-07

希望用页脚 HTML 自定义博客外观，主要是给随笔详情页加上根据文章标题自动生成的目录，并增加音乐播放器。

前情提要：

1. Custom是标准模板，大家设计时基于这个模板进行设计。
2. JS权限申请，提交申请，耐心等待即可，一般当天通过。

参考链接：

1. 博客皮肤模板
2. 博客皮肤列表 - 博客园
3. 博客园美化指南 - subeiLY - 博客园
4. 博客装饰 - 随笔分类 - 王陸 - 博客园
5. Journey&Flower - 博客园

My Blog ：aYogurt - 博客园

页脚HTML代码

<script>
if (!localStorage.modeType) {
  localStorage.modeType = "dark";
}

const opts = {
  theme: {
    name: "geek",
    avatar: "https://pic.cnblogs.com/face/2393215/20210511232635.png",
    headerBackground: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80"
  },
  signature: {
    enable: true,
    contents: [
      "<b style='color:#7bed9f'>aYogurt</b>",
      "这是一个轮播签名"
    ]
  },
  catalog: {
    enable: true
  },
  musicPlayer: {
    enable: true,
    page: "all",
    agent: "pc",
    autoplay: false,
    volume: 0.35,
    audio: [
      {
        name: "示例音乐 1",
        artist: "SoundHelix",
        url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
        cover: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=300&q=80"
      },
      {
        name: "示例音乐 2",
        artist: "SoundHelix",
        url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
        cover: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=300&q=80"
      }
    ]
  },
  imagebox: { enable: true },
  tools: { enable: true }
};

window.opts = opts;
</script>
<script src="https://blog-static.cnblogs.com/files/guangzan/geek.js?t=1755163775"></script>
<style>
#home {
  margin: 0 !important;
  width: 100% !important;
}
#mainContent,
#mainContent .forFlow,
#sideBar {
  margin-left: 0 !important;
  float: none !important;
  width: auto !important;
}
</style>