Php 如何使用引导创建盾状徽章？

你可能知道盾牌徽章

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

1.价值徽章

2.关键价值徽章

---

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

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

假设我已经在我的项目中使用了bootstrap（自托管以最小化依赖性）。如何使用引导动态创建这两种类型的徽章

（我也使用PHP，所以一个

badge（$name，$value，$color）

函数会很神奇）

Bootstrap-Badges-HTML 1.引导值标志

值

2.引导键值徽章

keyvalue

在这两种情况下，只需将

#5555ff

替换为徽章的颜色，

值

和

键

替换为数据即可

---

这就是它们的样子：

---

使用PHP动态引导程序徽章 此函数只返回上面的HTML，并相应地插入颜色、键和值

功能徽章（$key、$value、$color=“5555ff”）{
如果（$key==“”）
返回“.$value.”；
返回“.$key.”.$value.”；
}

然后可以通过以下方式调用

badge（）

函数：

//带有默认颜色的值标记（此处：#5555ff）
回音徽章（“价值”）；
//定制颜色的价值徽章（此处：黄色）
回声徽章（“，”值“，”ffff00”）；
//具有默认颜色的键值标记
回声徽章（“钥匙”、“价值”）；
//自定义颜色的键值徽章（此处：绿色）
回声徽章（“钥匙”、“价值”、“00ff00”）；

---

资源

• 如果你对此感兴趣，我还创建了一个

引导徽章HTML 1.引导值标志

值

2.引导键值徽章

keyvalue

在这两种情况下，只需将

#5555ff

替换为徽章的颜色，

值

和

键

替换为数据即可

---

这就是它们的样子：

---

使用PHP动态引导程序徽章 此函数只返回上面的HTML，并相应地插入颜色、键和值

功能徽章（$key、$value、$color=“5555ff”）{
如果（$key==“”）
返回“.$value.”；
返回“.$key.”.$value.”；
}

然后可以通过以下方式调用

badge（）

函数：

//带有默认颜色的值标记（此处：#5555ff）
回音徽章（“价值”）；
//定制颜色的价值徽章（此处：黄色）
回声徽章（“，”值“，”ffff00”）；
//具有默认颜色的键值标记
回声徽章（“钥匙”、“价值”）；
//自定义颜色的键值徽章（此处：绿色）
回声徽章（“钥匙”、“价值”、“00ff00”）；

---

资源

• 如果你对此感兴趣，我还创建了一个

---

最基本的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;
    }
}

注0：当然这是POC而不是精确的解决方案，因此您需要自己对其进行抛光；）
注1：由于最新的引导默认情况下不使用任何图标集，所以图标是虚拟的，所以您需要将其修复为与所选的图标集一起使用，或者仅通过自定义CSS样式来使用

---

注2：我们不使用任何值设置器，因为我们希望使用数组，因此使用

addValue（）

获取管道分隔值。
最基本的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;
    }
}

注0：当然这是POC而不是精确的解决方案，因此您需要自己对其进行抛光；）
注1：由于最新的引导默认情况下不使用任何图标集，所以图标是虚拟的，所以您需要将其修复为与所选的图标集一起使用，或者仅通过自定义CSS样式来使用

---

注2：我们不使用任何值设置器，因为我们希望使用数组，因此使用

addValue（）

来获得管道分隔的值。
很酷的代码片段，但为什么不使用OOP添加更多功能，如图标、不同（可选）颜色等？（根据shields.io风格）@biesior好主意！我把它保持在最低限度，因为这是我所需要的。。。请随意用您的代码回答这个问题-我会接受最好的答案，如果这是您的，我会接受您的^^^很酷的代码片段，但您为什么不使用OOP添加更多功能，如图标、不同（可选）颜色等？（根据shields.io风格）@biesior好主意！我把它保持在最低限度，因为这是我所需要的。。。请随意用你的代码回答这个问题-我会接受最好的答案，如果是你的，我会接受你的^^