消解炼金术

.Paginate 是 Hugo 内置的分页函数，可以将大量内容分成多页显示，避免单页面加载太多文章。

{{ range .Paginator.Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <p>{{ .Summary }}</p>
{{ end }}

按section主题分页，再添加摘录与展开缩放功能，实现逻辑大概如下：

{{ $articles := .RegularPagesRecursive.ByDate.Reverse }}
{{ $paginatedArticles := .Paginate $articles 10 }}
    {{ range $index, $article := $paginatedArticles.Pages }}
    <article class="article-card">
        {{/* 文章标题 */}}
        <h2><a>{{ .Title }}</a></h2>
        <input type="checkbox" id="expand-{{ $index }}" class="expand-checkbox">
        {{/* 文章详情（摘录） */}}
        <label for="expand-{{ $index }}" class="recent-abstract">
            {{ $article.Content }} // 点击文章内容可展开/折叠
        </label>
    </article>
    {{ end }}

其中摘要class的css关键在于如下：

.recent-abstract {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    /* 显示7行 */
    -webkit-box-orient: vertical;
}

但当内容中有特殊格式时，比如：code/pre，摘要行数可能会被上下撑开，显示不止指定行数。处理摘要中code/pre的代码块时，可以采用css限制去修改它的具体样式：

.recent-abstract pre,
.recent-abstract code {
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    overflow-y: auto;
    max-height: 33px;
}

展开摘要栏时，也要还原css展开样式：

.expand-checkbox:checked~.recent-abstract pre,
.expand-checkbox:checked~.recent-abstract code {
    -webkit-line-clamp: unset;
    max-height: 100%;
}

有inline-block的特殊样式时，也会改变-webkit-的截断逻辑，可以在摘要样式内修改display：

.recent-abstract .special-type {
    display: inline;
}

也可以靠hugo的内置语法把内容转化成纯文本再截断，但会导致特殊格式丢失：

{{ $article.Plain | truncate 500 }}

但实际情况还是会触发一个奇怪的bug，有时pre/code代码块会被无视，不计入行数的运算，于是又会导致文章摘要卡片变长，于是添加了一个额外的预防措施，先定义摘要板块的最大高度，再在展开后取消最大高度：

<!-- 定义最大高度 -->
.recent-abstract {
    max-height: 300px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    /* 显示7行 */
    -webkit-box-orient: vertical;
}

<!-- 点击后移除限制 -->
.expand-checkbox:checked~.recent-abstract {
    max-height: none;
    /* overflow: visible; */
    -webkit-line-clamp: unset;
    /* 移除行数限制 */
    /* 保留其他所有样式不变 */
}