npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuepress-plugin-typed2

v1.0.5

Published

VuePress2.0 plugin for typed

Downloads

1

Readme

vuePress 打字效果插件

快速开始

使用npm安装

npm i vuepress-plugin-typed2

开始使用和配置

基础使用方法

// config.js
 plugins: [
    ['typed',{
      // 对应的标签选择器
      selector: '.banner-content .hero .description',
      // 打字内容
      strings: ["苦难磨炼一些人,也毁灭另一些人。——富勒", "一个不注意小事情的人,永远不会成就大事业。——卡耐基", "内外相应,言行相称。——韩非", "阅读一切好书如同和过去最杰出的人谈话。——笛卡儿"],
      typeSpeed: 80, // 打字速度
      backSpeed: 50, // 回退速度
      showCursor: false, //关闭光标
      }
    ],
  ],

更多配置(来自 typed 说明)

配置使用了 typed 的全部配置 typed

1.战术暂停

您可以通过包含转义字符在字符串中间暂停给定的时间。

{
    strings: ['First ^1000 sentence.', 'Second sentence.']
}

2.全部Api

{
  /**
   * @property {array} 显示文字的内容 一组
   * @property {string} 显示文字的内容 单个
   */
  strings: [
    'These are the default values...',
    'You know what you should do?',
    'Use your own!',
    'Have a great day!'
  ],
  stringsElement: null,

  /**
   * @property {number} 打字输入的速度(ms)
   */
  typeSpeed: 0,

  /**
   * @property {number} 延迟开始打字(ms)
   */
  startDelay: 0,

  /**
   * @property {number} 退格删除的速度(ms)
   */
  backSpeed: 0,

  /**
   * @property {boolean} 聪明退格 退格是会识别文字是否相同 相同时不退格相同内容
   */
  smartBackspace: true,

  /**
   * @property {boolean} 混淆
   */
  shuffle: false,

  /**
   * @property {number} 延迟开始退格(ms)
   */
  backDelay: 700,

  /**
   * @property {boolean} 淡出效果
   * @property {string} 淡出的animation类型
   * @property {boolean} 淡出的延迟
   */
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,

  /**
   * @property {boolean} 循环播放
   * @property {number} 循环次数 Infinity为无限
   */
  loop: false,
  loopCount: Infinity,

  /**
   * @property {boolean} 显示光标
   * @property {string} 光标内容
   * @property {boolean} 自动插入css
   */
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

  /**
   * @property {string} 打字属性
   * Ex: 输入占位符、值或仅 HTML 文本
   */
  attr: null,

  /**
   * @property {boolean} 赋值输入聚焦事件
   * Ex:如果 el 是文本输入,则绑定到焦点和模糊
   */
  bindInputFocusEvents: false,

  /**
   * @property {string} 当前类型 'html' 或 'null' 文本
   */
  contentType: 'html',

  /**
   * 开始打字的回调
   * @param {Typed} self
   */
  onBegin: (self) => {},

  /**
   * 全部打字内容完成的回调
   * @param {Typed} self
   */
  onComplete: (self) => {},

  /**
   * 在输入每个字符串之前的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  preStringTyped: (arrayPos, self) => {},

  /**
   * 在输入每个字符串之后的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStringTyped: (arrayPos, self) => {},

  /**
   * 在循环期间,在输入最后一个字符串之后的回调
   * @param {Typed} self
   */
  onLastStringBackspaced: (self) => {},

  /**
   * 暂停时的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  ontypedPaused: (arrayPos, self) => {},

  /**
   * 停止后又开始的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  ontypedResumed: (arrayPos, self) => {},

  /**
   * 重置时的回调
   * @param {Typed} self
   */
  onReset: (self) => {},

  /**
   * 停止时的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStop: (arrayPos, self) => {},

  /**
   * 开始时的回调
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStart: (arrayPos, self) => {},

  /**
   * 移除时的回调
   * @param {Typed} self
   */
  onDestroy: (self) => {}
}

最后

  • 刚开始想做一个打字效果文字时style调整了一段时间感觉并不理想
  • 改用javascript使用库typed.js实现起来非常容易,但需要配置vuepress的 enhanceApp.js
  • 但是目前没有 vuepress 的打字效果插件于是... 有了此插件