主题优化概述
Hugo是一个优秀的静态网站生成器，通过合理的优化可以获得更好的用户体验。
CSS优化
1/* 代码块样式优化 */
2.highlight {
3 border-radius: 12px;
4 padding: 16px 20px;
5 margin: 24px auto;
6 box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
7}
8
9/* 行号样式 */
10.chroma .ln {
11 color: #7f7f7f;
12 margin-right: 0.8em;
13 user-select: none;
14}
JavaScript增强
1// 回到顶部功能
2function scrollToTop() {
3 window.scrollTo({
4 top: 0,
5 behavior: 'smooth'
6 });
7}
8
9// 显示/隐藏回到顶部按钮
10window.addEventListener('scroll', function() {
11 const backToTopBtn = document.getElementById('back-to-top');
12 if (window.pageYOffset > 300) {
13 backToTopBtn.style.display = 'block';
14 } else {
15 backToTopBtn.style.display = 'none';
16 }
17});
总结
通过这些优化措施，网站的用户体验得到了显著提升。