Hexo implementation of Phantom (http://html5up.net/phantom)
Hexo implementation of the free HTML5Up Phantom Template
Phantom is a photography/design portfolio oriented, responsive theme. Demo here.
Phantom uses SCSS as a css preprocessor. SCSS is not supported by default in hexo, the
hexo-renderer-scssis required.
Install it by using:
$ npm install --save hexo-renderer-scss
Install the theme by using:
$ git clone https://github.com/klugjo/hexo-theme-phantom themes/phantom
Then update your blog's main
_config.ymlto set the theme to
phantom:
i.e:
# Extensions ## Plugins: http://hexo.io/plugins/ ## Themes: http://hexo.io/themes/ theme: phantom
The theme's global configuration is done in
/themes/hexo-theme-phantom/_config.yml.
The menu is configured in the theme's
_config.yml.
# Header menu: Home: / Archives: /archives About: /about.html
The object key is the label and the value is the path.
The blog's logo (next to blog title) is configured in the theme's
_config.yml.
# Logo Image Source logo_src: /images/logo.svg
The blog's main subtitle (text just below the logo) is configured in the theme's
_config.yml.
# Theme Main Subtitle subtitle_main: This is Phantom, a free, fully responsive site
template designed by HTML5 UP.
The blog's second subtitle (smaller text below the logo) is configured in the theme's
_config.yml.
# Theme Secondary subtitle susbtitle_secondary: Etiam quis viverra lorem, in semper lorem. Sed nisl arcu euismod sit amet nisi euismod.
The About section's text in the footer is configured in the theme's
_config.yml.
# Footer About Section about_footer: This theme was initially developed by HTML5 Templates and adapted for Hexo by Jonathan Klughertz.
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
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"
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. If you don't specify a default and you don't specify an image in your post, no image will be displayed
# Default post cover index page default_cover_detail: "http://placehold.it/1300x500"
By default, Phantom does not show dates for posts and pages. You can set this config to true if you need to.
# Show Dates for posts and pages show_dates:
The comments provider is specified in the theme's
_config.yml. If you specify both a
disqus_shortnameand a
facebook.appidthere 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
The Google Analytics Tracking ID is configured in the theme's
_config.yml.
# Google Analytics Tracking ID google_analytics:
Setup the links to your social pages in the theme's
_config.yml. Links are in the footer.
# Social Accounts twitter_url: facebook_url: https://www.facebook.com/ instagram_url: dribble_url: https://dribbble.com/pixelhint github_url: googleplus_url: https://plus.google.com/+Pixelhint/posts behance_url: https://www.behance.net/ fivehundredpx_url: email_url: rss_url:
For each post, you can specify additional information in the front matter
Use
subtitleto specify the text that will be displayed below the title on the Home Page.
subtitle: Lorem Ipsum
Use
cover_indexto specify an image that will be used for that post on the Home page (also knows as index)
Example:
cover_index: /assets/work1.jpg
Use
cover_detailto specify an image that will be used for that post on the Detail page for that post.
cover_detail: /assets/hero_image.jpg
This theme was created by HTML5 Up and adapted for Hexo by Jonathan Klughertz.
If you have a question, feature request or a bug you need me to fix, please click here to file an issue.