前言

有一次在浏览 这位大佬 博客的时候,碰巧发现了这个主题。立马被它的美观简洁所折服。

可是当时由于各种原因没能更换过来。

后来,又是碰巧,发现了 @xaoxuu ,而他就是 Material X 的开发者。并且他的友链里有先前的那位大佬啊 ,既然各项竞赛都告一段落了,这次就没有犹豫,开始做好迁移的准备了。

开始

由于笔者用的是 Mac ,而 @xaoxuu 是开发过一个 hexo.sh 脚本供 Mac 系统快捷操作。但是由于之前已经在写博客了,所以我并不想重新搭建。以下的操作都是在 Mac 命令行下完成的,Windows 需要在 Git Bash 下完成。

  1. 下载 主题源码 到博客主题文件夹 themes/ 下:

    1
    git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
  2. 安装必要的依赖:

    1
    npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less

然后在博客根目录配置文件中,将 theme 关键字后改为 materail-x ,基本就可以愉快的使用了!

配置

其实还有一些最基本的设置推荐大家修改一下。

网站顶部的文字

如果你完成了上述 #开始 的步骤,如果你本地预览一下,发现那个文字并不是博客的名称。其实这个标示是要自己改的。

你需要在主题配置文件 cover 下的 title 里更改:

当然你也可以使用设计的 logo 而不是文字,这两者只有一个会生效。

侧边栏头像

这个头像也需要自己添加。

主题配置文件中找到 sidebar 下的 avatar ,将头像的图床链接复制进去。

内链修改

如果直接下载 (fork) 源代码的话,默认的像 Tags/标签 , Categories/分类 等页面是在 /blog/tags/ 或者 /blog/categories 下的。可是我们的之前,如 nexT ,是默认直接在 /tags/ 或者 /categories/ 下的。所以你可以搜索关键字 blog/tags/ 将其全部替换成 tags/ ,其余类似。

社交链接

主题配置里搜索关键词 social ,将里面的信息改成自己的即可。不然默认是开发者的社交信息。

Page 格式

如果你也是从别的主题迁移过来的,可能会遇到 Tags 或者 Categories 页面不渲染的情况。

其实由于 nexT 默认页面关键字是 type: "tags" 等。但是到 Material-X 就变成 layout: tag 了。

Material-X 一共支持以下这些模板:

layout 含义
page 独立页面
post 文章页面
category 分类页面
tag 标签页面
links 友链页面
list 列表页面(类似于首页的文章列表)

其他

至此相信尼萌已经成功吃上这款主题了。这里的内容很简略,主要是一些最基本和我认为一定要修改的地方,更多玩法还请参照 官方文档


 Comments