keep主题细节调整 | DIONYSEN BLOG

为了更完美的外观，必须自己修改前端代码来将博客的样式改成自己的想要的。

样式参考了Guanqirui的博客样式。

显示评论

在文章页面低端添加显示或隐藏评论的按钮，可以使文章阅读界面更加干净整洁。

在article-content.ejs文件中添加：

<div id="load-comments">显示评论</div>

然后在footer.ejs中添加脚本：

<% if (is_post()) { %>
    <script async <%= theme.pjax.enable === true ? 'data-pjax' : '' %> >
        var toggleButton = document.getElementById("load-comments");
        var commentsContainer = document.getElementById("comments-show");
        toggleButton.addEventListener("click", function() {
            if (commentsContainer.style.display === "none") {
                commentsContainer.style.display = "block";
                toggleButton.innerHTML = "隐藏评论";
            } else {
                commentsContainer.style.display = "none";
                toggleButton.innerHTML = "显示评论";
            }
        });
    </script>
<% } %>

如果开启了pjax，站内跳转不刷新，按钮的事件监听就无效了，必须在<script>标签中加入<%= theme.pjax.enable === true ? 'data-pjax' : '' %>，在pjax中设置了跳转局部刷新的范围是标签中有data-pjax的脚本：

document.addEventListener('pjax:complete', () => {
	KEEP.utils.pjaxProgressBarEnd();
	window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
	KEEP.refresh();
});

字体

更换了字体，使用思源宋体作为中文字体，Open Sans作为英文字体。

<head>
    ... 
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Noto+Serif+SC:wght@400;600;700&display=swap"
rel="stylesheet">
</head>

标签与分类

更改了标签与分类的样式，以及其他的细节，如字体大小，行间距等。

.tag-item {
    font-size: 0.7rem
    padding 0.25rem 0.5rem 0.25rem 0.5rem
    border solid 1px var(--border-color)
    border-radius 1rem
    margin 0 0.25rem 0 0.25rem
    white-space: nowrap
    
        &:hover {
        background-color: var(--background-color-2)
        color var(--background-color-2)
    }    
     
	.a {	
        &:hover {
            background-color: var(--background-color-2)
            color var(--background-color-2)
            text-decoration: none
    	}	
    }
    
    ::before {
        font-size: 0.7rem
        font-weight: 300
    }
}