博客园自定义设置记录

博客皮肤

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>