薅github羊毛之-hexo主题hexo-theme-matery详配

本文主要是介绍薅github羊毛之-hexo主题hexo-theme-matery详配，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前置操作

配置github及pages: 薅github的羊毛-用pages建自己的博客或静态资源站

hexo并将静态文件上传至github：深秋金色：薅github的羊毛（续）搭建静态博客

文件夹说明

themes ：主题文件夹
source ：资源文件夹，用来存放图片、Markdown文档(文章、草稿）、各种页面（分类、关于页面等）
scaffolds ：文章的模板
public: 该文件夹在使用hexo generate后会自动生成，用于生成静态页面

hexo常见命令

hexo generate # 生成静态页面至 public 目录
hexo server # 开启预览访问端口（默认端口 4000 ，ctrl + c 关闭 server ）
------其他---------
hexo server -s #以静态模式启动
hexo server -p 5000 #更改访问端口 (默认端口为 4000，’ctrl + c’关闭 server)
hexo server -i IP地址 #自定义 IP
hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的 public 文件夹
hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)
hexo init 文件夹名称 #初始化 XX 文件夹名称
npm update hexo -g#升级
npm install hexo -g #安装
node -v #查看 node.js 版本号
npm -v #查看 npm 版本号
git --version #查看 git 版本号
hexo -v #查看 hexo 版本号
hexo new page “music” #新增页面music
hexo new post “文章名称” #新增文章

代码高亮

highlight:enable: falseline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: false
prismjs:enable: truepreprocess: trueline_number: truetab_replace: ''

Matery主题安装

官网教材：Matery 官网教程

cd themes
git clone https://github.com/blinkfox/hexo-theme-matery.git
cd ..

修改 Hexo 根目录下的 _config.yml 的 theme 的值：

theme: hexo-theme-matery
language：zh-CN
per_page: 12 #两处的都改

服务启动

hexo clean #清缓存
hexo g    #重新生成博客文件
hexo server #启动

框架配置

创建categories、tags、about

# 运行如下命令
hexo new page "categories"
hexo new page "tags "
hexo new page "about"

根文件夹的 source/下创建三个 categories、tags 、about文件夹，每一个文件夹下有一个同名的md文件，现修改配置如下

# catetory.md
---
title: categories
date: 2023-12-31 16:08:37
type: "categories"
layout: "categories"
---# tags.md
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---# about.md
---
title: about
date: 2023-12-31 16:08:37
type: "about"
layout: "about"
---

创建404.md

在source目录下创建404.md

---
title: 404
date: 2023-12-31 16:38:12
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

全局图片

适用于全局的静态文件，一般指不是post相关的文件，例如image,css,javascript.

在source文件夹下创建images,然后通过下面的代码来引用

![](/images/image.jpg)

这种方式预览markdown文件的时候，图片没有办法正常显示，这个只会在Hexo生成部署文件后，可以看到

菜单导航配置

修改配置 themes\hexo-theme-matery\_config.yml

如果想改图标可以在Find Icons with the Perfect Look & Feel | Font Awesome 找

menu:Index:url: /icon: fas fa-homeTags:url: /tagsicon: fas fa-tagsCategories:url: /categoriesicon: fas fa-bookmarkArchives:url: /archivesicon: fas fa-archiveAbout:url: /abouticon: fas fa-user-circleFriends:url: /friendsicon: fas fa-address-book

启动服务-测试