HEXO & CARDS主题进阶配置

我想对于建立一个网站而言，第一步要能够做到正常在线访问以及定期产出一定的内容,

其实当网站建立好那一刻，这第一步已经算是完成了，不过我在此基础之上做了些扩展

在默认的card主题之上，我设置了标签、分类、搜索、夜间模式、页面目录、footer部分以及延伸引入rss订阅

简洁不等于简单，如果不做出这些扩展性的设置，那么整个页面就显得很空，缺少辅助性的功能。

那么第二部要进行的是进一步丰富主题的功能和样式

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

---

为文章添加缩略图

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

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

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

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内容折叠插件

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

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

{% fold 折叠摘要 %}

自定义正文

{% endfold %}

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

{% fold open, 折叠摘要 %}

自定义正文

{% endfold %}

文章置顶设置

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

2. 安装

$ npm install hexo-generator-topindex --save

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

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,添加代码，添加自定义文字，完成设定，注意：不要随意更改代码
   • 原始文档

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

   • 添加代码后

   <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>