Add readable time for theme inside

Preview

• Normal style
  
• With thumbnail
  

General Solution

update: Take images into account.

1. Get the element which contains the paragraphs to be count.
2. Use innerText.length to count.
3. Get the parent container.
4. Insert new elements to the end of the container.

Jump in!

notes: the present guide is only for the latest version of inside 2.7.0 beta0.

1. create a new js file, and copy the following codes.

Defult by 400 words or 12 images per min.
Customize in line 4.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var $container = $("[class='φgj φo']");
var readTime = document.querySelector("article").innerText.length;
var imgAmmount = $("img").length;
var readTime = Math.round(readTime / 400 + imgAmmount*5/60);
var outcome ;
if(readTime > 1){
    outcome = 'Readable Time ' + readTime + 'min';
    //or Chinese tooltip
    //outcome = '可阅读时间 ' + readTime + '分钟';
}
else{
    outcome = 'Readable Time 1min';
}
var $add = $('<div class="φgk"><i class="fa fa-clock-o"></i> ' + outcome + '</div>');
$container.append($add);

2. put this file to your source folder

My demon uses the following path:
\source\custom\wordcount.js

3. Edit the _config.yml in hexo root folder to skip render js file.

1
2
3

skip_render: 
  - 'custom/**'
  - '**.js'

4. Edit the _config.yml in theme folder to introduce.

\themes\inside\_config.yml

1
2
3
4
5

plugins:
  - position: post
    template: |  
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <script type="text/javascript" src="custom/wordcount.js"></script>

notes: If you already introduced font-awesome,following code is removeable.

<link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

5. Save all changes and execute following commands in hexo root folder.

1
2
3

hexo clean
hexo g
hexo s

Preview changes in your browser. If work out well then execute:

1

hexo d

6. Enjoy! XD