本博客使用主题为Mirages，该主题作者为该主题的拓展留了很方便的接口。为了使博客阅读体验更佳，本博利用这些接口拓展了一些功能，没有使用此主题的读者，也可以参考这些代码添加到自己的主题中。此外，根据个人审美偏好，对首页样式做了修改（扒了别人的css），这个就不在此赘述了，有喜欢的可以自己扒页面样式。

一、顶部导航自动显示隐藏

功能描述：页面下滑时，顶部导航栏隐藏，页面上滑时，顶部导航栏显示。

功能作用：阅读时导航栏隐藏，正文能显示的空间更大，没有导航栏干扰阅更易沉浸于阅读。

实现：在主题【外观设置】-【主题自定义扩展】-【自定义 HTML 元素拓展 - 在 body 标签结束前】中添加如下代码

<script type="text/javascript">
    $(function(){
        var position = $(document).scrollTop();
        var header = $('#navbar').outerHeight();
    
        $(window).scroll(function() {
            var nowPosition = $(document).scrollTop();
    
            if (nowPosition > header){$('#navbar').css("top",-64+"px");} 
            
            else {$('#navbar').css("top",0+"px");}
    
            if (nowPosition > position){$('#navbar').css("top",-64+"px");} 
            else {$('#navbar').css("top",0+"px");}                
    
            position = $(document).scrollTop();    
         });
    });
</script>

二、复制代码

功能描述：鼠标移动到代码区域时，显示【复制】按钮，点击【复制】按钮可复制代码到剪贴板。

功能作用：方便读者快速复制代码

实现：在主题【外观设置】-【主题自定义扩展】-【自定义 HTML 元素拓展 - 在 body 标签结束前】中添加如下代码

<script type="text/javascript">
    //html5 给typecho添加 复制代码 功能 
    var codeblocks = document.getElementsByTagName("pre")
    //循环每个pre代码块，并添加 复制代码
    for (var i = 0; i < codeblocks.length; i++) {
        //显示 复制代码 按钮
        currentCode = codeblocks[i]
        currentCode.style = "position: relative;"
        var copy = document.createElement("div")
        copy.style = "position: absolute;right: 4px;\
        top: 4px;background-color: white;padding: 2px 8px;\
        margin: 8px;border-radius: 4px;cursor: pointer;\
        box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
        copy.innerHTML = "复制"
        currentCode.appendChild(copy)
        //让所有 "复制"按钮 全部隐藏
        copy.style.visibility = "hidden"
    }


    for (var i = 0; i < codeblocks.length; i++) {

        !function (i) {
            //鼠标移到代码块，就显示按钮
            codeblocks[i].onmouseover = function () {
                codeblocks[i].childNodes[1].style.visibility = "visible"
            }

            //执行 复制代码 功能
            function copyArticle(event) {
                const range = document.createRange();

                //范围是 code，不包括刚才创建的div
                range.selectNode(codeblocks[i].childNodes[0]);

                const selection = window.getSelection();
                if (selection.rangeCount > 0) selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');

                codeblocks[i].childNodes[1].innerHTML = "复制成功"
                setTimeout(function () {
                    codeblocks[i].childNodes[1].innerHTML = "复制"
                }, 1000);
                //清除选择区
                if (selection.rangeCount > 0) selection.removeAllRanges(); 0
            }
            codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);

        }(i);

        !function (i) {
            //鼠标从代码块移开 则不显示复制代码按钮
            codeblocks[i].onmouseout = function () {
                codeblocks[i].childNodes[1].style.visibility = "hidden"
            }
        }(i);
    }
</script>