如何用鞋带创建类似盾牌的徽章？

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请求(很长的加载时间)

假设我已经在我的项目中使用引导(自我托管以最小化依赖)。如何使用引导程序动态创建这两种类型的徽章？

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

Answer 1

非常基本的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:由于最新的引导程序默认不使用任何图标集，所以图标是虚拟的，所以您需要修复它，以便与您选择的图标集一起使用，或者仅仅通过自定义CSS样式。

注2:我们不对值使用任何setter，因为我们希望使用数组，因此使用addValue()获取管道分隔的值。

Answer 2

引导标记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");

资源

• 自举徽章文档
• 如果您对此感兴趣，我还创建了一个GitHub上的要点。