No release in over a year
Morph is a minimal Jekyll theme.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 2.0

Runtime

 Project Readme

Morph

Morph is a simple Jekyll theme for writers.

Demo

Installation

Install with github page:

GitHub Pages

  1. Add these 2 lines in to your Gemfile:
gem "jekyll-remote-theme"
gem "jekyll-paginate"
  1. Install the newly added gems:
$ bundle
  1. In _config.yml add these lines:
remote_theme: alex-1900/jekyll-theme-morph

permalink: /:year/:month/:day/:title.markdown
paginate: 5

plugins:
  - jekyll-paginate
  - jekyll-remote-theme

Remove any other theme: or remote_theme: lines.

  1. Rename index.md to index.html. Without this, the jekyll-paginate gem will not work.

Layouts

Pinned articles

Add the sticky and sticky_subtitle(optional) field to post file, and you can find the article at pinned area.

---
sticky: true
sticky_subtitle: some words
---

Add tags and categories page

  1. create new pages tags.html and categories.html and add these lines to heads:
---
layout: classify
source: tags
---
---
layout: classify
source: categories
---
  1. add these lines to your _config.yml:
morph:
  navigation:
    - name: tags
      path: /tags
    - name: categories
      path: /categories

and can see the tags and categories buttons now.

Enable tags and categories sidebar

add these lines to your _config.yml in morph field:

morph:
  include:
    home_categories_bar:
      title: Top Categories
      path: /categories
    home_tags_bar:
      title: Top Tags
      path: /tags

certainly, you can change the titles and paths

Add searching page

  1. create search.json at project root, and add these lines:
---
layout: none
permalink: /search.json
---
[
{% for post in site.posts %}
{
    "title"    : {{ post.title | escape | jsonify }},
    "category" : {{ post.category | jsonify }},
    "tags"     : "{{ post.tags | join: ', ' }}",
    "url"      : "{{ site.baseurl }}{{ post.url }}",
    "date"     : "{{ post.date }}",
    "content"  : {{ post.content | strip_html | strip_newlines | remove_chars | jsonify }}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
  1. create a new file search.html, and add these lines to head:
---
layout: search
---
  1. add change your _config.yml add a new page to morph.navigation:
morph:
  navigation:
    - name: search
      path: /search

custom the article excerpt length in home page

morph:
  excerpt_length: 150  # default is 200

custom css and javascript files

Add front matters in your pages

scripts: [
  /assets/your-custom-script1.js,
  /assets/your-custom-script2.js
]

styles: [
  /assets/your-custom-stylesheet1.css,
  /assets/your-custom-stylesheet2.css
]

Change the skin

There are two skins: silver (default) and obsidian, you can switching between multiple skins by _config.yml:

morph:
  skin: obsidian

and rebuild or restart the dev server

Custom skin

create file _sass/skink/skin_name.scss, and enable in _config.yml:

# _config.yml

sass:
  sass_dir:     _sass
  style:        compressed

morph:
  skin: skin_name

and rebuild or restart the dev server

Multiple language

  1. Create directory and file __data/language/[lang].yml(the [lang] is abbreviation of your language)

  2. replace contents with another language, the following are the default values.

t:
  posts: posts
  tags_low: tags
  tags_up: Tags
  categories_low: categories
  categories_up: Categories
  about_low: about
  about_up: About
  search_low: search
  search_up: Search
  catalogue: Catalogue
  home: Home
  page: Page
  post_up: Post
  search_placeholder: input key words here...
  update_time: Update time
  pinned_articles: Pinned Articles
  top_tags: Top Tags
  top_categories: Top Categories
  show_more: show more
  catalogue_empty: Catalogue is empty
  previous_page: Previous
  next_page: Next

3 add your the lang item to your page files

---
lang: [lang]
---

(the [lang] is abbreviation of your language)

  • for posts page, you can change the defaults scope:
defaults:
  - scope:
      type: "posts"
    values:
      lang: [lang]  # the `[lang]` is abbreviation of your language

and rebuild or restart the dev server