HEXO & CARDS主题进阶配置

在默认的card主题之上，我设置了标签、分类、搜索、夜间模式、页面目录、footer部分以及延伸引入rss订阅,那么第二步要进行的是进一步丰富主题的功能和样式

• 为文章添加缩略图
• 可选择创建折叠文本样式
• 文章置顶设置
• 添加字数统计和阅读时长功能

为文章添加缩略图

1. 打开 themes/cards/_config.yml配置文件，开启为true即可

1
2
3

thumbnail: 
    enable: true
    default: # 默认缩略图，当页面 `thumbnail` 字段为空时 fallback 至此参数

2. 在front-matter中，声明thumbnail，添加图片链接

1
2
3
4
5
6
7

title:  HEXO & 给博客添加RSS
date: 2020-11-27 17:58:54
thumbnail: https://i.loli.net/2020/11/27/CUZ6KXcRBTdjIGH.jpg
categories:
- HEXO
tags: 
- hexo主题配置

可选择创建折叠文本样式

1. 打开 themes/cards/_config.yml配置文件，打开fold内容折叠插件

1
2
3
4
5

# fold 内容折叠插件
fold: 
  enable: true
  summary:   # 默认摘要
  motion: 

2. 在文章中使用插件，默认内容折叠

1
2
3
4
5

{% fold 折叠摘要 %}

自定义正文

{% endfold %}

3. 内容折叠默认展开，点击时折叠

1
2
3
4
5

{% fold open, 折叠摘要 %}

自定义正文

{% endfold %}

文章置顶设置

1. 官方插件原始文档 hexo-generator-topindex

2. 安装
   $ npm install hexo-generator-topindex --save

3. 在front-matter设置top属性，top值越大，优先级越高

1
2
3
4
5
6
7
8

title: 何为flex布局？
date: 2020-11-26 18:26:46
thumbnail: https://i.loli.net/2020/11/26/Vi4CmR8uKgxdqBF.jpg
top: 16
categories:
- CSS3
tags:
- flex

4. 我个人在最初使用时，好像提示该插件已经存在，似乎主题内置，很不clear，我是直接在头部声明top值就可置顶

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

1. 官方插件文档 hexo-wordcount

2. 安装插件
   npm i --save hexo-wordcount

3. 找到主题文件夹下该路径themes\cards\layout\_partial\post\post-content.ejs,添加代码，添加自定义文字，完成设定，注意：不要随意更改代码

   • 原始文档

     1 2 3 4 5

     <div class="post-title__meta"> <%- partial('_meta/date') %> <%- partial('_meta/category') %> <%- partial('_plugins/statistics/index', {position: 'page'}) %> </div>

   • 添加代码后

     1 2 3 4 5 6

     <div class="post-title__meta"> <%- partial('_meta/date') %> <%- partial('_meta/category') %> <%- partial('_plugins/statistics/index', {position: 'page'}) %> | 本篇文章共<span class="post-count"><%= wordcount(post.content) %>字</span>，预计阅读<span class="post-count"><%= min2read(post.content) %>分钟</span> </div>