search

halfrost / Prometheus

🌈 A Clean And Modern Ghost Theme with Progressive Web Apps (PWA)
https://halfrost.com
MIT License
123 stars 37 forks source link
blogging ember ghost ghost-blog ghost-blog-theme ghost-theme ghost-themes gulp javascript nodejs publishing web-application

readme

Prometheus

GitHub

Prometheus Ghost theme is clean and very modern. The design is highly focused on typography. But there is also the perfect combination of image and white space in this design. This theme is perfect for a personal and professional blog. Also, the theme will fit in with perfectly with any fashion blog, food blog, movie blog, music blog or any other you can imagine. You could use this theme for an online magazine or journal also.

Installing and customizing this theme is very easy. All required information is provided in the documentation.

Live Demo is here.

First tell a story

In Greek mythology, Prometheus (/prəˈmiːθiəs/; Ancient Greek: Προμηθεύς, [promɛːtʰéu̯s], possibly meaning "forethought") is a Titan, culture hero, and trickster figure who is credited with the creation of humanity from clay, and who defies the gods by stealing fire and giving it to humanity as civilization. Prometheus is known for his intelligence and as a champion of humankind and also seen as the author of the human arts and sciences generally. He is sometimes presented as the father of Deucalion, the hero of the flood story.

The punishment of Prometheus as a consequence of the theft of fire is a popular subject of both ancient and modern culture. Zeus, king of the Olympian gods, sentenced the Titan to eternal torment for his transgression. The immortal was bound to a rock, where each day an eagle, the emblem of Zeus, was sent to eat Prometheus' liver, which would then grow back overnight to be eaten again the next day (in ancient Greece, the liver was often thought to be the seat of human emotions). Prometheus was eventually freed by the hero Heracles.

In another myth, Prometheus establishes the form of animal sacrifice practiced in ancient Greek religion.

Evidence of a cult to Prometheus himself is not widespread. He was a focus of religious activity mainly at Athens, where he was linked to Athena and Hephaestus, other Greek deities of creative skills and technology.

In the Western classical tradition, Prometheus became a figure who represented human striving, particularly the quest for scientific knowledge, and the risk of overreaching or unintended consequences. In particular, he was regarded in the Romantic era as embodying the lone genius whose efforts to improve human existence could also result in tragedy: Mary Shelley, for instance, gave The Modern Prometheus as the subtitle to her novel Frankenstein (1818).

Why is this name?

Because of Prometheus above experience, Prometheus is also the symbol of forethought, diligent and courageous. I hope who use this ghost theme would bring his website wisdom.

Theme General features

Supports inbuilt Ghost features

Members & subscriptions

Comprehensive picture optimization

Most of my pictures are on the CDN of Qiuniu, which has sponsored my blog for several years. I would like to thank you again. Images have always been the main part of network requests. This time, several processings have been done on image loading.

1. The main pictures are lazyload:g

Delayed loading, loading only when sliding to the visible area, Ghost is not convenient to change the Markdown rendering engine, but you can write html directly when editing, and you need to write the code directly in the editor.

<!-- Set the alt value to cover or full-img to control the initial thumbnail of the article and whether it fills the screen -->
<img data-url="https://img.halfrost.com/blog/2015/12/book.jpg" class="lazy cover" alt="cover">

2. WebP picture and resolution adaptation

According to whether the device browser supports WebP and whether it is a mobile phone, using the graphics processing interface of the cloud to load pictures in different formats and resolutions, the size of the pictures is greatly optimized.

/*Use js to determine whether the browser supports webP format images*/
webPCheck: function(feature, callback) {
        var TestImages = {
            demo: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA=="
        };
        var img = new Image();
        img.onload = function() {
            var result = (img.width > 0) && (img.height > 0);
            console.log('支持Webp');
            ImageSmartLoader.isWebPSupported = true;
            ImageSmartLoader.webPLoader();
        };
        img.onerror = function() {
            ImageSmartLoader.isWebPSupported = false;
            ImageSmartLoader.webPLoader();
        };
        img.src = "data:image/webp;base64," + TestImages['demo'];
},

/*Call different by passing parameters lazyload*/
$(".lazy").lazyload({
    advanced_load: true,
    data_attribute: 'url',
    webP_load: true,
    is_scale: true,
    scale_width: 750
});

/*Reassemble the lazyload url, and call different pictures with the cloud interface*/
if (settings.advanced_load == true) {
    updatedUrl += '!';
}
if (settings.is_scale == true) {
    updatedUrl += '/fw/' + settings.scale_width;
}
if (settings.webP_load == true) {
    updatedUrl += '/format/webp';
}

3. Advanced optimization Iconfont - TODO #9

