Code Monkey home page Code Monkey logo

page-counter's Introduction

Page Counter

基于 Serverless 开发的的极简网页计数器,支持基于 HexoJekyllOctopressReactJSVueJS 等框架开发的博客、网站、中后台等任何应用

特性

  • 无后端快速部署
  • 源码精简,大小仅 5kb
  • 支持 npmCDN 引入
  • 数据安全、自持有、永久存储
  • 支持 LeancloudBomb 平台
  • 支持腾讯云云开发(敬请期待)

浏览器支持

Chrome Firefox Safari Opera Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ×

快速使用

Leancloud 平台

用法一:CDN 引入

到Leancloud控制台查看应用相关信息,将以下代码插入 <head> 标签中:

<script>
  window.PAGE_COUNTER_CONFIG = {
    serverless: 'leancloud',
    leancloud: {
      history: 0, // 历史访客数量,可不填,默认是0
      table: '存放数据的表格',
      appId: 'leancloud应用的appId',
      appKey: 'leancloud应用的appKey'
    }
  }
</script>

引入 CDN

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>
<script src="//unpkg.com/[email protected]/dist/page-counter.min.js"></script>

总浏览量和当前页面浏览量会自动放入ID为 page-counter-total-timespage-counter-single-times 的DOM元素中。

用法二:npm 引入

安装:

npm install --save page-counter leancloud-storage

使用:

import('leancloud-storage')
  .then(res => {
    // 将 Bomb 对象挂载在 window 上
    window.AV = res.default
    // 设置应用信息
    window.PAGE_COUNTER_CONFIG = {
      serverless: 'leancloud',
      leancloud: {
        history: 0, // 历史访客数量,可不填,默认是0
        table: '存放数据的表格',
        appId: 'leancloud应用的appId',
        appKey: 'leancloud应用的appKey'
      }
    }

    return import('page-counter')
  })
  .then(res => {
    const PageCounter = res.default
    PageCounter.setData() // 发送当前页面数据
    PageCounter.countTotal() // 将总浏览量放入 ID 为 page-counter-total-times 的DOM元素中
    PageCounter.countSingle() // 将当前页面浏览量放入 ID 为 page-counter-single-times 的DOM元素中
  })

Bomb 平台

用法一:CDN 引入

到Bomb控制台查看应用相关信息,将以下代码插入 <head> 标签中:

<script>
  window.PAGE_COUNTER_CONFIG = {
    serverless: 'bomb',
    bomb: {
      history: 0, // 历史访客数量,可不填,默认是0
      table: '存放数据的表格',
      appId: 'Bomb 应用的 Application ID',
      appKey: 'Bomb 应用的 REST API Key'
    }
  }
</script>

引入 CDN

<script src="//unpkg.com/[email protected]/dist/page-counter.bomb-1.6.7.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/page-counter.min.js"></script>

总浏览量和当前页面浏览量会自动放入ID为 page-counter-total-timespage-counter-single-times 的DOM元素中。

用法二:npm 引入

安装:

npm install --save page-counter hydrogen-js-sdk

使用:

import('hydrogen-js-sdk')
  .then(res => {
    // 将 Bomb 对象挂载在 window 上
    window.Bomb = res.default
    // 设置应用信息
    window.PAGE_COUNTER_CONFIG = {
      serverless: 'bomb',
      bomb: {
        history: 0, // 历史访客数量,可不填,默认是0
        table: '存放数据的表格',
        appId: 'Bomb 应用的 Application ID',
        appKey: 'Bomb 应用的 REST API Key'
      }
    }

    return import('page-counter')
  })
  .then(res => {
    const PageCounter = res.default
    PageCounter.setData() // 发送当前页面数据
    PageCounter.countTotal() // 将总浏览量放入 ID 为 page-counter-total-times 的DOM元素中
    PageCounter.countSingle() // 将当前页面浏览量放入 ID 为 page-counter-single-times 的DOM元素中
  })

待做

  • 支持更多的 Serverless 平台
  • 快速本地数据备份

更多

通过以下方式提供新的想法来进一步讨论,也可以直接发起 PR 参与到项目中:

page-counter's People

Contributors

dongyuanxin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

page-counter's Issues

关于自定义域名

LC初始化希望能加入serverURLs项?也就是自定义域名?

另,谢谢!做得不错,干的漂亮!

关于隐私性

直接暴露声明 appIdappKey 是否可以被别人使用造成数据混乱

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.