Code Monkey home page Code Monkey logo

irack000.github.io's Introduction

Future Imperfect Theme on Jekyll

by Kapitonenko

https://future-imperfect.kaptn.ru - demo
https://github.com/kaptn3/future-imperfect/ - repository

MIT Licence Open Source Love Future Imperfect Theme preview

  1. Installation
  2. Usage
  3. Content management
  4. Features
  5. Upgrading Theme
  6. Thanks to the following
  7. Todo
  8. Donate
  9. Copyright and license

Installation

  1. Download, clone or fork repo git clone [email protected]:kaptn3/blog.git
  2. Enter the folder: cd blog/
  3. Start Jekyll server: jekyll s

Access, localhost:4000

Usage

If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.

If you have any questions please ask me at GitHub Issues.

Content management

Template

Template of posts setting is in _drafts/template.md. Layout is always named post. Title is a title of post, writing in quotation marks. Date written in the following format: yyyy-mm-dd hh:mm. In category specifies one category. In icon written the name of icon (its in the folder images). In tags is possible to write multiple tags using a comma. In image specify the path to image preview (can not fill). And in preview you can write 0 to on the main page didn't show the announcement of the post.

More details about all features and setting can be view on here.

Example of post

layout: post
title:  "Lorem"
date:   2017-06-04 00:00
category: category_name
icon: git
keywords: tag1, tag2
image: 1.png
preview: 0

Category page

If you want to add a page of category you have to create folder with name of category and file index.html, which should contain the following:

---
layout: default
title: Category1
permalink: /category1/ 
---

{% include category.html %}

You can see example in here or here.

Features

Categories

In blog page, we categorize posts into several categories by url, all category pages use same template html file - _includes/category.html. Links of category in menu is in _data.links.yml.

For example: URL is localhost:4000/category1. In _data.links.yml we define this category named category1, so in _includes/category.html we get this URL(/category1/) and change it to my category(category1), then this page are posts about category1.

Comments

I use HyperComments instead of other tool, Disqus, so it's slower and don't allows to anonymously send messages. Code of comment is in _includes/comments and it included in every post.

Icons

For categories I use svg-icons in images. Π•he icon is automatically assigned to the post by its category. The icon name must be category_name.svg.

Post Image

All images used in posts that are in post-image and its are categorized. For example, images in post of category1's category is in post-img/category1.

Featured image

You can specify the preview image for post in YAML Front Matter. In front matter called "image" to indicate the name of the image. The picture must be located in a category folder.
For example, we write post of category_name's category. In folder post-img/category_name put the preview image with the title "1.png" and in front matter write: image: 1.png. Example.

Also, in front matter you can control the announcement of record post. By default, the announcement consists of 35 words. Writing in the front matter called "preview" the number 0, the announcement will not be displayed for this entry. Example.

Edit link

All posts can be edited by users through link: github.com/kaptn3/future-imperfect/edit/master/{{ page.path }} or github.com/kaptn3/blog/edit/master/{{ post.path }}.

Web analytics

I use Yandex Metrika to do web analytics, you can choose either to realize it, just paste your code in includes/analytics.html.

Upgrading Theme

Blog is always being improved by its users, so sometimes one may need to upgrade.

Ensure there's an upstream remote

If git remote -v doesn't have an upstream listed, you can do the following to add it:

git remote add upstream https://github.com/kaptn3/future-imperfect.git Pull in the latest changes

git pull upstream master There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!

Thanks to the following

Jekyll
HTML5Up
Font Awesome
HyperComments

TODO

  • Add 404 page
  • Search system
  • Add fontawesome 5
  • Add paginator

Donate

In includes/donate.html you'll see form for donation, includes in every post.
Also if this project let you enjoy your blog time, you can give me a cup of coffee :)

Donate =)

Copyright and license

The theme is taken Future Imperfect Theme from HTML5 UP.

It is under the MIT license.

Enjoy πŸ˜‹

irack000.github.io's People

Contributors

b-re-w avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.