Hugo博客 | stack主题修改第一站

本来是不想用这篇博文作为新博客的第一篇的，但无奈修改这个主题以便让我能够看得舒服确实花费了我很多精力，因此想写下这一篇博文来记录这一历程，当然这次的修改也只是建博客时对于我来说最难以忍受的痛点，如果在使用的时候觉得还有值得修改的地方，那说不定就有第二站。不废话，直接开冲！

自定义的项目

TO-DO

· 修改文章的字体为思源宋体（其实我喜欢行楷，但苦于还没有找到解决方法。。）

· 修改站点图标

· 修改站点名称并使其居中，同时具有一定的间隔。

· 修改选中的样式

· 站点头像居中（虽然本来应该就是居中了。。）

· 添加主页按钮点击不会高亮的问题

· 主页样式的修改

· 修改左边栏头像大小

· 返回顶部功能的添加

· 修改Toc的样式

· 修改分类的标签样式

· 修改滚动条样式

· 使文章支持数学公式编辑

具体修改

修改全站的字体

其实修改字体的方案主题的原作者已经给出，有需要的可以参考修改字体，作为一个中国人，好康的中文永远比好康的英文重要。具体做法是在站点根目录中的layouts/partials/head/custom.html中添加如下代码：

<style>
    :root {
        --article-font-family: "Noto Serif SC", var(--base-font-family);
    }
</style>
<script>  // 正文自重300，标题字重700
		(function () {
		    const customFont = document.createElement('link');
		    customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
		
		    customFont.type = "text/css";
		    customFont.rel = "stylesheet";
		
		    document.head.appendChild(customFont);
		}());
</script>

以上是作者给出的，我只是在字重上做了修改。除此之外我还修改了hugo-theme-stack/assets/scss/variable.scss文件，具体就是调整了--zh-font-family和--base-font-family的顺序，代码如下：

--zh-font-family: "Noto Serif SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
--base-font-family: "Noto Serif SC", var(--sys-font-family), var(--zh-font-family), sans-serif;

修改站点的图标

这个问题起先困扰了我很久（虽然期间可能已经修改好了，但因为网站cookie的原因导致修改没有及时显示），具体做法如下，先将你需要的图片转换为.ico文件（其它类型的图片文件应该也行），如需转换可以借助这个网站。之后将转换后的文件保存在网站根目录的static文件夹中。之后修改主题的配置文件config.yaml。

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: favicon.ico

修改站点名称

站点名称对大家来说应该不是什么难事，这里就说说居中以及间隔。这里需要修改主题根目录的assets/scss/partials/siderbar.scss文件。如下：

.site-name {
    color: var(--accent-color);
    margin: 0;
    font-size: 1.8rem;
    text-align: center;  // 站点名称文本居中

    @include respond(2xl) {
        font-size: 2rem;
    }
}

.site-description {
    color: var(--body-text-color);
    font-weight: normal;
    margin: 10px 0;
    font-size: 1.2rem;
    text-align: center;  // 站点描述居中

    @include respond(2xl) {
        font-size: 1.6rem;
    }
}

当然如果站点名称之间具有一定的间隔的话，应该是会更美观一点的。方法是在layouts/partials/head/custom.html文件上加入以下代码

<style>
	h1 {
		letter-spacing: 6px;
	}
</style>

这个代码将会对全站的h1标题进行修改，因此业也会导致其它h1标签也发生改变，但目前只注意到进入一个分类页面时，分类的字距变大了，因此我们需要在custom.scss文件中追加如下修改：

.section-term {
	font-size: 1.8rem; 
    letter-spacing:1px;
}

修改选中的样式

原来作者的选中样式和当前的大多数网站是一样的，给我一种十年前互联网的感觉，于是喜欢深色系的我修改了选中样式。需要在assets/scss/custom.scss文件中加入如下代码：

::selection {
    color: #fff;
    background: #557697;
}

站点头像居中

这个可能只是心理作用。。同样是在assets/scss/partials/siderbar.scss文件中加入修改以下代码

.site-avatar {
    position: relative;
    margin-left: auto;  // 站点头像居中
    margin-right: auto;  // 站点头像居中
    width: var(--sidebar-avatar-size);
    height: var(--sidebar-avatar-size);

    margin-bottom: var(--sidebar-element-separation);
}

主页按钮高亮问题

这个虽然不算是什么大问题吧，但是主页不高亮我就觉得很难受。。于是就找到了layouts/partials/sidebar/left.html这个文件。我们可以看到一下代码：

{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .)($currentPage.IsMenuCurrent "main" .)) }}

这段代码大概的逻辑就是如果当前的页面是菜单中的页面之一就设定为激活状态，而如果要让主页高亮的话需要加入以下代码：

