简言

hexo搭建静态博客前面的教程我们已经安排了，安装完成之后相信大家都会有一个问题就是在主题之外要如何添加自定义页面？例如添加「照片墙」或「作品集」，这分两种情况：

  • 主题内渲染，添加的模块仍在主题内，主题头部信息依然存在，仅仅是在特定区域进行渲染（适合添加 about 页面）
  • 完全页面渲染，在主题内点击对应链接跳转到一个完全崭新的页面
    hexo 的执行逻辑
    source 文件夹下存放了待被转化的 markdown 文件，在执行hexo g命令时，source 目录下的文件将被转化为 html 文件。

主题内渲染

以添加「照片墙」模块为例：
主题配置文件butterfly.yml中添加对应的menu项，如：

1
2
3
4
5
6
7
8
9
10
11
menu:

  首页: /||fa fa-home
  时间轴: /archives/||fa fa-archive
  标签: /tags/||fa fa-tags
  分类: /categories/||fa fa-folder-open
  音乐: /music/|| fa fa-music
  留言板: /message/||fa fa-comment
  相册: /gallery/||fa fa-photo
  友链: /link/||fa fa-link
  关于: /about/||fa fa-user-circle-o

例如我们创建分类页

1.前往你的Hexo博客的根目录

2.输入hexo new page categories，这个的名称和上面的要一致

3.你会找到source/categories/index.md这个文件

4.修改这个文件

1
2
3
4
5
6
7
8
9
---
title: 
date: 2019-09-24 20:57:12
categories:
 - Hexo
tags:
 - blog
layout: false #关闭渲染
---

完全界面(自定义界面)

下面介绍两种方法。

第一种

第一种方法是使用Hexo提供的跳过渲染配置，适用于整个目录的设置。具体步骤，打开博客根目录_config.yml，找到其中skip_render项，这个项目用来配置/source/中需要跳过渲染的文件或目录，例如希望跳过/source/projects/里的所有文件渲染，可以配置为：

1
skip_render: projects/**

匹配规则是一种类似正则的规则，官方给出的参考是这个。另外在测试这个功能的时候发现，Hexo的内部缓存不是特别好用，有时候你修改了配置但生成出来的内容不一定及时应用了新配置，最好在生成之前执行一下hexo clean命令，清除掉旧的生成文件和缓存。

第二种

第二种方法是给单个文件添加不应用模板的标记，适用于个别特殊文件的处理。例如我们的网站如果要使用百度统计，往往需要在根目录放一个html格式的验证文件，这个文件默认也会经过用主题模板渲染，避免渲染的办法就是在文件头部添加如下内容：

1
2
3
---
layout: false
---

这样，这个文件就不会经过模板渲染，最终发布到/public/里的文件就是去掉标记后的文件的样子。

我们的效果图

总结

我们这里的主题是Butteryfly，我这里使用的自定义的方式是将文件删掉

例如我们这个想将关于页面做成自己的简历页面，进入source的文件about，将index.md删掉

然后进入你的网站文件夹

在public文件夹下创建一个about文件夹；

2.把自己网页的所有资源文件都复制到about里面；

所以这里大家也就理解了，public是我们的网站文件夹，将自定义的网站文件放入其中即可，然后路径就是/about(文件的名称)