周末折腾了个阅读模式
  Skill  284℃  3条  435字数  预计阅读时间2分钟

周末折腾了个阅读模式

  Skill  284℃  3条  435字数  预计阅读时间2分钟

周末在家没事做,在友链里疯狂的看其他各位大佬的博客。

发现了个“阅读模式”的功能,其实阅读模式说白了就是突出文章内容,让阅读者能更专心于阅读文章内容。

自己扒代码看了下,实现原理有两种方式:

一种是在打开页面时,其实已经加载好了阅读模式的模块,当你点击阅读模式时就显示。

另一种是动态改变内容及其余部分的样式,在点击阅读模式时改变页面样式达到阅读模式效果。

显然第二种方式不太适合我,需要调整及修改的地方太多。

找到实现原理后就很简单了,分两步:

1.在原有文章模板基础上新增一个获取的内容的块并隐藏。

2.文章模板新增“阅读模式”图标并实现点击显示。

其中文章标题可以 <?php $this->title() ?> 调用,

内容可用 <?php parseContent($this); ?> 调用,两句代码搞定。

之后就是对“阅读模式”的内容块进行 CSS 样式的调整。

接着对“阅读模式”按钮进行点击事件 JS 编写,我是用了 XXX.style.display="block" 来实现的。

同时在“阅读模式”下还需要一个“关闭”按钮,同理, XXX.style.display="none" 及可实现。

当然为了美化,我用 CSS 写了个动画效果,在打开“阅读模式”时会显示从右至左的动画效果。

具体效果可如上图所示,在点击本文标题后的书本图标即可打开阅读模式,当然,该模式也已经适配手机端及夜间模式。

好啦,又折腾了个看似无用的新功能,噗嗤,哈哈。

如果本文对您有用的话,欢迎在下方留言评论哦~

(๑´ㅂ`๑) 已有5人微信打赏,心情+5...

周末折腾了个阅读模式

ydms1.jpg

周末在家没事做,在友链里疯狂的看其他各位大佬的博客。

发现了个“阅读模式”的功能,其实阅读模式说白了就是突出文章内容,让阅读者能更专心于阅读文章内容。

自己扒代码看了下,实现原理有两种方式:

一种是在打开页面时,其实已经加载好了阅读模式的模块,当你点击阅读模式时就显示。

另一种是动态改变内容及其余部分的样式,在点击阅读模式时改变页面样式达到阅读模式效果。

显然第二种方式不太适合我,需要调整及修改的地方太多。

找到实现原理后就很简单了,分两步:

1.在原有文章模板基础上新增一个获取的内容的块并隐藏。

2.文章模板新增“阅读模式”图标并实现点击显示。

其中文章标题可以 <?php $this->title() ?> 调用,

内容可用 <?php parseContent($this); ?> 调用,两句代码搞定。

之后就是对“阅读模式”的内容块进行 CSS 样式的调整。

接着对“阅读模式”按钮进行点击事件 JS 编写,我是用了 XXX.style.display="block" 来实现的。

同时在“阅读模式”下还需要一个“关闭”按钮,同理, XXX.style.display="none" 及可实现。

当然为了美化,我用 CSS 写了个动画效果,在打开“阅读模式”时会显示从右至左的动画效果。

ydms.jpg

具体效果可如上图所示,在点击本文标题后的书本图标即可打开阅读模式,当然,该模式也已经适配手机端及夜间模式。

好啦,又折腾了个看似无用的新功能,噗嗤,哈哈。

发表你的评论
选择表情
  1. tnjc
    B罩

    我觉得可以做一个插件 aru_7.png

    Chrome 广东省佛山市 电信
    1. Jdeal
      主人
      @tnjc

      这个功能太小众了,做插件都没人用,哈哈 aru_16.png

      Chrome 江苏省无锡市 移动
  2. 老狮
    B罩

    哇!这个阅读模式好简洁好漂亮啊,适合小说站

    搜狗浏览器 上海市 电信