探索hexo-theme-matery主题（二）

一、简述

主题美化部分因人而异，使用别人的模板将会使你在了解并修改主题，量力而行吧，已经走走停停的弄了好一段时间了，这次算是回归，再次捡起来调试。我一直用的是北极狐的hexo-theme-matery这款主题。同类别还有next，butterfly等，也可以寻找其它优秀的模板以及经过魔改的经典模板，推荐参考。

1、常用命令回顾

开始前先总结基本的hexo命令（在gitbash下运行），其命令大全，请查阅hexo官网。

hexo init         #初始化XX文件夹名称，即在当前目录下加载框架

hexo generate     #hexo g 部署之前预先生成静态文件，至 public 目录

hexo server       #hexo s 开启预览访问端口（默认端口 4000 ，ctrl + c 关闭 serve

hexo clean        #网页正常情况下可忽略, 清除缓存，即删掉站点根目录下的 public 文件夹

hexo deploy       #hexo d自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)

hexo server -s                      #以静态模式启动
hexo server -p 5000                 #更改访问端口 (默认端口为 4000，’ctrl + c’关闭 server)
hexo server -i 192.168.xxx.xxx      #自定义 IP

2、基本文件及文件夹说明

• themes ：主题文件夹，可预先加载多各主题，然后在配置文件修改选项以进行主题更换。
• source ：存放博客相关的图片、Markdown文档、及各种页面。请务必管理好文件结构以便博客文档和图片的管理，我是按时间结构。
• _config.yml：配置文件，分站点目录下的配置文件和主题目录下的配置文件，容后细究。

更多的文件解释，仅仅指hexo基本框架文件不包含主题文件（加载主题后的主题文件也很重要），推荐参考。

二、加载主题

打开gitbash，转到博客文件夹，即本次操作的根目录，在cd转至theme文件夹，加载matery主题。

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

加载后首先需要修改配置文件（_config.yml），配置文件一个是未加载主题前的，在站点根目录下，暂且叫它站点配置文件，一个在themes文件下，且叫他主题配置文件。

加载主题后，可快速本地预览，先将站点配置文件中extension部分的theme更改，将默认的原皮landscape改成你下载的后在themes文件夹下新文件夹名称（如下，我用的是hexo-theme-matery）。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery

然后（1、hexo g，2、hexo s），登陆默认的4000端口，即http://localhost:4000/

三、修改主题

1、站点配置文件

site按自己需求改动，我把改动了没反应的删除了，中间原皮配置的分类，菜单栏等全删除，用主题的就行。

2、主题配置文件更改

到这里各有不同，我用的hexo-theme-matery，第一次下载后似乎没有现在下载的那么完美，这回的结构和注释更清晰了，功能一块块的，设置是否启用即可，需额外配置其它模块的还在摸索中。这回先改动了log、链接网址。

首页打字效果及其语句

结果如下主页效果图，黑色框表示站点配置文件改动项。黄色框表示主题配置文件改动项。

这回就弄到这，关于菜单栏的部分项如“标签”、分类、关于、留言板、友情链接等需要手动新建出来，参考。

四、新增页面

1、新增菜单栏二级页面

标签（tags）、分类（categories）、关于（about）、友链（friends）

在gitbash中，转到站点目录，运行hexo new page “**”，分别是标题上的四类，运行一条命令后，在站点目录的source文件下产生tags文件，编辑文件夹下的index.md。由于hexo new page后 ，自动生成各文件夹下的index.md文档，包含前两行tille和date，因此只需要复制后两行。

#<<<<<<<<<<<<<<------------在gitbash上运行----------->>>>>>>>>>>>>>>
hexo new page "tags"

#<<<<<<<<<<<<<<------------tag文件下index.md 内容----------->>>>>>>>>>>>>>>
---
title: tags
date: 2024-05-08 17:40:41
type: "tags"
layout: "tags"
---

#<<<<<<<<<---同理于 categories、about、friends文件下的index.md 内容--->>>>>>>>>>
## 分别添加两行

type: "categories"
layout: "categories"

type: "about"
layout: "about"

type: "friends"
layout: "friends"

