jekyll-theme-materialize

Build Status

jekyll-theme-materialize Version

预览

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: kejun1997@gmail.com
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

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: index
---
  • 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 
---

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

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

友情链接

友情链接在_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.jsgallery-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

License

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