Hugo的LeaveIt主题优化记录一-修复错位，添加toc

标签处的back・home按钮位置错位

这个问题我现在才发现，原来是因为这个主题在生成静态文件的时候需要sass编译。难怪我每次修改/themes/LeaveIt/assets/css/下面的样式总不见效果。后来一直直接修改的站点目录下的/resources/_gen/assets/scss/css/XXX.content文件才会看到修改的效果。直到今天，我发现原来普通版本的hugo是不支持sass编译的，查看了这个#14 Issue才知道原来要用hugo extended版本才可以编译sass。可以从Hugo Release页面下载该版本。

原因

其实就是/themes/LeaveIt/assets/css/_common/_page/post.scss样式表的.post-tags样式问题，这个文件里的.post-tags样式应该是正常的，如下：

    .post-tags {
        padding: 1rem 0 1rem;
        display: flex;
        justify-content: space-between;
    }

而主题目录自带的LeaveIt/resources/_gen/assets/scss/css/main.scss_b95b077eb505d5c0aff8055eaced30ad.content里的.post-tags样式却是不一样。

点此进入相关页面。

原因就在于作者生成的LeaveIt/resources/_gen/assets/scss/css/main.scss_b95b077eb505d5c0aff8055eaced30ad.content里的.post-tags样式是错误的，正常应该在使用hugo命令生成静态页面的时候会通过sass编译重新生成LeaveIt/resources/_gen/assets/scss/css/main.scss_b95b077eb505d5c0aff8055eaced30ad.content文件，但是由于我用的版本不是hugo_extend版本，所以每次生成静态页面都导致在 /themes/LeaveIt/assets/css/_common/_page/post.scss 里面修改的都不能更新到LeaveIt/resources/_gen/assets/scss/css/main.scss_b95b077eb505d5c0aff8055eaced30ad.content所以没有效果。

解决方法

使用支持sass编译的hugo extend版本，就可以通过修改/themes/LeaveIt/assets/css/_common/_page/post.scss来实现效果。
使用普通的不支持sass编译的hugo版本，这样需要直接修改LeaveIt/resources/_gen/assets/scss/css/下的.content文件，这样的话修改/themes/LeaveIt/assets/css/下的文件均无法直接反应效果。
使用普通的不支持sass编译的hugo版本，在修改样式后，需要使用sass命令来编译生成一下.content文件，具体可以参考这里

文章页添加TOC目录支持

原版的LeaveIt主题没有很好的支持TOC文章目录导航，但是@ehlxr 在Github提交了相关pull请求根据这个成功添加了TOC目录支持。

1，在/themes/LeaveIt/assets/css/_custom.scss中添加下面的toc样式，可以根据自己的喜好自定义修改。

.post-toc {
    position: absolute;
    width: 200px;
    margin-left: 780px;
    padding: 10px;
    word-wrap: break-word;
    box-sizing: border-box;

    .post-toc-title {
        margin: 0;
        font-weight: 400;
        text-transform: uppercase;
    }

    .post-toc-content {
        &.always-active ul {
            display: block;
        }

        >nav>ul {
            margin: 10px 0;
        }

        ul {
            padding-left: 0;
            list-style: none;

            ul {
            padding-left: 15px;
            display: none;
            }

            .has-active > ul {
                display: block;
            }
        }
    }

    a:hover {
        color: #c05b4d;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    a {
        display: block;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}

@media only screen and (max-width: 1224px) {
    .post-toc {
        display: none;
    }
}

在/themes/LeaveIt/layouts/partials/下新建toc.html文件，内容为下：

<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">{{ T "toc" }}</h2>
  {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
  <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
    {{.TableOfContents}}
  </div>
</div>
<script type="text/javascript">
  window.onload = function () {
    var fix = $('.post-toc');
    var end = $('.post-comment');
    var fixTop = fix.offset().top, fixHeight = fix.height();
    var endTop, miss;
    var offsetTop = fix[0].offsetTop;
    $(window).scroll(function () {
      var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
      if (end.length > 0) {
        endTop = end.offset().top;
        miss = endTop - docTop - fixHeight;
      }
      if (fixTop < docTop) {
        fix.css({ 'position': 'fixed' });
        if ((end.length > 0) && (endTop < (docTop + fixHeight))) {
          fix.css({ top: miss });
        } else {
          fix.css({ top: 0 });
        }
      } else {
        fix.css({ 'position': 'absolute' });
        fix.css({ top: offsetTop });
      }
    })
  }
</script>

在文章页的模板/themes/LeaveIt/layouts/_default/single.html中 </header>标签后引入TOC模板

	{{ if ( .Site.Params.toc | default true ) }}
          {{ partial "toc.html" . }}
	{{ end }}

添加后重新使用hugo来生成静态页面，可以在文章页查看到已经有toc目录导航了。当然前提是你得在编辑文章的时候使用到 h1，h2等标题样式。

最后站点的配置文件config.toml添加以下配置

toc = true                # 是否开启目录
autoCollapseToc = true   # Auto expand and collapse toc

放大文章内图片显示

LeaveIt主题内置了LightGallery灯箱效果，所以图片原状态是比较小，需要点击才能放大，但是通过添加下面的代码就可以让图片放大显示，对眼睛舒服点。

在 assets/css/_custom.scss 中添加下面代码

	.post-warp .post-content img {
  		max-width: 100%;
}

标签处的back・home按钮位置错位

原因

解决方法

文章页添加TOC目录支持

放大文章内图片显示

相关文章