HEXO & CARDS主题进阶配置

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

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

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

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

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


为文章添加缩略图

  1. 打开 themes/cards/_config.yml配置文件,开启为true即可
thumbnail: 
    enable: true
    default: # 默认缩略图,当页面 `thumbnail` 字段为空时 fallback 至此参数

  1. 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: 
  1. 在文章中使用插件,默认内容折叠
{% fold 折叠摘要 %}

自定义正文

{% endfold %}
  1. 内容折叠默认展开,点击时折叠
{% fold open, 折叠摘要 %}

自定义正文

{% endfold %}

文章置顶设置

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

  2. 安装

$ npm install hexo-generator-topindex --save

  1. 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
  1. 我个人在最初使用时,好像提示该插件已经存在,似乎主题内置,很不clear,我是直接在头部声明top值就可置顶

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

  1. 官方插件文档 hexo-wordcount

  2. 安装插件

npm i --save hexo-wordcount

  1. 找到主题文件夹下该路径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>
    
posted @ 2020-11-29 12:02  Serenpity  阅读(196)  评论(0编辑  收藏  举报