新建完友链页后，在 source 目录下新建 _data 目录的friends.json 文件中添加你需要添加的友链（参考是说自己新建，我现在下载的最新的是已经配备的friends.json）。放置比如，下面这样。遇到大佬的网站也可以收藏，有头像的话，直接复制头像链接到这里的avatar项那里。其它的name、introduction和title等按照自己的风格填写即可。

[
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/touxiang.jpg",
	    "name": "对羟基苯甲酸",
	    "introduction": "X-Mol",
	    "url": "https://www.x-mol.com/",
	    "title": "别人笑我太疯癫，我笑他人羧基落一边"
	},    
    {
        "avatar": "https://qinng.now.sh/medias/avatar.jpg",
        "name": "Marmalade",
        "introduction": "matery主题参考",
        "url": "https://marmalade.vip/",
        "title": "参观同种hexo主题"       
    },
    {
        "avatar": "https://qinng.now.sh/medias/avatar.jpg",
        "name": "青松一点",
        "introduction": "也无风雨也无晴",
        "url": "https://luokangyuan.com/",
        "title": "参观同类hexo主题"       
    }
]

2、新增404页面

首先再站点根目录下的 source 文件夹下新建 404.md 文件，里面内容如下：

---
title: 404
date: 2024-05-08 19:37:07
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面了"
---

紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容如下：（新下载的已经包装好了这个文件，基本一致，就不按照参考那边把代码复制过来了哈）

3、新增自定义页（个人简历）

按照参考已经走到了，自定义页面，有点新，有点挑战，跟着做吧！我们也跟着在about下新增二级页面

首先需要在站点根目录的source文件夹下新建一个文件夹，自定义名字，也跟着取aboutme，然后在新建的aboutme文件夹下，新建index.html文档，编写如下代码（这个页面乱码，我的是这样，下一小点我将更改它，即换成个人简历页面）

About:
    url: /
    icon: fas fa-address-card
    children:
      - name: 关于我
        url: /about
        icon: fas fa-user-circle
      - name: Another    #这是新添加的，在原有配置基础上添加
        url: /aboutme
        icon: fa fa-user-secret

最后找到站点根目录的配置文件_config.yml，找到Directory下的skip_reder: 添加这三行（别找了！开头被我删了，只好重新initial一份，看看源代码，所以备份还是很重要的，参照这里手打也行）。后面那两行，aaa/***，bbb/***是表示以后你自定义页面都要加一个这个，列举自定义的为aaa文件夹和bbb文件夹。

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:   # 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件
      - aboutme/**
      - aaa/**
      - bbb/**

       然后菜单栏也需要配置好这部分在站点根目录记得也有，有了主题后，用的是主题那里的，所以取主题配置文件_config.yml下找到menu项（就在开头），在menu下找到About子项，从ico后面开始添加。

  About:
    url: /about
    icon: fas fa-user-circle
    children:
        - name: 关于本站                #网页About选项下子菜单名一
          url: /about
          icon: fas fa-user-circle     #图标自定义
        - name: 关于我                  #网页About选项下子菜单名二
          url: /aboutme
          icon: fas fa-address-card    #图标可以自定义

上面讲过，这面aboutme页面乱码的一行字，于是看到了别人简历，我也参考这位博主的ikun简历，其css用的是弹性盒子布局。照猫画虎搞了一下，代码就不提供。方法和上面提到aboutme一样，我这直接把这位博主提供的html文本复制到，刚新建在aboutme下面的index.html中（把原来的代码清空再复制上去），然后css文件也要同博主的命名的一样新建一个，这位博主用的jianli.css, 自定义也行，需要把html文件头文件的href=“xxx.css”换成你自定义的名字。然后就慢慢改慢慢调，借用这位博主的table。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Resume</title>
    <link rel="stylesheet" href="Resume.css">
</head>

建议小问题请教文心一言，只要问题问的准确，解决起来还挺干净利落，比如实现有序列表为中括号形式，实现鼠标悬停显示隐藏文字（主要用来隐藏大名）。

结果如下截图了二级菜单的效果（图左），和添加个人简历页面（图右）。

五、总结

这次的就到这里吧，两三天花在了调简历上面，边做边学，脑袋嗡嗡的。全部都是在本地部署，没有deploy到GitHub上，调的过程中就调一个小点，就hexo g，hexo s一下，然后刷新看效果。这个博客还有留言板这部分功能是空白的。