给网站加一条会动的人群横幅

<link rel="stylesheet" href="/little-people/little-people.css">
<div id="little-people"></div>
<script src="/little-people/little-people.js"></script>
<script>
  LittlePeople.init("#little-people", {
    sprite: "/little-people/sprite-programmer.png",
    rows: 5,
    cols: 14,
    height: 180,
    people: 18,
    maxPeople: 28,
    speedMultiplier: 1,
    flipSprite: true,
    labels: ["Java", "运维", "前端", "后端", "测试", "小王", "小李"],
    labelChance: 0.78,
    visibleSourceRatio: 0.55,
    bubbleChance: 0.35,
    messages: [
      "欢迎回来",
      "这个组件可以放进任意页面",
      { text: "点击跳转到官网", url: "https://example.com" }
    ]
  });
</script>

source/little-people/
  little-people.css
  little-people.js
  sprite-programmer.png
  sprite-openpeeps.png
  sprite-animal.png
  NOTICE-openpeeps.txt

在主题 layout、partial 或页面模板中插入容器，
再引用 CSS、JS 并调用 LittlePeople.init。

theme/static/little-people/
  little-people.css
  little-people.js
  sprite-programmer.png
  sprite-openpeeps.png
  sprite-animal.png
  NOTICE-openpeeps.txt

在主题模板中引用静态资源，
再调用 LittlePeople.init。

LittlePeople.init("#little-people", {
  sprite: "/little-people/sprite-programmer.png",
  rows: 5,
  cols: 14,

  // 气泡出现概率，0 表示不显示，1 表示尽量显示
  bubbleChance: 0.35,

  // 字符串只显示文字；对象可以设置点击跳转
  messages: [
    "欢迎回来",
    "今天也要摸鱼吗",
    { text: "点击跳转到官网", url: "https://example.com" },
    { text: "查看文档", url: "https://example.com/docs" }
  ]
});

LittlePeople.init("#little-people", {
  sprite: "/little-people/sprite-openpeeps.png",
  rows: 5,
  cols: 14,
  height: 190,
  people: 16,
  maxPeople: 26,
  mobileMaxPeople: 8,
  speedMultiplier: 1.2,
  visibleSourceRatio: 0.82,
  flipSprite: true
});

LittlePeople.init("#little-people", {
  sprite: "/little-people/sprite-programmer.png",
  rows: 5,
  cols: 14,

  // 只建议程序员版开启胸牌
  labels: ["Java", "运维", "前端", "后端", "测试", "小王", "小李"],
  labelChance: 0.78
});