如何使用引导程序创建类似盾牌的徽章？

Question

你可能知道盾牌徽章（来自shields.io）。

它们是动态创建的两种类型的svg图像：

1。价值徽章

<img src="https://img.shields.io/badge/value-5555ff">

2。键值徽章

<img src="https://img.shields.io/badge/key-value-5555ff">

---

它们很棒，但是，它们存在 两个问题：

• 它们是一个额外的依赖项（如果 shields.io 关闭，则没有徽章）
• 对于每个徽章，我们都有一个额外的 http 请求（加载时间长）

假设我已经在我的项目中使用 bootstrap（自托管以最大程度地减少依赖关系）。如何使用引导程序动态创建这两种类型的徽章？

（我也使用 PHP，所以 badge($name, $value, $color) 函数会很棒）

Answer 1

引导徽章 HTML

1。引导价值徽章

<span class="badge text-white p-0"><span class="py-1 px-2 rounded" style="background:#5555ff;">value</span></span>

2。引导键值徽章

<span class="badge text-white p-0 m-1"><span class="bg-secondary py-1 px-2 rounded-left">key</span><span class="py-1 px-2 rounded-right" style="background:#007bff;">value</span></span>

在这两种情况下，只需将#5555ff 替换为您的徽章颜色，将value 和key 替换为您的数据。

---

它们是这样的：

---

使用 PHP 的动态引导徽章

这个函数只是简单地返回上面的 HTML 并相应地插入颜色、键和值。

function badge($key, $value, $color="5555ff") {
  if ($key == "")
    return '<span class="badge text-white p-0"><span class="py-1 px-2 rounded" style="background:#' . $color . ';">' . $value . '</span></span>';

  return '<span class="badge text-white p-0"><span class="bg-secondary py-1 px-2 rounded-left">' . $key . '</span><span class="py-1 px-2 rounded-right" style="background:#' . $color . ';">' . $value . '</span></span>';
}

然后您可以通过以下方式调用badge() 函数：

// value-badge with the default color (here: #5555ff)
echo badge("", "value");

// value-badge with a custom color (here: yellow)
echo badge("", "value", "ffff00");

// key-value-badge with the default color
echo badge("key", "value");

// key-value-badge with a custom color (here: green)
echo badge("key", "value", "00ff00");

---

资源

• Bootstrap badges documentation
• 如果您对此感兴趣，我还创建了一个 gist on GitHub。

Answer 2

非常基本的 OOP 方法如下所示：

<?php

class Badge
{

    // colors
    const COLOR_RED = '#f00';
    const COLOR_YELLOW = '#ff0';
    const COLOR_BLUE = '#55f';

    // badges
    const BADGE_PRIMARY = 'bg-primary';
    const BADGE_SECONDARY = 'bg-secondary';
    const BADGE_SUCCESS = 'bg-success';
    // etc

    // icons
    const ICON_FOO = 'icon-foo';
    const ICON_BAR = 'icon-bar';
    const ICON_BAZ = 'icon-baz';


    private $valueColour = Badge::COLOR_BLUE;
    private $badge = Badge::BADGE_SECONDARY;

    private $key = null;
    private $value = [];


    public function reset()
    {
        $this->valueColour = Badge::COLOR_BLUE;
        $this->badge = Badge::BADGE_SECONDARY;
        $this->key = null;
        $this->value = null;

        return $this;
    }

    public function setKey(string $key)
    {
        $this->key = $key;
        return $this;
    }


    public function addValue(string $value, $optionalIcon = null)
    {
        $icon = (!is_null($optionalIcon)) ? "<span class='some-icon-library {$optionalIcon}'></span> " : '';
        $this->value[] = $icon . $value;
        return $this;
    }


    public function setValueColour($colour)
    {
        $this->valueColour = $colour;
        return $this;
    }

    public function build()
    {
        if (is_null($this->value)) {
            echo 'Error: no value';
            return false;
        } else {
            if (!is_array($this->value)) {
                echo 'A value should be an array';
                return false;
            }
        }
        $value = implode(' | ', $this->value);
        if (is_null($this->key) || trim($this->key) == '') {
            echo "<span class='badge text-white p-0'><span class='py-1 px-2 rounded' style='background: {$this->valueColour};'> {$value}</span></span>";
        } else {
            echo "<span class='badge text-white p-0'>
                        <span class='{$this->badge} py-1 px-2 rounded-left'>{$this->key}</span>
                        <span class='py-1 px-2 rounded-right' style='background:{$this->valueColour};'>{$value}</span>
                      </span>";
        }
        return true;
    }
}

所以您可以通过以下方式在代码中使用它：

$badge = new Badge();


// default
$badge
    ->setKey('Basic Key')
    ->addValue('Basic value')
    ->build();

// incorrect
$badge
    ->reset()
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// w/out key
$badge
    ->reset()
    ->addValue('Without key')
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// some sample
$badge
    ->reset()
    ->setKey('Some Key')
    ->addValue('Some value')
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// value(s) with some icons
$badge
    ->reset()
    ->setKey('Another key')
    ->addValue('Yet another value', Badge::ICON_FOO)
    ->addValue('Even more', Badge::ICON_BAR)
    ->addValue('Last but not least')
    ->setValueColour(Badge::COLOR_YELLOW)
    ->build();

注意0：当然它是POC而不是精确的解决方案，所以你需要自己打磨它;）

注意 1：由于最新的 Bootstrap 默认不使用任何图标集，icons 是虚拟的，因此您需要修复它以使用您选择的图标集或仅通过自定义 CSS 样式。

注意 2：我们不使用任何 setter 值，因为我们想使用数组，因此使用 addValue() 来获取管道分隔值。