# 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。 - 增加了推荐文章列表,增加博客流量。 - 增加了阅读统计。 - 支持渲染MathJax数学公式。 ## 在线示例 本主题将持续更新和维护,你可以在这里查看主题的实际效果:👉 [https://blog.xaoxuu.com](https://blog.xaoxuu.com) 👈 > 如果你使用了 **Material X** 主题,欢迎提PR到下面这里告诉大家~ **更多定制效果演示:** - xxx的博客:http://xxx.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 ``` ## 文档 https://xaoxuu.com/docs/material-x ## 主题配置 把 `themes/material-x/_config.yml` 中的**所有**内容复制到博客主目录的 `_config.yml` 文件中,然后根据自己的需要填写和修改。这样做的好处是:更新主题的时候你修改过的配置就不会被覆盖了。 > 以下这些配置如果没有特殊说明,都指的是博客主目录的 `_config.yml` 文件。 ### 导航栏 你可以找到类似这一段,把它改为你需要的: ```yaml # 导航栏 nav_menu: - name: 主页 slug: about icon: fa-home url: / - name: 项目 slug: projects icon: fa-cube url: https://xaoxuu.com/proj - name: 博客 slug: home icon: fa-rss url: / - name: 归档 slug: archives icon: fa-archive url: /archives ``` 其中 icon 是 `font-awesome` 图标名,你要显示什么图标,去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。 ### 侧边栏 右边的小窗口,可以根据需要显示。 ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: # 博主信息,显示个人头像、格言、社交信息等 author: enable: true avatar: # 头像,如果config中已经设置avatar了,这里可以不用写 title: # 博客名、头衔等等,居中显示 motto: 永远不要忘了自己是谁,因为这个世界就不会。 # 格言座右铭等等 social: true # 是否显示社交信息 # 显示文章分类 categories: true # 显示文章标签 tagcloud: true # 显示网易云歌单id musicid: 746319661 # 显示友链 links: - name: xaoxuu url: https://xaoxuu.com # 显示目录(在文章中设置toc:false可以隐藏单篇文章的目录) toc: true ``` #### 博主(头像/头衔/格言/社交信息) ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: # 博主信息,显示个人头像、格言、社交信息等 author: enable: true avatar: # 头像,如果config中已经设置avatar了,这里可以不用写 title: # 博客名、头衔等等,居中显示 motto: 永远不要忘了自己是谁,因为这个世界就不会。 # 格言座右铭等等 social: true # 是否显示社交信息(内容同页脚的社交信息) ``` #### 分类 ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: ... # 显示文章分类 categories: true ``` #### 标签 ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: ... # 显示文章标签 tagcloud: true ``` #### 网易云音乐歌单 ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: ... # 显示网易云歌单id musicid: 746319661 ``` #### 友链 ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: ... # 显示友链 links: - name: xaoxuu url: https://xaoxuu.com ``` #### 显示目录(TOC) ```yaml # 右边的小窗口,不想显示哪一项的注释掉对应的即可 widgets: ... # 显示目录(在文章中设置toc:false可以隐藏单篇文章的目录) toc: true ``` ### 推荐文章 如果你不想显示推荐文章,可以卸载 `hexo-recommended-posts` 这个依赖包。 ```yaml # 推荐文章 recommended_posts: autoDisplay: false # 自动在文章底部显示推荐文章,如果你使用Material-X主题,这里要设置为false。 server: https://api.truelaurel.com # 后端推荐服务器地址 timeoutInMillis: 10000 # 服务时长,超过此时长,则使用离线推荐模式 excludePattern: [] titleHtml: