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.

181 lines
6.1 KiB

6 years ago
# Material X
7 years ago
5 years ago
A minimalist card-style Hexo blog theme.
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
#### Completely free modular and easy to customize design
- You can freely decide whether each page requires a cover, whether a cover requires a background image, how many images, whether a carousel is required, and how fast it is.
- Freely decide whether each page needs sidebar, what cards are displayed in sidebar widgets, and in what order.
- You can freely determine the main structure of each page (default articles + comments), and add cards as needed (share the card library with sidebar widgets).
- You can freely decide whether the meta tag (date, update date, category, tag, share, reading statistics, sticky) of each article is displayed, whether it is placed at the beginning or the end of the article. Titles, thumbnails, small icons (for archiving pages), and page-specific music players are also counted as meta tags, but their positions are fixed.
- Most buttons can be set as icons, text, target, nofollow, etc.
- Easily change visual effects such as theme colors, custom fonts, margins, rounded corners, shadows, etc., and quickly implement dark theme.
#### Easy to extend
- Use the [import](https://xaoxuu.com/wiki/volantis/config/#import) field to easily import css and js into the theme.
5 years ago
#### Mobile optimization
- A lot of optimization for mobile layout.
#### Support for more features
4 years ago
- Support 4 comment systems: Disqus, Gitalk, LiveRe and Valine.
5 years ago
- Provide themed CDN, or customize CDN.
- Use card design elements and interactive animations.
- Use fontawesome 5.6.3 free icon.
- Support APlayer player, can play the music of Netease cloud, QQ music, shrimp, cool dog platform and other servers.
- Support non-garlic reading statistics, Baidu analysis, Google analysis.
- Support rendering MathJax mathematical formula, optimized rendering effect.
<br>
## Blog Example
| Blog | Source Code | Instructions |
| ----------------------------------- | -------------------------------------- | ------------------ |
| [@mxclub](https://mxclub.github.io) | https://github.com/xaoxuu/blog-example | The default effect of the master branch |
| [@xaoxuu](https://xaoxuu.com) | Not open source yet | myblog branch effect |
- **For more examples, please see [#Example Blog](https://github.com/xaoxuu/hexo-theme-volantis/issues/97)**
5 years ago
<br>
## Download and install
### A. Full automatic installation using scripts (currently only macOS is supported)
1. Open a terminal and enter the following command to install the script, see [# hexo.sh](https://xaoxuu.com/wiki/hexo.sh/) for the script document.
```bash
curl -s https://xaoxuu.com/install | sh -s hexo.sh
```
2. After successful installation, open a terminal on your blog path and enter the following command to install the theme and dependencies.
```bash
hexo.sh i x
```
### B. Manual installation
1. Download theme to `themes /` folder
```bash
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
5 years ago
```
2. Then install the necessary dependencies
```bash
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less
```
<br>
## Documentation
https://xaoxuu.com/wiki/volantis/
5 years ago
5 years ago
<br>
<br>
<br>
5 years ago
# Material X
6 years ago
一个简约的卡片式Hexo博客主题。
6 years ago
5 years ago
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
5 years ago
7 years ago
5 years ago
#### 完全自由的模块化、易于定制化设计
6 years ago
5 years ago
- 可以自由决定每个页面是否需要封面、封面是否需要背景图片、多少图片、是否需要轮播、速度如何。
- 可以自由决定每个页面是否需要侧边栏、侧边栏小部件显示什么卡片、顺序如何。
- 可以自由决定每个页面的主体结构(默认文章+评论),可以按需增加卡片(与侧边栏小部件共用卡片库)。
- 可以自由决定每篇文章的meta标签(日期、更新日期、分类、标签、分享、阅读统计、置顶)显示与否、放置在文章开头还是末尾。标题、缩略图、小图标(用于归档页面)、页面专属的音乐播放器也算做meta标签,但是它们的位置固定。
- 大部分按钮可以自由设置图标、文字、target、nofollow等
- 方便更换主题色、自定义字体、边距、圆角、阴影等视觉效果,快速实现暗色主题。
6 years ago
5 years ago
#### 易于扩展
6 years ago
- 使用 [import](https://xaoxuu.com/wiki/volantis/config/#import) 字段方便导入css和js到主题中。
6 years ago
5 years ago
#### 移动端优化
6 years ago
5 years ago
- 针对移动端布局进行了大量优化。
#### 更多功能的支持
5 years ago
- 支持4种评论系统:Disqus、Gitalk、来必力和Valine评论。
5 years ago
- 提供主题CDN,也可自定义CDN。
- 使用卡片设计元素以及交互动效。
- 使用 fontawesome 5.6.3 免费版图标。
- 支持APlayer播放器,可以播放网易云、QQ音乐、虾米、酷狗平台以及其它服务器的音乐。
- 支持不蒜子阅读统计、百度分析、Google分析。
- 支持渲染MathJax数学公式,优化了渲染效果。
6 years ago
5 years ago
<br>
## 博客示例
| 博客 | 源码 | 说明 |
| ----------------------------------- | -------------------------------------- | ------------------ |
| [@mxclub](https://mxclub.github.io) | https://github.com/xaoxuu/blog-example | master分支默认效果 |
| [@xaoxuu](https://xaoxuu.com) | 暂未开源 | myblog分支效果 |
6 years ago
- **更多示例请见 [#示例博客](https://github.com/xaoxuu/hexo-theme-volantis/issues/97)**
6 years ago
5 years ago
<br>
5 years ago
## 下载安装
6 years ago
5 years ago
### A. 使用脚本全自动安装(目前仅支持macOS)
5 years ago
1. 打开终端输入下面命令安装脚本,脚本文档见[#hexo.sh](https://xaoxuu.com/wiki/hexo.sh/)。
5 years ago
```bash
curl -s https://xaoxuu.com/install | sh -s hexo.sh
```
6 years ago
5 years ago
2. 安装成功后,在你的博客路径打开终端,输入下面命令即可安装主题和依赖包。
```bash
hexo.sh i x
```
5 years ago
### B. 手动安装
5 years ago
1. 下载主题到 `themes/` 文件夹
```bash
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
5 years ago
```
2. 然后安装必要的依赖包
```bash
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less
```
5 years ago
<br>
5 years ago
## 文档
6 years ago
https://xaoxuu.com/wiki/volantis/