klugjo / hexo-theme-phantom Goto Github PK

View Code? Open in Web Editor NEW

242.0 8.0 64.0 598 KB

Hexo implementation of Phantom (http://html5up.net/phantom)

CSS 82.36% JavaScript 9.49% HTML 8.15%

hexo-theme-phantom's Introduction

Phantom Blog Hexo

Hexo implementation of the free HTML5Up Phantom Template

Phantom 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 will not be displayed

External libraries used

Installation

SCSS support

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

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

Theme Configuration

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

Blog's Logo Image Source

The blog's logo (next to blog title) is configured in the theme's _config.yml.

# Logo Image Source
logo_src: /images/logo.svg

Blog's Main Subtitle

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>.

Blog's Second Subtitle

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.

Footer About Section Text

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.

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. 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"

Show Dates

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:

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: 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:

Post Custom Configuration

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

Post's Subtitle

Use subtitle to specify the text that will be displayed below the title on the Home Page.

subtitle: Lorem Ipsum

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 HTML5 Up 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.

hexo-theme-phantom's People

Contributors

Stargazers

Watchers

hexo-theme-phantom's Issues

can this theme generate the Tags or Category index page? Can you that help me out in telling how?

why not display Posts and Pages Dates?

hi, Jonathan Klughertz. I like this theme. It's the most beautiful theme I've ever seen. But just one little question, why don't you display dates in a post or a page? I think that's necessary.
Hope to hear from you!

TypeError: Cannot read property 'compile' of undefined

where i start server , the console will show this. is this right?

Home page articles not 3 column arrangement in IE9 desktop

http://www.codeblocq.com/assets/projects/hexo-theme-phantom/
Home page articles not 3 column arrangement in IE9 desktop

Theme Alpha-Dust is not support by GitHub Page

I can't open mt GitHub Page, it keep showing 404. And the GitHub sent me a email which said the theme Alpha-Dust is not support by GitHub Page...

How can i set website favicon ?

Hi,klugjo!

love your themes so much ! but there is a small problem bothering me now 😢

As this issues title says, how can i set my hexo blog favicon when using phantom themes?

I have tried put favicon.ico file into the /source/ folder and config the yml file favicon: favicon.ico but still not working.

And i also can't not find anything about this config in your readme doc.

Then i try to look the demo website that in readme.md file whether had favicon , and i find it also do not have favicon.

So is there a way to set favicon while using this themes? I really like this theme!

Thanks 😄 !

The tiles display abnormally on Chrome

On my chrome browser the tiles show the subtitles which should not be displayed and there is no hover animation when mouse enters the images, however, it is all fine on the Edge or IE (except the title is a bit large).
And I found that your website: http://www.codeblocq.com/assets/projects/hexo-theme-phantom/ on my chrome shows the same result, but HTML5UP: https://html5up.net/phantom works really fine.
That is why? How to fix it? Thanks very much!

Images width over screen size in mobile device

http://www.codeblocq.com/assets/projects/hexo-theme-phantom/2012/12/26/images/
The demo images' width over screen size in mobile device.

请问怎么设置文章封面图片

Post Request

Hi!
I have created contact us form for Hexo Blog and looking for opportunity to integrate this framefork with some cloud database to create post requests to store incoming emails, but phantom has only db.json on the root of hexo's directory.Where to store incoming emails in hexo framework?

Thanks

Forget it, It's my fault

Thanks for offering the wonderful hexo theme

Can we choose the order to display the post?

For example, could we choose to display the post in the order of importance instead of the time you creat it?

I did not understand: why 10 although it should be 9

hi, klugjo,
I didn't understand why 10 blocks
(see image 2021-02-18_10-03-01.png)

although it should be 9
(see image 2021-02-18_10-00-37.png)

what should be "tweaked"?

image 2021-02-18_10-03-01.png
https://disk.yandex.ru/i/LKlbZaPpWcfZ0Q

2021-02-18_10-00-37.png
https://disk.yandex.ru/i/KOHX2epUI_ADYA

Can i add a menu called tags or categories in the menu?

i tried to set it like the about menu. For example, it does not seem to work for tags menu, it won't show out all the tags.

Error finding main.css

I'm stumped on this one. For whatever reason, the main.css seems to be pulling from the wrong place. there is a main.css in css/ but not in sass/.

10:06:27 [error] 13#13: *1 open() "/usr/share/nginx/html/public/sass/main.css" failed (2: No such file or directory), client: 10.1.1.234, server: localhost, request: "GET /sass/main.css HTTP/1.1", host: "10.1.0.10", referrer: "http://10.1.0.10

How to insert Gallery in post ？

I want to insert a image gallery in a post article
How to do it？

thank you

Custom css and js

Hello, klugjo. I don't understand one fundamental thing(( How to inject a custom.js and custom.css to script.ejs and head.ejs. Will you explain it step by step, please?

How to support disqus ? Or any other comment plugin?

怎么开启文章预览

Cannot read property 'compile' of undefined

I try to use hexo-theme-phantom in my blog

I checkout git repo and meet a small question as following :

ERROR Process failed: source/sass/layout/_wrapper.scss
TypeError: Cannot read property 'compile' of undefined
    at View._precompile (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/hexo/lib/theme/view.js:104:22)
    at View (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/hexo/lib/theme/view.js:13:8)
    at new Theme._View.View (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/hexo/lib/theme/index.js:37:10)
    at Theme.setView (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/hexo/lib/theme/index.js:71:20)
    at /Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/hexo/lib/theme/processors/view.js:14:14
    at tryCatcher (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:502:31)
    at Promise._settlePromise (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:559:18)
    at Promise._settlePromise0 (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:604:10)
    at Promise._settlePromises (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:683:18)
    at Promise._fulfill (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:628:18)
    at Promise._resolveCallback (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:423:57)
    at Promise._settlePromiseFromHandler (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:514:17)
    at Promise._settlePromise (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:559:18)
    at Promise._settlePromise0 (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:604:10)
    at Promise._settlePromises (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:683:18)
    at Promise._fulfill (/Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/promise.js:628:18)
    at /Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/bluebird/js/release/nodeback.js:42:21
    at /Users/darion.johannes.yaphet/darionyaphet.github.io/node_modules/graceful-fs/graceful-fs.js:78:16
    at tryToString (fs.js:414:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

Is there something miss or should I install something ? thank you :）

How can we insert a youtube video using your tag?

Example please?

How can use "READ MORE"

Hi,

Thank you very much for the beautiful theme.
During usage, I wanted to shorten the article on the home page by using "READ MORE" just like in the demo.

Could you please offer a solution?
Thank you and Merry Xmas!

Using custom grid with markdown in posts and pages

I'm struggling with figuring out a way to use grids/columns with markdown. Does this theme support this?

I would essentially hope to include something like this...

<div class="col-6">
## Intro
</div>
<div class="col-6">
Some info...
</div>

友情链接

如何添加友情链接

Cover_index, cover_detail image paths

Hey there, loving this theme so far.
Trying to add the images to each post currently

I have Hexo on the "post_asset_folder: true" setting, meaning I've got the asset folder within each post folder. Example - _posts - > test.md & test (folder where I put my images.

I'm trying to access my images just using the "cover_index: test.png" but it's saying no such image exists.

Do you know how I would figure this out?

Thanks !

Edit -
Alright so I got the images working sort of -

My current paths are:
cover_index: ./2016/04/25/test/test.png ( I don't really like having to do this, but it makes sense that it's needed )
cover_detail: test.png

This works perfect for the most part -
But on my /tags/ pages, I modified your code to include the images as well, not just the post title -

In here, my images dont show up unless I do a wacky "../../2016/04/25/test/test.png" etc

I'll look into the code a bit more and see if I can hack something together for this.

Thanks again!

can't build images folder

hello , I like your theme very much
i build my blog as the doucument .
but after i start server
in the Chrome devtools it says Failed to load resource and can't find images folder.
my blog's repositories is this
can you help me to see what's wrong with it?

Date please

Better if we can choose to display date on each post or not.

no index file

I want to put it on github pages

but no index file

like this...

how should I do

How to make image in the post auto re-size？

Hi！

I have already install Phantom on Hexo, and upload it to Github Page.
But how to make the image in the post auto resize？just like that photo in this demo

The Image in my post can't auto-resize，How can I make it auto-resize？ Thank you！

About.html

Hey man.Great theme but I have a problem with about.html. Issue is: Cannot GET /about.html .
Can you figure it out?

How to make the page load with the Nav bar as default

Hi I am looking to load the page with the nav bar. Which part of the code should I have to achieve the same. Thanks in advance

Tile hover animation absent

The original Phantom demo by HTML5Up shows a tile transition animation when you hover over it. However, the Hexo version doesn't (I am using Chrome). This issue also exists in the Hexo version demo. How can this be changed?

implement: auto resize photo according to the window size of the browser

picture cannot be displayed

title: My New Post
date: 2024-05-01 01:42:25
tags:
photos:

https://cdn.jsdelivr.net/gh/xhplj/git-img/Pasted%20image%2020240418205119.png

The images cannot be displayed with the format you set up.

Fonts not displaying properly

The font Source Sans Pro displays properly on my local server, but once deployed to kellytang.github.io, doesn't. What can I do to fix this?

I'm not sure whether FontAwesome (or other fonts used, if any) work properly or not since it's so simple.

Dont work with github pages

Hi everybody
My blog can display perfectly fine with my local host (with the command hexo s)
However, when I use the command (hexo d) to publish my website to github pages, it occurs some breakdown.
I don't know what went wrong, there is no warning during the whole procedure. Maybe the screenshot can be helpful.