Fixes and enhancements. [11] #1649

ivan-nginx · 2017-05-03T22:48:35Z

PART 1. Some small fixes & enhancements.

Files modified:

ADD: TOC to Pages. d3b4b15
ADD: Sidebar affix on all pages (global). 4912038
ADD: Sidebar affix on all pages. 50dd71e
FIX: move affix to global renderer (_layout). f2d6a60
FIX: move affix to global renderer (_layout). 618a2b4
FIX: tags & categories H1 left margin. 7c02491

What's this?

Add TOC to pages: How to add menu to custom navigation page ? #1638
Sidebar affix on all pages.
FIX: tags & categories H1 left margin: Tags are offcenter #1654

PART 2. Option for separated meta in post-wordcount.

This will add switch option to replace wordcount information block on new line or not. (#1613)

Files modified:

ADD: separated_meta option. [1] 98c2694
ADD: separated_meta option. [2] d09b5d1
ADD: separated_meta option. [3] 90e1972
ADD: separated_meta option. [4] 957fbbe
FIX: separated_meta option. [4] 5dd2d14

How it looks?

How to use?

In Next _config.yml:

# Post wordcount display settings
# Dependies: https://github.com/willin/hexo-wordcount
post_wordcount:
...
  separated_meta: true

If true wordcount block will placed in new line. Default.
If false wordcount block will added in main meta-block at the right of the time, category, comments blocks, etc.

PART 3. Option for placed new words in new line in TOC.

If header of nav item in TOC is much long, all words will placed in new lines. It's like \r\n.

Files modified:

ADD: wrap nav lines in TOC. [1] 0d6c0f6
ADD: wrap nav lines in TOC. [2] 402eb9c

How it looks?

How to use?

In Next _config.yml:

# Table Of Contents in the Sidebar
toc:
...
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true

PART 4. Lazy load images.

Return and remake lazy load images function for all images types.

Files modified:

FIX: lazyload image [1]. ec70baa
ADD: lazyload image [2]. eac8d8f
Rename lazy-image to lazy-image.js 3ecd980

Need to modify manually for now (28.05.2017):

node_modules/hexo/lib/plugins/tag/img.js

...
    var alt;
+	var lazysrc = '';
    var src;
...
+	// Find lazy load classname
+	if (classes[0] === 'lazy') {
+		lazysrc = src;
+		src = '/images/loading.gif';
+	}

    var attrs = {

+	'data-original': lazysrc,
      src: src,

P.S. Already pulled in hexo, mb will merged.

How it looks?

U can see live demo in this post. Just refresh browser with CTRL+SHIFT+R.

How to use?

To use with full-image (main post image) need to write something like that:

...
tags:
	- Security
	- NGINX
	- SSL
---
{% li //cdn.almostover.ru/images/2016-08/get-wosign-free-ssl-and-configure-with-nginx.png, Получаем бесплатный WoSign сертификат и настраиваем под NGINX %}
...

li (lazy-image) tag will appear instead of fi (full image) tag, with lazy loading on all pages (include homepage too).
Another words:
if u write fi — image will load instantly;
if u write li — image will load lazy (when will need to see this image).

To use with img tag (simply post images) need to write something like that:

{% img lazy //cdn.almostover.ru/images/2016-08/1470759425.png ""Активация аккаунта WoSign" ""WoSign Account Activation""" %}

Image class = lazy. If image haven't class lazy, then image will load as is, in standart loading.

Attention!

This function worked fine, but there is 1 bad thing: SEO.
If image will load lazy, original image source will no index by search engines. Because, default image src will loading gif file and original image will load after javascript working. So, if u use own original images and u need to index this images like google images and other services, this function of lazy loading images will not allow to do this.

PART 5. Star rating support.

Enable 5 stars rating widget to each article.

Files modified:

ADD: star rating widget. [1] cdd36b6
ADD: star rating widget. [2] 8bc43cc
ADD: star rating widget. [3] 3e06c4b
ADD: star rating widget. [4] 32b1837
FIX: star rating widget. [5] a153fbf
ADD: star rating widget. [6] ede932a
ADD: star rating widget. [7] 707c0bc
ADD: star rating widget. [8] 5527001

How it looks?

How to use?

In Next _config.yml:

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating: 
  enable: true
  id:     YOUR_ID_HERE
  color:  fc6423

Update from original.

houndci-bot · 2017-05-31T20:23:56Z

source/js/src/utils.js

@@ -14,7 +14,8 @@ NexT.utils = NexT.$u = {
        var $imageWrapLink = $image.parent('a');

        if ($imageWrapLink.size() < 1) {
-          $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
+	        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');


Line is too long.

houndci-bot · 2017-05-31T20:23:57Z

scripts/tags/lazy-image.js

+  alt = alt.trim();
+  title = title.trim();
+
+  var image = ['<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="/images/loading.gif" data-original="' + src + '" class="full-image"'];


Line is too long.

houndci-bot · 2017-05-31T20:23:57Z

source/js/src/utils.js

@@ -14,7 +14,8 @@ NexT.utils = NexT.$u = {
        var $imageWrapLink = $image.parent('a');

        if ($imageWrapLink.size() < 1) {
-          $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
+	        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');


Line is too long.

houndci-bot · 2017-05-31T20:23:57Z

scripts/tags/lazy-image.js

+  alt = alt.trim();
+  title = title.trim();
+
+  var image = ['<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="/images/loading.gif" data-original="' + src + '" class="full-image"'];


Line is too long.

ivan-nginx added 4 commits May 3, 2017 14:40

Merge pull request #11 from iissnan/master

8480df6

Update from original.

ADD: TOC to Pages.

d3b4b15

ADD: Sidebar affix on all pages.

50dd71e

ADD: Sidebar affix on home page.

7d5abe7

ivan-nginx mentioned this pull request May 5, 2017

How to add menu to custom navigation page ? #1638

Closed

ivan-nginx added 4 commits May 6, 2017 12:25

FIX: tags & categories H1 left margin.

7c02491

ADD: Sidebar affix on all pages (global).

4912038

FIX: move affix to global renderer (_layout).

f2d6a60

FIX: move affix to global renderer (_layout).

618a2b4

ivan-nginx changed the title ~~Small Enhancements.~~ Fixes and enhancements. [11] May 15, 2017

ivan-nginx added 11 commits May 16, 2017 14:27

ADD: separated_meta option. [1]

98c2694

ADD: separated_meta option. [2]

d09b5d1

ADD: separated_meta option. [3]

90e1972

ADD: separated_meta option. [4]

957fbbe

FIX: separated_meta option. [4]

5dd2d14

ADD: wrap nav lines in TOC. [1]

0d6c0f6

ADD: wrap nav lines in TOC. [2]

402eb9c

FIX: lazyload image [1].

ec70baa

ADD: lazyload image [2].

eac8d8f

Rename lazy-image to lazy-image.js

3ecd980

ADD: star rating widget. [1]

cdd36b6

houndci-bot reviewed May 31, 2017

View reviewed changes

ivan-nginx added 7 commits May 31, 2017 23:27

ADD: star rating widget. [2]

8bc43cc

ADD: star rating widget. [3]

3e06c4b

ADD: star rating widget. [4]

32b1837

FIX: star rating widget. [5]

a153fbf

ADD: star rating widget. [6]

ede932a

ADD: star rating widget. [7]

707c0bc

ADD: star rating widget. [8]

5527001

ivan-nginx added Docs Enhancement labels May 31, 2017

ivan-nginx merged commit 8984276 into iissnan:master May 31, 2017

ivan-nginx mentioned this pull request Jul 20, 2017

Question: Add ToC to pages #1181

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes and enhancements. [11] #1649

Fixes and enhancements. [11] #1649

ivan-nginx commented May 3, 2017 •

edited

Loading

houndci-bot May 31, 2017

houndci-bot May 31, 2017

houndci-bot May 31, 2017

houndci-bot May 31, 2017

Fixes and enhancements. [11] #1649

Fixes and enhancements. [11] #1649

Conversation

ivan-nginx commented May 3, 2017 • edited Loading

PART 1. Some small fixes & enhancements.

Files modified:

What's this?

PART 2. Option for separated meta in post-wordcount.

Files modified:

How it looks?

How to use?

PART 3. Option for placed new words in new line in TOC.

Files modified:

How it looks?

How to use?

PART 4. Lazy load images.

Files modified:

Need to modify manually for now (28.05.2017):

How it looks?

How to use?

To use with full-image (main post image) need to write something like that:

To use with img tag (simply post images) need to write something like that:

Attention!

PART 5. Star rating support.

Files modified:

How it looks?

How to use?

houndci-bot May 31, 2017

Choose a reason for hiding this comment

houndci-bot May 31, 2017

Choose a reason for hiding this comment

houndci-bot May 31, 2017

Choose a reason for hiding this comment

houndci-bot May 31, 2017

Choose a reason for hiding this comment

ivan-nginx commented May 3, 2017 •

edited

Loading