• Stars
    star
    181
  • Rank 212,110 (Top 5 %)
  • Language
    CSS
  • Created over 8 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Adaptation of http://pixelhint.com/magnetic-free-html5-responsive-photography-website-template/ for hexo

Magnetic Blog Hexo

Hexo implementation of the free HTML5 Magnetic Template

Magnetic is a photography/design portfolio oriented, responsive theme. Demo here.

Features Overview

  • Disqus and Facebook comments
  • Google Analytics
  • Cover image for posts and pages
  • Tags Support
  • Responsive Images
  • Image Gallery
  • Social Accounts configuration
  • Pagination

Not Supported

  • Post Categories will not be displayed
  • Posts and Pages Dates not displayed anywhere

External libraries used

Installation

$ git clone https://github.com/klugjo/hexo-theme-magnetic themes/magnetic

Then update your blog's main _config.yml to set the theme to magnetic:

i.e:

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: magnetic

Theme Configuration

The theme's global configuration is done in /themes/hexo-theme-magnetic/_config.yml.

Menu

The menu is configured in the theme's _config.yml.

# Header
menu:
  Home: /
  Archives: /archives

The object key is the label and the value is the path.

Default post title

The default post title (used when no title is specified) is configured in the theme's _config.yml.

# Default post title
default_post_title: Untitled

Default index page cover image

You can specify a default thumbnail for posts on the index page (Home page). This image will be used if you forget to specify an image in the post's front matter.

# Default post cover index page
default_cover_index: "http://placehold.it/450x450"

Default post page cover image

You can specify a default thumbnail for posts/pages on the post/page page (Detail Page). This image will be used if you forget to specify an image in the post's front matter.

Default post cover index page

default_cover_detail: "http://placehold.it/1300x500"

Favicon

You can specify the favicon.

Example:

# Favicon
favicon: "/img/favicon.ico"

Comments

The comments provider is specified in the theme's _config.yml. If you specify both a disqus_shortname and a facebook.appid there will be 2 sets of comment per post. So choose one.

# Comments. Choose one by filling up the information
comments:
  # Disqus comments
  disqus_shortname: klugjotest
  # Facebook comments
  facebook:
    appid: 123456789012345
    comment_count: 5
    comment_colorscheme: light

Google Analytics

The Google Analytics Tracking ID is configured in the theme's _config.yml.

# Google Analytics Tracking ID
google_analytics:

Social Account

Setup the links to your social pages in the theme's _config.yml. Links are in the footer.

# Social Accounts
twitter_url:
facebook_url:
behance_url:
googleplus_url:
dribble_url: 
rss_url:

Post Custom Configuration

For each post, you can specify additional information in the front matter

Post's Index Thumbnail

Use cover_index to specify an image that will be used for that post on the Home page (also knows as index)

Example:

cover_index: /assets/work1.jpg

Post's Detail Thumbnail

Use cover_detail to specify an image that will be used for that post on the Detail page for that post.

cover_detail: /assets/hero_image.jpg

Creator

This theme was created by Pixel Hint and adapted for Hexo by Jonathan Klughertz.

Bugs

If you have a question, feature request or a bug you need me to fix, please click here to file an issue.

More Repositories

1

hexo-theme-clean-blog

Hexo implementation of Clean Blog http://blackrockdigital.github.io/startbootstrap-clean-blog/index.html
HTML
396
star
2

hexo-theme-alpha-dust

🌠 Original Futuristic Hexo Theme
HTML
310
star
3

hexo-theme-phantom

Hexo implementation of Phantom (http://html5up.net/phantom)
CSS
241
star
4

hexo-theme-anodyne

🌋 Original Bright Theme for Hexo
HTML
150
star
5

klug-saver

Expense Tracker app written in React Native
TypeScript
27
star
6

hexo-autolinker

Automatic link generation in Hexo posts
JavaScript
25
star
7

electron-timer-app

Small Timer App
JavaScript
13
star
8

bootstrap-blog-hexo

Adaptation of http://getbootstrap.com/examples/blog/ for hexo
CSS
9
star
9

a-star-react

A Star Path Finding in React
TypeScript
3
star
10

travis-node-test

Setup Travis CI with your Node project
JavaScript
3
star
11

klugjo.github.io

🌐 My blog @
HTML
3
star
12

hexo-compose

Desktop App to write Hexo Blogs
JavaScript
2
star
13

express-route-manager

Setup ExpressJS routes and controllers in a testable way
JavaScript
2
star
14

algos

Training
2
star
15

react-wpm

React WPM game
TypeScript
2
star
16

klugjo-blog-code

Test projects blog related
JavaScript
2
star
17

hexo-theme-bug-feast

Visual Hexo Theme
2
star
18

klug-saver-web

Netlify site for klugsaver.com
CSS
2
star
19

elm-weather-app

2
star
20

chalkdown

WIP
TypeScript
2
star
21

cucayo

Meal Planner App
JavaScript
2
star
22

zelda-theme-javascript-midi

Javascript sheet music for the Zelda's main theme
JavaScript
2
star
23

lerna-typescript-react-storybook-jest

Setup Example
JavaScript
1
star
24

klugjo

1
star
25

simon-game-react-flux

React + Flux Implementation of the Simon game
JavaScript
1
star
26

full-stack-redux-tuto

My take on the amazing tut at http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
JavaScript
1
star
27

vk-jonathan-klughertz

Duplicate Content Check
JavaScript
1
star
28

l33t

l33t training
TypeScript
1
star
29

dotfiles

Vim Script
1
star
30

ui-challenge

UI Challenge as a front end developer
CSS
1
star
31

wenzai

TypeScript
1
star
32

route-manager-test-app

Test app that uses the express route manager
JavaScript
1
star