# Material X > 一个简约卡片式的Hexo博客主题 **Material X** 是我基于 [Material Flow](https://github.com/stkevintan/hexo-theme-material-flow)(已停止维护) 改编的一个Hexo主题,相对作者原主题主要有一下方面改动: - 调整卡片阴影细节以及增加卡片的动画效果。 - 博文列表将作者的多列布局改为单列布局。 - 使用 [fontawesome](http://fontawesome.io) 图标。 - 优化了颜色搭配,方便在defines中更换主题色。 - 一些UI细节,如调整搜索框长度使之与右边卡片等宽、优化了在手机端的显示效果。 - 可以显示网易云音乐歌单。 - 支持3种评论系统:Disqus、来必力和Valine。 - 增加了推荐文章列表,增加博客流量。 - 增加了阅读统计。 本主题将持续更新和维护,你可以在这里查看主题的实际效果:👉 [https://blog.xaoxuu.com](https://blog.xaoxuu.com) 👈 ## 安装 提供两种安装方式:脚本和手动,脚本不仅可以安装主题,还可以方便你发布博客,详见 [@hexo.sh](https://github.com/xaoxuu/hexo.sh) 。 ### A. 脚本安装【推荐】 首先打开终端,`cd`到你博客的路径,如果你想省事,复制下面这行脚本到终端中执行,全程自动化操作。 ```bash curl -O 'https://raw.githubusercontent.com/xaoxuu/hexo.sh/master/hexo.sh' -# && chmod 777 hexo.sh && . hexo.sh -i i x ``` 如果你选择了脚本安装,现在可以直接往下看配置项啦~ ### B. 手动安装 如果你想手动安装,第一步下载主题到`themes/`文件夹: ```bash git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x ``` 然后安装依赖包: ```bash npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts ``` ## 主题配置 把 `themes/material-x/_config.yml` 中的这部分内容复制到博客主目录的 `_config.yml` 文件中: ```yml # >> copy_start 请把这一段复制到博客主目录的【_config.yml】中 ↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓ {中间这部分是要复制的内容} # >> copy_end 到这里为止,下面的就不要复制了。 ↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑ ... ``` 复制到博客主目录的 `_config.yml` 文件之后根据自己的需要填写和修改。这样做的好处是:更新主题的时候你修改过的配置就不会被覆盖了。 > 以下这些配置如果没有特殊说明,都指的是博客主目录的 `_config.yml` 文件。 ### 导航栏 你可以 `materialx:` 下面找到类似这一段,把它改为你需要的: ```yaml materialx: # 导航栏 nav_menu: - name: 主页 slug: about fa: home url: / - name: 项目 slug: projects fa: cube url: https://xaoxuu.com/proj - name: 博客 slug: home fa: rss url: / - name: 归档 slug: archives fa: archive url: /archives ``` 其中 `fa` 是 `font-awesome` 图标名,你要显示什么图标,去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。 ### 侧边栏 右边的小窗口,可以根据需要显示。 #### 头像 如果你没有设置头像,将会显示默认头像。 ```yaml avatar: "https://xaoxuu.com/assets/img/avatar.jpg" # 如果没有设置头像 url 将会显示默认头像。 # 主题配置 materialx: widgets: - avatar # 把这一项注释掉就不显示头像了 ``` #### 分类 ```yaml # 主题配置 materialx: widgets: - categories # 把这一项注释掉就不显示了 ``` #### 标签 ```yaml # 主题配置 materialx: widgets: - tagcloud # 把这一项注释掉就不显示了 ``` #### 网易云音乐歌单 ```yaml # 主题配置 materialx: widgets: - music # 把这一项注释掉就不显示了 # 网易云音乐歌单id widgets_musicid: 746319661 ``` #### 联系信息 ```yaml # 主题配置 materialx: widgets: - contacts # 把这一项注释掉就不显示了 # 右边的联系信息小窗口 widgets_contacts: - name: GitHub desc: xaoxuu url: https://github.com/xaoxuu - name: 10086 desc: 测试打电话 url: tel:10086 ``` #### 友链 ```yaml # 主题配置 materialx: widgets: - links # 把这一项注释掉就不显示了 # 侧边栏的友链 widgets_links: - name: xaoxuu url: https://xaoxuu.com ``` ### 推荐文章 如果你不想显示推荐文章,可以卸载 `hexo-recommended-posts` 这个依赖包。 ```yaml # 推荐文章 recommended_posts: autoDisplay: false # 自动在文章底部显示推荐文章,如果你使用Material-X主题,这里要设置为false。 server: https://api.truelaurel.com # 后端推荐服务器地址 timeoutInMillis: 10000 # 服务时长,超过此时长,则使用离线推荐模式 excludePattern: [] titleHtml: