jekyll-theme-materialize
- 预览
- 安装
  - 使用gem
  - 使用git
- 更新
- 用法
  - config
  - post
  - otherPage
  - addPage
  - 友情链接
  - myherfs
  - manyAuthors
- 注意1
- 注意2
- TODO
- License

jekyll-theme-materialize

预览

coding page（中国） github page

安装

有两种安装方法，一种是gem安装，另一种是git clone。

主题正在开发阶段建议您使用git clone的方法安装，这样您可以获取最新开发版本，而gem版本是略微稳定或新功能推出、已知bug修复的版本。

使用gem

若使用gem，您需要手动新建一些文件，和文件夹，如links.md、_data等

添加下行到你 Jekyll 的 Gemfile文件中:

#安装主题
gem "jekyll-theme-materialize"

添加下行到你 Jekyll 的_config.yml文件中 :

#启用主题
theme: jekyll-theme-materialize

然后执行:

$ bundle

或手动执行:

$ gem install jekyll-theme-materialize

使用git

$ git clone https://github.com/KeJunMao/jekyll-theme-materialize.git
$ cd jekyll-theme-materialize
$ bundle install
$ bundle exec jekyll s -w

更新

$ bundle

用法

下面的内容能极大的帮助你使用本主题，请务必仔细阅读。

config

将如下内容添加到你Jekyll 的_config.yml文件中，请注意替换为你自己的信息：

title: KeJun | BLOG
email: [email protected]
description: 二次元智障
url: "https://blog.kejun.tk/" 

# icon
icon-16x16: images/icon/favicon-16x16.ico
icon-32x32: images/icon/favicon-32x32.ico

# theme color
theme-color: { 
  default-color: green, 
  home-color: green,
  about-color: red,
  archive-color: pink,
  links-color: purple,
  tags-color: blue
} 

# mobile nav
mobile-hp: /images/tx.jpg       # 头像
mobile-bg: /images/userbg.png   # 背景,若填写theme则使用主题色。

# header 背景图片
header-bg: /assets/images/bg.png

# disqus
disqus-shortname: blog-kejun-tk #disqus shortname

# cdn
cdnurl: https://cdnurl.com/ #cdn

#google_analytics
google_analytics:

#多个作者
defaultAuthor: KeJun #默认作者
defaultAuthorImage: assets/images/tx.jpg #默认作者头像
manyAuthors: false

# 是否使用gallery
gallery: false

post

每一个新的文章均需要添加如下yaml:

---
layout: post        # 指定模板
title:  "toc test"
date:   2017-03-04 10:42:06 +0800
categories: NoImage # 分类，首页显示,该项经常用于检测是否为post。请注意，每个文章仅支持一个分类。
image:              # 图像，用于首页，若留空将以NoImage的形式显示, 暂不支持跨域图像。
tags: jekyll ubuntu # 标签，用于tags页面，允许多个
toc: *              # 确定是否显示toc目录，默认为不显示。
comments: true      # 是否显示评论
author:             # 若指定作者名，请开启多作者功能，否则将以默认作者显示。
---

otherPage

请注意jekyll根目录下的.md文件的layout与_layout文件下的文件对应.如：

index.md

---
layout: home
---

links.md

---
layout: links
---

tags.md

---
layout: tags
---

about.md

---
layout: about
---

archive.md

---
layout: archive
---

addPage

如需新增page，建议按：

根目录新建 pageName.md,并在头信息中键入如下：

---
title: pageName         # 标题
layout: pageName        # 模板,建议为标题或文件名，若以文章形式输出，layout 填写 about 并编辑该.md文件即可，无需下一步 。
describe: pageName      # 描述
toc: *                  # 确定是否显示toc目录。
comments: true          # 是否显示评论
---

在_layout目录下新建pageName.html，并键入如下：

--- 
layout: default 
---

这样你就成功引入了head，header，main，script，footer。然后编辑刚刚新建的pageName.html即可添加自定义html。

你新增的页面将以_config.yml文件中的 default-color 作为主题色。如果你知道你在干什么，你也可以编辑header和footer。

友情链接

友情链接在_data/links.yml中，要删除或新增，请遵循如下格式：

- name: Halyul
  image: images/links/halyul.png
  url: https://halyul.com/
  describe: Material Design爱好者

myherfs

footer的各种站点URL,请按如下格式填写至_data/myherfs.yml的url即可，！请勿更改name！：

# 请不要填写太多否则会很丑。
- name: twitter
  url: https://twitter.com/yrmkejun

- name: facebook
  url: 

- name: weibo
  url: 

- name: instagram
  url: 

- name: tumblr
  url: 

- name: github
  url: https://github.com/KeJunMao

- name: linkedin
  url: 

- name: zhihu
  url: 

- name: bilibili
  url: 

- name: telegram
  url: 

- name: gplus
  url:

若想要自定义顺序，你可以调整他们的整体顺序。

manyAuthors

当启用多作者 manyAuthors: true 后，您可以在文章yaml处指定作者，为了避免重复指定头像url，您必须在_data/authors.yml按如下格式设置：


- name: Jekyll
  image: assets/images/links/jianyuyouhun.jpg

- name: Other
  image: assets/images/links/halyul.png

注意1

该主题引用的gallery.min.opt.js及gallery-materialize.min.opt.css文件并没有经过原开发者同意。若侵权，请告知并删除。

你可以在main.js中自定义首页文章的GalleryExpand效果：

Option	Description
inDuration	Transition duration for opening the gallery in ms. Default: 300
outDuration	Transition duration for closing the gallery in ms. Default: 200
responsiveThreshold	Breakpoint for full width style in pixels. Default: 992
contentPadding	Padding for content in the gallery in pixels. Default: 40
onShow	Callback function that is fired when the gallery is opened.
defaultColor	Fallback color for when color thief fails. Default: '#444'
fillScreen	Enable the full width image transition style. Default: false

注意2

目前，绝大多数本地url添加了前置baseurl，如果造成了无法引入的问题，请提出：Issue

TODO

disqus # 完成
toc # 完成
图像加载动画 # 完成
搜索 # 完成
二次元化选项
cdn 支持 # 完成
google analytics # 完成
分享
显示作者 #完成
post layout images点击放大出现的位置错误
home 和 archive 文章图片使用图床时的跨域问题（因为使用javascript优化了加载）
不依赖ruby gems的i18n
homepage,请看demo，仓库地址。
配合homepage ，传入友链和links,当博客更新时，homepage也可以更新。请看demo,json。
gallery 开启与关闭。# 完成

License

The theme is available as open source under the terms of the MIT License.