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

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

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

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

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

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

为文章添加缩略图

  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>

HEXO & CARDS主题进阶配置的更多相关文章

  1. github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  2. 安装配置hexo icarus主题配置

    安装部分配置hexo icarus主题配置 安装icarus 直接下载主题模块放到blog项目 ,blog项目根目录执行 git clone https://github.com/ppoffice/h ...

  3. Hexo搭建个人博客及next主题基本配置

    前言 国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...

  4. CARDS主题 & 导航栏样式修改

    每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...

  5. hexo摸爬滚打之进阶教程

    本文首发在我的个人博客:http://muyunyun.cn/ 写博客有三个层次,第一层次是借鉴居多的博文,第二层次是借鉴后经过消化后有一定量产出的博文,第三层次是原创好文居多的博文.在参考了大量前辈 ...

  6. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  7. Hexo next主题下添加天气插件

    最近在优化hexo 新搭建的博客,想给博客添加一个天气插件,奈何找了很久也没发现,好不容易发现一个天气插件 心知天气:https://www.seniverse.com/widget/get 运气不好 ...

  8. hexo多主题切换

    今天看到一个朋友在github上面的issue 大概问题就是怎么在不同的电脑上面使用 git有个这么个东西Submoudle中文叫做子模块 具体使用教程看这里Git-工具-子模块 这里只说怎么搞hex ...

  9. hexo next主题深度优化(五),评论系统换成gittalk

    文章目录 背景: 开始: 新建comments_git.js 找到comments.swig在最后一个endif之前 引入代码 pjax加入gitalk 遇到的问题 所有的页面共享的一个评论issue ...

随机推荐

  1. 云计算管理平台之OpenStack计算服务nova

    一.nova简介 nova是openstack中的计算服务,其主要作用是帮助我们在计算节点上管理虚拟机的核心服务:这里的计算节点就是指用于提供运行虚拟机实例的主机,通常像这种计算节点有很多台,那么虚拟 ...

  2. 【转】Extension Libraries and Loading Other Image Formats

    FROM: http://lazyfoo.net/tutorials/SDL/06_extension_libraries_and_loading_other_image_formats/index. ...

  3. OJ-1:时钟问题【九度1553】

    题目描述: 如图,给定任意时刻,求时针和分针的夹角(劣弧所对应的角). 输入: 输入包含多组测试数据,每组测试数据由一个按hh:mm表示的时刻组成. 输出: 对于每组测试数据,输出一个浮点数,代表时针 ...

  4. 对hadoop之RPC的理解

    因为公司hadoop集群出现了一些瓶颈,在机器不增加的情况下需要进行优化,不管是存储还是处理性能,更合理的利用现有集群的资源,所以来学习了一波hadoop的rpc相关的知识和hdfs方面的知识,以及y ...

  5. 三分钟快速解析GraphQL基本工作思路!

    欢迎阅读 本文会通过实际场景介绍一下 GraphQL,目的是让你快速了解 GraphQL 是什么,以及基本工作思路,不包含实际用法,所以阅读很轻松. 一.GraphQL 是什么? GraphQL 是后 ...

  6. 什么是麒麟(kylin)?查数据贼快的哟

    前言 微信搜[Java3y]关注这个有梦想的男人,点赞关注是对我最大的支持! 文本已收录至我的GitHub:https://github.com/ZhongFuCheng3y/3y,有300多篇原创文 ...

  7. 懂了!国际算法体系对称算法DES原理

    概念 加密领域主要有国际算法和国密算法两种体系.国密算法是国家密码局认定的国产密码算法.国际算法是由美国安全局发布的算法.由于国密算法安全性高等一系列原因.国内的银行和支付机构都推荐使用国密算法. 从 ...

  8. CentOS修改镜像源头

    CentOS6改为阿里镜像源: 1. cd /etc/yum.repos.d 2. mv CentOS-Base.repo CenOS-Base.repo.bak 3. wget http://mir ...

  9. tcpack--3快速确认模式- ack状态发送&清除

    ACK发送状态的转换图 ACK的发送状态清除 当成功发送ACK时,会删除延迟确认定时器,同时清零ACK的发送状态标志icsk->icsk_ack.pending ACK发送事件主要做了:更新快速 ...

  10. sql 训练及总结

    1.sql语句中=与in的区别,=是指一对一之间的等于,而in是指一对多之间的:同样的道理,<>与 not in的区别,<>是指一对一之间的不等于,而not  in是指一对多之 ...