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三連查看效果即可。