Skip to content

面向开发者的沉浸式阅读插件 Immersive reading plugin for developers

Notifications You must be signed in to change notification settings

HuziG/focusingjs

Repository files navigation

English Doc

项目介绍

FocusingJs 是一款可植入的沉浸式阅读插件,易用,开源

兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11

简单两行代码,即可实现简约的阅读器功能

这是图片

支持 CodePen 体验

CodePen

安装和使用

npm

安装

npm i focusingjs --save

使用

<div id="#article"> 文章内容 ...... </div> 

// 入口文件引入 css 样式文件
import 'focusingjs/dist/focusingjs.min.css'

import FocusingJs from 'focusingjs'

const fs = new FocusingJs('#article')

fs.open()

cdn

<div id="#article"> 文章内容 ...... </div>

<link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/gh/HuziG/focusingjs/cdn/dist/focusingjs.min.css"
/>

<script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/gh/HuziG/focusingjs/cdn/dist/focusingjs.min.js"
></script>

<script type="text/javascript">
  const fs = new FocusingJs('#article')

  fs.open()
</script>  

⚠️ 在 ssr 渲染模式下使用,react 框架看这里

插件中涉及到了浏览器的 window 属性 , 在 react 的生命周期中 render() 阶段负责创建虚拟 dom 等等操作, render 及之前的阶段,并没有将组件渲染为实际的dom节点,所以无法获取浏览器 window 对象,需要改善写法,如下

// react class
componentDidMount()
{
  const fs = new FocusingJs('#id')
  fs.open()
}

// react hook
useEffect(() => {
  const fs = new FocusingJs('#id')
  fs.open()
}, [])