文章摘要

开始

Hexo 中有两种形式添加摘要：

  • 文章开头配置 description
  • 在文章中直接添加 <!-- more -->

添加 description

Hexo 每篇文章的开头可以表示文章的信息,其中可以添加 descrption 来表示正篇文章的摘要

---
title: Hexo 显示文章摘要
date: 2021-09-24 13:47:10
tags: Hexo
categories: Hexo
description: 显示文章摘要 # 这里表示添加文章摘要
---

添加 more

在文章的适当处直接添加

---
# 前言
> Hexo 默认的文章是全部展示，对于阅读的体验感很差，所以就需要对文章进行摘要显示部分文章内容

# Start
> Hexo 中有两种形式添加摘要：
>   - 文章开头配置 `description`  
>   - 在文章中直接添加 `<!-- more -->`

<!-- more -->

效果

202109241407073.png

文章置顶🔝

卸载默认的置顶方式

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在需要置顶的文章的Front-matter中加上top: true 或者top: 任意数字，比如：

---
title: Java 基础
date: 2021-09-18 10:29:39
top: true
---

设置置顶图标

我使用主题是Next,其中Next的各版本之间略有差异，我的版本是8.7.1
打开/themes/next/layout/_macro/ 目录下的post.njk文件
在<div class="post-meta-container"> 内找到 post-meta.njk 文件路径：

 <div class="post-meta-container">
  {{ partial('_partials/post/post-meta.njk') }} # 实际在 post-meta.njk 这个文件里面去修改

  {%- if post.description and (not theme.excerpt_description or not is_index) %}
    <div class="post-description">{{ post.description }}</div>
  {%- endif %}
</div>

打开/themes/hexo-theme-next/layout/_partials/post/post-meta.njk，在 <div class="post-meta"> 插入：

{% if post.top %}
    <span class="post-meta-item">
      <i class="fas fa-thumbtack"></i>
      <font color="RED">置顶</font>
    </span>
{% endif %}

添加位置

<div class="post-meta">
  {%- set date_diff = date(post.date) != date(post.updated) %}
  {%- set time_diff = time(post.date) != time(post.updated) %}
  # 插入下面的内容
  {% if post.top %}
    <span class="post-meta-item">
      <i class="fas fa-thumbtack"></i>
      <font color="RED">置顶</font>
    </span>
  {% endif %}

其中置顶前的标签可以在 Fontawesome 替换你喜欢的

文章添加字数统计和阅读时长

安装插件

如果没有安装 hexo-wordcount 插件，先安装该插件：

npm i --save hexo-wordcount

配置

Next 主题默认集成了文章 【字数统计】和【阅读时长】，我们只需要开启配置即可，

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         # 单篇 字数统计
  min2read: true          # 单篇 阅读时长
  totalcount: false       # 网站 字数统计
  separated_meta: true

添加样式

打开 /themes/hexo-theme-next/layout/_partials/post/post-meta.njk 文件，在 div 的最下面添加以下代码：

<span title="{{ __('post.wordcount') }}">
  <span class="post-meta-divider">&nbsp&nbsp|&nbsp&nbsphe</span>
  <i class="fas fa-book"></i>
  字数统计:{{ wordcount(post.content) }}字
</span>
<span title="{{ __('post.min2read') }}">
  <span class="post-meta-divider">&nbsp&nbsp|&nbsp&nbsp</span>
  <i class="far fa-clock"></i>
  阅读时长≈{{ min2read(post.content) }}分钟
</span>

效果

202109241340113.png

参考