前言

修改一些样式符合个人习惯，看着顺眼一点，记录一下

正文

目录滚动条宽度

修改位置

themes\hugo-magic\assets\scss\custom.scss

添加代码对滚动条样式生效（窄一些舒服点）

// 自定义目录滚动条样式
#TableOfContents {
    scrollbar-width: none;  
    scrollbar-color: var(--scrollbar-thumb) transparent;

}

// 自定义相关文章滚动条样式
.related-content {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;

}
// 全局滚动条样式
* {
  scrollbar-width: thin;  // 设置滚动条为细样式
  scrollbar-color: #888 transparent;  // 设置滚动条颜色和轨道颜色
}

全局字体大小

修改位置

themes\hugo-magic\assets\scss\custom.scss

1.8rem最佳

// 字体显示策略
@font-face {
  font-family: 'LXGW WenKai';
  font-display: swap;
}

@font-face {
  font-family: 'HarmonyOS_Regular';
  font-display: swap;
}

// 页面基本配色
:root {
  // 全局顶部边距
  --main-top-padding: 30px;
  // 全局卡片圆角
  --card-border-radius: 15px;
  // 标签云卡片圆角
  --tag-border-radius: 8px;
  // 卡片间距
  --section-separation: 33px;
  // 全局字体大小
  --article-font-size: 1.8rem;
  // 行内代码背景色
  --code-background-color: #f8f8f8;
  // 行内代码前景色
  --code-text-color: #e96900;
  // 代码字体
  --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  // 暗色模式下样式
  &[data-scheme="dark"] {
    // 行内代码背景色
    --code-background-color: #ff6d1b17;
    // 行内代码前景色
    --code-text-color: #e96900;
  }
}

目录样式微调

原始的目录样式左右内边距不统一，子级目录的缩进导致看着怪怪的，所以需要调整一下

代码位置themes\hugo-magic\assets\scss\partials\layout\article.scss

主要修改.widget--toc的样式

.widget--toc {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    display: flex;
    flex-direction: column;
    color: var(--card-text-color-main);
    overflow: hidden;

    ::-webkit-scrollbar-thumb {
        background-color: var(--card-separator-color);
    }

    #TableOfContents {
        overflow-x: auto;
        max-height: 75vh;

        ol,
        ul {
            margin: 0;
            padding: 0;
        }

        ol {
            list-style-type: none;
            counter-reset: item;

            li a:first-of-type::before {
                counter-increment: item;
                content: counters(item, ".") ". ";
                font-weight: bold;
                margin-right: 5px;
            }
        }

        & > ul {
            padding: 0 2em;
        }

        li {
            margin: 13px 0.4em 13px 1em;
            padding: 5px;

            & > ol,
            & > ul {
                margin-top: 10px;
                padding-left: 0;
                padding-right: 0em;
                margin-bottom: -5px;

                & > li:last-child {
                    margin-bottom: 0;
                }
            }
        }
        li.active-class > a {
            border-left: var(--heading-border-size) solid var(--accent-color);
            font-weight: bold;
        }

        ul li.active-class > a {
            display: block;
        }

        @function repeat($str, $n) {
            $result: "";
            @for $_ from 0 to $n {
                $result: $result + $str;
            }
            @return $result;
        }

        // Support up to 6 levels of indentation for lists in ToCs
        @for $i from 0 to 5 {
            & > ul #{repeat("> li > ul", $i)} > li.active-class > a {
                $n: 25 + $i * 35;
                margin-left: calc(-#{$n}px - 1em);
                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
            }

            & > ol #{repeat("> li > ol", $i)} > li.active-class > a {
                $n: 9 + $i * 35;
                margin-left: calc(-#{$n}px - 1em);
                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
                display: block;
            }
        }
    }
}

点这里展开详细说明！

1、最外层容器的 padding：

& > ul {

  padding: 0 2em; *// 整个目录的左右内边距，0是上下内边距，2em是左右内边距*

}

2、每个目录项的间距：

li {

  margin: 13px 0 13px 1em; *// 上右下左的外边距*

  *// 13px: 上边距*

  *// 0: 右边距*

  *// 13px: 下边距*

  *// 1em: 左边距（缩进）*

  

  padding: 5px; *// 目录项的内边距，所有方向都是5px*

}

3、子目录的间距：

& > ol,

& > ul {

  margin-top: 10px; *// 子目录距离父目录的上边距*

  padding-left: 0;  *// 子目录的左内边距*

  padding-right: 1em; *// 子目录的右内边距*

  margin-bottom: -5px; *// 负的下边距，用于微调最后一个子项的间距*

}

简单来说：

整体左右留白：2em（约32px）
每级缩进：1em（约16px）
目录项之间的间距：13px
目录项内部的padding：5px
子目录组的上边距：10px

对于没有子级目录的情况

#TableOfContents {
    // ... existing code ...
    
    & > ul {
        padding: 0 2em;  // 一级目录：左内边距0，右内边距2em
    }

    li {
        margin: 13px 0 13px 1em;  // 上13px 右0 下13px 左1em
        padding: 5px;  // 所有方向都是5px的内边距
        // ... existing code ...
    }
}

外边距：上下13px，左1em，右0
内边距：所有方向5px
容器的内边距：左0，右2em

各级目录内边距一览

1级目录：

上：13px
右：2em (来自& > ul { padding: 0 2em })
下：13px
左：0

2级目录：

上：13px
右：0.4em (来自margin: 13px 0.4em 13px 1em)
下：13px
左：1em + 35px (基础1em + 第一级缩进35px)

3级目录：

上：13px
右：0.4em
下：13px
左：1em + 70px (基础1em + 第二级缩进70px)
4级目录：
上：13px
右：0.4em
下：13px
左：1em + 105px (基础1em + 第三级缩进105px)

5级目录：

上：13px
右：0.4em
下：13px
左：1em + 140px (基础1em + 第四级缩进140px)

激活目录的样式：

    li.active-class > a {
        border-left: var(--heading-border-size) solid var(--accent-color);
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-offset: 7px;
        text-decoration-thickness: 1.5px;
    }

text-decoration: underline; 添加下划线
text-decoration-style: dashed; 改为虚线
text-underline-offset: 7px; 下划线与文字底部的距离
text-decoration-thickness: 1.5px; 下划线的粗细

前言

正文