Hexo implementation of the free HTML5Up Phantom Template
Phantom is a photography/design portfolio oriented, responsive theme. Demo here.
- Disqus and Facebook comments
- Google Analytics
- Cover image for posts and pages
- Tags Support
- Responsive Images
- Image Gallery
- Social Accounts configuration
- Pagination
- Post Categories will not be displayed
- Posts and Pages Dates will not be displayed
- FeatherLight.js (Gallery)
- jQuery
- Skel
Phantom uses SCSS as a css preprocessor. SCSS is not supported by default in hexo, the hexo-renderer-scss is 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.yml to 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<br />template designed by <a href="http://html5up.net">HTML5 UP</a>.
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_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
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 subtitle to specify the text that will be displayed below the title on the Home Page.
subtitle: Lorem Ipsum
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
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
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.