Hexo 使用 hexo-theme-material 实现酷炫
2018-05-09 本文已影响0人
sunxiaochuan
资料
简单的使用方法参考上篇笔记
hexo-theme-material Github 地址
hexo-theme-material 中文文档
hexo-theme-material Icon 图标库
- 展示图
image.png
正文
详细的简单的方法这里便不再赘述，可看上面的文档自行操作，这里只记录一下较为复杂的东西，切记要照着上面的顶部文档操作完了之后才可以看下面的操作，不然的话直接操作可能会出错
创建页面的步骤，这里以 about 页面为例
- 命令行
hexo new page about
执行上述命令之后在项目的资源目录 source 下便有了 about 目录，内部还会自动的创建一个 index.md 文件可供编辑，结构如下图
image.png
- 之后在
material目录下的_config.yml配置文件中，设置about页面的路径即可，具体设置如下
image.png
这里的icon的值可以去顶部资料资源的icon图标库中查看
- 刷新页面进行查看，这里的前提是已启动了服务
hexo server
image.png
创建新的笔记以及在顶部添加相应的 tags 和 categorise
- 命令行
hexo new post testdemo
执行上述命令之后，在项目的 source -> _posts 目录下会新建一个 testdemo.md 文件，这个就是我们写内容的 markdown 文件
- 下面简单写下示例的文件
---
title: 前端的跨域问题
date: 2018-05-08 22:37:56
tags: [跨域,web前端,Cookie,jsonp]
categories: [web前端]
---
# 这个是一个测试的页面
- 之后刷新页面即可，需要注意的是如下所示这些的页面都是需要相互的对应的设置的
image.png
福利时间到了，技术的目的是为了使这个世界变得更加的美好。
更新 2018.5.19
增加一个本地搜索的功能
- 使用本地搜索需要安装 hexo-generator-search 插件。
yarn add hexo-generator-search
- 在站点配置文件中新增如下的代码片段
# 新增搜索页面
search:
path: search.xml
field: all
image.png
