给博客添加几个小功能

老何又在折腾博客啦。

作为一名代码盲(大约相当于读了1年书的文盲),还老喜欢折腾博客,好在有强大的搜索引擎,能基本实现自己需要的功能,感谢这些分享的朋友,老何把这两个方法放在一起,算是搬运与整合吧。

添加字数统计与阅读时间提示

这个功能也是在@Fooleap博客上看到的,怕人家烦,不好意思问,囧。

搜索的过程令人抓狂,一时不知道用什么关键词好,思路很简单;先统计文章字数,然后除以350(一般阅读速度),开始找到了统计字数的方法,却不知道怎么计算,对照教程怎么也弄不过来,索性另寻出路。

实现的方法比较特别,字数统计与阅读时间计算是用不同的方法计算字数的,比较搞笑。

1、统计文章字数:

不用函数,直接在需要显示的字数的地方加上以下代码[1]即可:

本文共<?php echo (string)mb_strlen(str_replace(PHP_EOL,'',strip_tags($this->content)),'utf-8'); ?>字

2、估计阅读文字需要的时间[2]。在foot.php文件中插入如下代码

    <script type="text/javascript">  
    $(document).ready(function() {   
    var read_time=$('#content').text().length; //获取文章内容并计算字数   
    var read_time=read_time/400; //计算阅读时间   
    var read_time=Math.round(read_time); //四舍五入   
    if(read_time>1){   
    $('#read-time').html('预计阅读时间:'+read_time+'分钟');   
    }   
    else{   
    $('#read-time').html('预计阅读时间:1分钟');   
    }   
    })   
    </script>

然后在需要的地方调用<span id="read-time"></span>即可。这里需要注意的的是我特意给文章加了一个容器div id#content

效果见本文,不知道这两者统计出来的字数是不是一样的,有没有更好的方法实现?

参考资料

已有 22 条评论

  1. 老杨

    这是折腾的乐趣,哈哈。

    老杨 ·  Windows 7  · Google Chrome · 回复
    1. Mr.He

      小功能,大乐趣。

      Mr.He ·  Windows 10  · Google Chrome · 回复
  2. 小萝博客

    不折腾不舒服

    小萝博客 ·  Windows 10  · Google Chrome · 回复
    1. Mr.He

      能折腾,尽量折腾

      Mr.He ·  Windows 10  · Google Chrome · 回复
  3. fooleap

    老何你需要学习一点 PHP,就用不着分开算了。
    PS:不烦,倒是博客程序不同,我也不清楚 Typecho 的应该怎么写。

    fooleap ·  Windows 7  · Google Chrome · 回复
    1. Mr.He

      年龄大了,接收新知识能力退步不少

      Mr.He ·  Android 7.0 · Google Chrome · 回复
  4. 灰狼

    但是不会记录cookies

    灰狼 ·  Windows 7  · Google Chrome · 回复
    1. Mr.He

      这个评论框是套用过来的,不记录cookies.也不会弄。

      Mr.He ·  Android 7.0 · Google Chrome · 回复
  5. devoted

    写的很好,之前在hexo博客看到过,这次在博主网站看到真是受教了。

    devoted ·  Mac OS X 10.12.5 · Google Chrome · 回复
    1. Mr.He

      看起来逼格高一点,其实也没什么卵用

      Mr.He ·  Windows 10  · Google Chrome · 回复
  6. 山野愚人居

    两个功能可以一起用php搞定啊,根本不需要js,php的两个函数,一个统计字数,一个取整除法。

    山野愚人居 ·  Android 7.1.1 · Google Chrome · 回复
    1. Mr.He

      尝试过,失败了~~

      Mr.He ·  Android 7.0 · Google Chrome · 回复
  7. 明月登楼学习笔记

    呵呵,不错,多谢分享!有空可以研究一下下!

    明月登楼学习笔记 ·  Windows 7 · Firefox · 回复
    1. Mr.He

      这个小功能挺有个性的。

      Mr.He ·  Windows 10  · Google Chrome · 回复
  8. 皮皮

    这些功能都用上了,没想到Typecho实现此功能比起Wodpress轻松更多,谢谢分享。

    皮皮 ·  Windows 7  · Google Chrome · 回复
    1. Mr.He

      几行代码完成,确实很简单。有些wp主题集成了此项功能。

      Mr.He ·  Windows 10  · Google Chrome · 回复
      1. 皮皮

        不过我在自己的网站试过无论多少字的文章都只显示一分钟,看来要花点时间研究了。

        皮皮 ·  Windows 7  · Google Chrome · 回复
        1. Mr.He

          你把代码里的#content改成.post-content就能正常显示了。

          Mr.He ·  Windows 10  · Google Chrome · 回复
          1. 皮皮

            真的可以了,没注意到主题的参数。感谢!

            皮皮 ·  Windows 7  · Google Chrome · 回复
            1. Mr.He

              不客气,欢迎常来。

              Mr.He ·  Windows 10  · Google Chrome · 回复
  9. 宇宙湾

    我的博客一直用的是 hexo next 主题,太折腾,过于花里胡哨了,最近也计划返璞归真 哈哈

    宇宙湾 ·  Mac OS X · Safari · 回复
    1. Mr.He

      最简单的就是最耐看的。

      Mr.He ·  Windows 10  · Google Chrome · 回复

发表新评论

关于博主
博主本姓何,育人廿五载。
我住长江边,君自四海来。
文字不修饰,实是无文采。
飞絮落叶雪,只待李花开。
博客分类
随机推荐
最近评论
站点统计
  • 文章总数:196篇
  • 评论总数:5497条
  • 网站运行:3285天