查看原文
其他

一款 Material Design 风格的 Hexo 主题

TJ TJ君 2022-05-20

大家好,我是TJ

关注TJ君,回复“武功秘籍”免费获取计算机宝典书籍

TJ君将之前发过的各种项目及工具进行了整理,收录到了GitHub项目,欢迎各位小伙伴光临Star,地址如下:https://github.com/Wechat-TJ/TJ-WORLD-FORU

Hexo博客,小伙伴们用过没有呢?作为一款基于Node.js的静态博客生成程序,Hexo博客是一个特别适合程序员装逼的博客系统。

今天TJ君就跟大家分享一个Material Design 风格的 Hexo 主题,让大家在装逼的道路上一路领先!

让我们先来看下具体的风格效果

如果喜欢这个风格的话,我们继续往下看,想使用这种风格装饰自己的Hexo博客的话只需要四个步骤。

步骤一

当然是先建立一个自己的Hexo博客,这个可以参考Hexo博客官方的使用指南。

步骤二

获取主题最新版本,这里有两个方式

方式1

Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令:

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制进去。

方式2

下载项目最新的release版本解压到themes目录,并将解压出的文件夹重命名为 fluid。

步骤三

指定主题,修改_config.yml


theme: fluid  # 指定主题

language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改

步骤四

创建「关于页」,首次使用主题的「关于页」需要手动创建:


hexo new page about


创建成功后,编辑博客目录下 /source/about/index.md,添加 layout 属性。

修改后的文件示例如下:

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

目前这款主题支持的功能有:

  • 图片懒加载
  • 自定义代码高亮方案
  • 内置多语言
  • 支持多款评论插件
  • 支持使用数据文件存放配置
  • 自定义静态资源 CDN
  • 无比详实的用户文档
  • 内置文章搜索
  • 页脚备案信息
  • 网页访问统计
  • 支持脚注语法
  • 支持 LaTeX 数学公式
  • 支持 mermaid 流程图
  • 暗色模式

感兴趣的小伙伴,赶紧来试试吧!

点击下方卡片,关注公众号“TJ君

回复“主题2022”,获取仓库地址

关注我,每天了解一个牛x、好用、有趣的东东


往期推荐

一个去除图片背景的抠图利器
非常时期必备的囤货手册!
可能是最流行的Mysql SQL审核平台


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存