Hexo-Matery主题细致美化_jjnlubmb7ki

Hexo-Matery主题美化

在一番瞎改js代码后，终于无法忍受next主题，于是愤然投入Matery大家庭，结果证明，香！

下面是我记录的配置Matery主题的流程，仅供后来的师傅们参考。

大家可以来我Hexo博客主页看看具体效果 我的小站

下载安装Matery主题

首先在hexo官网主题里面搜索Matery主题点击进入作者大大的github，然后下载 master 分支的最新稳定版的代码，解压缩后将 hexo-theme-matery 的文件夹重命名为matery，复制到Hexo 的 themes 文件夹中

可以在themes 文件夹下使用Git clone命令来下载：

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

切换主题

下载完后，将站点配置文件中的 theme 值修改为你下载主题的文件名

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery
1
2
3
4

一些其他在站点目录配置：

language: zh-CN网站的语言设置

url: https://www.guixinchn.cn 网站的网站（域名）

per_page: 12建议修改为 6 的倍数，主题排版比较好

新建页面

1、标签页

hexo new page "tags"
1

编辑新建的/source/tags/index.md文件

---
title: tags
date: 2020-02-23 19:37:07
type: "tags"
layout: "tags"
---
1
2
3
4
5
6

2、分类页

hexo new page "categories"
1

编辑新建的/source/categories/index.md文件

---
title: categories
date: 2020-02-23 19:37:07
type: "categories"
layout: "categories"
---
1
2
3
4
5
6

3、关于页面

hexo new page "about"
1

编辑新建的/source/about/index.md文件

---
title: about
date: 2020-02-23 19:37:07
type: "about"
layout: "about"
---
1
2
3
4
5
6

4、留言板

hexo new page "contact"
1

编辑新建的/source/contact/index.md文件

---
title: contact
date: 2020-02-23 19:37:07
type: "contact"
layout: "contact"
---
1
2
3
4
5
6

5、友情链接

hexo new page "friends"
1

编辑新建的/source/friends/index.md文件

---
title: friends
date: 2020-02-23 19:37:07
type: "friends"
layout: "friends"
---
1
2
3
4
5
6

然后在博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/csdn.png",
	    "name": "Blog",
	    "introduction": "CSDN社区",
	    "url": "https://blog.csdn.net/guixinchn",
	    "title": "CSDN"
	}, 
	{
        "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/bokeyuan.png",
        "name": "Blog",
        "introduction": "博客园",
        "url": "https://www.cnblogs.com/guixinchn/",
        "title": "博客园"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/github.png",
	    "name": "github",
	    "introduction": "github",
	    "url": "https://github.com/guixinchn",
	    "title": "github"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/touxiang.jpg",
	    "name": "Blog",
	    "introduction": "咕咕星",
	    "url": "https://ythan.top",
	    "title": "咕咕星"
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

6、添加 404 页面

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

---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面了"
---
1
2
3
4
5
6
7

紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 90.2vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

7、添加自定义页面

首先在站点目录下的 source 文件夹下新建 aboutme 文件，文件名可自定义，然后编写一个 index.html 放入 aboutme 文件夹下，然后在主题配置文件下的导航配置信息添加下面的配置：

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
1
2
3
4
5
6
7
8
9
10

然后在站点配置文件下，找到 skip_render，在后面添加属性，如下：

# 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件
skip_render: 
    - aboutme/** 
    - aaa/**
    - bbb/**
1
2
3
4
5

配置菜单导航

配置基本菜单导航的名称、路径 url 和图标 icon.

图标 icon 可以在 Font Awesome 中查找

# main menu navigation url and icon
# 配置菜单导航的名称、路径和图标icon.
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  Friends:
    url: /friends
    icon: fas fa-address-book
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2.在children下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

添加 emoji 表情支持

需要安装插件 hexo-filter-github-emojis

npm install hexo-filter-github-emojis --save
1

没成功

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
1
2
3
4
5
6