Blog搭建

学习经历
288 字

本网站基于 Hexo 构建，采用了 Vivia 主题，是一个风格简洁的个人博客模板。在当前版本中，“返回至顶端”、主页预览博客内容等功能尚不完善或者不符合我的使用习惯，这些都正在改进中改进。总体而言，在美观成都与易用性而言，这个模板表现非常不错。

作为该方向的初学者，我在此次网站搭建过程中基本依赖 AI 协助完成。

完成Blog搭建

在移除“返回至顶端”按钮后，发现主题切换按钮因继承了原按钮的点击方式，导致无法在页面顶端正常使用。为修复此 bug，需要定位相关文件，并将其中的指定代码完全删除。

以下为相关文件路径：

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\back-to-top.ejs

以下为源文件代码（留着以防以后有用）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

接下来将进行下一步的开发，希望一切顺利。