# jekyll-theme-mdui

A Jekyll theme based on mdui

[demo](https://blog.kejun.space)

[![Version](https://img.shields.io/badge/version-0.3.0-green.svg?style=flat-square)]()
[![Jekyll](https://img.shields.io/badge/Jekyll-3.4+-green.svg?style=flat-square)](https://jekyllrb.com/)
[![Gem](https://img.shields.io/gem/dt/jekyll-theme-mdui.svg?style=flat-square)](https://rubygems.org/gems/jekyll-theme-mdui/)

[![Code Climate](https://img.shields.io/codeclimate/github/KeJunMao/jekyll-theme-mdui.svg?style=flat-square)](https://codeclimate.com/github/KeJunMao/jekyll-theme-mdui/)
[![Build Status](https://img.shields.io/travis/KeJunMao/jekyll-theme-mdui.svg?style=flat-square)](https://travis-ci.org/KeJunMao/jekyll-theme-mdui)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)

[![Author](https://img.shields.io/badge/author-KeJun-blue.svg?style=flat-square)](https://blog.kejun.space)

## Installation

We have two ways to install themes.

But,**We recommend you use the second ways.**

### First ways

Add this line to your Jekyll site's `Gemfile`:

```ruby
gem "jekyll-theme-mdui"
```

And add this line to your Jekyll site's `_config.yml`:

```yaml
theme: jekyll-theme-mdui
```

And then execute:

    $ bundle

Or install it yourself as:

    $ gem install jekyll-theme-mdui

### Second ways

Fork this repo to your repo:

```shell
git clone https://github.com/yourname/jekyll-theme-mdui.git
cd jekyll-theme-mdui
bundle install
jekyll s -w
```

Or **direct clone**:

```shell
git clone https://github.com/KeJunMao/jekyll-theme-mdui.git
cd jekyll-theme-mdui
bundle install
jekyll s -w
```

## Usage

### _config

```yml
title: "Jekyll-Theme-MDUI" # Your site title
description: "A Jekyll theme based on MDUI" # Your site description
url: # Your site url
baseurl: # baseurl
author: "KeJun" # Your name

paginate: 5 # paginate
paginate_path: "/blog/page:num/" # paginate path

gems: # paginate gem 
  - jekyll-paginate
```

### _data

* friends.yml
```yml
- name: MDUI # name
  image:  # avatar or logo
  url: https://www.mdui.org/ # url
  describe: 一套用于开发 Material Design 网页的前端框架
``` 
* menus.yml
```yml
- name: SEARCH # name
  url: /pages/menus/search.html # path
  icon: search # icon from https://www.mdui.org/docs/material_icon
```
Default does not display the editor.If you want the editor to appear in the menu:
```yml
- name: Editor # name
  url: /pages/editor.html # path
  icon: edit # icon from https://www.mdui.org/docs/material_icon
```
* sns.yml
```yml
- name: bilibili # name
  url:  # url , if it is empty, it is not enabled
```
Supported:bilibili,facebook,github,gplus,instagram,linkedin,telegram,tumblr,twitter,weibo,zhihu

* site.yml
```yml
head: 
   favicon: "https://ooo.0o0.ooo/2017/05/27/59294212bc16e.png" # 网站的favicon
   high_res_favicon: "https://ooo.0o0.ooo/2017/06/08/5939484dc618e.png" # 高清favicon
   apple_touch_icon: "https://ooo.0o0.ooo/2017/06/08/5939484dc618e.png" # ios主屏按钮图标
   keywords: "blog jekyll mdui theme" # 页面关键字
uiux:
   android_chrome_color: "#607D8B" # 安卓 Chrome 浏览器的地址栏颜色。
   nprogress_color: "#29d" # 页面加载时顶部加载进度条的颜色。
   nprogress_buffer: 200 # 页面加载时顶部加载进度条的缓冲时间。
background: 
   purecolor: "#eeeeee" # 背景颜色
img: 
   avatar: "https://ooo.0o0.ooo/2017/05/26/5928368d409dd.png" # 你的头像设置。
card: # 首页卡片
   card_shadow: 1 # 卡片阴影 0-24,0为不显示
   card_hoverable: false # 悬浮时加深阴影
disqus:
   disqus_shortname: "kejun" # Your disqus 
   disqus_proxy: false
   disqus_proxy_url: "" # disqus proxy(Do not use)
   disqus_api_key: "" # (Do not use)
google_analytics: "" # (Do not use)
lang: "zh-CN"  # lang
```

### manifest.json
```json
{
  "name": "KeJun BLOG",
  "short_name": "KeJun", 
  "icons": [{
        "src": "assets/images/touch/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "assets/images/touch/apple-touch-icon.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "assets/images/touch/ms-touch-icon-144x144-precomposed.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "assets/images/touch/chrome-touch-icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }],
  "start_url": "/index.html?homescreen=1",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#2a7ae2"
}
```
Replace it with your logo:`assets/images/touch`

### _post

Add the following format to your posts:

```liquid
{% include tips.html content="protips" %}
{% include note.html content="note" %}
{% include warn.html content="warnings" %}
```

[demo](https://blog.kejun.space/living/2017/05/29/jekyll-theme-mdui.html)

## TODO

...

## Note

### file
If you use the first ways to install, you need to download the following files to your jekyll website root directory Or create a new file,And replace it with your own information:

* mainifest.json
* sw.js
* search.json
* tags.json
* _data/friends.yml
* _data/menus.yml
* _data/sns.yml
* assets/images/touch/*
* pages/*

How to use? See Usage.

### service workers

If you use the first ways to install, You will not be able to use service workers!!!!

Why? See `sw.js` content.
## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

## Development

To set up your environment to develop this theme, run `bundle install`.

Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.

## License

The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).