You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

322 lines
7.2 KiB

6 years ago
# Material X
7 years ago
6 years ago
> 一个简约卡片式的Hexo博客主题
7 years ago
6 years ago
**Material X** 是我基于 [Material Flow](https://github.com/stkevintan/hexo-theme-material-flow)(已停止维护) 改编的一个Hexo主题,相对作者原主题主要有一下方面改动:
6 years ago
- 调整卡片阴影细节以及增加卡片的动画效果。
- 博文列表将作者的多列布局改为单列布局。
6 years ago
- 使用 [fontawesome](http://fontawesome.io) 图标。
- 优化了颜色搭配,方便在defines中更换主题色。
6 years ago
- 一些UI细节,如调整搜索框长度使之与右边卡片等宽、优化了在手机端的显示效果。
6 years ago
- 可以显示网易云音乐歌单。
- 支持3种评论系统:Disqus、来必力和Valine。
- 增加了推荐文章列表,增加博客流量。
6 years ago
- 增加了阅读统计。
6 years ago
本主题将持续更新和维护,你可以在这里查看主题的实际效果:👉 [https://blog.xaoxuu.com](https://blog.xaoxuu.com) 👈
6 years ago
## 安装
提供两种安装方式:脚本和手动,脚本不仅可以安装主题,还可以方便你发布博客,详见 [@hexo.sh](https://github.com/xaoxuu/hexo.sh) 。
7 years ago
6 years ago
### A. 脚本安装【推荐】
首先打开终端,`cd`到你博客的路径,如果你想省事,复制下面这行脚本到终端中执行,全程自动化操作。
```bash
6 years ago
curl -O 'https://raw.githubusercontent.com/xaoxuu/hexo.sh/master/hexo.sh' -# && chmod 777 hexo.sh && . hexo.sh -i i x
6 years ago
```
6 years ago
如果你选择了脚本安装,现在可以直接往下看配置项啦~
6 years ago
6 years ago
6 years ago
### B. 手动安装
如果你想手动安装,第一步下载主题到`themes/`文件夹:
```bash
git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
```
然后安装依赖包:
6 years ago
```bash
6 years ago
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts
6 years ago
```
6 years ago
## 主题配置
7 years ago
6 years ago
`themes/material-x/_config.yml` 中的这部分内容复制到博客主目录的 `_config.yml` 文件中:
```yml
# >> copy_start 请把这一段复制到博客主目录的【_config.yml】中 ↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓
{中间这部分是要复制的内容}
# >> copy_end 到这里为止,下面的就不要复制了。 ↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑
...
```
复制到博客主目录的 `_config.yml` 文件之后根据自己的需要填写和修改。这样做的好处是:更新主题的时候你修改过的配置就不会被覆盖了。
7 years ago
6 years ago
> 以下这些配置如果没有特殊说明,都指的是博客主目录的 `_config.yml` 文件。
7 years ago
6 years ago
### 导航栏
你可以 `materialx:` 下面找到类似这一段,把它改为你需要的:
7 years ago
6 years ago
```yaml
6 years ago
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
6 years ago
```
7 years ago
6 years ago
其中 `fa``font-awesome` 图标名,你要显示什么图标,去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。
6 years ago
### 侧边栏
右边的小窗口,可以根据需要显示。
#### 头像
如果你没有设置头像,将会显示默认头像。
7 years ago
6 years ago
```yaml
6 years ago
avatar: "https://xaoxuu.com/assets/img/avatar.jpg" # 如果没有设置头像 url 将会显示默认头像。
# 主题配置
materialx:
widgets:
- avatar # 把这一项注释掉就不显示头像了
```
6 years ago
#### 分类
```yaml
6 years ago
# 主题配置
materialx:
widgets:
- categories # 把这一项注释掉就不显示了
7 years ago
```
6 years ago
#### 标签
```yaml
6 years ago
# 主题配置
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
```
7 years ago
6 years ago
6 years ago
### 推荐文章
7 years ago
6 years ago
如果你不想显示推荐文章,可以卸载 `hexo-recommended-posts` 这个依赖包。
7 years ago
6 years ago
```yaml
# 推荐文章
recommended_posts:
6 years ago
autoDisplay: false # 自动在文章底部显示推荐文章,如果你使用Material-X主题,这里要设置为false。
server: https://api.truelaurel.com # 后端推荐服务器地址
timeoutInMillis: 10000 # 服务时长,超过此时长,则使用离线推荐模式
6 years ago
excludePattern: []
titleHtml: <h3>推荐文章</h3> #自定义标题
6 years ago
internalLinks: 3 # 内部文章数量
externalLinks: 2 # 外部文章数量
fixedNumber: false
6 years ago
```
7 years ago
6 years ago
> 注意:autoDisplay: false 这一项不要修改,因为自动显示效果不佳,我已经在主题里给它设置显示位置了。
6 years ago
7 years ago
6 years ago
### 评论
7 years ago
6 years ago
提供3种可选,如果你使用其他的评论系统,请自己修改主题。
7 years ago
6 years ago
#### Disqus
7 years ago
6 years ago
官网: [http://disqus.com/](http://disqus.com/)
7 years ago
6 years ago
```yaml
# disqus评论
disqus_shortname: #你的disqus的shortname#
```
6 years ago
6 years ago
#### Livere 来必力
官网: [http://www.laibili.com.cn/](http://www.laibili.com.cn/)
6 years ago
```yaml
6 years ago
# 来必力评论
livere_shortname: #你的disqus的shortname#
7 years ago
```
6 years ago
#### Valine
7 years ago
6 years ago
官网: [https://valine.js.org](https://valine.js.org)
6 years ago
6 years ago
```yaml
# valine
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
appId: # 必填
appKey: # 必填
guest_info: nick,mail #valine comment header info
placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
avatar: mp # gravatar style https://valine.js.org/avatar
pageSize: 10 # comment list page size
verify: false # valine verify code (true/false)
notify: false # valine mail notify (true/false)
lang: zh-cn
```
6 years ago
6 years ago
### 页脚
6 years ago
```yaml
6 years ago
# 主题配置
materialx:
# 页脚
footer_social:
- slug: envelope
url: mailto:me@xaoxuu.com
- slug: github
url: https://github.com/xaoxuu
- slug: instagram
url:
- slug: google-plus
url:
- slug: twitter
url:
- slug: music
url:
6 years ago
```
7 years ago
6 years ago
## 单篇文章的配置
6 years ago
某一篇文章不想开启评论
```
---
comments: false
---
```
某一篇文章不想在底部显示推荐文章
```
---
recommended_posts: false
---
```
6 years ago
## 主题色和其他样式
打开 `themes/material-x/source/less/_defines.less` 这个文件,修改下面这些内容为你需要的即可:
```yaml
// 主题色
@primary-color: @xiaowenwen-green;
// 强调色
@accent-color: @material-orange;
// ...
```
6 years ago
6 years ago
## 单元测试
6 years ago
如果你发现无法使用或者效果与 [示例](https://blog.xaoxuu.com) 有较大区别,可以使用hexo官方提供的用于单元测试的博客应用本主题查看样式。hexo.sh 脚本提供了方便的指令,详情见 hexo.sh 的 [文档](https://xaoxuu.com/docs/hexo.sh) 。
6 years ago
6 years ago
其他的暂时不想写了,自己摸索吧~