This time I re-use Sketch to sort out the icons of common social networking sites, and add the icons of common domestic websites such as V2EX, Zhihu, Jianshu, etc., making it more convenient to call. Generated by Alibaba Cloud iconfont.cn, and the font font is deployed on Alibaba Cloud CDN. The article still adds the function of automatically marking the logo of the quoted URL.

    /*Add iconfont to the url in the article for easy identification*/
    urlIconlize: function(url) {
        var domain,
            _output;
        var iconFontTag = 'iconfont';
        var iconMap = { /*Index which can add matching rules here*/
            'twitter': iconFontTag + '-twitter',
            'qzone': iconFontTag + '-qzone',
            'weibo': iconFontTag + '-weibo',
            'facebook': iconFontTag + '-facebook',
            'github': iconFontTag + '-github',
            'douban': iconFontTag + '-douban',
            'google': iconFontTag + '-google',
            'dribble': iconFontTag + '-dribble',
            'v2ex': iconFontTag + '-v2ex',
            'zhihu': iconFontTag + '-zhihu',
            'wikipedia': iconFontTag + '-wikipedia',
            'jianshu': iconFontTag + '-jianshu',
            'youku': iconFontTag + '-youku',
            'youtube': iconFontTag + '-youtube'

        }

        for (var name in iconMap) {
            if (typeof iconMap[name] !== 'function') {
                var MapKey = name;
                if (url.indexOf(MapKey) >= 0) {
                    domain = MapKey;
                    _output = iconMap[MapKey];
                }
            }
        }

        return _output;
    },
    addIcons: function() {
        /*Add ico recognition to the blog post address url*/
        $('.single-post-inner  a:not(:has(img))').each(function(i) {
            var _src = $(this).attr('href');
            var tmp = document.createElement('a');
            tmp.href = _src;
            _selfDomain = tmp.hostname;
            General.urlIconlize(_selfDomain);
            console.log(_selfDomain);
            $(this).prepend('<i class="iconfont ' + General.urlIconlize(_selfDomain) + '"></i>');
        });
    },

Theme Customization

This theme is built using Gulp to compile javascript and CSS. CSS is written in SCSS. So if you want to modify the theme color, styles or appearance or anything you want to customize, before doing that you need to setup development environment setup.

Please follow all the steps below one by one to do it.

You need to have installed node js and gulp installed in your local machine.

How to Change Color or CSS

In the theme folder you will find "assets > scss" folder which contains all the theme styles written in SCSS.

To change any style / css you need to modify here. In SCSS folder you will find a folder named "components" which contains a bunch of .scss files which are part of the whole theme's style. and all those files are imported in a specific order in "screen.scss" file located in "scss" folder root outside of "components" folder. please dont edit that file.

To change the Theme color please follow the steps below.

The _color-and-font.scss file looks like below.

/*=====================================================
    Fonts
=====================================================*/
$accent-color: #FDA403; /* theme highlight/primary color */

$theme-light: (
    bg-color: #FFFFFF,
    text-title: #161616,
    text-body: #313131,
    text-light: #929399,
);

$theme-dark: (
    bg-color: #252733,
    text-title: #FFFFFF,
    text-body: #D5D5D5,
    text-light: #929399,
);

/*=====================================================
    Fonts
=====================================================*/
$font-body: 'Noto Sans', sans-serif;
$font-title: 'Playfair Display', serif;

/*=====================================================
    Please don't edit below code if you are not sure
=====================================================*/
:root { 
    @each $name, $value in $theme-dark {
        --#{$name}: #{$value};
    }
}

[data-theme="light"] {
    @each $name, $value in $theme-light {
        --#{$name}: #{$value};
    }
}

After modifying the theme css when you are done and want to install the final theme in your live site, do the following.

Light and dark mode

This theme comes with an uncommon and unique feature, which is toggleable light and dark mode. This option let your user choose whether they prefer dark color or light color. There preference will be saved in their browser locally. Wnenever they visit your site in future, they will see their preffered mode.

By default the theme is in dark mode, which means when user visit the site for first time, they will see the dark mode.

If you want to make the default mode to light then follow the steps below

Open default.hbs file from your theme folder. Add data-theme="light" in the html tag at line number 2. So that the line will become like below.

<html lang="{{@site.locale}}" data-theme="light">

Theme Translation

Ghost introduced Theme translation and blog localization feature in version 1.20.0. We implemented translation support to this theme. Please follow the steps below to translate this theme in your language. Please follow the steps below to correctly translate the theme in your language.

Test result

1. Ghost GScan – score 100 / 100

100% compatible with latest ghost

2. PageSpeed Insights - score Desktop 100 / Mobile 90

Desktop full score:

Mobile 95 score:

3. Pingdom – Performance grade B (score 86) load time 1.38 second

4. Gtmetrix - PageSpeed Score A(97%)

♥️ Thanks

If you like this project, welcome Star!

Stargazers over time

Copyright & License

Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.