Hexo 使用 hexo-theme-material 实现酷炫的页面效果

资料

简单的使用方法参考上篇笔记
hexo-theme-material Github 地址
hexo-theme-material 中文文档
hexo-theme-material Icon 图标库

  • 展示图
image.png

正文

详细的简单的方法这里便不再赘述,可看上面的文档自行操作,这里只记录一下较为复杂的东西,切记要照着上面的顶部文档操作完了之后才可以看下面的操作,不然的话直接操作可能会出错

创建页面的步骤,这里以 about 页面为例

  1. 命令行
hexo new page about

执行上述命令之后在项目的资源目录 source 下便有了 about 目录,内部还会自动的创建一个 index.md 文件可供编辑,结构如下图

image.png
  1. 之后在 material 目录下的 _config.yml 配置文件中,设置 about 页面的路径即可,具体设置如下

image.png

这里的 icon 的值可以去顶部资料资源的 icon 图标库中查看

  1. 刷新页面进行查看,这里的前提是已启动了服务 hexo server
image.png

创建新的笔记以及在顶部添加相应的 tagscategorise

  1. 命令行
hexo new post testdemo

执行上述命令之后,在项目的 source -> _posts 目录下会新建一个 testdemo.md 文件,这个就是我们写内容的 markdown 文件

  1. 下面简单写下示例的文件
---
title: 前端的跨域问题
date: 2018-05-08 22:37:56
tags: [跨域,web前端,Cookie,jsonp]
categories: [web前端]
---
# 这个是一个测试的页面
  1. 之后刷新页面即可,需要注意的是如下所示这些的页面都是需要相互的对应的设置的
image.png

福利时间到了,技术的目的是为了使这个世界变得更加的美好。

github 源码

更新 2018.5.19

增加一个本地搜索的功能

文档地址

  1. 使用本地搜索需要安装 hexo-generator-search 插件。
yarn add hexo-generator-search
  1. 在站点配置文件中新增如下的代码片段
# 新增搜索页面  
search:
    path: search.xml
    field: all
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,509评论 25 709
  • 昨夜东风吹竹斜, 英飞四散绕新畬。 枝头红雨成残蕊, ...
    江南鸿阅读 556评论 11 23
  • 终于下定决心回忆回忆这高中三年,然而距离高考此时已经一个多月了。像是所有人的高中一样,我的高中有暗恋,有伤心,有一...
    akiiya阅读 614评论 1 2
  • 先生笑我寻常妇, 挂肚牵肠两难顾。 却舍儿郎千里行, 凌云壮志不应误。
    天水居士阅读 420评论 4 7
  • 每个人都有一个独立的个体,但是却想获得他人的爱。希望获得自由,又害怕孤独。人就是那么矛盾呐。
    七月的猫咪阅读 402评论 0 0

友情链接更多精彩内容