0x00 写在前面

  • 我个人不是特别喜欢LeaveIt主题中的行内Code的那个样式,感觉还是CSDN中的那个样子比较好看。
  • 遇到一个小坑:Hugo的普通版本没有Sass/SCSS的支持,因此,想要改主题中的样式文件要安装Hugo那个成带有extended的版本,如 hugo_extended_0.53_Linux-64bit.deb

0x01 正式动手

  • 首先去作者对主题的介绍中看看有没有提到自定义样式,很棒的是作者提到了代码高亮的问题,很好,这就是成功第一步了。
  • 修改 assts/css/_page/post.scsscode:not([class]) 的样式代码:
/* 原来的代码 */
code:not([class]) {
    padding: 5px 5px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
    margin-left: 3px;
    margin-right: 3px;

    .dark-theme &:not([class]) {
        background: transparent;
        box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
    }
}

/* 修改成自己想要的样式 */
code:not([class]) {
    padding: 2px 4px;
    background: #f9f2f4;
    color: #ef3982;
    border-radius: 2px;
    margin-left: 3px;
    margin-right: 3px;
    
    .dark-theme &:not([class]) {
        background: #2d2d2d;
        color: #e06c75;
    }
}

0x02 完成

  • 看看效果 It's my precious.