博客搭建问题

由于鼠标拖动复制代码有点费力，我打算给每个代码块添加一个复制按钮（学学大佬orz ）。经过长时间的搜索学习，我终于加上了（win）。话不多说。构建首先，我们要清楚一点，hugo-papermod本身是不包含代码复制按钮功能的。所以，我们要自己写，包括写css和js，同时要修改hugo的相关配置。步骤 1.写css/js文件 static\css\extended\code-copy.css(注意不要写错地方了，当然放在assests/css里面也未尝不可，但是相应的要修改一些文件，本人懒得搞了=-=) .highlight-copy-btn { position: absolute; top: 7px; right: 7px; border: 0; border-radius: 4px; width: 28px; /* 固定按钮大小 */ height: 28px; background-color: #777; color: #fff; display: flex; /* flex 布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ cursor: pointer; padding: 0; /* 去掉多余 padding */ } .highlight-copy-btn:hover { background-color: #666; } /* 控制 svg 图标大小 */ .highlight-copy-btn i svg { width: 16px; height: 16px; display: block; /* 避免 inline 导致偏上 */ } static\js\code-copy.js (function() { 'use strict'; // 切换图标 function flashCopyMessage(el, iconName) { el.innerHTML = ``; feather.replace(); // 更新图标 setTimeout(function() { el.innerHTML = ''; // 恢复复制图标 feather.replace(); }, 1000); } // 复制文本 async function copyText(text, btn) { try { await navigator.clipboard.writeText(text); flashCopyMessage(btn, 'check'); // 成功图标 } catch (e) { flashCopyMessage(btn, 'x'); // 失败图标 } } // 为每个代码块添加按钮 function addCopyButton(containerEl) { var copyBtn = document.createElement("button"); copyBtn.className = "highlight-copy-btn"; copyBtn.innerHTML = ''; var codeEl = containerEl.querySelector("pre code"); if (!codeEl) return; copyBtn.addEventListener('click', function() { copyText(codeEl.innerText, copyBtn); }); containerEl.style.position = "relative"; containerEl.appendChild(copyBtn); feather.replace(); // 初始化图标 } // 初始化所有高亮块 function init() { var highlightBlocks = document.getElementsByClassName('highlight'); Array.prototype.forEach.call(highlightBlocks, addCopyButton); } document.addEventListener("DOMContentLoaded", init); })(); 2.修改配置文件 1. 把themes\PaperMod\layouts\partials\head.html拷贝一份到layouts\partials\head.html然后修改后者（模板覆盖规则）： ...