Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex-1900/jekyll-theme-morph
A simple Jekyll theme
https://github.com/alex-1900/jekyll-theme-morph
github-page jekyll jekyll-theme ruby
Last synced: about 2 months ago
JSON representation
A simple Jekyll theme
- Host: GitHub
- URL: https://github.com/alex-1900/jekyll-theme-morph
- Owner: alex-1900
- License: mit
- Created: 2021-05-27T06:15:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-09T16:51:18.000Z (over 3 years ago)
- Last Synced: 2024-10-12T19:41:32.779Z (3 months ago)
- Topics: github-page, jekyll, jekyll-theme, ruby
- Language: SCSS
- Homepage: http://www.alexis-otaku.top/jekyll-theme-morph/
- Size: 224 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Morph
Morph is a simple Jekyll theme for writers.
[Demo](http://alex-1900.github.io/jekyll-theme-morph/)
## Installation
Install with github page:
### GitHub Pages
1. Add these 2 lines in to your `Gemfile`:
```ruby
gem "jekyll-remote-theme"
gem "jekyll-paginate"
```
2. Install the newly added gems:
```bash
$ bundle
```
3. In `_config.yml` add these lines:
```yaml
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.
4. 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.
```yml
---
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:
```html
---
layout: classify
source: tags
---
```
```text
---
layout: classify
source: categories
---
```
2. add these lines to your `_config.yml`:
```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:
```yml
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:
```text
---
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 %}
]
```
2. create a new file `search.html`, and add these lines to head:
```html
---
layout: search
---
```
3. add change your `_config.yml` add a new page to `morph.navigation`:
```yml
morph:
navigation:
- name: search
path: /search
```
### custom the article excerpt length in home page
```yml
morph:
excerpt_length: 150 # default is 200
```
### custom css and javascript files
Add front matters in your pages
```yaml
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`:
```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`:
```yaml
# _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.
```yml
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
```html
---
lang: [lang]
---
```
(the `[lang]` is abbreviation of your language)
- for posts page, you can change the defaults scope:
```yml
defaults:
- scope:
type: "posts"
values:
lang: [lang] # the `[lang]` is abbreviation of your language
```
and rebuild or restart the dev server