美文网首页
Hexo 使用 hexo-theme-material 实现酷炫

Hexo 使用 hexo-theme-material 实现酷炫

作者: sunxiaochuan | 来源:发表于2018-05-09 22:53 被阅读0次

    资料

    简单的使用方法参考上篇笔记
    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

    相关文章

      网友评论

          本文标题:Hexo 使用 hexo-theme-material 实现酷炫

          本文链接:https://www.haomeiwen.com/subject/jeharftx.html