技术分享

2 篇文章

Hugo主题优化实践

主题优化概述

Hugo是一个优秀的静态网站生成器，通过合理的优化可以获得更好的用户体验。

CSS优化 

/* 代码块样式优化 */
.highlight {
    border-radius: 12px;
    padding: 16px 20px;
    margin: 24px auto;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* 行号样式 */
.chroma .ln {
    color: #7f7f7f;
    margin-right: 0.8em;
    user-select: none;
}

JavaScript增强 

// 回到顶部功能
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// 显示/隐藏回到顶部按钮
window.addEventListener('scroll', function() {
    const backToTopBtn = document.getElementById('back-to-top');
    if (window.pageYOffset > 300) {
        backToTopBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
    }
});

总结

通过这些优化措施，网站的用户体验得到了显著提升。

1 分钟阅读
182 字
Hugo 前端 优化

功能测试文章

代码块测试

这里是一个Python代码块，测试行号显示：

def fibonacci(n):
    """计算斐波那契数列的第n项"""
    if n <= 1:
        return n
    else:
        # 递归计算
        return fibonacci(n-1) + fibonacci(n-2)

# 测试函数
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

这里是一个JavaScript代码块：

1 分钟阅读
330 字
Hugo 前端 测试