{{ $siteTitle := .Site.Title }}
{{ $active := or ($active) (and (eq $currentPage.Title $siteTitle) (eq .Identifier "home")) }}

这样就会使若当前的网站的标题等于网站名称就会令其为激活状态，而之后的Identifier则是为了区分主页页面，否则就会出现点击主页所有页面都是高亮的情况。

主页样式的修改

第一次看到这个主题时就对它的主页布局感到不舒服，尤其是在笔记本电脑上挤满了整个屏幕令人难受，于是希望左右两边能够有一定的留白，这样可以美观一些。

从开发者工具中我们可以得知主页的class是container，经过查找可以知道其样式是在assets/scss/grid.css中定义的。于是可以发现如下这段代码

.container {
    margin-left: auto;
    margin-right: auto;

    .left-sidebar {
        max-width: var(--left-sidebar-max-width);
        margin-right: 1%;
    }

    .right-sidebar {
        max-width: var(--right-sidebar-max-width);

        /// Display right sidebar when min-width: lg
        @include respond(lg) {
            display: block;
        }
    }

    &.extended {
        @include respond(md) {
            max-width: 1024px;
            --left-sidebar-max-width: 25%;
            --right-sidebar-max-width: 30%;
        }

        @include respond(lg) {
            max-width: 1280px;
            --left-sidebar-max-width: 20%;
            --right-sidebar-max-width: 30%;
        }

        @include respond(xl) {
            max-width: 1536px;
            --left-sidebar-max-width: 15%;
            --right-sidebar-max-width: 25%;
        }
    }
}

这段代码对左边栏和右边栏进行了最大宽度的限制，这也就是我们要修改的地方。但是这其中的各个@include函数又代表什么呢？我们可以观察asset/scss/breakpoints.scss这个文件，如下：

$breakpoints: (
    sm: 640px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
    2xl: 1536px,
);

@mixin respond($breakpoint) {
    @if not map-has-key($breakpoints, $breakpoint) {
        @warn "'#{$breakpoint}' is not a valid breakpoint";
    } @else {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    }
}

没有学过css的我也就只能大致看出这是封装了各种屏幕尺寸类似于map，而在笔记本电脑上，屏幕宽度是1024px以上的，因此我们只需要修改@include respond(lg)函数下的样式就可以了。在asset/scss/custom.scss下添加如下代码：

.container {
    margin-left: auto;
    margin-right: auto;

    &.extended {
        /* range: 768-1024 */
        @include respond(md) {
            max-width: 1024px;
            --left-sidebar-max-width: 25%;
            --right-sidebar-max-width: 30%;
        }

        /* range: 1024-1280 */
        @include respond(lg) {  // 修改主页的三个组件的显示比例
            max-width: 1280px;
            --left-sidebar-max-width: 25%;
            --right-sidebar-max-width: 22%;
        }
    }

    &.compact {
        @include respond(md) {
            --left-sidebar-max-width: 25%;
            max-width: 768px;
        }

        @include respond(lg) {
            max-width: 1024px;
            --left-sidebar-max-width: 20%;
        }

        @include respond(xl) {
            max-width: 1280px;
        }
    }
}

至此，主页的修改也告一段落了。以上都是从这位大佬那里学来。

修改左侧边栏头像的大小

左侧边栏的元素太多，显得实在有点挤，于是索性修改了一下博客的头像大小。需要在主题根目录下的assets/scss/partials/sidebar.scss文件。

@include respond(2xl) {
--sidebar-avatar-size: 125px;  // 修改头像大小的代码  
--sidebar-element-separation: 10px;
}

返回顶部按钮的添加

在参考过其它使用这个主题的博主之后发现，如果一篇文章太长，没有返回顶部这个按钮可能会在某些情况下造成体验的不舒适，于是决定加上这个功能。最开始是希望能够在一个页面的右下角添加这个按钮，但是无法解决页面缩放时显示位置与主页面之间的关系的问题，因此决定借助目录放置于目录的下方。

首先是按钮的函数，参考了slim主题，具体是在layouts/partials/head/script.html中加入如下代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    // Check to see if the window is top if not then display button
    $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
    });

    // Click event to scroll to top
    $('#back-to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 1000);
    return false;
    });
</script>

这段代码可以监听窗口抖动，从而控制按钮的显示和隐藏。

然后是添加返回顶部的按钮，由于这个按钮需要和文章目录保持一个相对固定的位置，因此需要修改layouts/_default/single.html，在aside标签下加入如下代码：

