博客园自定义设置记录

博客皮肤

ThinkInside

代码字体、样式

Consolas
stackoverflow-dark

侧边栏 HTML

<pre style="color: white; margin-bottom: 10px; width:100%">
不知道为什么
</pre>

<table border="1" cellpadding="5" cellspacing="0" width="100%">
  <thead>
    <tr bgcolor="#f2f2f2">
      <th width="20%"><b>编号</b></th>
      <th width="40%"><b>问题</b></th>
      <th width="40%"><b>优先级</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td> <td>今日写博客了吗</td> <td>★★★☆☆</td>
    </tr>
    <tr>
      <td>2</td> <td>今日记日记了吗</td> <td>★★★☆☆</td>
    </tr>
    <tr>
      <td>3</td> <td>今日整笔记了吗</td> <td>★★★☆☆</td>
    </tr> 
  </tbody>
</table>

<pre id="pre_for_music" style="color: white; margin-top: 10px; width:100%">
我变得很主动
</pre>

页面 CSS

pre {
    background: rgba(12, 100, 129, 1);
}

/* 通用方案：为所有图片添加样式 */
img {
    display: block; /* 确保边距生效 */
    max-width: 100%; /* 保持响应式 */
    height: auto; /* 保持宽高比 */
    border: 1px solid #e0e0e0; /* 浅灰色边框 */
    border-radius: 4px; /* 可选：轻微圆角 */
    margin: 10px 0; /* 上下边距 10px，左右为 0 */
    padding: 4px; /* 可选：内边距 */
    box-sizing: border-box; /* 包含边框和内边距在总尺寸内 */
}

/* 针对特定类优化（如示例中的 medium-zoom-image）*/
img.medium-zoom-image {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加轻微阴影 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停效果增强 */
img.medium-zoom-image:hover {
    border-color: #a0a0a0; /* 悬停时边框加深 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 悬停阴影增强 */
}

页首 HTML

<script language="javascript" type="text/javascript">
    console.log('页首')
</script>

页脚 HTML

<script language="javascript" type="text/javascript">
    console.log('页脚')

    // 音乐列表数据
    const musicList = [
        { 
            name: '尽头 - 赵方婧', 
            url: 'https://files.cnblogs.com/files/blogs/850210/%E5%B0%BD%E5%A4%B4-%E8%B5%B5%E6%96%B9%E5%A9%A7.mp3.js'
        },{ 
            name: '白鸽乌鸦相爱的戏码 - 潘成（皮卡潘）', 
            url: 'https://files.cnblogs.com/files/blogs/850210/%E7%99%BD%E9%B8%BD%E4%B9%8C%E9%B8%A6%E7%9B%B8%E7%88%B1%E7%9A%84%E6%88%8F%E7%A0%81-%E6%BD%98%E6%88%90.mp3.js'
        },{ 
            name: '起风了 - 买辣椒也用券', 
            url: 'https://files.cnblogs.com/files/blogs/850210/%E8%B5%B7%E9%A3%8E%E4%BA%86-%E4%B9%B0%E8%BE%A3%E6%A4%92%E4%B9%9F%E7%94%A8%E5%88%B8.mp3.js'
        }
    ];
    
    // DOM加载完成后开始查找
    document.addEventListener('DOMContentLoaded', function() {
        console.log("DOMContentLoaded - 开始查找元素");
        
        // 等待目标元素出现
        waitForElement('pre_for_music', function(sidebarElement) {
            console.log("成功找到元素: pre_for_music");
            
            // 创建播放器容器
            const playersContainer = document.createElement('div');
            playersContainer.id = 'music-players-container';

            // 为每首歌曲创建播放器
            musicList.forEach(song => {
                const player = createMusicPlayer(song);
                playersContainer.appendChild(player);
                console.log(`已添加播放器: ${song.name}`);
            });
            
            // 插入到目标元素下方
            sidebarElement.insertAdjacentElement('afterend', playersContainer);
            console.log("所有音乐播放器已添加到页面");
        });
    });
    
    // 等待目标元素出现的函数
    function waitForElement(selector, callback, maxAttempts = 30, interval = 200) {
        let attempts = 0;
        const checkElement = () => {
            const element = document.getElementById(selector);
            if (element) {
                callback(element);
            } else if (attempts < maxAttempts) {
                attempts++;
                setTimeout(checkElement, interval);
            } else {
                console.error(`元素查找超时: ${selector}`);
            }
        };
        checkElement();
    }
        
    // 创建音乐播放器函数
    function createMusicPlayer(song) {
        const playerContainer = document.createElement('div');
        playerContainer.className = 'player-container';
        
        const titleElement = document.createElement('div');
        titleElement.className = 'song-title';
        titleElement.innerHTML = `<i class="fas fa-music">${song.name}</i>`;
        titleElement.style.marginTop = '10px';
        titleElement.style.width = '100%';
        
        const audioPlayer = document.createElement('audio');
        audioPlayer.controls = true;
        const srcWithParam = buildUrlWithSearchParams(song.url, params);
        console.log(srcWithParam);
        audioPlayer.src = srcWithParam;
        audioPlayer.style.width = '100%';
        
        playerContainer.appendChild(titleElement);
        playerContainer.appendChild(audioPlayer);
        
        return playerContainer;
    }

    const params = {
        t: Math.floor(Date.now() / 1000),
        download: true
    };

    function buildUrlWithSearchParams(base, parameters) {
        const url = new URL(base);
        Object.entries(parameters).forEach(([key, value]) => {
            url.searchParams.append(key, value);
        });
        return url.toString();
    }
</script>