next5主题自定义摘要

概述

最近 next6 折腾了一段时间，最后还是回到了 next5，但是添加阅读全文按钮以后，默认的摘要生成不太方便，于是就把注意打到了 js 上。

这里整理一下 next5 生成摘要的方法。

一、yaml

这个是 hexo 自带的，通过直接在 yaml 里面配置

---
title: next5主题自定义摘要
date: 2020-12-21
tags: [杂七乱八]
categories: [杂七乱八]
description: 这里是一段摘要
---

不过加完以后， next 会默认在文章详情页面的发布信息下也生成摘要，个人觉得不是很美观。

二、文章截断

这个是 next 自带的，可以通过在文章中插入：

<!-- more -->

在标签之前的部分会作为文章摘要展示，优点是文章详情页面不会再另外展示，比较没关，但是缺点是需要手动一个一个添加，有些老文章没有加摘要还需要手动添加，不太方便。

三、自动截断

在 hexo 的配置文件中添加如下配置：

auto_excerpt:
  enable: true
  length: 200

即可自动生成文章摘要。这种方式优点在于方便，但是长度不固定，而且因为带样式的缘故，可能页面会不是很协调。

在 next6 以后这种方式就不是默认支持的了，需要另外安装插件使用。

四、js 截取摘要

顾名思义，自己写 js 截断，这种方法和自动截断差不多，但是相对比较自由。个人比较习惯博客园那样不带样式的自动摘要，但是折腾来折腾去貌似都没弄出来这个效果于是决定用自己的渣渣 js 写一个。

首先根据渲染出来的页面，写好对应截取文本的 js：

getAbstract();

/**
 * 截取摘要
 */
function getAbstract() {
    let posts = document.getElementById('posts');

    if (document.getElementsByTagName('article').length <= 1) {
        console.log("不在主页！");
        return ;
    }

    let arts = posts.getElementsByClassName("post-body");
    for (let i = 0; i < arts.length; i++) {
        let dom = arts[i];
        let content = dom.innerText
            .substring(0, 250)  + "......";

        let readAll = dom.getElementsByClassName("post-button")[0];
        dom.innerHTML = content;
        dom.appendChild(readAll);
    }
}

该文件命名为 abstract.js，并且放在 themes\next\source\js\src下。

然后找到 \themes\next\layout目录下的 _layout.swig文件，会看到很多通过 include 语法引入的组件，拉到最底下，在 body 标签之前添加 script ：

<!-- 引入目录截取js -->
<script type="text/javascript" src="/js/src/abstract.js"></script>

当然，这个也可以写在那些被 include 引入的组件里头，效果是一样的。

最后 hexo clean && hexo g && hexo s三连查看效果即可。