大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
概述
最近 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三连查看效果即可。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170769.html原文链接：https://javaforall.net