{{ $topImg := resources.Get ("img/top.png") }}
{{ $topImg := $topImg.Resize "40x" }}
<a id="back-to-top" href="#">
    <img src="{{ $topImg.RelPermalink }}" />
</a>

利用一张图片作为返回顶部的链接。最后我们需要通过css来为这个按钮添加样式。首先我们需要找到之前提过的custom.scss文件，在文件中加入如下代码：

#go-top {
    bottom: -15px;
    right: 2px;
    display: none;
    position: absolute;  
    border: 0;
    &:hover {
        filter: opacity(60%);  // 悬停淡化
    }

其中bottom值是我觉得可以避免当目录过长时会几乎占满整个屏幕，导致按钮没有地方放的问题。

修改Toc样式

由于Toc每个标题之间的行间距有点大，于是就缩了缩，在custom.scss文件中又追加了如下的修改：

.widget--toc {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    display: flex;
    flex-direction: column;
    color: var(--card-text-color-main);
    overflow: hidden;
    // display:inline-block;
    font-size: 16px;

    #TableOfContents {
        overflow-x: auto;
        ol,
        ul {
            margin: 10; 
            padding: 0;
        }
        ol {
            list-style-type: none;
            counter-reset: item;
            li:before {
                counter-increment: item;
                content: counters(item, ".") ". ";
                font-weight: bold;
                margin-right: 0px;
            }
        }
        & > ul {
            padding: 0 1em;
        }
        li {
            margin: 5px 20px;
            padding: 6px; 
            & > ol,
            & > ul {
                margin-top: 10px;
                padding-left: 6px;
                margin-bottom: -5px;
                & > li:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

追加了一些修改，在使用了一段时间后发现，每个目录项前面的小点在一定程度上占了空间，挤压了目录字，导致每个目录项容易换行，以及在margin和padding上还可以有缩减的空间，于是在custom.scss文件上做了以下修改（删了一些无用代码，注释了小点，并修改了一些间距）

.widget--toc {
    // display:inline-block;
    font-size: 16px;

    #TableOfContents {
        overflow-x: auto;
        max-height: 70vh;
        ol,
        ul {
            list-style-type: none;
            margin: 0; 
            padding: 0;
        }
        // & > ul {
        //     padding: 0 1em;
        // }
        li {
            margin: 5px 10px;
            padding: 6px; 
            & > ol,
            & > ul {
                margin-top: 10px;
                padding-left: 8px;
                margin-bottom: -5px;
                & > li:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

修改分类标签样式

这个stack主题属实是有点迷，一样的主题推送到GitHub居然能产生不同的效果，无奈的我只能又去修改原先又大又丑的分类标签，根据我个人的喜好，将标签修改为小巧一点，放弃了原来的图片修饰，相关的代码写于custom.scss文件中：

.subsection-list {
    margin-bottom: var(--section-separation);
    overflow-x: auto;

    .article-list--tile {
        display: flex;
        padding-bottom: 15px;

        article {
            width: 200px;  // 修改分类的标签大小
            height: 50px; 
            margin-right: 5px; 
            flex-shrink: 0;
            // box-shadow: var(--shadow-l2); 

            .article-title {
                margin: 0;
                font-size: 1.5rem; 
                text-align: center;  // 保证字居中美观一点
            }

            .article-details {
                padding: 20px;
                justify-content: center; 
            }
        }
    }
}

修改相关文章图标样式

在第一次推送到GitHub之后发现，相关文章的推荐标签有点与当前屏幕不相符，于是决定将相关文章的标签的大小调整到与分类的大小差不多大，于是我们依旧在custom.scss文件中追加修改样式的代码：

.related-contents--wrapper {
    .related-contents {
        article {
            width: 200px;
            height: 85px;
            .article-title {
                font-size: 1.6rem;
            }
        }
    }
}

修改滚动条样式

当文章的目录太长时便会产生滚动条，而默认的滚动条实在是丑得不想形容。由于不是很想再调试了，于是再次参考大佬的操作，而且既然想改滚动条了，索性一步到位直接全改，我们需要在custom.scss文件中添加如下代码：

html {
    ::-webkit-scrollbar {
        width: 20px;
      }
      
      ::-webkit-scrollbar-track {
        background-color: transparent;
      }
      
      ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
      }
}

支持数学公式编辑

在一次使用了markdown内联的$LaTeX$公式发现部署上去之后没有反应时，便一直想使文章能够支持数学公式的编辑。于是在时隔多日之后终于有了解决办法。

我们需要在主题根目录的/layouts/partials创建math.html文件，之后在这个文件中加入如下代码

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js" integrity="sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

这段代码能够自动渲染数学公式，当然这样还是不够的，我们还需要在每篇文章的markdown的header加上math="true"的选择字段。